87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
|
import { ChartConfig } from "../types";
|
|
|
|
interface ComboChartComponentProps {
|
|
data: any[];
|
|
config: ChartConfig;
|
|
width?: number;
|
|
height?: number;
|
|
}
|
|
|
|
/**
|
|
* 콤보 차트 컴포넌트 (바 + 라인)
|
|
* - Recharts ComposedChart 사용
|
|
* - 서로 다른 스케일의 데이터를 함께 표시
|
|
* - 예: 매출(바) + 이익률(라인)
|
|
*/
|
|
export function ComboChartComponent({ data, config, width = 250, height = 200 }: ComboChartComponentProps) {
|
|
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");
|
|
|
|
// 첫 번째는 Bar, 나머지는 Line으로 표시
|
|
const barKeys = yKeys.slice(0, 1);
|
|
const lineKeys = yKeys.slice(1);
|
|
|
|
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%">
|
|
<ComposedChart
|
|
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" }} />}
|
|
|
|
{/* 바 차트 */}
|
|
{barKeys.map((key, index) => (
|
|
<Bar key={key} dataKey={key} fill={colors[index % colors.length]} radius={[2, 2, 0, 0]} />
|
|
))}
|
|
|
|
{/* 라인 차트 */}
|
|
{lineKeys.map((key, index) => (
|
|
<Line
|
|
key={key}
|
|
type="monotone"
|
|
dataKey={key}
|
|
stroke={colors[(barKeys.length + index) % colors.length]}
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
/>
|
|
))}
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|