zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

dashboard: lazy load charts on overview

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:14:18 +01:00
parent 44c66dbed4
commit 64701bf29f
7 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { ChartSwitch } from '@/components/report/chart'; import { LazyChart } from '@/components/report/chart/LazyChart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
@@ -120,7 +120,7 @@ export default function OverviewLatestEvents({
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch hideID {...widget.chart} previous={false} /> <LazyChart hideID {...widget.chart} previous={false} />
</WidgetBody> </WidgetBody>
</Widget> </Widget>
</> </>

4
apps/dashboard/src/components/overview/overview-top-devices.tsx
View File

@@ -1,12 +1,12 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { ChartSwitch } from '@/components/report/chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import type { IChartType } from '@openpanel/validation'; import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget'; import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle'; import { OverviewChartToggle } from './overview-chart-toggle';
import { WidgetButtons, WidgetHead } from './overview-widget'; import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -198,7 +198,7 @@ export default function OverviewTopDevices({
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch <LazyChart
hideID hideID
{...widget.chart} {...widget.chart}
previous={false} previous={false}

3
apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { ChartSwitch } from '@/components/report/chart'; import { ChartSwitch } from '@/components/report/chart';
import { LazyChart } from '@/components/report/chart/LazyChart';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
@@ -130,7 +131,7 @@ export default function OverviewTopEvents({
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch hideID {...widget.chart} previous={false} /> <LazyChart hideID {...widget.chart} previous={false} />
</WidgetBody> </WidgetBody>
</Widget> </Widget>
</> </>

3
apps/dashboard/src/components/overview/overview-top-geo.tsx
View File

@@ -7,6 +7,7 @@ import { cn } from '@/utils/cn';
import type { IChartType } from '@openpanel/validation'; import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget'; import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle'; import { OverviewChartToggle } from './overview-chart-toggle';
import { WidgetButtons, WidgetHead } from './overview-widget'; import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -136,7 +137,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch <LazyChart
hideID hideID
{...widget.chart} {...widget.chart}
previous={false} previous={false}

4
apps/dashboard/src/components/overview/overview-top-pages.tsx
View File

@@ -1,12 +1,12 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { ChartSwitch } from '@/components/report/chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import type { IChartType } from '@openpanel/validation'; import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget'; import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle'; import { OverviewChartToggle } from './overview-chart-toggle';
import { WidgetButtons, WidgetHead } from './overview-widget'; import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -135,7 +135,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch <LazyChart
hideID hideID
{...widget.chart} {...widget.chart}
previous={false} previous={false}

4
apps/dashboard/src/components/overview/overview-top-sources.tsx
View File

@@ -1,12 +1,12 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { ChartSwitch } from '@/components/report/chart';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters'; import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import type { IChartType } from '@openpanel/validation'; import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget'; import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle'; import { OverviewChartToggle } from './overview-chart-toggle';
import { WidgetButtons, WidgetHead } from './overview-widget'; import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -289,7 +289,7 @@ export default function OverviewTopSources({
</WidgetButtons> </WidgetButtons>
</WidgetHead> </WidgetHead>
<WidgetBody> <WidgetBody>
<ChartSwitch <LazyChart
hideID hideID
{...widget.chart} {...widget.chart}
previous={false} previous={false}

17
apps/dashboard/src/components/report/chart/Chart.tsx
View File

@@ -31,12 +31,17 @@ export function Chart({
startDate, startDate,
endDate, endDate,
}: ReportChartProps) { }: ReportChartProps) {
const [references] = api.reference.getChartReferences.useSuspenseQuery({ const [references] = api.reference.getChartReferences.useSuspenseQuery(
projectId, {
startDate, projectId,
endDate, startDate,
range, endDate,
}); range,
},
{
staleTime: 1000 * 60 * 5,
}
);
const [data] = api.chart.chart.useSuspenseQuery( const [data] = api.chart.chart.useSuspenseQuery(
{ {