596 lines
24 KiB
HTML
596 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}대시보드{% endblock %}
|
|
|
|
{% block head_extra %}
|
|
<style>
|
|
.dashboard-topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dashboard-topbar-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-year-select {
|
|
width: 180px;
|
|
}
|
|
|
|
.upload-actions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.upload-actions:hover .upload-tooltip,
|
|
.upload-actions:focus-within .upload-tooltip {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.upload-tooltip {
|
|
position: absolute;
|
|
top: calc(100% + 12px);
|
|
right: 0;
|
|
width: 280px;
|
|
background: rgba(20, 20, 20, 0.96);
|
|
color: #f8fbfd;
|
|
border-radius: 14px;
|
|
padding: 14px 16px;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
box-shadow: 0 18px 35px rgba(20, 20, 20, 0.18);
|
|
opacity: 0;
|
|
transform: translateY(-6px);
|
|
pointer-events: none;
|
|
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.upload-tooltip::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 22px;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 8px solid rgba(20, 20, 20, 0.96);
|
|
}
|
|
|
|
.hidden-file-input {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
|
|
gap: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.dashboard-status-panel {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-status-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-status-grid .stat-card {
|
|
min-height: 84px;
|
|
}
|
|
|
|
.dashboard-status-grid .stat-card .value {
|
|
font-size: clamp(18px, 1.5vw, 28px);
|
|
line-height: 1.12;
|
|
}
|
|
|
|
.dashboard-chart-stack {
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.chart-panel {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.chart-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chart-panel-header h3 {
|
|
font-size: 18px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.filter-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 180px));
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
|
|
radial-gradient(circle at top left, rgba(24, 24, 27, 0.045), transparent 38%);
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
padding: 14px 16px 16px;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.legend-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 12px;
|
|
}
|
|
|
|
.legend-box.center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.legend-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 10px;
|
|
padding: 6px 10px;
|
|
background: rgba(255,255,255,0.92);
|
|
border: 1px solid var(--line);
|
|
color: #363b44;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.legend-swatch {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.chart-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 1120 / 390;
|
|
min-height: 300px;
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dashboard-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-chart-stack {
|
|
grid-template-rows: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.filter-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="panel">
|
|
<div class="dashboard-topbar">
|
|
<div class="section-title" style="margin-bottom: 0;">
|
|
<h2>사업현황</h2>
|
|
</div>
|
|
<div class="dashboard-topbar-actions">
|
|
<form method="get" action="/" id="dashboardYearForm">
|
|
<select id="dashboardYearSelect" class="dashboard-year-select" name="overview_year" aria-label="사업현황 연도 선택">
|
|
<option value="" {% if not overview_selected_year %}selected{% endif %}>최근 10개년</option>
|
|
{% for year in available_years %}
|
|
<option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</form>
|
|
<div class="upload-actions">
|
|
<form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
|
|
<input id="excel_file" class="hidden-file-input" type="file" name="excel_file" accept=".xlsx,.xlsm,.xltx,.xltm" required>
|
|
<button type="button" id="uploadButton" class="button-icon" title="업로드 저장" aria-label="업로드 저장">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M6 4h9l3 3v13H6z"></path>
|
|
<path d="M9 4v6h6V4"></path>
|
|
<path d="M9 17h6"></path>
|
|
</svg>
|
|
<span class="sr-only">업로드 저장</span>
|
|
</button>
|
|
</form>
|
|
<div class="upload-tooltip">엑셀 파일을 선택하면 회계 데이터를 DB에 바로 저장합니다. 프로젝트 폴더에 둔 파일 외에 추가 파일을 수동 반영할 때 사용하세요.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-layout">
|
|
<section class="dashboard-status-panel">
|
|
<div class="dashboard-status-grid">
|
|
<div class="stat-card">
|
|
<div class="label">수행 프로젝트</div>
|
|
<div class="value">{{ ((project_dashboard.related_projects or 0) - (project_dashboard.completed_projects or 0)) if ((project_dashboard.related_projects or 0) - (project_dashboard.completed_projects or 0)) > 0 else 0 }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">종료 프로젝트</div>
|
|
<div class="value">{{ project_dashboard.completed_projects or 0 }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">수금액</div>
|
|
<div class="value">{{ "{:,.0f}".format(project_dashboard.collection_amount or 0) }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">비용</div>
|
|
<div class="value">{{ "{:,.0f}".format((overview.total_cost or 0) + (overview.total_sga or 0)) }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">원가</div>
|
|
<div class="value">{{ "{:,.0f}".format(overview.total_cost or 0) }}</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="label">판관비</div>
|
|
<div class="value">{{ "{:,.0f}".format(overview.total_sga or 0) }}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="dashboard-chart-stack">
|
|
<section class="chart-panel">
|
|
<div class="chart-panel-header">
|
|
<h3>수금 구성</h3>
|
|
<div class="filter-row">
|
|
<select id="revenueGranularity" aria-label="수금 구성 집계 단위">
|
|
<option value="yearly" {% if not overview_selected_year %}selected{% endif %}>연도별</option>
|
|
<option value="monthly" {% if overview_selected_year %}selected{% endif %}>월별</option>
|
|
</select>
|
|
<select id="revenueYear" aria-label="수금 구성 연도 선택">
|
|
<option value="all">전체연도</option>
|
|
{% for year in available_years %}
|
|
<option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="revenueMetric" aria-label="수금 구성 항목 선택">
|
|
<option value="all">전체 항목</option>
|
|
<option value="design_revenue">설계</option>
|
|
<option value="design_other_revenue">설계 외</option>
|
|
<option value="supervision_revenue">감리</option>
|
|
<option value="inspection_revenue">점검</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell">
|
|
<div class="legend-box center" id="revenueLegend"></div>
|
|
<svg id="revenueChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chart-panel">
|
|
<div class="chart-panel-header">
|
|
<h3>지출 구성</h3>
|
|
<div class="filter-row">
|
|
<select id="expenseGranularity" aria-label="지출 구성 집계 단위">
|
|
<option value="yearly" {% if not overview_selected_year %}selected{% endif %}>연도별</option>
|
|
<option value="monthly" {% if overview_selected_year %}selected{% endif %}>월별</option>
|
|
</select>
|
|
<select id="expenseYear" aria-label="지출 구성 연도 선택">
|
|
<option value="all">전체연도</option>
|
|
{% for year in available_years %}
|
|
<option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="expenseMetric" aria-label="지출 구성 항목 선택">
|
|
<option value="all">전체 항목</option>
|
|
<option value="cost_sum">원가</option>
|
|
<option value="sga_sum">판관비</option>
|
|
<option value="labor_sum">원가인건비</option>
|
|
<option value="outsourcing_sum">원가외주비</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell">
|
|
<div class="legend-box center" id="expenseLegend"></div>
|
|
<svg id="expenseChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script>
|
|
const availableYears = {{ available_years | tojson }};
|
|
const yearlySummary = {{ yearly_summary | tojson }};
|
|
const monthlySummary = {{ monthly_summary | tojson }};
|
|
const revenueYearly = {{ project_revenue_mix_yearly | tojson }};
|
|
const revenueMonthly = {{ project_revenue_mix_monthly | tojson }};
|
|
const pageSelectedYear = {{ overview_selected_year | tojson }};
|
|
|
|
const revenuePalette = {
|
|
design_revenue: { label: "설계", color: "#4f7cff" },
|
|
design_other_revenue: { label: "설계 외", color: "#67c7c9" },
|
|
supervision_revenue: { label: "감리", color: "#233a5a" },
|
|
inspection_revenue: { label: "점검", color: "#ffb54a" },
|
|
};
|
|
|
|
const expensePalette = {
|
|
cost_sum: { label: "원가", color: "#4f7cff" },
|
|
sga_sum: { label: "판관비", color: "#67c7c9" },
|
|
labor_sum: { label: "원가인건비", color: "#233a5a" },
|
|
outsourcing_sum: { label: "원가외주비", color: "#ffb54a" },
|
|
};
|
|
|
|
const revenueMetricMap = {
|
|
all: ["design_revenue", "design_other_revenue", "supervision_revenue", "inspection_revenue"],
|
|
design_revenue: ["design_revenue"],
|
|
design_other_revenue: ["design_other_revenue"],
|
|
supervision_revenue: ["supervision_revenue"],
|
|
inspection_revenue: ["inspection_revenue"],
|
|
};
|
|
|
|
const expenseMetricMap = {
|
|
all: ["cost_sum", "sga_sum", "labor_sum", "outsourcing_sum"],
|
|
cost_sum: ["cost_sum"],
|
|
sga_sum: ["sga_sum"],
|
|
labor_sum: ["labor_sum"],
|
|
outsourcing_sum: ["outsourcing_sum"],
|
|
};
|
|
|
|
function formatNumber(value) {
|
|
return new Intl.NumberFormat("ko-KR", { maximumFractionDigits: 0 }).format(value || 0);
|
|
}
|
|
|
|
function formatValueLabel(value) {
|
|
const numeric = Number(value || 0);
|
|
if (!numeric) return "0.0";
|
|
if (numeric >= 100000000) return `${(numeric / 100000000).toFixed(1)}억`;
|
|
if (numeric >= 1000000) return `${(numeric / 1000000).toFixed(1)}백만`;
|
|
if (numeric >= 1000) return `${(numeric / 1000).toFixed(1)}천`;
|
|
return numeric.toFixed(1);
|
|
}
|
|
|
|
function formatAxisLabel(value) {
|
|
const numeric = Number(value || 0);
|
|
if (!numeric) return "0";
|
|
if (numeric >= 100000000) return `${numeric / 100000000}억`;
|
|
if (numeric >= 1000000) return `${numeric / 1000000}백만`;
|
|
if (numeric >= 1000) return `${numeric / 1000}천`;
|
|
return formatNumber(numeric);
|
|
}
|
|
|
|
function pickTickStep(maxValue) {
|
|
const baseUnit = maxValue < 1000000 ? 1000 : 1000000;
|
|
const units = [1, 2, 5];
|
|
const raw = Math.max(maxValue / baseUnit, 1);
|
|
let power = 1;
|
|
while (power * 10 <= raw) power *= 10;
|
|
for (const unit of units) {
|
|
const candidate = unit * power;
|
|
if (candidate >= raw) return candidate * baseUnit;
|
|
}
|
|
return power * 10 * baseUnit;
|
|
}
|
|
|
|
function buildPositiveAxis(maxValue, tickCount = 4) {
|
|
const safeMax = Math.max(Number(maxValue || 0), 1);
|
|
const paddedMax = safeMax * (safeMax < 1000 ? 1.12 : 1.08);
|
|
const tickStep = pickTickStep(paddedMax / tickCount);
|
|
const tickMax = Math.max(tickStep, Math.ceil(paddedMax / tickStep) * tickStep);
|
|
return { tickStep, tickMax };
|
|
}
|
|
|
|
function setLegend(containerId, metricKeys, paletteMap) {
|
|
const target = document.getElementById(containerId);
|
|
if (!target) return;
|
|
target.innerHTML = metricKeys.map((key) => `
|
|
<span class="legend-item">
|
|
<span class="legend-swatch" style="background:${paletteMap[key].color}"></span>
|
|
${paletteMap[key].label}
|
|
</span>
|
|
`).join("");
|
|
}
|
|
|
|
function renderEmptyChart(svgId, message) {
|
|
const svg = document.getElementById(svgId);
|
|
if (!svg) return;
|
|
svg.innerHTML = `
|
|
<rect x="0" y="0" width="1120" height="390" rx="8" fill="#f7fafb" stroke="#d6e2e8"></rect>
|
|
<text x="560" y="195" text-anchor="middle" fill="#667887" font-size="18" font-weight="700">${message}</text>
|
|
`;
|
|
}
|
|
|
|
function renderGroupedBarChart(svgId, rows, metricKeys, paletteMap, options = {}) {
|
|
const svg = document.getElementById(svgId);
|
|
if (!svg) return;
|
|
if (!rows.length || !metricKeys.length) {
|
|
renderEmptyChart(svgId, "표시할 집계 데이터가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
const granularity = options.granularity || "yearly";
|
|
const width = 1120;
|
|
const height = 390;
|
|
const margin = { top: 34, right: 26, bottom: 74, left: 94 };
|
|
const plotWidth = width - margin.left - margin.right;
|
|
const plotHeight = height - margin.top - margin.bottom;
|
|
const maxValue = Math.max(1, ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))));
|
|
const { tickStep, tickMax } = buildPositiveAxis(maxValue, 4);
|
|
const groupWidth = plotWidth / Math.max(rows.length, 1);
|
|
const axisBaseY = height - margin.bottom;
|
|
const groupGapRatio = granularity === "monthly" ? 0.28 : 0.18;
|
|
const innerGap = granularity === "monthly" ? 7 : 10;
|
|
const groupInset = Math.max(groupWidth * groupGapRatio, granularity === "monthly" ? 8 : 12);
|
|
const usableGroupWidth = Math.max(groupWidth - groupInset * 2, metricKeys.length * 12);
|
|
const barWidth = Math.min((usableGroupWidth - innerGap * Math.max(metricKeys.length - 1, 0)) / Math.max(metricKeys.length, 1), granularity === "monthly" ? 18 : 34);
|
|
const actualGroupWidth = barWidth * metricKeys.length + innerGap * Math.max(metricKeys.length - 1, 0);
|
|
const groupStartOffset = (groupWidth - actualGroupWidth) / 2;
|
|
const xLabelStep = granularity === "monthly" ? 1 : Math.max(1, Math.ceil(rows.length / 10));
|
|
|
|
let markup = `
|
|
<defs>
|
|
<linearGradient id="${svgId}Bg" x1="0" x2="1" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#fcfefe" />
|
|
<stop offset="100%" stop-color="#edf4f7" />
|
|
</linearGradient>
|
|
<filter id="${svgId}Shadow" x="-20%" y="-20%" width="140%" height="160%">
|
|
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.14)" />
|
|
</filter>
|
|
</defs>
|
|
<rect x="0" y="0" width="${width}" height="${height}" rx="8" fill="url(#${svgId}Bg)"></rect>
|
|
<rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="4" fill="rgba(255,255,255,0.72)" stroke="#dde7ec"></rect>
|
|
`;
|
|
|
|
for (let value = 0; value <= tickMax; value += tickStep) {
|
|
const y = margin.top + plotHeight - (value / tickMax) * plotHeight;
|
|
markup += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8e3e8" stroke-dasharray="3 7"></line>`;
|
|
markup += `<text x="${margin.left - 16}" y="${y + 4}" text-anchor="end" fill="#60717d" font-size="11.5" font-weight="700">${formatAxisLabel(value)}</text>`;
|
|
}
|
|
markup += `<line x1="${margin.left}" y1="${axisBaseY}" x2="${width - margin.right}" y2="${axisBaseY}" stroke="#8ea0ac" stroke-width="1.2"></line>`;
|
|
|
|
rows.forEach((row, rowIndex) => {
|
|
const baseX = margin.left + rowIndex * groupWidth;
|
|
const showXAxisLabel = rows.length <= 14 || rowIndex % xLabelStep === 0 || rowIndex === rows.length - 1;
|
|
metricKeys.forEach((key, metricIndex) => {
|
|
const value = Number(row[key] || 0);
|
|
const x = baseX + groupStartOffset + metricIndex * (barWidth + innerGap);
|
|
const drawWidth = Math.max(barWidth, 10);
|
|
const barHeight = tickMax ? (value / tickMax) * plotHeight : 0;
|
|
const y = margin.top + plotHeight - barHeight;
|
|
const labelY = Math.max(y - 12, margin.top - 8);
|
|
const showValueLabel = barHeight > 24 && (granularity === "yearly" || metricKeys.length <= 2 || drawWidth >= 16);
|
|
markup += `<rect x="${x}" y="${y}" width="${drawWidth}" height="${barHeight}" rx="3" fill="${paletteMap[key].color}" filter="url(#${svgId}Shadow)"></rect>`;
|
|
if (showValueLabel) {
|
|
markup += `<text x="${x + drawWidth / 2}" y="${labelY}" text-anchor="middle" fill="#35505f" font-size="10" font-weight="700">${formatValueLabel(value)}</text>`;
|
|
}
|
|
});
|
|
if (showXAxisLabel) {
|
|
markup += `<text x="${baseX + groupWidth / 2}" y="${height - 28}" text-anchor="middle" fill="#405362" font-size="12.5" font-weight="700">${row.label}</text>`;
|
|
}
|
|
});
|
|
|
|
svg.innerHTML = markup;
|
|
}
|
|
|
|
function getLatestAvailableYear() {
|
|
return String(availableYears[availableYears.length - 1] || "all");
|
|
}
|
|
|
|
function syncYearSelection(selectId, granularity) {
|
|
const select = document.getElementById(selectId);
|
|
if (!select) return;
|
|
if (granularity === "yearly") {
|
|
select.value = "all";
|
|
select.disabled = true;
|
|
return;
|
|
}
|
|
const hasSelectedYear = availableYears.some((year) => String(year) === String(select.value));
|
|
if (select.value === "all" || !hasSelectedYear) {
|
|
select.value = pageSelectedYear ? String(pageSelectedYear) : getLatestAvailableYear();
|
|
}
|
|
select.disabled = false;
|
|
}
|
|
|
|
function getRevenueRows() {
|
|
const granularity = document.getElementById("revenueGranularity").value;
|
|
const yearFilter = document.getElementById("revenueYear").value;
|
|
const source = granularity === "yearly" ? revenueYearly : revenueMonthly;
|
|
return source
|
|
.filter((row) => {
|
|
if (granularity === "yearly") return true;
|
|
return yearFilter === "all" ? true : String(row.year) === yearFilter;
|
|
})
|
|
.map((row) => ({
|
|
...row,
|
|
label: granularity === "yearly" ? String(row.year) : `${row.month}월`,
|
|
}))
|
|
.slice(granularity === "yearly" ? -10 : 0);
|
|
}
|
|
|
|
function getExpenseRows() {
|
|
const granularity = document.getElementById("expenseGranularity").value;
|
|
const yearFilter = document.getElementById("expenseYear").value;
|
|
const source = granularity === "yearly" ? yearlySummary : monthlySummary;
|
|
return source
|
|
.filter((row) => {
|
|
if (granularity === "yearly") return true;
|
|
return yearFilter === "all" ? true : String(row.year) === yearFilter;
|
|
})
|
|
.map((row) => ({
|
|
...row,
|
|
label: granularity === "yearly" ? String(row.year) : `${row.month}월`,
|
|
}))
|
|
.slice(granularity === "yearly" ? -10 : 0);
|
|
}
|
|
|
|
function updateRevenueChart() {
|
|
const granularity = document.getElementById("revenueGranularity").value;
|
|
syncYearSelection("revenueYear", granularity);
|
|
const metricKeys = revenueMetricMap[document.getElementById("revenueMetric").value];
|
|
setLegend("revenueLegend", metricKeys, revenuePalette);
|
|
renderGroupedBarChart("revenueChart", getRevenueRows(), metricKeys, revenuePalette, { granularity });
|
|
}
|
|
|
|
function updateExpenseChart() {
|
|
const granularity = document.getElementById("expenseGranularity").value;
|
|
syncYearSelection("expenseYear", granularity);
|
|
const metricKeys = expenseMetricMap[document.getElementById("expenseMetric").value];
|
|
setLegend("expenseLegend", metricKeys, expensePalette);
|
|
renderGroupedBarChart("expenseChart", getExpenseRows(), metricKeys, expensePalette, { granularity });
|
|
}
|
|
|
|
document.getElementById("revenueGranularity")?.addEventListener("change", updateRevenueChart);
|
|
document.getElementById("revenueYear")?.addEventListener("change", updateRevenueChart);
|
|
document.getElementById("revenueMetric")?.addEventListener("change", updateRevenueChart);
|
|
document.getElementById("expenseGranularity")?.addEventListener("change", updateExpenseChart);
|
|
document.getElementById("expenseYear")?.addEventListener("change", updateExpenseChart);
|
|
document.getElementById("expenseMetric")?.addEventListener("change", updateExpenseChart);
|
|
|
|
document.getElementById("dashboardYearSelect")?.addEventListener("change", (event) => {
|
|
event.target.form?.submit();
|
|
});
|
|
|
|
const uploadButton = document.getElementById("uploadButton");
|
|
const excelInput = document.getElementById("excel_file");
|
|
const uploadForm = document.getElementById("uploadForm");
|
|
|
|
uploadButton?.addEventListener("click", () => {
|
|
excelInput?.click();
|
|
});
|
|
|
|
excelInput?.addEventListener("change", () => {
|
|
if (excelInput.files && excelInput.files.length > 0) {
|
|
uploadForm.submit();
|
|
}
|
|
});
|
|
|
|
syncYearSelection("revenueYear", document.getElementById("revenueGranularity")?.value || "yearly");
|
|
syncYearSelection("expenseYear", document.getElementById("expenseGranularity")?.value || "yearly");
|
|
updateRevenueChart();
|
|
updateExpenseChart();
|
|
</script>
|
|
{% endblock %}
|