From 3ecdf54d5c25fe3a8610f6889ff856cd675b790b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= Date: Mon, 20 May 2024 21:22:20 +0200 Subject: [PATCH] update dashboard metrics and move away from round corners --- .../layout-sticky-below-header.tsx | 2 +- .../[organizationSlug]/[projectId]/page.tsx | 3 - .../profile-activity/profile-activity.tsx | 9 ++- .../app/(public)/share/overview/[id]/page.tsx | 67 ++++++++++--------- .../overview/live-counter/live-counter.tsx | 60 +++++++---------- .../overview/overview-live-histogram.tsx | 30 ++++----- .../components/overview/overview-metrics.tsx | 56 +++++++++------- .../components/overview/useOverviewOptions.ts | 10 --- .../components/report/chart/MetricCard.tsx | 11 ++- .../report/chart/ReportHistogramChart.tsx | 6 +- apps/dashboard/src/styles/globals.css | 4 +- apps/public/src/app/hero.tsx | 2 +- apps/public/src/app/page.tsx | 2 +- 13 files changed, 125 insertions(+), 137 deletions(-) diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx index 7b631852..428d7360 100644 --- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx +++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header.tsx @@ -12,7 +12,7 @@ export function StickyBelowHeader({ return (
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx index c8b616bf..6efb158d 100644 --- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx +++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx @@ -41,9 +41,6 @@ export default function Page({
-
- -
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx index 4ca62a83..fd24638d 100644 --- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx +++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-activity/profile-activity.tsx @@ -14,6 +14,7 @@ import { eachDayOfInterval, endOfMonth, format, + formatISO, startOfMonth, subMonths, } from 'date-fns'; @@ -60,7 +61,9 @@ const ProfileActivity = ({ data }: Props) => { end: endOfMonth(subMonths(startDate, 1)), }).map((date) => { const hit = data.find((item) => - item.date.includes(date.toISOString().split('T')[0]) + item.date.includes( + formatISO(date, { representation: 'date' }) + ) ); return (
{ end: endDate, }).map((date) => { const hit = data.find((item) => - item.date.includes(date.toISOString().split('T')[0]) + item.date.includes( + formatISO(date, { representation: 'date' }) + ) ); return (
-
-
+
+ {searchParams.header !== '0' && ( +
- {organization?.name} -

- {share.project?.name} -

+ {organization?.name} +

{share.project?.name}

- - + + POWERED BY + openpanel.dev
-
- -
-
- - {/* */} -
-
- -
+ )} +
+ +
+
+ + {/* */}
- - -
-
- +
+
- - - - - -
+ + +
+ + + + + +
diff --git a/apps/dashboard/src/components/overview/live-counter/live-counter.tsx b/apps/dashboard/src/components/overview/live-counter/live-counter.tsx index b909c971..362294fe 100644 --- a/apps/dashboard/src/components/overview/live-counter/live-counter.tsx +++ b/apps/dashboard/src/components/overview/live-counter/live-counter.tsx @@ -12,8 +12,6 @@ import { useQueryClient } from '@tanstack/react-query'; import dynamic from 'next/dynamic'; import { toast } from 'sonner'; -import { useOverviewOptions } from '../useOverviewOptions'; - export interface LiveCounterProps { data: number; projectId: string; @@ -27,7 +25,6 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), { const FIFTEEN_SECONDS = 1000 * 15; export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) { - const { setLiveHistogram } = useOverviewOptions(); const client = useQueryClient(); const [counter, setCounter] = useState(data); const lastRefresh = useRef(Date.now()); @@ -47,38 +44,33 @@ export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) { return ( - - +
+
+ ({ + type: 'spring', + duration: index + 0.3, + + damping: 10, + stiffness: 200, + })} + animateToNumber={counter} + locale="en" + />

{counter} unique visitors last 5 minutes

diff --git a/apps/dashboard/src/components/overview/overview-live-histogram.tsx b/apps/dashboard/src/components/overview/overview-live-histogram.tsx index 9f5db228..7bd60951 100644 --- a/apps/dashboard/src/components/overview/overview-live-histogram.tsx +++ b/apps/dashboard/src/components/overview/overview-live-histogram.tsx @@ -5,9 +5,7 @@ import { cn } from '@/utils/cn'; import type { IChartInput } from '@openpanel/validation'; -import AnimateHeight from '../animate-height'; import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'; -import { useOverviewOptions } from './useOverviewOptions'; interface OverviewLiveHistogramProps { projectId: string; @@ -16,7 +14,6 @@ interface OverviewLiveHistogramProps { export function OverviewLiveHistogram({ projectId, }: OverviewLiveHistogramProps) { - const { liveHistogram } = useOverviewOptions(); const report: IChartInput = { projectId, events: [ @@ -80,11 +77,11 @@ export function OverviewLiveHistogram({ ]; return ( - + {staticArray.map((percent, i) => (
))} @@ -97,14 +94,14 @@ export function OverviewLiveHistogram({ } return ( - + {minutes.map((minute) => { return (
-
-
- {count} unique vistors last 30 minutes -
-
- {children} -
+
+
+ {count} unique vistors last 30 minutes
- +
+ {children} +
+
); } diff --git a/apps/dashboard/src/components/overview/overview-metrics.tsx b/apps/dashboard/src/components/overview/overview-metrics.tsx index 9a8dc1a7..c7cdf1c9 100644 --- a/apps/dashboard/src/components/overview/overview-metrics.tsx +++ b/apps/dashboard/src/components/overview/overview-metrics.tsx @@ -1,14 +1,14 @@ 'use client'; -import { WidgetHead } from '@/components/overview/overview-widget'; import { useOverviewOptions } from '@/components/overview/useOverviewOptions'; import { ChartSwitch } from '@/components/report/chart'; -import { Widget, WidgetBody } from '@/components/widget'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { cn } from '@/utils/cn'; import type { IChartInput } from '@openpanel/validation'; +import { OverviewLiveHistogram } from './overview-live-histogram'; + interface OverviewMetricsProps { projectId: string; } @@ -191,30 +191,40 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) { const selectedMetric = reports[metric]!; return ( -
-
- {reports.map((report, index) => ( - + ))} +
{ - setMetric(index); - }} > - - {/* add active border */} - - ))} + +
+
+
+ +
- -
+ ); } diff --git a/apps/dashboard/src/components/overview/useOverviewOptions.ts b/apps/dashboard/src/components/overview/useOverviewOptions.ts index c0293243..9d19e590 100644 --- a/apps/dashboard/src/components/overview/useOverviewOptions.ts +++ b/apps/dashboard/src/components/overview/useOverviewOptions.ts @@ -46,12 +46,6 @@ export function useOverviewOptions() { parseAsInteger.withDefault(0).withOptions(nuqsOptions) ); - // Toggles - const [liveHistogram, setLiveHistogram] = useQueryState( - 'live', - parseAsBoolean.withDefault(true).withOptions(nuqsOptions) - ); - return { previous, setPrevious, @@ -72,9 +66,5 @@ export function useOverviewOptions() { // Computed interval, - - // Toggles - liveHistogram, - setLiveHistogram, }; } diff --git a/apps/dashboard/src/components/report/chart/MetricCard.tsx b/apps/dashboard/src/components/report/chart/MetricCard.tsx index d499bc05..db01305f 100644 --- a/apps/dashboard/src/components/report/chart/MetricCard.tsx +++ b/apps/dashboard/src/components/report/chart/MetricCard.tsx @@ -71,9 +71,9 @@ export function MetricCard({ {({ width, height }) => (
-
+
{serie.event.id} - + {serie.name || serie.event.displayName || serie.event.name}
diff --git a/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx b/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx index 8bc903e1..b010a5cc 100644 --- a/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx +++ b/apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx @@ -25,7 +25,7 @@ function BarHover({ x, y, width, height, top, left, right, bottom }: any) { return ( @@ -79,7 +79,7 @@ export function ReportHistogramChart({ dataKey={`${serie.id}:prev:count`} fill={getChartColor(serie.index)} fillOpacity={0.2} - radius={8} + radius={3} /> )} ); diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css index 25819576..629f9ed9 100644 --- a/apps/dashboard/src/styles/globals.css +++ b/apps/dashboard/src/styles/globals.css @@ -144,9 +144,7 @@ } .card { - box-shadow: 0 1px 2px 0.5px rgba(0, 0, 0, 0.08); - border: 0 !important; - @apply rounded-xl bg-background; + @apply border border-border bg-background; } } diff --git a/apps/public/src/app/hero.tsx b/apps/public/src/app/hero.tsx index aa247dea..0c49d216 100644 --- a/apps/public/src/app/hero.tsx +++ b/apps/public/src/app/hero.tsx @@ -60,7 +60,7 @@ export async function Hero() {