inogen/app/components/dashboard/interactive-bar-chart.tsx

import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
  LabelList,
} from "recharts";
import { Card, CardContent } from "~/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
} from "~/components/ui/chart";
import { formatNumber } from "~/lib/utils";

export type CompanyChartDatum = {
  category: string; // related_company
  capacity: number; // percentage
  revenue: number; // percentage
  cost: number; // percentage
};

const chartConfig = {
  capacity: {
    label: "افزایش ظرفیت",
    color: "#69C8EA",
  },
  revenue: {
    label: "افزایش درآمد",
    color: "#4ADE80",
  },
  cost: {
    // آپادانا  بندرامام
    //label: "کاهش هزینه",
    label: "هزینه عملیاتی", // نوری
    color: "#F87171",
  },
} satisfies ChartConfig;

export function InteractiveBarChart({
  data,
  showRevenue = "نوری"!="نوری", // آپادانا  بندرامام
}: {
  data: CompanyChartDatum[];
  showRevenue?: boolean;
}) {
  return (
    <Card className="py-0 bg-transparent mt-8 border-none h-full">
      <CardContent className="p-2 bg-transparent">
        <ChartContainer config={chartConfig} className="aspect-auto h-96">
          <BarChart
            accessibilityLayer
            data={data}
            margin={{ left: 12, right: 12 }}
            barGap={25}
            barSize={9}
          >
            <CartesianGrid vertical={false} stroke="#475569" />
            <XAxis
              dataKey="category"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              style={{ fill: "#ffffff", fontSize: 16 }}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              tickMargin={25}
              style={{ fill: "#ACACAC", fontSize: 11 }}
              tickFormatter={(value) =>
                `${formatNumber(Math.round(value))}%`
              }
            />
            <Bar
              dataKey="capacity"
              fill={chartConfig.capacity.color}
              radius={[8, 8, 0, 0]}
            >
              <LabelList
                dataKey="capacity"
                position="top"
                offset={15}
                style={{
                  fill: "#ffffff",
                  fontSize: "16px",
                  fontWeight: "bold",
                }}
                formatter={(v: number) =>
                  `${formatNumber(Math.round(v))}%`
                }
              />
            </Bar>

            {showRevenue && (
              <Bar
                dataKey="revenue"
                fill={chartConfig.revenue.color}
                radius={[8, 8, 0, 0]}
              >
                <LabelList
                  dataKey="revenue"
                  position="top"
                  style={{
                    fill: "#ffffff",
                    fontSize: "16px",
                    fontWeight: "bold",
                  }}
                  formatter={(v: number) =>
                    `${formatNumber(Math.round(v))}%`
                  }
                />
              </Bar>
            )}

            <Bar
              dataKey="cost"
              fill={chartConfig.cost.color}
              radius={[8, 8, 0, 0]}
            >
              <LabelList
                dataKey="cost"
                position="top"
                style={{
                  fill: "#ffffff",
                  fontSize: "16px",
                  fontWeight: "bold",
                }}
                formatter={(v: number) =>
                  `${formatNumber(Math.round(v))}%`
                }
              />
            </Bar>
          </BarChart>
        </ChartContainer>

        {/* Legend below chart */}
        <div className="flex justify-center gap-8 mt-10">
          <div className="flex items-center gap-2">
            <div
              className="w-6 h-2 rounded"
              style={{ backgroundColor: chartConfig.capacity.color }}
            ></div>
            <span className="text-xs text-white">
              {chartConfig.capacity.label}
            </span>
          </div>

          <div className="flex items-center gap-2">
            <div
              className="w-6 h-2 rounded"
              style={{ backgroundColor: chartConfig.cost.color }}
            ></div>
            <span className="text-xs text-white">
              {chartConfig.cost.label}
            </span>
          </div>

          {showRevenue && (
            <div className="flex items-center gap-2">
              <div
                className="w-6 h-2 rounded"
                style={{ backgroundColor: chartConfig.revenue.color }}
              ></div>
              <span className="text-xs text-white">
                {chartConfig.revenue.label}
              </span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}