chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차트 범례 수정 완료

Browse Source
This commit is contained in:
leeheejin
2025-10-21 10:05:39 +09:00
parent 12e5d99339
commit 5fb9e19e5a
9 changed files with 101 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/components/admin/dashboard/charts/BarChart.tsx
View File

@@ -23,7 +23,7 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove();
const margin = { top: 40, right: 80, bottom: 60, left: 60 };
const margin = { top: 40, right: 80, bottom: 80, left: 60 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;
@@ -196,24 +196,30 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr
.text(config.yAxisLabel);
}
// 범례
if (config.showLegend !== false && data.datasets.length > 1) {
// 범례 (차트 하단 중앙)
if (config.showLegend !== false && data.datasets.length > 0) {
const legendItemWidth = 120; // 각 범례 항목의 너비
const totalLegendWidth = data.datasets.length * legendItemWidth;
const legendStartX = (width - totalLegendWidth) / 2; // 중앙 정렬
const legend = svg
.append("g")
.attr("class", "legend")
.attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`);
.attr("transform", `translate(${legendStartX}, ${height - 20})`);
data.datasets.forEach((dataset, i) => {
const legendRow = legend.append("g").attr("transform", `translate(0, ${i * 25})`);
const legendItem = legend
.append("g")
.attr("transform", `translate(${i * legendItemWidth}, 0)`);
legendRow
legendItem
.append("rect")
.attr("width", 15)
.attr("height", 15)
.attr("fill", dataset.color || colors[i % colors.length])
.attr("rx", 3);
legendRow
legendItem
.append("text")
.attr("x", 20)
.attr("y", 12)