Refactor data loading and query projections

templates/annual_summary.html

@@ -250,9 +250,9 @@
 
 {% block script %}
 <script>
-    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))];
+    let yearlySeries = [];
+    let monthlySeries = [];
+    let availableYears = [];
     const annualMetricCards = {{ annual_metric_cards | tojson }};
     const annualExpenseChartMetrics = {{ annual_expense_chart_metrics | tojson }};
     const annualBalanceChartMetrics = {{ annual_balance_chart_metrics | tojson }};
@@ -356,6 +356,23 @@
         return String(availableYears[availableYears.length - 1] || "recent10");
     }
 
+    async function loadAnnualSummaryBootstrapData() {
+        const response = await fetch("/annual-summary/bootstrap-data", {
+            method: "GET",
+            credentials: "same-origin",
+            headers: {
+                "Accept": "application/json",
+            },
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok || payload?.error) {
+            throw new Error(payload?.error || `HTTP ${response.status}`);
+        }
+        yearlySeries = Array.isArray(payload?.yearly_financial_series) ? payload.yearly_financial_series : [];
+        monthlySeries = Array.isArray(payload?.monthly_financial_series) ? payload.monthly_financial_series : [];
+        availableYears = [...new Set(yearlySeries.map((item) => item.year).filter((year) => year !== null && year !== undefined))];
+    }
+
     function syncYearFilter() {
         const granularity = document.getElementById("granularity").value;
         const yearFilterEl = document.getElementById("yearFilter");
@@ -581,6 +598,13 @@
     if (yearFilter) {
         yearFilter.value = "recent10";
     }
-    renderAll();
+    (async () => {
+        try {
+            await loadAnnualSummaryBootstrapData();
+        } catch (error) {
+            console.error("연도별 수익/비용 부트스트랩 데이터 조회 에러", error);
+        }
+        renderAll();
+    })();
 </script>
 {% endblock %}