Bar chart

1"use client";
2 
3import * as React from "react";
4import {
5  Bar,
6  BarChart as RBarChart,
7  CartesianGrid,
8  Legend,
9  ResponsiveContainer,
10  Tooltip,
11  XAxis,
12  YAxis,
13} from "recharts";
14 
15import { cn } from "@/lib/utils";
16import { ChartTooltip } from "./chart-tooltip";
17 
18export interface BarChartSeries {
19  key: string;
20  label?: string;
21  color?: string;
22  stackId?: string;
23}
24 
25interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
26  data: Array<Record<string, number | string>>;
27  series: BarChartSeries[];
28  xKey?: string;
29  height?: number;
30  showLegend?: boolean;
31}
32 
33const DEFAULT_COLORS = [
34  "var(--color-chart-1)",
35  "var(--color-chart-2)",
36  "var(--color-chart-3)",
37  "var(--color-chart-4)",
38  "var(--color-chart-5)",
39];
40 
41const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
42  ({ className, data, series, xKey = "x", height = 220, showLegend = false, ...props }, ref) => {
43    return (
44      <div ref={ref} className={cn("w-full", className)} style={{ height }} {...props}>
45        <ResponsiveContainer width="100%" height="100%">
46          <RBarChart
47            data={data}
48            margin={{ top: 8, right: 12, bottom: 8, left: 0 }}
49            barCategoryGap="20%"
50          >
51            <CartesianGrid stroke="hsl(var(--border))" strokeDasharray="2 4" vertical={false} />
52            <XAxis
53              dataKey={xKey}
54              stroke="hsl(var(--foreground-subtle))"
55              tick={{
56                fontFamily: "var(--font-mono)",
57                fontSize: 10,
58                fill: "hsl(var(--foreground-muted))",
59              }}
60              tickLine={false}
61              axisLine={{ stroke: "hsl(var(--border))" }}
62            />
63            <YAxis
64              stroke="hsl(var(--foreground-subtle))"
65              tick={{
66                fontFamily: "var(--font-mono)",
67                fontSize: 10,
68                fill: "hsl(var(--foreground-muted))",
69              }}
70              tickLine={false}
71              axisLine={{ stroke: "hsl(var(--border))" }}
72              width={36}
73            />
74            <Tooltip cursor={{ fill: "hsl(var(--accent) / 0.4)" }} content={<ChartTooltip />} />
75            {showLegend && (
76              <Legend
77                wrapperStyle={{
78                  fontFamily: "var(--font-mono)",
79                  fontSize: 10,
80                  textTransform: "uppercase",
81                  letterSpacing: "0.06em",
82                }}
83                iconType="square"
84                iconSize={8}
85// … truncated