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

대시보드 기타 수정사항 적용

Browse Source
This commit is contained in:
dohyeons
2025-10-27 15:19:48 +09:00
parent d4579e4221
commit 270c322daf
6 changed files with 72 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/components/admin/dashboard/charts/PieChart.tsx
View File

@@ -24,12 +24,17 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove();
const margin = { top: 40, right: 150, bottom: 40, left: 120 };
// 범례를 위한 여백 확보 (아래 80px)
const legendHeight = config.showLegend !== false ? 80 : 0;
const margin = { top: 20, right: 20, bottom: 20 + legendHeight, left: 20 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;
const chartHeight = height - margin.top - margin.bottom - legendHeight;
const radius = Math.min(chartWidth, chartHeight) / 2;
const g = svg.append("g").attr("transform", `translate(${width / 2},${height / 2})`);
// 차트를 위쪽에 배치 (범례 공간 확보)
const centerX = width / 2;
const centerY = margin.top + radius + 20;
const g = svg.append("g").attr("transform", `translate(${centerX},${centerY})`);
// 색상 팔레트
const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899"];
@@ -138,10 +143,10 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
// 범례 (차트 아래, 가로 배치, 중앙 정렬)
if (config.showLegend !== false) {
const itemSpacing = 140; // 각 범례 항목 사이 간격
const itemSpacing = 100; // 각 범례 항목 사이 간격 (줄임)
const totalWidth = pieData.length * itemSpacing;
const legendStartX = (width - totalWidth) / 2; // 시작 위치
const legendY = height - 40; // 차트 아래 (여백 확보)
const legendY = centerY + radius + 40; // 차트 아래 40px
const legend = svg.append("g").attr("class", "legend");
@@ -152,19 +157,19 @@ export function PieChart({ data, config, width = 500, height = 500, isDonut = fa
legendItem
.append("rect")
.attr("x", -7.5) // 사각형을 중앙 기준으로
.attr("y", -7.5)
.attr("width", 15)
.attr("height", 15)
.attr("x", -6) // 사각형을 중앙 기준으로
.attr("y", -6)
.attr("width", 12)
.attr("height", 12)
.attr("fill", colors[i % colors.length])
.attr("rx", 3);
.attr("rx", 2);
legendItem
.append("text")
.attr("x", 0)
.attr("y", 20)
.attr("y", 18)
.attr("text-anchor", "middle") // 텍스트 중앙 정렬
.style("font-size", "11px")
.style("font-size", "10px")
.style("fill", "#333")
.text(`${d.label} (${d.value})`);
});