import { Area, CartesianGrid, ComposedChart, Legend, Line,
ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { ChartActiveDot, ChartLegendContent, ChartTooltipContent, selectEvenlySpacedItems } from "@/components/application/charts/charts-base";
// data: { month, desktop, mobile, tablet }[] — 36 months, so the
// sampler thins the axis to seven ticks. The wash under the lead
// series is a <linearGradient> in <defs>, its color at 8% fading to 0.
<ResponsiveContainer width="100%" height={240}>
<ComposedChart data={data}>
<defs>
<linearGradient id="wash" x1="0" y1="0" x2="0" y2="1" className="text-utility-brand-600">
<stop offset="0%" stopColor="currentColor" stopOpacity={0.08} />
<stop offset="100%" stopColor="currentColor" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid vertical={false} className="stroke-border-secondary" />
<XAxis dataKey="month" tickLine={false} axisLine={false}
ticks={selectEvenlySpacedItems(data.map((d) => d.month), 7)} interval={0}
padding={{ right: 28 }} // keeps the centered end label inside the svg
tick={{ className: "text-tertiary fill-current text-xs" }} />
<YAxis width={40} tickLine={false} axisLine={false}
tick={{ className: "text-tertiary fill-current text-xs" }} />
<Tooltip isAnimationActive={false}
cursor={{ className: "stroke-utility-brand-600", strokeWidth: 2,
strokeLinecap: "round" }} // the design's marker cursor
content={<ChartTooltipContent />} />
<Legend verticalAlign="top" align="right"
content={<ChartLegendContent align="right" className="pb-4" />} />
<Area dataKey="desktop" name="Desktop" className="text-utility-brand-600"
stroke="currentColor" strokeWidth={2} fill="url(#wash)" dot={false}
isAnimationActive={false}
activeDot={(dot) => <ChartActiveDot cx={dot.cx} cy={dot.cy} />} />
{/* Mobile and Tablet: the same Line at brand-400 and brand-700 */}
</ComposedChart>
</ResponsiveContainer>