From c03ee3f617386fc9674ddbcf6cf5f628730109b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= Date: Sun, 23 Mar 2025 21:46:03 +0100 Subject: [PATCH] fix(dashboard): show hours when needed and remove bugs for filters --- .../[organizationSlug]/[projectId]/page.tsx | 2 ++ .../overview/overview-hydrate-options.tsx | 22 +++++++++++++++++++ .../components/overview/overview-metrics.tsx | 10 +++++---- .../components/overview/useOverviewOptions.ts | 10 +-------- .../src/hooks/useEventQueryFilters.ts | 12 +++++++--- 5 files changed, 40 insertions(+), 16 deletions(-) create mode 100644 apps/dashboard/src/components/overview/overview-hydrate-options.tsx diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx index 67339ccc..6291277f 100644 --- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx +++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx @@ -8,6 +8,7 @@ import OverviewTopGeo from '@/components/overview/overview-top-geo'; import OverviewTopPages from '@/components/overview/overview-top-pages'; import OverviewTopSources from '@/components/overview/overview-top-sources'; +import { OverviewHydrateOptions } from '@/components/overview/overview-hydrate-options'; import { OverviewInterval } from '@/components/overview/overview-interval'; import OverviewMetrics from '@/components/overview/overview-metrics'; import { OverviewRange } from '@/components/overview/overview-range'; @@ -21,6 +22,7 @@ interface PageProps { export default function Page({ params: { projectId } }: PageProps) { return ( <> +
diff --git a/apps/dashboard/src/components/overview/overview-hydrate-options.tsx b/apps/dashboard/src/components/overview/overview-hydrate-options.tsx new file mode 100644 index 00000000..fe871aaf --- /dev/null +++ b/apps/dashboard/src/components/overview/overview-hydrate-options.tsx @@ -0,0 +1,22 @@ +'use client'; + +import { getStorageItem } from '@/utils/storage'; +import { useEffect, useRef } from 'react'; +import { useOverviewOptions } from './useOverviewOptions'; + +export function OverviewHydrateOptions() { + const { setRange, range } = useOverviewOptions(); + const ref = useRef(false); + + useEffect(() => { + if (!ref.current) { + const range = getStorageItem('range', '7d'); + if (range !== '7d') { + setRange(range); + } + ref.current = true; + } + }, []); + + return null; +} diff --git a/apps/dashboard/src/components/overview/overview-metrics.tsx b/apps/dashboard/src/components/overview/overview-metrics.tsx index 4eb82619..1a23bfe2 100644 --- a/apps/dashboard/src/components/overview/overview-metrics.tsx +++ b/apps/dashboard/src/components/overview/overview-metrics.tsx @@ -9,6 +9,7 @@ import { useNumber } from '@/hooks/useNumerFormatter'; import { type RouterOutputs, api } from '@/trpc/client'; import { getChartColor } from '@/utils/theme'; import { getPreviousMetric } from '@openpanel/common'; +import type { IInterval } from '@openpanel/validation'; import React from 'react'; import { CartesianGrid, @@ -89,7 +90,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) { timestamp: new Date(item.date).getTime(), })) || []; - const xAxisProps = useXAxisProps({ interval: 'day' }); + const xAxisProps = useXAxisProps({ interval }); const yAxisProps = useYAxisProps(); return ( @@ -131,7 +132,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
{overviewQuery.isLoading && } - + @@ -215,9 +216,10 @@ const { Tooltip, TooltipProvider } = createChartTooltip< RouterOutputs['overview']['stats']['series'][number], { metric: (typeof TITLES)[number]; + interval: IInterval; } ->(({ context: { metric }, data }) => { - const formatDate = useFormatDateInterval('day'); +>(({ context: { metric, interval }, data }) => { + const formatDate = useFormatDateInterval(interval); const number = useNumber(); return ( diff --git a/apps/dashboard/src/components/overview/useOverviewOptions.ts b/apps/dashboard/src/components/overview/useOverviewOptions.ts index 6b636d6f..116802c0 100644 --- a/apps/dashboard/src/components/overview/useOverviewOptions.ts +++ b/apps/dashboard/src/components/overview/useOverviewOptions.ts @@ -6,7 +6,7 @@ import { useQueryState, } from 'nuqs'; -import { getStorageItem, setStorageItem } from '@/utils/storage'; +import { setStorageItem } from '@/utils/storage'; import { getDefaultIntervalByDates, getDefaultIntervalByRange, @@ -15,7 +15,6 @@ import { } from '@openpanel/constants'; import type { IChartRange } from '@openpanel/validation'; import { mapKeys } from '@openpanel/validation'; -import { useEffect } from 'react'; const nuqsOptions = { history: 'push' } as const; @@ -45,13 +44,6 @@ export function useOverviewOptions() { }), ); - useEffect(() => { - const range = getStorageItem('range', '7d'); - if (range !== '7d') { - setRange(range); - } - }, []); - const interval = overrideInterval || getDefaultIntervalByDates(startDate, endDate) || diff --git a/apps/dashboard/src/hooks/useEventQueryFilters.ts b/apps/dashboard/src/hooks/useEventQueryFilters.ts index 0dfb4ab4..3cf1bb71 100644 --- a/apps/dashboard/src/hooks/useEventQueryFilters.ts +++ b/apps/dashboard/src/hooks/useEventQueryFilters.ts @@ -59,7 +59,7 @@ export function useEventQueryFilters(options: NuqsOptions = {}) { | undefined | null | (string | number | boolean | undefined | null)[], - operator: IChartEventFilterOperator = 'is', + operator: IChartEventFilterOperator, ) => { setFilters((prev) => { const exists = prev.find((filter) => filter.name === name); @@ -80,7 +80,10 @@ export function useEventQueryFilters(options: NuqsOptions = {}) { if (filter.name === name) { return { ...filter, - operator: newValue.length === 0 ? 'isNull' : operator, + operator: + !operator && newValue.length === 0 + ? 'isNull' + : (operator ?? 'is'), value: newValue, }; } @@ -93,7 +96,10 @@ export function useEventQueryFilters(options: NuqsOptions = {}) { { id: name, name, - operator: newValue.length === 0 ? 'isNull' : operator, + operator: + !operator && newValue.length === 0 + ? 'isNull' + : (operator ?? 'is'), value: newValue, }, ];