52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1036,"use client"; import { useState } from "react"; import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; import { Bar, ComposedChart, Line, XAxis, YAxis } from "recharts"; export default function ChartAreaGradientCode({ className }: { className?: string }) { const dropdownItems = ["2026", "2025"]; const [selectedYear, setSelectedYear] = useState(dropdownItems[0]); const statsData: Record< string, { total: string; percent: string; online: string; onlinePercent: string; offline: string; offlinePercent: string; isOfflinePositive: boolean; series: { name: string; type: string; data: number[] }[]; } > = { "2026": { total: "$12,150.00", percent: "+22%", online: "$8,450.00", onlinePercent: "+10%", offline: "$3,700.00", offlinePercent: "-5%", isOfflinePositive: false, series: [ { name: "Online store", type: "column", data: [ 71, 71, 43, 72, 71, 82, 108, 108, 144, 142, 126, 108, 93, 79, 79, 79, 64, 98, 102, 125, 137, 137, 102, 102, 74, ], }, { name: "Offline store", type: "line", data: [ 71, 71, 43, 72, 71, 82, 108, 108, 144, 142, 126, 108, 93, 79, 79, 79, 64, 98, 102, 125, 137, 137, 102, 102, 74, ], }, ], }, "2025": { total: "$10,240.00", percent: "+18%", online: "$7,120.00", onlinePercent: "+12%", offline: "$3,120.00", offlinePercent: "+5%", isOfflinePositive: true, series: [ { name: "Online store", type: "column", data: [ 50, 60, 30, 55, 65, 70, 90, 85, 120, 110, 100, 95, 80, 70, 65, 60, 55, 80, 95, 110, 120, 115, 90, 85, 70, ], }, { name: "Offline store", type: "line", data: [ 40, 50, 25, 45, 55, 60, 80, 75, 110, 100, 90, 85, 70, 60, 55, 50, 45, 70, 85, 100, 110, 105, 80, 75, 60, ], }, ], }, }; const xCategories = [ "", "Jan", "", "", "Feb", "", "", "Mar", "", "", "Apr", "", "", "May", "", "", "Jun", "", "", "Jul", "", "", "Aug", "", "", ]; const currentData = statsData[selectedYear] || statsData["2026"]; // Prepare Recharts data keeping same 25 points const chartData = xCategories.map((month, i) => ({ month: month || "", online: currentData.series[0].data[i], offline: currentData.series[1].data[i], })); return (

} /> } />

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L52",null,{"namespace":"@shadcn-dashboard","registryDependencies":["chart"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/shadcn-dashboard/area-chart/area-chart-02.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/area-chart/area-chart-02.tsx"}],"className":"h-[70svh] min-h-80"}]]}]