Dynamic Bar Chart

"use client"import * as React from "react"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "An interactive bar chart"const chartData = [  { date: "2024-04-01", desktop: 222, mobile: 150 },  { date: "2024-04-02", desktop: 97, mobile: 180 },  { date: "2024-04-03", desktop: 167, mobile: 120 },  { date: "2024-04-04", desktop: 242, mobile: 260 },  { date: "2024-04-05", desktop: 373, mobile: 290 },  { date: "2024-04-06", desktop: 301, mobile: 340 },  { date: "2024-04-07", desktop: 245, mobile: 180 },  { date: "2024-04-08", desktop: 409, mobile: 320 },  { date: "2024-04-09", desktop: 59, mobile: 110 },  { date: "2024-04-10", desktop: 261, mobile: 190 },  { date: "2024-04-11", desktop: 327, mobile: 350 },  { date: "2024-04-12", desktop: 292, mobile: 210 },  { date: "2024-04-13", desktop: 342, mobile: 380 },  { date: "2024-04-14", desktop: 137, mobile: 220 },  { date: "2024-04-15", desktop: 120, mobile: 170 },  { date: "2024-04-16", desktop: 138, mobile: 190 },  { date: "2024-04-17", desktop: 446, mobile: 360 },  { date: "2024-04-18", desktop: 364, mobile: 410 },  { date: "2024-04-19", desktop: 243, mobile: 180 },  { date: "2024-04-20", desktop: 89, mobile: 150 },  { date: "2024-04-21", desktop: 137, mobile: 200 },  { date: "2024-04-22", desktop: 224, mobile: 170 },  { date: "2024-04-23", desktop: 138, mobile: 230 },  { date: "2024-04-24", desktop: 387, mobile: 290 },  { date: "2024-04-25", desktop: 215, mobile: 250 },  { date: "2024-04-26", desktop: 75, mobile: 130 },  { date: "2024-04-27", desktop: 383, mobile: 420 },  { date: "2024-04-28", desktop: 122, mobile: 180 },  { date: "2024-04-29", desktop: 315, mobile: 240 },  { date: "2024-04-30", desktop: 454, mobile: 380 },]const chartConfig = {  views: {    label: "Page Views",  },  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",  },} satisfies ChartConfigexport function ChartBarInteractive() {  const [activeChart, setActiveChart] =    React.useState<keyof typeof chartConfig>("desktop")  const total = React.useMemo(    () => ({      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),    }),    []  )  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col items-stretch border-b pb-4 mb-4 sm:flex-row">        <div className="flex flex-1 flex-col justify-center gap-1">          <h3 className="text-lg font-semibold">Bar Chart - Interactive</h3>          <p className="text-sm text-muted-foreground">            Showing total visitors for the last 30 days          </p>        </div>        <div className="flex mt-4 sm:mt-0">          {["desktop", "mobile"].map((key) => {            const chart = key as keyof typeof chartConfig            return (              <button                key={chart}                data-active={activeChart === chart}                className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"                onClick={() => setActiveChart(chart)}              >                <span className="text-muted-foreground text-xs">                  {chartConfig[chart].label}                </span>                <span className="text-lg leading-none font-bold sm:text-3xl">                  {total[key as keyof typeof total].toLocaleString()}                </span>              </button>            )          })}        </div>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer          config={chartConfig}          className="h-[250px] w-full"        >          <BarChart            accessibilityLayer            data={chartData}            margin={{              left: 12,              right: 12,            }}          >            <CartesianGrid vertical={false} />            <XAxis              dataKey="date"              tickLine={false}              axisLine={false}              tickMargin={8}              minTickGap={32}              tickFormatter={(value) => {                const date = new Date(value)                return date.toLocaleDateString("en-US", {                  month: "short",                  day: "numeric",                })              }}            />            <ChartTooltip              content={                <ChartTooltipContent                  className="w-[150px]"                  nameKey="views"                  labelFormatter={(value) => {                    return new Date(value).toLocaleDateString("en-US", {                      month: "short",                      day: "numeric",                      year: "numeric",                    })                  }}                />              }            />            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />          </BarChart>        </ChartContainer>      </div>    </div>  )}