kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

수평 바 차트 구현

This commit is contained in:
dohyeons 2025-10-14 16:49:57 +09:00
parent 60090873b3
commit c896b2182c
8 changed files with 219 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/components/admin/dashboard/ChartConfigPanel.tsx
View File

@ -47,19 +47,6 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange, chartTyp
return (
<div className="space-y-6">
<div className="flex items-center gap-2">
<Settings className="h-5 w-5 text-blue-600" />
<h4 className="text-lg font-semibold text-gray-800">차트 설정</h4>
</div>
{/* 쿼리 결과가 없을 때 */}
{!queryResult && (
<Alert>
<TrendingUp className="h-4 w-4" />
<AlertDescription>먼저 SQL 쿼리를 실행하여 데이터를 가져온 후 차트를 설정할 수 있습니다.</AlertDescription>
</Alert>
)}
{/* 데이터 필드 매핑 */}
{queryResult && (
<>

4
frontend/components/admin/dashboard/DashboardDesigner.tsx
View File

@ -290,6 +290,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
switch (subtype) {
case "bar":
return "📊 바 차트";
case "horizontal-bar":
return "📊 수평 바 차트";
case "pie":
return "🥧 원형 차트";
case "line":
@ -326,6 +328,8 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
switch (subtype) {
case "bar":
return "바 차트가 여기에 표시됩니다";
case "horizontal-bar":
return "수평 바 차트가 여기에 표시됩니다";
case "pie":
return "원형 차트가 여기에 표시됩니다";
case "line":

8
frontend/components/admin/dashboard/DashboardSidebar.tsx
View File

@ -31,6 +31,14 @@ export function DashboardSidebar() {
onDragStart={handleDragStart}
className="border-primary border-l-4"
/>
<DraggableItem
icon="📊"
title="수평 바 차트"
type="chart"
subtype="horizontal-bar"
onDragStart={handleDragStart}
className="border-l-4 border-blue-500"
/>
<DraggableItem
icon="📚"
title="누적 바 차트"

14
frontend/components/admin/dashboard/QueryEditor.tsx
View File

@ -220,7 +220,6 @@ ORDER BY Q4 DESC;`,
placeholder="SELECT * FROM your_table WHERE condition = 'value';"
className="h-40 resize-none font-mono text-sm"
/>
<div className="absolute right-3 bottom-3 text-xs text-gray-400">Ctrl+Enter로 실행</div>
</div>
</div>
@ -318,19 +317,6 @@ ORDER BY Q4 DESC;`,
</Card>
</div>
);
// Ctrl+Enter로 쿼리 실행
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === "Enter") {
e.preventDefault();
executeQuery();
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [executeQuery]);
}
/**

4
frontend/components/admin/dashboard/charts/Chart.tsx
View File

@ -2,6 +2,7 @@
import React from "react";
import { BarChart } from "./BarChart";
import { HorizontalBarChart } from "./HorizontalBarChart";
import { LineChart } from "./LineChart";
import { AreaChart } from "./AreaChart";
import { PieChart } from "./PieChart";
@ -43,6 +44,9 @@ export function Chart({ chartType, data, config, width, height }: ChartProps) {
case "bar":
return <BarChart data={data} config={config} width={width} height={height} />;
case "horizontal-bar":
return <HorizontalBarChart data={data} config={config} width={width} height={height} />;
case "line":
return <LineChart data={data} config={config} width={width} height={height} />;

201
frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx Normal file
View File

@ -0,0 +1,201 @@
"use client";
import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import { ChartConfig, ChartData } from "../types";
interface HorizontalBarChartProps {
data: ChartData;
config: ChartConfig;
width?: number;
height?: number;
}
/**
* D3 수평 막대 차트 컴포넌트
*/
export function HorizontalBarChart({ data, config, width = 600, height = 400 }: HorizontalBarChartProps) {
const svgRef = useRef<SVGSVGElement>(null);
useEffect(() => {
if (!svgRef.current || !data.labels.length || !data.datasets.length) return;
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove();
const margin = { top: 40, right: 80, bottom: 60, left: 120 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
// Y축 스케일 (카테고리) - 수평이므로 Y축이 카테고리
const yScale = d3.scaleBand().domain(data.labels).range([0, chartHeight]).padding(0.2);
// X축 스케일 (값) - 수평이므로 X축이 값
const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0;
const xScale = d3
.scaleLinear()
.domain([0, maxValue * 1.1])
.range([0, chartWidth])
.nice();
// Y축 그리기 (카테고리)
g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px").selectAll("text").style("text-anchor", "end");
// X축 그리기 (값)
g.append("g")
.attr("transform", `translate(0,${chartHeight})`)
.call(d3.axisBottom(xScale))
.style("font-size", "12px");
// 그리드 라인
if (config.showGrid !== false) {
g.append("g")
.attr("class", "grid")
.call(
d3
.axisBottom(xScale)
.tickSize(chartHeight)
.tickFormat(() => ""),
)
.style("stroke-dasharray", "3,3")
.style("stroke", "#e0e0e0")
.style("opacity", 0.5);
}
// 색상 팔레트
const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"];
// 막대 그리기
const barHeight = yScale.bandwidth() / data.datasets.length;
data.datasets.forEach((dataset, i) => {
const bars = g
.selectAll(`.bar-${i}`)
.data(dataset.data)
.enter()
.append("rect")
.attr("class", `bar-${i}`)
.attr("x", 0)
.attr("y", (_, j) => (yScale(data.labels[j]) || 0) + barHeight * i)
.attr("width", 0)
.attr("height", barHeight)
.attr("fill", dataset.color || colors[i % colors.length])
.attr("ry", 4);
// 애니메이션
if (config.enableAnimation !== false) {
bars
.transition()
.duration(config.animationDuration || 750)
.attr("width", (d) => xScale(d));
} else {
bars.attr("width", (d) => xScale(d));
}
// 툴팁
if (config.showTooltip !== false) {
bars
.on("mouseover", function (event, d) {
d3.select(this).attr("opacity", 0.7);
const [mouseX, mouseY] = d3.pointer(event, g.node());
const tooltipText = `${dataset.label}: ${d}`;
const tooltip = g
.append("g")
.attr("class", "tooltip")
.attr("transform", `translate(${mouseX},${mouseY - 10})`);
const text = tooltip
.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", "12px")
.attr("dy", "-0.5em")
.text(tooltipText);
const bbox = (text.node() as SVGTextElement).getBBox();
const padding = 8;
tooltip
.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + padding * 2)
.attr("height", bbox.height + padding * 2)
.attr("fill", "rgba(0,0,0,0.85)")
.attr("rx", 6);
})
.on("mouseout", function () {
d3.select(this).attr("opacity", 1);
g.selectAll(".tooltip").remove();
});
}
});
// 차트 제목
if (config.title) {
svg
.append("text")
.attr("x", width / 2)
.attr("y", 20)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-weight", "bold")
.text(config.title);
}
// X축 라벨
if (config.xAxisLabel) {
svg
.append("text")
.attr("x", width / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.style("font-size", "12px")
.style("fill", "#666")
.text(config.xAxisLabel);
}
// Y축 라벨
if (config.yAxisLabel) {
svg
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 15)
.attr("text-anchor", "middle")
.style("font-size", "12px")
.style("fill", "#666")
.text(config.yAxisLabel);
}
// 범례
if (config.showLegend !== false && data.datasets.length > 1) {
const legend = svg.append("g").attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`);
data.datasets.forEach((dataset, i) => {
const legendRow = legend.append("g").attr("transform", `translate(0, ${i * 25})`);
legendRow
.append("rect")
.attr("width", 15)
.attr("height", 15)
.attr("fill", dataset.color || colors[i % colors.length])
.attr("rx", 3);
legendRow
.append("text")
.attr("x", 20)
.attr("y", 12)
.style("font-size", "11px")
.style("fill", "#666")
.text(dataset.label);
});
}
}, [data, config, width, height]);
return <svg ref={svgRef} width={width} height={height} />;
}

1
frontend/components/admin/dashboard/charts/index.ts
View File

@ -1,5 +1,6 @@
export { Chart } from "./Chart";
export { BarChart } from "./BarChart";
export { HorizontalBarChart } from "./HorizontalBarChart";
export { LineChart } from "./LineChart";
export { AreaChart } from "./AreaChart";
export { PieChart } from "./PieChart";

1
frontend/components/admin/dashboard/types.ts
View File

@ -6,6 +6,7 @@ export type ElementType = "chart" | "widget";
export type ElementSubtype =
| "bar"
| "horizontal-bar"
| "pie"
| "line"
| "area"