Stabilize project flows and reporting
This commit is contained in:
b17301
+183
-161
@@ -8,12 +8,14 @@
|
||||
display: grid;
|
||||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.summary-stack {
|
||||
.summary-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-grid {
|
||||
@@ -26,7 +28,7 @@
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
margin-top: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -35,13 +37,14 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #363b44;
|
||||
color: #2f3c49;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
background: rgba(255,255,255,0.92);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
@@ -56,24 +59,25 @@
|
||||
radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 36%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
padding: 18px 20px 20px;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1200 / 420;
|
||||
min-height: 320px;
|
||||
aspect-ratio: 1560 / 620;
|
||||
min-height: 460px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.expense-chart-svg {
|
||||
aspect-ratio: 1600 / 420;
|
||||
aspect-ratio: 1560 / 660;
|
||||
min-height: 510px;
|
||||
}
|
||||
|
||||
.chart-note {
|
||||
@@ -83,49 +87,60 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.summary-overview {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: 14px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.chart-stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.summary-stack .panel {
|
||||
padding: 14px;
|
||||
gap: 12px;
|
||||
.summary-overview .stat-card,
|
||||
.chart-stack .stat-card {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.summary-stack .section-title h2,
|
||||
.summary-overview .section-title h2,
|
||||
.chart-stack .section-title h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.summary-stack .field select {
|
||||
.summary-overview .field select {
|
||||
min-width: 0;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary-stack .stat-card {
|
||||
padding: 10px 12px;
|
||||
.summary-overview .stat-card {
|
||||
padding: 14px 14px 15px;
|
||||
border-radius: 12px;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.summary-stack .stat-card .label {
|
||||
font-size: 11px;
|
||||
.summary-overview .stat-card .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.summary-stack .stat-card .value {
|
||||
font-size: 20px;
|
||||
.summary-overview .stat-card .value {
|
||||
font-size: 22px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.summary-layout,
|
||||
.summary-panel,
|
||||
.filter-grid,
|
||||
.metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -136,50 +151,44 @@
|
||||
|
||||
{% block content %}
|
||||
<section class="panel">
|
||||
<div class="summary-layout">
|
||||
<div class="summary-stack">
|
||||
<section class="panel">
|
||||
<div class="section-title">
|
||||
<h2>수익/비용 현황</h2>
|
||||
<div class="section-title" style="margin-bottom: 14px;">
|
||||
<h2>수익/비용 현황</h2>
|
||||
</div>
|
||||
<div class="summary-panel">
|
||||
<div class="summary-overview">
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<select id="granularity" aria-label="보기 기준">
|
||||
<option value="yearly">연간</option>
|
||||
<option value="monthly">월간</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-grid">
|
||||
<div class="field">
|
||||
<select id="granularity" aria-label="보기 기준">
|
||||
<option value="yearly">연간</option>
|
||||
<option value="monthly">월간</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<select id="yearFilter" aria-label="연도 선택">
|
||||
<option value="recent10">최근 10개년</option>
|
||||
{% for year in available_years %}
|
||||
<option value="{{ year }}">{{ year }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<select id="yearFilter" aria-label="연도 선택">
|
||||
<option value="recent10">최근 10개년</option>
|
||||
{% for year in available_years %}
|
||||
<option value="{{ year }}">{{ year }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="metric-grid" id="metricGrid"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="metric-grid" id="metricGrid"></div>
|
||||
</div>
|
||||
<div class="chart-stack">
|
||||
<section class="panel">
|
||||
<div class="section-title">
|
||||
<div class="chart-box">
|
||||
<div class="section-title" style="margin-bottom: 10px;">
|
||||
<h2>비용 구조</h2>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<div class="legend chart-legend" id="expenseLegend"></div>
|
||||
<svg id="expenseChart" class="chart-svg expense-chart-svg" viewBox="0 0 1600 420" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="section-title">
|
||||
<div class="legend chart-legend" id="expenseLegend"></div>
|
||||
<svg id="expenseChart" class="chart-svg expense-chart-svg" viewBox="0 0 1560 660" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<div class="section-title" style="margin-bottom: 10px;">
|
||||
<h2>수금/비용/영업수지 그래프</h2>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<div class="legend chart-legend" id="balanceLegend"></div>
|
||||
<svg id="balanceChart" class="chart-svg" viewBox="0 0 1200 420" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
</section>
|
||||
<div class="legend chart-legend" id="balanceLegend"></div>
|
||||
<svg id="balanceChart" class="chart-svg" viewBox="0 0 1560 620" preserveAspectRatio="xMidYMid meet"></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -190,30 +199,20 @@
|
||||
const yearlySeries = {{ yearly_financial_series | tojson }};
|
||||
const monthlySeries = {{ monthly_financial_series | tojson }};
|
||||
const availableYears = [...new Set(yearlySeries.map((item) => item.year).filter((year) => year !== null && year !== undefined))];
|
||||
const annualMetricCards = {{ annual_metric_cards | tojson }};
|
||||
const annualExpenseChartMetrics = {{ annual_expense_chart_metrics | tojson }};
|
||||
const annualBalanceChartMetrics = {{ annual_balance_chart_metrics | tojson }};
|
||||
|
||||
const palette = {
|
||||
revenue_sum: "#0f766e",
|
||||
project_cost_sum: "#0ea5a4",
|
||||
support_cost_sum: "#67b7dc",
|
||||
support_sga_sum: "#f59e0b",
|
||||
field_sga_sum: "#f97316",
|
||||
labor_sum: "#8b5cf6",
|
||||
outsourcing_sum: "#ec4899",
|
||||
total_expense: "#1d4ed8",
|
||||
operating_balance: "#dc2626",
|
||||
};
|
||||
const palette = Object.fromEntries(
|
||||
[...annualExpenseChartMetrics, ...annualBalanceChartMetrics].map((option) => [
|
||||
option.item_key,
|
||||
option.value,
|
||||
]),
|
||||
);
|
||||
|
||||
const labels = {
|
||||
revenue_sum: "수금",
|
||||
project_cost_sum: "원가(프로젝트)",
|
||||
support_cost_sum: "원가(지원부서)",
|
||||
support_sga_sum: "판관비(지원부서)",
|
||||
field_sga_sum: "판관비(현업부서)",
|
||||
labor_sum: "원가인건비",
|
||||
outsourcing_sum: "원가외주비",
|
||||
total_expense: "비용합계",
|
||||
operating_balance: "영업수지",
|
||||
};
|
||||
const labels = Object.fromEntries(
|
||||
annualMetricCards.map((option) => [option.item_key, option.label]),
|
||||
);
|
||||
|
||||
function formatNumber(value) {
|
||||
return new Intl.NumberFormat("ko-KR", { maximumFractionDigits: 0 }).format(value || 0);
|
||||
@@ -251,6 +250,43 @@
|
||||
return { tickStep, tickMax };
|
||||
}
|
||||
|
||||
function buildDynamicPositiveAxis(maxValue, width, height, margin) {
|
||||
const safeMax = Math.max(Number(maxValue || 0), 1);
|
||||
const paddedMax = safeMax * 1.08;
|
||||
const tickStep = pickTickStep(paddedMax / 5);
|
||||
const tickMax = Math.max(tickStep, Math.ceil(paddedMax / tickStep) * tickStep);
|
||||
let axis = "";
|
||||
for (let value = 0; value <= tickMax; value += tickStep) {
|
||||
const y = height - margin.bottom - ((height - margin.top - margin.bottom) * value) / tickMax;
|
||||
axis += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8dee5" stroke-dasharray="4 8" />`;
|
||||
axis += `<text x="${margin.left - 14}" y="${y + 5}" text-anchor="end" fill="#52606d" font-size="14" font-weight="800">${formatAxisLabel(value)}</text>`;
|
||||
}
|
||||
axis += `<line x1="${margin.left}" y1="${height - margin.bottom}" x2="${width - margin.right}" y2="${height - margin.bottom}" stroke="#8ba0ae" stroke-width="1.4" />`;
|
||||
return { axis, tickStep, tickMax };
|
||||
}
|
||||
|
||||
function buildDynamicBalanceAxis(maxPositiveValue, minNegativeValue, width, height, margin) {
|
||||
const safePositive = Math.max(Number(maxPositiveValue || 0), 0);
|
||||
const safeNegative = Math.min(Number(minNegativeValue || 0), 0);
|
||||
const paddedPositive = safePositive > 0 ? safePositive * 1.08 : 1000;
|
||||
const paddedNegative = safeNegative < 0 ? safeNegative * 1.08 : 0;
|
||||
const rangeAbs = Math.max(Math.abs(paddedPositive), Math.abs(paddedNegative), 1);
|
||||
const tickStep = pickTickStep(rangeAbs / 4);
|
||||
const positiveMax = Math.max(tickStep, Math.ceil(paddedPositive / tickStep) * tickStep);
|
||||
const negativeMin = safeNegative < 0 ? Math.min(-tickStep, Math.floor(paddedNegative / tickStep) * tickStep) : 0;
|
||||
const plotHeight = height - margin.top - margin.bottom;
|
||||
const totalRange = positiveMax - negativeMin;
|
||||
const zeroY = margin.top + (plotHeight * positiveMax) / totalRange;
|
||||
let axis = "";
|
||||
for (let value = negativeMin; value <= positiveMax; value += tickStep) {
|
||||
const y = margin.top + ((positiveMax - value) / totalRange) * plotHeight;
|
||||
axis += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8dee5" stroke-dasharray="4 8" />`;
|
||||
axis += `<text x="${margin.left - 14}" y="${y + 5}" text-anchor="end" fill="#52606d" font-size="14" font-weight="800">${formatAxisLabel(value)}</text>`;
|
||||
}
|
||||
axis += `<line x1="${margin.left}" y1="${zeroY}" x2="${width - margin.right}" y2="${zeroY}" stroke="#7c8d9a" stroke-width="1.5" />`;
|
||||
return { axis, tickStep, positiveMax, negativeMin, zeroY, totalRange };
|
||||
}
|
||||
|
||||
function renderLegend(targetId, keys) {
|
||||
const target = document.getElementById(targetId);
|
||||
if (!target) return;
|
||||
@@ -298,17 +334,7 @@
|
||||
}
|
||||
|
||||
function renderMetrics(series) {
|
||||
const keys = [
|
||||
"revenue_sum",
|
||||
"project_cost_sum",
|
||||
"support_cost_sum",
|
||||
"support_sga_sum",
|
||||
"field_sga_sum",
|
||||
"labor_sum",
|
||||
"outsourcing_sum",
|
||||
"total_expense",
|
||||
"operating_balance",
|
||||
];
|
||||
const keys = annualMetricCards.map((option) => option.item_key);
|
||||
const totals = {};
|
||||
keys.forEach((key) => {
|
||||
totals[key] = series.reduce((sum, item) => sum + (item[key] || 0), 0);
|
||||
@@ -334,35 +360,21 @@
|
||||
return { axis, tickMax };
|
||||
}
|
||||
|
||||
function buildSignedAxis(maxPositiveValue, minNegativeValue, width, height, margin) {
|
||||
const forcedNegativeFloor = -20000000000;
|
||||
const normalizedNegative = Math.min(Number(minNegativeValue || 0), forcedNegativeFloor);
|
||||
const rangeMax = Math.max(Math.abs(maxPositiveValue || 0), Math.abs(normalizedNegative || 0), 1);
|
||||
const { tickStep, tickMax } = buildPositiveAxisScale(rangeMax, 4);
|
||||
const plotHeight = height - margin.top - margin.bottom;
|
||||
const zeroY = margin.top + (plotHeight * tickMax) / (tickMax * 2);
|
||||
let axis = "";
|
||||
for (let value = -tickMax; value <= tickMax; value += tickStep) {
|
||||
const y = zeroY - (plotHeight * value) / (tickMax * 2);
|
||||
axis += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8dee5" stroke-dasharray="3 7" />`;
|
||||
axis += `<text x="${margin.left - 12}" y="${y + 4}" text-anchor="end" fill="#5a6672" font-size="11" font-weight="700">${formatAxisLabel(value)}</text>`;
|
||||
}
|
||||
axis += `<line x1="${margin.left}" y1="${zeroY}" x2="${width - margin.right}" y2="${zeroY}" stroke="#8ba0ae" stroke-width="1.2" />`;
|
||||
return { axis, tickMax, zeroY };
|
||||
}
|
||||
|
||||
function renderEmptyChart(svgId, message) {
|
||||
const svg = document.getElementById(svgId);
|
||||
if (!svg) return;
|
||||
const viewBox = (svg.getAttribute("viewBox") || "0 0 1400 560").split(/\s+/).map(Number);
|
||||
const width = viewBox[2] || 1400;
|
||||
const height = viewBox[3] || 560;
|
||||
svg.innerHTML = `
|
||||
<rect x="0" y="0" width="1200" height="420" rx="8" fill="#f7fafb" stroke="#d6e2e8"></rect>
|
||||
<text x="600" y="210" text-anchor="middle" fill="#667887" font-size="18" font-weight="700">${message}</text>
|
||||
<rect x="0" y="0" width="${width}" height="${height}" rx="8" fill="#f7fafb" stroke="#d6e2e8"></rect>
|
||||
<text x="${width / 2}" y="${height / 2}" text-anchor="middle" fill="#667887" font-size="24" font-weight="800">${message}</text>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderExpenseChart(series) {
|
||||
const svg = document.getElementById("expenseChart");
|
||||
const keys = ["labor_sum", "outsourcing_sum", "project_cost_sum", "support_cost_sum", "support_sga_sum", "field_sga_sum"];
|
||||
const keys = annualExpenseChartMetrics.map((option) => option.item_key);
|
||||
const isMonthlyView = series.some((item) => String(item.label || "").includes("월"));
|
||||
renderLegend("expenseLegend", keys);
|
||||
if (!series.length) {
|
||||
@@ -370,77 +382,62 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const width = 1600;
|
||||
const height = 420;
|
||||
const margin = { top: 30, right: isMonthlyView ? 72 : 36, bottom: 74, left: 98 };
|
||||
const barWidth = (width - margin.left - margin.right) / series.length * (isMonthlyView ? 0.18 : 0.29);
|
||||
const width = 1560;
|
||||
const height = 660;
|
||||
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
const margin = { top: 54, right: 36, bottom: 96, left: 124 };
|
||||
const plotWidth = width - margin.left - margin.right;
|
||||
const plotHeight = height - margin.top - margin.bottom;
|
||||
const barWidth = (plotWidth / series.length) * (isMonthlyView ? 0.36 : 0.42);
|
||||
const step = (width - margin.left - margin.right) / series.length;
|
||||
const maxValue = Math.max(...series.map((item) => keys.reduce((sum, key) => sum + (item[key] || 0), 0)), 1);
|
||||
const { axis, tickMax } = buildAxis(maxValue, width, height, margin);
|
||||
const { axis, tickMax } = buildDynamicPositiveAxis(maxValue, width, height, margin);
|
||||
let markup = `
|
||||
<defs>
|
||||
<filter id="expenseShadow" x="-20%" y="-20%" width="140%" height="160%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.12)" />
|
||||
</filter>
|
||||
</defs>
|
||||
<rect x="${margin.left}" y="${margin.top}" width="${width - margin.left - margin.right}" height="${height - margin.top - margin.bottom}" rx="6" fill="rgba(255,255,255,0.7)" stroke="#dde7ec"></rect>
|
||||
<rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="6" fill="rgba(255,255,255,0.7)" stroke="#dde7ec"></rect>
|
||||
${axis}
|
||||
`;
|
||||
series.forEach((item, index) => {
|
||||
let cumulative = 0;
|
||||
const total = keys.reduce((sum, key) => sum + (item[key] || 0), 0);
|
||||
const x = margin.left + index * step + (step - barWidth) / 2;
|
||||
const detailX = x + barWidth + 8;
|
||||
const labelEntries = [];
|
||||
keys.forEach((key) => {
|
||||
const value = item[key] || 0;
|
||||
const barHeight = ((height - margin.top - margin.bottom) * value) / tickMax;
|
||||
const y = height - margin.bottom - barHeight - ((height - margin.top - margin.bottom) * cumulative) / tickMax;
|
||||
const barHeight = (plotHeight * value) / tickMax;
|
||||
const y = height - margin.bottom - barHeight - (plotHeight * cumulative) / tickMax;
|
||||
cumulative += value;
|
||||
markup += `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="2" fill="${palette[key]}" filter="url(#expenseShadow)" />`;
|
||||
if (value > 0) {
|
||||
const percent = total ? ((value / total) * 100).toFixed(1) : "0.0";
|
||||
labelEntries.push({
|
||||
key,
|
||||
value,
|
||||
percent,
|
||||
desiredY: y + (barHeight / 2),
|
||||
});
|
||||
if (value > 0 && barHeight >= 34) {
|
||||
const percent = total ? `${((value / total) * 100).toFixed(1)}%` : "0.0%";
|
||||
markup += `<text x="${x + barWidth / 2}" y="${y + Math.min(barHeight / 2, 22)}" text-anchor="middle" fill="#ffffff" font-size="${isMonthlyView ? 12.5 : 13.5}" font-weight="900">${percent}</text>`;
|
||||
}
|
||||
});
|
||||
labelEntries.sort((a, b) => a.desiredY - b.desiredY);
|
||||
const minY = margin.top + 12;
|
||||
const maxY = height - margin.bottom - 12;
|
||||
const gap = isMonthlyView ? 16 : 18;
|
||||
let lastY = minY - gap;
|
||||
labelEntries.forEach((entry) => {
|
||||
const lineY = Math.max(entry.desiredY, lastY + gap, minY);
|
||||
const finalY = Math.min(lineY, maxY);
|
||||
lastY = finalY;
|
||||
markup += `<rect x="${detailX}" y="${finalY - 10}" width="8" height="8" rx="1.5" fill="${palette[entry.key]}"></rect>`;
|
||||
markup += `<text x="${detailX + 14}" y="${finalY + 4}" text-anchor="start" fill="#6b7b88" font-size="9" font-weight="700">${entry.percent}%</text>`;
|
||||
});
|
||||
if (total > 0) {
|
||||
const topY = height - margin.bottom - ((height - margin.top - margin.bottom) * total) / tickMax;
|
||||
markup += `<text x="${x + barWidth / 2}" y="${Math.max(topY - 10, margin.top + 10)}" text-anchor="middle" fill="#314555" font-size="10.5" font-weight="800">${formatAxisLabel(total)}</text>`;
|
||||
const topY = height - margin.bottom - (plotHeight * total) / tickMax;
|
||||
markup += `<text x="${x + barWidth / 2}" y="${Math.max(topY - 14, margin.top + 18)}" text-anchor="middle" fill="#2d3c4a" font-size="${isMonthlyView ? 14 : 15.5}" font-weight="900">${formatAxisLabel(total)}</text>`;
|
||||
}
|
||||
markup += `<text x="${x + barWidth / 2}" y="${height - margin.bottom + 20}" text-anchor="middle" fill="#5a6672" font-size="11.5" font-weight="700">${item.label}</text>`;
|
||||
markup += `<text x="${x + barWidth / 2}" y="${height - margin.bottom + 30}" text-anchor="middle" fill="#53606c" font-size="${isMonthlyView ? 14 : 15}" font-weight="800">${item.label}</text>`;
|
||||
});
|
||||
svg.innerHTML = markup;
|
||||
}
|
||||
|
||||
function renderBalanceChart(series) {
|
||||
const svg = document.getElementById("balanceChart");
|
||||
const metrics = ["revenue_sum", "total_expense", "operating_balance"];
|
||||
const metrics = annualBalanceChartMetrics.map((option) => option.item_key);
|
||||
renderLegend("balanceLegend", metrics);
|
||||
if (!series.length) {
|
||||
renderEmptyChart("balanceChart", "표시할 수익/비용 데이터가 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const width = 1200;
|
||||
const height = 420;
|
||||
const margin = { top: 30, right: 24, bottom: 74, left: 98 };
|
||||
const width = 1560;
|
||||
const height = 620;
|
||||
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
const margin = { top: 56, right: 34, bottom: 100, left: 124 };
|
||||
const plotWidth = width - margin.left - margin.right;
|
||||
const plotHeight = height - margin.top - margin.bottom;
|
||||
const maxPositiveValue = Math.max(...series.flatMap((item) => [
|
||||
@@ -449,11 +446,11 @@
|
||||
Math.max(item.operating_balance || 0, 0),
|
||||
]), 1);
|
||||
const minNegativeValue = Math.min(...series.map((item) => Math.min(item.operating_balance || 0, 0)), 0);
|
||||
const { axis, tickMax, zeroY } = buildSignedAxis(maxPositiveValue, minNegativeValue, width, height, margin);
|
||||
const { axis, positiveMax, negativeMin, zeroY, totalRange } = buildDynamicBalanceAxis(maxPositiveValue, minNegativeValue, width, height, margin);
|
||||
const groupWidth = plotWidth / Math.max(series.length, 1);
|
||||
const groupGap = groupWidth * 0.22;
|
||||
const innerGap = 0;
|
||||
const barWidth = Math.min((groupWidth - groupGap * 2) / metrics.length, 44);
|
||||
const barWidth = Math.min((groupWidth - groupGap * 2) / metrics.length, 72);
|
||||
const actualGroupWidth = barWidth * metrics.length + innerGap * (metrics.length - 1);
|
||||
const groupStartOffset = (groupWidth - actualGroupWidth) / 2;
|
||||
let markup = `
|
||||
@@ -467,21 +464,46 @@
|
||||
`;
|
||||
series.forEach((item, index) => {
|
||||
const baseX = margin.left + index * groupWidth;
|
||||
const positiveLabels = [];
|
||||
const negativeLabels = [];
|
||||
metrics.forEach((key, metricIndex) => {
|
||||
const rawValue = Number(item[key] || 0);
|
||||
const value = key === "operating_balance" ? rawValue : Math.max(rawValue, 0);
|
||||
const barHeight = (plotHeight * Math.abs(value)) / (tickMax * 2);
|
||||
const clampedValue = Math.max(negativeMin, Math.min(positiveMax, value));
|
||||
const barHeight = (plotHeight * Math.abs(clampedValue)) / totalRange;
|
||||
const x = baseX + groupStartOffset + metricIndex * (barWidth + innerGap);
|
||||
const y = value < 0 ? zeroY : zeroY - barHeight;
|
||||
const y = clampedValue < 0 ? zeroY : zeroY - barHeight;
|
||||
markup += `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="2" fill="${palette[key]}" filter="url(#balanceShadow)" />`;
|
||||
if (value !== 0) {
|
||||
const labelY = value < 0
|
||||
? Math.min(y + barHeight + 14, height - margin.bottom + 6)
|
||||
: Math.max(y - 8, margin.top + 12);
|
||||
markup += `<text x="${x + barWidth / 2}" y="${labelY}" text-anchor="middle" fill="#314555" font-size="9.5" font-weight="800">${formatAxisLabel(value)}</text>`;
|
||||
if (clampedValue !== 0) {
|
||||
const label = {
|
||||
x: x + barWidth / 2,
|
||||
desiredY: clampedValue < 0
|
||||
? Math.min(y + barHeight + 22, height - margin.bottom + 12)
|
||||
: Math.max(y - 14, margin.top + 18),
|
||||
text: formatAxisLabel(value),
|
||||
};
|
||||
if (clampedValue < 0) {
|
||||
negativeLabels.push(label);
|
||||
} else {
|
||||
positiveLabels.push(label);
|
||||
}
|
||||
}
|
||||
});
|
||||
markup += `<text x="${baseX + groupWidth / 2}" y="${height - margin.bottom + 20}" text-anchor="middle" fill="#5a6672" font-size="11.5" font-weight="700">${item.label}</text>`;
|
||||
positiveLabels.sort((a, b) => a.desiredY - b.desiredY);
|
||||
let lastPositiveY = margin.top - 24;
|
||||
positiveLabels.forEach((label) => {
|
||||
const y = Math.max(label.desiredY, lastPositiveY + 18);
|
||||
lastPositiveY = y;
|
||||
markup += `<text x="${label.x}" y="${y}" text-anchor="middle" fill="#2d3c4a" font-size="13.5" font-weight="900">${label.text}</text>`;
|
||||
});
|
||||
negativeLabels.sort((a, b) => a.desiredY - b.desiredY);
|
||||
let lastNegativeY = zeroY + 18;
|
||||
negativeLabels.forEach((label) => {
|
||||
const y = Math.max(label.desiredY, lastNegativeY + 18);
|
||||
lastNegativeY = y;
|
||||
markup += `<text x="${label.x}" y="${Math.min(y, height - margin.bottom + 34)}" text-anchor="middle" fill="#2d3c4a" font-size="13.5" font-weight="900">${label.text}</text>`;
|
||||
});
|
||||
markup += `<text x="${baseX + groupWidth / 2}" y="${height - margin.bottom + 34}" text-anchor="middle" fill="#53606c" font-size="15" font-weight="800">${item.label}</text>`;
|
||||
});
|
||||
|
||||
svg.innerHTML = markup;
|
||||
|
||||
Reference in New Issue
Block a user