88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
|
|
interface BarChartComponentProps {
|
|
data: any[];
|
|
config: any;
|
|
width?: number;
|
|
height?: number;
|
|
}
|
|
|
|
/**
|
|
* 바 차트 컴포넌트 (Recharts SimpleBarChart 기반)
|
|
* - 실제 데이터를 받아서 단순하게 표시
|
|
* - 복잡한 변환 로직 없음
|
|
*/
|
|
export function BarChartComponent({ data, config, width = 600, height = 300 }: BarChartComponentProps) {
|
|
// console.log('🎨 BarChartComponent - 전체 데이터:', {
|
|
// dataLength: data?.length,
|
|
// fullData: data,
|
|
// dataType: typeof data,
|
|
// isArray: Array.isArray(data),
|
|
// config,
|
|
// xAxisField: config?.xAxis,
|
|
// yAxisFields: config?.yAxis
|
|
// });
|
|
|
|
// 데이터가 없으면 메시지 표시
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="w-full h-full flex items-center justify-center text-gray-500">
|
|
<div className="text-center">
|
|
<div className="text-2xl mb-2">📊</div>
|
|
<div>데이터가 없습니다</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 데이터의 첫 번째 아이템에서 사용 가능한 키 확인
|
|
const firstItem = data[0];
|
|
const availableKeys = Object.keys(firstItem);
|
|
// console.log('📊 사용 가능한 데이터 키:', availableKeys);
|
|
// console.log('📊 첫 번째 데이터 아이템:', firstItem);
|
|
|
|
// Y축 필드 추출 (배열이면 모두 사용, 아니면 단일 값)
|
|
const yFields = Array.isArray(config.yAxis) ? config.yAxis : [config.yAxis];
|
|
|
|
// 색상 배열
|
|
const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff7c7c', '#8dd1e1'];
|
|
|
|
// 한글 레이블 매핑
|
|
const labelMapping: Record<string, string> = {
|
|
'total_users': '전체 사용자',
|
|
'active_users': '활성 사용자',
|
|
'name': '부서'
|
|
};
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={data}
|
|
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey={config.xAxis}
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<YAxis tick={{ fontSize: 12 }} />
|
|
<Tooltip />
|
|
{config.showLegend !== false && <Legend />}
|
|
|
|
{/* Y축 필드마다 Bar 생성 */}
|
|
{yFields.map((field: string, index: number) => (
|
|
<Bar
|
|
key={field}
|
|
dataKey={field}
|
|
fill={colors[index % colors.length]}
|
|
name={labelMapping[field] || field}
|
|
/>
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|