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

add details button on overview

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-20 09:45:30 +02:00
parent 4a7f21663f
commit 4350670bbc
13 changed files with 79 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/dashboard/src/components/overview/overview-details-button.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { pushModal } from '@/modals';
import { ScanEyeIcon } from 'lucide-react';
import type { IChartInput } from '@openpanel/validation';
type Props = {
chart: IChartInput;
};
const OverviewDetailsButton = ({ chart }: Props) => {
return (
<button
className="-mb-2 mt-5 flex w-full items-center justify-center gap-2 text-sm font-semibold"
onClick={() => {
pushModal('OverviewChartDetails', {
chart: chart,
});
}}
>
<ScanEyeIcon size={18} /> Details
</button>
);
};
export default OverviewDetailsButton;

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

@@ -5,6 +5,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn';
import { Widget, WidgetBody } from '../../widget';
import OverviewDetailsButton from '../overview-details-button';
import { WidgetButtons, WidgetHead } from '../overview-widget';
import { useOverviewOptions } from '../useOverviewOptions';
import { useOverviewWidget } from '../useOverviewWidget';
@@ -121,6 +122,7 @@ export default function OverviewLatestEvents({
</WidgetHead>
<WidgetBody>
<LazyChart hideID {...widget.chart} previous={false} />
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
</>

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

@@ -9,6 +9,7 @@ import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
import { WidgetButtons, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -222,6 +223,7 @@ export default function OverviewTopDevices({
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
</>

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

@@ -1,17 +1,15 @@
'use client';
import { useState } from 'react';
import { ChartSwitch } from '@/components/report/chart';
import { LazyChart } from '@/components/report/chart/LazyChart';
import { Button } from '@/components/ui/button';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { cn } from '@/utils/cn';
import { BarChartIcon, LineChart, LineChartIcon } from 'lucide-react';
import type { IChartType } from '@openpanel/validation';
import { Widget, WidgetBody } from '../../widget';
import { OverviewChartToggle } from '../overview-chart-toggle';
import OverviewDetailsButton from '../overview-details-button';
import { WidgetButtons, WidgetHead } from '../overview-widget';
import { useOverviewOptions } from '../useOverviewOptions';
import { useOverviewWidget } from '../useOverviewWidget';
@@ -132,6 +130,7 @@ export default function OverviewTopEvents({
</WidgetHead>
<WidgetBody>
<LazyChart hideID {...widget.chart} previous={false} />
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
</>

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

@@ -10,6 +10,7 @@ import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
import { WidgetButtons, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -157,6 +158,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
<Widget className="col-span-6 md:col-span-3">

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

@@ -9,6 +9,7 @@ import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
import OverviewTopBots from './overview-top-bots';
import { WidgetButtons, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
@@ -154,6 +155,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
}}
/>
)}
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
</>

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

@@ -2,13 +2,16 @@
import { useState } from 'react';
import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
import { pushModal } from '@/modals';
import { cn } from '@/utils/cn';
import { ScanEyeIcon } from 'lucide-react';
import type { IChartType } from '@openpanel/validation';
import { LazyChart } from '../report/chart/LazyChart';
import { Widget, WidgetBody } from '../widget';
import { OverviewChartToggle } from './overview-chart-toggle';
import OverviewDetailsButton from './overview-details-button';
import { WidgetButtons, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -324,6 +327,7 @@ export default function OverviewTopSources({
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
</Widget>
</>

2
apps/dashboard/src/components/overview/overview-widget.tsx
View File

@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn(
'flex flex-col rounded-t-xl p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
'flex flex-col rounded-t-xl p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4 [&_.title]:font-semibold',
className
)}
{...props}