hjjeong
5f63c24c42
## 백엔드 - DashboardController: 대시보드 CRUD 및 쿼리 실행 API - DashboardService: 비즈니스 로직 처리 - PostgreSQL 연동 및 데이터 관리 ## 프론트엔드 - DashboardDesigner: 캔버스 기반 대시보드 디자이너 - QueryEditor: SQL 쿼리 편집 및 미리보기 - ChartRenderer: 다양한 차트 타입 지원 (Bar, Line, Area, Donut, Stacked, Combo) - DashboardViewer: 실시간 데이터 반영 뷰어 ## 개선사항 - 콘솔 로그 프로덕션 준비 (주석 처리) - 차트 컴포넌트 확장 (6가지 타입) - 실시간 쿼리 실행 및 데이터 바인딩
119 lines
2.9 KiB
TypeScript
119 lines
2.9 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="w-full h-full p-2">
|
|
{title && (
|
|
<div className="text-center text-sm font-semibold text-gray-700 mb-2">
|
|
{title}
|
|
</div>
|
|
)}
|
|
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<ComposedChart
|
|
data={data}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
|
<XAxis
|
|
dataKey={xAxis}
|
|
tick={{ fontSize: 12 }}
|
|
stroke="#666"
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 12 }}
|
|
stroke="#666"
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'white',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '4px',
|
|
fontSize: '12px'
|
|
}}
|
|
formatter={(value: any, name: string) => [
|
|
typeof value === 'number' ? value.toLocaleString() : value,
|
|
name
|
|
]}
|
|
/>
|
|
{showLegend && yKeys.length > 1 && (
|
|
<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>
|
|
);
|
|
}
|