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

dashboard: add dark mode

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-28 06:47:04 +01:00
parent 64701bf29f
commit a1fa48da75
37 changed files with 181 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/report/chart/ChartAnimation.tsx
View File

@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
<div
{...props}
className={cn(
'rounded-md border border-border bg-white p-8',
'rounded-md border border-border bg-background p-8',
props.className
)}
/>

5
apps/dashboard/src/components/report/chart/MetricCard.tsx
View File

@@ -84,7 +84,10 @@ export function MetricCard({
<div className="flex items-center justify-between gap-2">
<div className="flex min-w-0 items-center gap-2 text-left font-medium">
<ColorSquare>{serie.event.id}</ColorSquare>
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
<span
role="heading"
className="overflow-hidden text-ellipsis whitespace-nowrap"
>
{serie.name || serie.event.displayName || serie.event.name}
</span>
</div>

7
apps/dashboard/src/components/report/chart/ReportBarChart.tsx
View File

@@ -39,9 +39,10 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
key={serie.name}
className={cn(
'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
'[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
isClickable && 'cursor-pointer hover:!bg-slate-100'
'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50 dark:even:bg-slate-100',
'[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-background',
isClickable &&
'cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-50'
)}
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>

2
apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
const hidden = sorted.slice(limit);
return (
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background p-3 text-sm shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;

10
apps/dashboard/src/components/report/chart/ReportLineChart.tsx
View File

@@ -50,6 +50,11 @@ export function ReportLineChart({
<ResponsiveContainer>
{({ width, height }) => (
<LineChart width={width} height={height} data={rechartData}>
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
vertical={false}
/>
{references.map((ref) => (
<ReferenceLine
key={ref.id}
@@ -65,11 +70,6 @@ export function ReportLineChart({
fontSize={10}
/>
))}
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
vertical={false}
/>
<YAxis
width={getYAxisWidth(data.metrics.max)}
fontSize={12}

16
apps/dashboard/src/components/report/chart/index.tsx
View File

@@ -1,5 +1,8 @@
'use client';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { TriangleIcon } from 'lucide-react';
import type { IChartInput } from '@openpanel/validation';
import { Funnel } from '../funnel';
@@ -12,7 +15,18 @@ export const ChartSwitch = withChartProivder(function ChartSwitch(
props: ReportChartProps
) {
if (props.chartType === 'funnel') {
return <Funnel {...props} />;
return (
<>
<Alert>
<TriangleIcon className="h-4 w-4" />
<AlertTitle>Keep in mind</AlertTitle>
<AlertDescription>
Funnel chart is still experimental and might not work as expected.
</AlertDescription>
</Alert>
<Funnel {...props} />
</>
);
}
return <Chart {...props} />;

4
apps/dashboard/src/components/report/funnel/Funnel.tsx
View File

@@ -99,7 +99,7 @@ export function FunnelSteps({
)}
key={step.event.id}
>
<div className="card divide-y divide-border bg-white">
<div className="card divide-y divide-border bg-background">
<div className="p-4">
<p className="text-muted-foreground">Step {index + 1}</p>
<h3 className="font-bold">
@@ -108,7 +108,7 @@ export function FunnelSteps({
</div>
<div className="relative aspect-square">
<FunnelChart from={step.prevPercent} to={step.percent} />
<div className="absolute left-0 right-0 top-0 flex flex-col bg-white/40 p-4">
<div className="absolute left-0 right-0 top-0 flex flex-col bg-background/40 p-4">
<div className="font-medium uppercase text-muted-foreground">
Sessions
</div>

2
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -135,7 +135,7 @@ export function ReportEvents() {
]}
label="Segment"
>
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
<button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
{event.segment === 'user' ? (
<>
<Users size={12} /> Unique users

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
);
}}
>
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
<button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
<FilterIcon size={12} /> Add filter
</button>
</Combobox>