Stat Card Area

1"use client";
2 
3import {
4  Area,
5  AreaChart,
6  ChartStatFlow,
7  LinearGradient,
8} from "@/components/charts";
9import { curveCardinal } from "@visx/curve";
10import { useState } from "react";
11import {
12  Card,
13  CardAction,
14  CardContent,
15  CardHeader,
16  CardTitle,
17} from "@/components/ui/card";
18import { revenueSeries, revenueStats } from "../data/revenue-series";
19import {
20  StatCardChart,
21  statCardLabelClassName,
22  statCardValueClassName,
23} from "./stat-card-chart";
24import {
25  formatStatCardMonth,
26  StatCardHoverBridge,
27  type StatCardHoverState,
28} from "./stat-card-hover-bridge";
29import { TrendBadge } from "./trend-badge";
30 
31export function StatCardArea() {
32  const [hover, setHover] = useState<StatCardHoverState>({
33    value: null,
34    label: null,
35    trend: null,
36  });
37  const displayValue = hover.value ?? revenueStats.average;
38  const displayLabel = hover.label ?? "Avg";
39  const displayTrend = hover.trend ?? revenueStats.trend;
40 
41  return (
42    <Card className="w-full gap-0 py-0">
43      <CardHeader className="px-4 py-3">
44        <CardTitle>Total Revenue</CardTitle>
45        <CardAction>
46          <TrendBadge value={displayTrend} />
47        </CardAction>
48      </CardHeader>
49 
50      <CardContent className="flex flex-col gap-3 px-4 pt-2 pb-3">
51        <ChartStatFlow
52          formatOptions={{
53            currency: "USD",
54            maximumFractionDigits: 0,
55            style: "currency",
56          }}
57          label={displayLabel}
58          labelClassName={statCardLabelClassName}
59          value={displayValue}
60          valueClassName={statCardValueClassName}
61        />
62 
63        <StatCardChart size="md">
64          <AreaChart
65            aspectRatio="2.5 / 1"
66            className="w-full"
67            data={revenueSeries}
68            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
69          >
70            <StatCardHoverBridge
71              dataKey="value"
72              formatLabel={formatStatCardMonth}
73              onHoverChange={setHover}
74            />
75            <LinearGradient
76              from="var(--chart-1)"
77              fromOpacity={0.45}
78              id="stat-card-area-fill"
79              to="var(--chart-1)"
80              toOpacity={0}
81            />
82            <Area
83              curve={curveCardinal.tension(0.65)}
84              dataKey="value"
85              fill="url(#stat-card-area-fill)"
86              fillOpacity={1}
87              gradientToOpacity={0}
88              showHighlight
89              stroke="var(--chart-1)"
90// … truncated