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

Feature/move list to client (#50)

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-09-01 15:02:12 +02:00
committed by GitHub
parent c2abdaadf2
commit 668434d246
181 changed files with 2922 additions and 1959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/dashboard/src/components/overview/filters/overview-filters-buttons.tsx
View File

@@ -23,7 +23,7 @@ export function OverviewFiltersButtons({
const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
if (filters.length === 0 && events.length === 0) return null;
return (
<div className={cn('flex flex-wrap gap-2 px-4 pb-4', className)}>
<div className={cn('flex flex-wrap gap-2', className)}>
{events.map((event) => (
<Button
key={event}
@@ -32,7 +32,7 @@ export function OverviewFiltersButtons({
icon={X}
onClick={() => setEvents((p) => p.filter((e) => e !== event))}
>
<strong>{event}</strong>
<strong className="font-semibold">{event}</strong>
</Button>
))}
{filters.map((filter) => {
@@ -49,7 +49,7 @@ export function OverviewFiltersButtons({
onClick={() => setFilter(filter.name, filter.value[0], 'is')}
>
<span className="mr-1">{getPropertyLabel(filter.name)} is</span>
<strong>{filter.value[0]}</strong>
<strong className="font-semibold">{filter.value[0]}</strong>
</Button>
);
})}

4
apps/dashboard/src/components/overview/live-counter/live-counter.tsx
View File

@@ -7,7 +7,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { useDebounceVal } from '@/hooks/useDebounceVal';
import { useDebounceState } from '@/hooks/useDebounceState';
import useWS from '@/hooks/useWS';
import { cn } from '@/utils/cn';
import { useQueryClient } from '@tanstack/react-query';
@@ -28,7 +28,7 @@ const FIFTEEN_SECONDS = 1000 * 30;
export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
const client = useQueryClient();
const counter = useDebounceVal(data, 1000, {
const counter = useDebounceState(data, 1000, {
maxWait: 5000,
});
const lastRefresh = useRef(Date.now());

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

@@ -13,7 +13,7 @@ export function OverviewChartToggle({ chartType, setChartType }: Props) {
return (
<Button
size={'icon'}
variant={'outline'}
variant={'ghost'}
onClick={() => {
setChartType((p) => (p === 'linear' ? 'bar' : 'linear'));
}}

11
apps/dashboard/src/components/overview/overview-details-button.tsx
View File

@@ -3,22 +3,25 @@ import { ScanEyeIcon } from 'lucide-react';
import type { IChartProps } from '@openpanel/validation';
import { Button } from '../ui/button';
type Props = {
chart: IChartProps;
};
const OverviewDetailsButton = ({ chart }: Props) => {
return (
<button
className="-mb-2 mt-5 flex w-full items-center justify-center gap-2 text-sm font-semibold"
<Button
size="icon"
variant="ghost"
onClick={() => {
pushModal('OverviewChartDetails', {
chart: chart,
});
}}
>
<ScanEyeIcon size={18} /> Details
</button>
<ScanEyeIcon size={18} />
</Button>
);
};

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

@@ -131,7 +131,7 @@ interface WrapperProps {
function Wrapper({ children, count }: WrapperProps) {
return (
<div className="flex h-full flex-col">
<div className="relative mb-1 text-xs font-medium text-muted-foreground">
<div className="relative mb-1 text-sm font-medium text-muted-foreground">
{count} unique vistors last 30 minutes
</div>
<div className="relative flex h-full w-full flex-1 items-end gap-1">

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

@@ -192,8 +192,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<>
<div className="relative -top-0.5 col-span-6 -m-4 mb-0 md:m-0">
<div className="card mb-2 grid grid-cols-4">
<div className="relative -top-0.5 col-span-6 -m-4 mb-0 mt-0 md:m-0">
<div className="card mb-2 grid grid-cols-4 overflow-hidden rounded-md">
{reports.map((report, index) => (
<button
key={index}

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

@@ -32,7 +32,7 @@ const OverviewTopBots = ({ projectId }: Props) => {
<>
<div className="-m-4">
<WidgetTable
className="max-w-full [&_td:first-child]:w-full [&_th]:text-xs [&_tr]:text-xs"
className="max-w-full [&_td:first-child]:w-full [&_th]:text-sm [&_tr]:text-sm"
data={data}
keyExtractor={(item) => item.id}
columns={[

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

@@ -11,7 +11,7 @@ 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 { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -271,10 +271,7 @@ export default function OverviewTopDevices({
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>
<div className="title">
{widget.title}
<OverviewChartToggle {...{ chartType, setChartType }} />
</div>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (
<button
@@ -312,8 +309,11 @@ export default function OverviewTopDevices({
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>
</>
);

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

@@ -10,7 +10,7 @@ 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 { WidgetButtons, WidgetFooter, WidgetHead } from '../overview-widget';
import { useOverviewOptions } from '../useOverviewOptions';
import { useOverviewWidget } from '../useOverviewWidget';
@@ -143,10 +143,7 @@ export default function OverviewTopEvents({
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>
<div className="title">
{widget.title}
<OverviewChartToggle {...{ chartType, setChartType }} />
</div>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets
.filter((item) => item.hide !== true)
@@ -163,8 +160,11 @@ export default function OverviewTopEvents({
</WidgetHead>
<WidgetBody>
<LazyChart hideID {...widget.chart} previous={false} />
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>
</>
);

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

@@ -13,7 +13,7 @@ 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 { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -143,10 +143,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>
<div className="title">
{widget.title}
<OverviewChartToggle {...{ chartType, setChartType }} />
</div>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (
<button
@@ -180,8 +177,11 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>

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

@@ -14,7 +14,7 @@ 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 { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -154,10 +154,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>
<div className="title">
{widget.title}
<OverviewChartToggle {...{ chartType, setChartType }} />
</div>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (
<button
@@ -196,8 +193,13 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
]}
/>
)}
{widget.chart?.name && <OverviewDetailsButton chart={widget.chart} />}
</WidgetBody>
{widget.chart?.name && (
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
)}
</Widget>
</>
);

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

@@ -2,9 +2,7 @@
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';
@@ -12,7 +10,7 @@ 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 { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
import { useOverviewOptions } from './useOverviewOptions';
import { useOverviewWidget } from './useOverviewWidget';
@@ -282,10 +280,7 @@ export default function OverviewTopSources({
<>
<Widget className="col-span-6 md:col-span-3">
<WidgetHead>
<div className="title">
{widget.title}
<OverviewChartToggle {...{ chartType, setChartType }} />
</div>
<div className="title">{widget.title}</div>
<WidgetButtons>
{widgets.map((w) => (
@@ -335,8 +330,11 @@ export default function OverviewTopSources({
}
}}
/>
<OverviewDetailsButton chart={widget.chart} />
</WidgetBody>
<WidgetFooter>
<OverviewDetailsButton chart={widget.chart} />
<OverviewChartToggle {...{ chartType, setChartType }} />
</WidgetFooter>
</Widget>
</>
);

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

@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'-mb-px -mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 dark:[&_button.active]:border-white [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
'-mb-px -mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 dark:[&_button.active]:border-white [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-sm [&_button]:opacity-50',
className
)}
style={{ gap }}
@@ -93,7 +93,12 @@ export function WidgetButtons({
>
{Children.map(children, (child, index) => {
return (
<div className={cn('flex', slice < index ? hidden : 'opacity-100')}>
<div
className={cn(
'flex [&_button]:leading-normal',
slice < index ? hidden : 'opacity-100'
)}
>
{child}
</div>
);
@@ -123,3 +128,21 @@ export function WidgetButtons({
</div>
);
}
export function WidgetFooter({
className,
children,
...props
}: WidgetHeadProps) {
return (
<div
className={cn(
'flex rounded-b-md border-t bg-def-100 p-2 py-1',
className
)}
{...props}
>
{children}
</div>
);
}