diff --git a/frontend/components/admin/dashboard/charts/BarChart.tsx b/frontend/components/admin/dashboard/charts/BarChart.tsx index fd401ec3..3f619d05 100644 --- a/frontend/components/admin/dashboard/charts/BarChart.tsx +++ b/frontend/components/admin/dashboard/charts/BarChart.tsx @@ -32,11 +32,12 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr // X축 스케일 (카테고리) const xScale = d3.scaleBand().domain(data.labels).range([0, chartWidth]).padding(0.2); - // Y축 스케일 (값) - const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0; + // Y축 스케일 (값) - 절대값 기준 + const allValues = data.datasets.flatMap((ds) => ds.data); + const maxAbsValue = d3.max(allValues.map((v) => Math.abs(v))) || 0; const yScale = d3 .scaleLinear() - .domain([0, maxValue * 1.1]) + .domain([0, maxAbsValue * 1.1]) .range([chartHeight, 0]) .nice(); @@ -49,23 +50,12 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr .style("text-anchor", "end") .style("font-size", "12px"); - // Y축 그리기 - g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px"); + // Y축 그리기 (값 표시 제거) + g.append("g") + .call(d3.axisLeft(yScale).tickFormat(() => "")) + .style("font-size", "12px"); - // 그리드 라인 - if (config.showGrid !== false) { - g.append("g") - .attr("class", "grid") - .call( - d3 - .axisLeft(yScale) - .tickSize(-chartWidth) - .tickFormat(() => ""), - ) - .style("stroke-dasharray", "3,3") - .style("stroke", "#e0e0e0") - .style("opacity", 0.5); - } + // 그리드 라인 제거됨 // 색상 팔레트 const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"]; @@ -84,18 +74,48 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr .attr("y", chartHeight) .attr("width", barWidth) .attr("height", 0) - .attr("fill", dataset.color || colors[i % colors.length]) + .attr("fill", (d) => { + // 음수면 빨간색 계열, 양수면 원래 색상 + if (d < 0) { + return "#EF4444"; + } + return dataset.color || colors[i % colors.length]; + }) .attr("rx", 4); - // 애니메이션 + // 애니메이션 - 절대값 기준으로 위쪽으로만 렌더링 if (config.enableAnimation !== false) { bars .transition() .duration(config.animationDuration || 750) - .attr("y", (d) => yScale(d)) - .attr("height", (d) => chartHeight - yScale(d)); + .attr("y", (d) => yScale(Math.abs(d))) + .attr("height", (d) => chartHeight - yScale(Math.abs(d))); } else { - bars.attr("y", (d) => yScale(d)).attr("height", (d) => chartHeight - yScale(d)); + bars.attr("y", (d) => yScale(Math.abs(d))).attr("height", (d) => chartHeight - yScale(Math.abs(d))); + } + + // 막대 위에 값 표시 (음수는 - 부호 포함) + const labels = g + .selectAll(`.label-${i}`) + .data(dataset.data) + .enter() + .append("text") + .attr("class", `label-${i}`) + .attr("x", (_, j) => (xScale(data.labels[j]) || 0) + barWidth * i + barWidth / 2) + .attr("y", (d) => yScale(Math.abs(d)) - 5) + .attr("text-anchor", "middle") + .style("font-size", "11px") + .style("font-weight", "500") + .style("fill", (d) => (d < 0 ? "#EF4444" : "#333")) + .text((d) => (d < 0 ? "-" : "") + Math.abs(d).toLocaleString()); + + // 애니메이션 (라벨) + if (config.enableAnimation !== false) { + labels + .style("opacity", 0) + .transition() + .duration(config.animationDuration || 750) + .style("opacity", 1); } // 툴팁 diff --git a/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx b/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx index d5785bf8..60fcb666 100644 --- a/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx +++ b/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx @@ -32,37 +32,25 @@ export function HorizontalBarChart({ data, config, width = 600, height = 400 }: // 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; + // X축 스케일 (값) - 수평이므로 X축이 값, 절대값 기준 + const allValues = data.datasets.flatMap((ds) => ds.data); + const maxAbsValue = d3.max(allValues.map((v) => Math.abs(v))) || 0; const xScale = d3 .scaleLinear() - .domain([0, maxValue * 1.1]) + .domain([0, maxAbsValue * 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축 그리기 (값) + // X축 그리기 (값 표시 제거) g.append("g") .attr("transform", `translate(0,${chartHeight})`) - .call(d3.axisBottom(xScale)) + .call(d3.axisBottom(xScale).tickFormat(() => "")) .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"]; @@ -81,17 +69,49 @@ export function HorizontalBarChart({ data, config, width = 600, height = 400 }: .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("fill", (d) => { + // 음수면 빨간색 계열, 양수면 원래 색상 + if (d < 0) { + return "#EF4444"; + } + return dataset.color || colors[i % colors.length]; + }) .attr("ry", 4); - // 애니메이션 + // 애니메이션 - 절대값 기준으로 오른쪽으로만 렌더링 if (config.enableAnimation !== false) { bars .transition() .duration(config.animationDuration || 750) - .attr("width", (d) => xScale(d)); + .attr("x", 0) + .attr("width", (d) => xScale(Math.abs(d))); } else { - bars.attr("width", (d) => xScale(d)); + bars.attr("x", 0).attr("width", (d) => xScale(Math.abs(d))); + } + + // 막대 끝에 값 표시 (음수는 - 부호 포함) + const labels = g + .selectAll(`.label-${i}`) + .data(dataset.data) + .enter() + .append("text") + .attr("class", `label-${i}`) + .attr("x", (d) => xScale(Math.abs(d)) + 5) + .attr("y", (_, j) => (yScale(data.labels[j]) || 0) + barHeight * i + barHeight / 2) + .attr("text-anchor", "start") + .attr("dominant-baseline", "middle") + .style("font-size", "11px") + .style("font-weight", "500") + .style("fill", (d) => (d < 0 ? "#EF4444" : "#333")) + .text((d) => (d < 0 ? "-" : "") + Math.abs(d).toLocaleString()); + + // 애니메이션 (라벨) + if (config.enableAnimation !== false) { + labels + .style("opacity", 0) + .transition() + .duration(config.animationDuration || 750) + .style("opacity", 1); } // 툴팁 diff --git a/frontend/components/admin/dashboard/charts/StackedBarChart.tsx b/frontend/components/admin/dashboard/charts/StackedBarChart.tsx index bf1d8be7..1a18c622 100644 --- a/frontend/components/admin/dashboard/charts/StackedBarChart.tsx +++ b/frontend/components/admin/dashboard/charts/StackedBarChart.tsx @@ -66,24 +66,12 @@ export function StackedBarChart({ data, config, width = 600, height = 400 }: Sta .style("text-anchor", "end") .style("font-size", "12px"); - // Y축 그리기 - const yAxis = config.stackMode === "percent" ? d3.axisLeft(yScale).tickFormat((d) => `${d}%`) : d3.axisLeft(yScale); - g.append("g").call(yAxis).style("font-size", "12px"); + // Y축 그리기 (값 표시 제거) + g.append("g") + .call(d3.axisLeft(yScale).tickFormat(() => "")) + .style("font-size", "12px"); - // 그리드 라인 - if (config.showGrid !== false) { - g.append("g") - .attr("class", "grid") - .call( - d3 - .axisLeft(yScale) - .tickSize(-chartWidth) - .tickFormat(() => ""), - ) - .style("stroke-dasharray", "3,3") - .style("stroke", "#e0e0e0") - .style("opacity", 0.5); - } + // 그리드 라인 제거됨 // 색상 팔레트 const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"]; @@ -131,6 +119,47 @@ export function StackedBarChart({ data, config, width = 600, height = 400 }: Sta .attr("height", (d) => yScale(d[0] as number) - yScale(d[1] as number)); } + // 각 세그먼트에 값 표시 + layers.each(function (layerData, layerIndex) { + d3.select(this) + .selectAll("text") + .data(layerData) + .enter() + .append("text") + .attr("x", (d) => (xScale((d.data as any).label) || 0) + xScale.bandwidth() / 2) + .attr("y", (d) => { + const segmentHeight = yScale(d[0] as number) - yScale(d[1] as number); + const segmentMiddle = yScale(d[1] as number) + segmentHeight / 2; + return segmentMiddle; + }) + .attr("text-anchor", "middle") + .attr("dominant-baseline", "middle") + .style("font-size", "11px") + .style("font-weight", "500") + .style("fill", "white") + .style("pointer-events", "none") + .text((d) => { + const value = (d[1] as number) - (d[0] as number); + if (config.stackMode === "percent") { + return value > 5 ? `${value.toFixed(0)}%` : ""; + } + return value > 0 ? value.toLocaleString() : ""; + }) + .style("opacity", 0); + + // 애니메이션 (라벨) + if (config.enableAnimation !== false) { + d3.select(this) + .selectAll("text") + .transition() + .delay(config.animationDuration || 750) + .duration(300) + .style("opacity", 1); + } else { + d3.select(this).selectAll("text").style("opacity", 1); + } + }); + // 툴팁 if (config.showTooltip !== false) { bars