Stat Card Line

1"use client";
2 
3import { ChartStatFlow, Line, LineChart } from "@/components/charts";
4import { curveBasis } from "@visx/curve";
5import { useState } from "react";
6import {
7  Card,
8  CardAction,
9  CardContent,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { sessionsSeries, sessionsStats } from "../data/sessions-series";
14import {
15  StatCardChart,
16  statCardLabelClassName,
17  statCardValueClassName,
18} from "./stat-card-chart";
19import {
20  formatStatCardWeekday,
21  StatCardHoverBridge,
22  type StatCardHoverState,
23} from "./stat-card-hover-bridge";
24import { TrendBadge } from "./trend-badge";
25 
26export function StatCardLine() {
27  const [hover, setHover] = useState<StatCardHoverState>({
28    value: null,
29    label: null,
30    trend: null,
31  });
32  const average = Math.round(sessionsStats.average);
33  const displayValue = hover.value === null ? average : Math.round(hover.value);
34  const displayLabel = hover.label ?? "Avg";
35  const displayTrend = hover.trend ?? sessionsStats.trend;
36 
37  return (
38    <Card className="w-full gap-0 py-0">
39      <CardHeader className="px-4 py-3">
40        <CardTitle>Active Sessions</CardTitle>
41        <CardAction>
42          <TrendBadge value={displayTrend} />
43        </CardAction>
44      </CardHeader>
45 
46      <CardContent className="px-4 pt-2 pb-3">
47        <StatCardChart size="md">
48          <div className="pointer-events-none absolute right-4 bottom-4 z-10 flex flex-col items-end text-right">
49            <ChartStatFlow
50              label={displayLabel}
51              labelClassName={statCardLabelClassName}
52              value={displayValue}
53              valueClassName={statCardValueClassName}
54            />
55          </div>
56 
57          <LineChart
58            aspectRatio="2.5 / 1"
59            className="w-full"
60            data={sessionsSeries}
61            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
62          >
63            <StatCardHoverBridge
64              dataKey="value"
65              formatLabel={formatStatCardWeekday}
66              onHoverChange={setHover}
67            />
68            <Line
69              curve={curveBasis}
70              dataKey="value"
71              showHighlight
72              stroke="var(--chart-3)"
73              strokeWidth={2.5}
74            />
75          </LineChart>
76        </StatCardChart>
77      </CardContent>
78    </Card>
79  );
80}