76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
|
import { ChartConfig } from "../types";
|
|
|
|
interface StackedBarChartComponentProps {
|
|
data: any[];
|
|
config: ChartConfig;
|
|
width?: number;
|
|
height?: number;
|
|
}
|
|
|
|
/**
|
|
* 누적 바 차트 컴포넌트
|
|
* - Recharts BarChart (stacked) 사용
|
|
* - 전체 대비 비율 파악에 적합
|
|
* - 다중 시리즈를 누적으로 표시
|
|
*/
|
|
export function StackedBarChartComponent({ data, config, width = 250, height = 200 }: StackedBarChartComponentProps) {
|
|
const {
|
|
xAxis = "x",
|
|
yAxis = "y",
|
|
colors = ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"],
|
|
title,
|
|
showLegend = true,
|
|
} = config;
|
|
|
|
// Y축 필드들 (단일 또는 다중)
|
|
const yFields = Array.isArray(yAxis) ? yAxis : [yAxis];
|
|
const yKeys = yFields.filter((field) => field && field !== "y");
|
|
|
|
return (
|
|
<div className="h-full w-full p-2">
|
|
{title && <div className="text-foreground mb-2 text-center text-sm font-semibold">{title}</div>}
|
|
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={data}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 25,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
|
<XAxis dataKey={xAxis} tick={{ fontSize: 12 }} stroke="hsl(var(--muted-foreground))" />
|
|
<YAxis tick={{ fontSize: 12 }} stroke="hsl(var(--muted-foreground))" />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--background))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "4px",
|
|
fontSize: "12px",
|
|
color: "hsl(var(--foreground))",
|
|
}}
|
|
formatter={(value: any, name: string) => [typeof value === "number" ? value.toLocaleString() : value, name]}
|
|
/>
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: "12px" }} />}
|
|
|
|
{yKeys.map((key, index) => (
|
|
<Bar
|
|
key={key}
|
|
dataKey={key}
|
|
stackId="a"
|
|
fill={colors[index % colors.length]}
|
|
radius={index === yKeys.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
|
|
/>
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|