feat: add onYearsAvailable prop to MonthlyChart and handle available years in EnergyChart

Author: hoang-rio

web_viewer/fe_src/src/components/BarCharts/MonthlyChart.tsx

@@ -17,6 +17,7 @@ import BarChart from "./BarChart";
 
 interface MonthlyChartProps {
   year?: number;
+  onYearsAvailable?: (years: number[]) => void;
 }
 
 const MonthlyChart = forwardRef((props: MonthlyChartProps, ref: ForwardedRef<IFetchChart>) => {
@@ -74,6 +75,8 @@ const MonthlyChart = forwardRef((props: MonthlyChartProps, ref: ForwardedRef<IFe
     ];
   }, [chartData, t]);
 
+  const firstYearsReported = useRef(false);
+
   const fetchChart = useCallback(async () => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
@@ -84,13 +87,38 @@ const MonthlyChart = forwardRef((props: MonthlyChartProps, ref: ForwardedRef<IFe
       const res = await fetch(url);
       const json = await res.json();
       setChartData(json && json.chart ? json.chart : json || []);
+      // report available years to parent once on first successful fetch
+      if (
+        !firstYearsReported.current &&
+        json &&
+        Array.isArray(json.years) &&
+        json.years.length
+      ) {
+        try {
+          const yearsNums = json.years
+            .map((y: unknown) => Number(y))
+            .filter(Boolean);
+          if (
+            yearsNums.length &&
+            typeof props.onYearsAvailable === "function"
+          ) {
+            props.onYearsAvailable(
+              yearsNums.sort((a: number, b: number) => b - a),
+            );
+            firstYearsReported.current = true;
+          }
+        } catch {
+          // ignore parsing errors
+        }
+      }
     } catch {
       // swallow, component will show empty chart
       setChartData([]);
     } finally {
       isFetchingRef.current = false;
       setIsLoading(false);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [year]);
 
   useImperativeHandle(ref, (): IFetchChart => ({ fetchChart }));

web_viewer/fe_src/src/components/EnergyChart.tsx

@@ -62,31 +62,17 @@ function EnergyChart({ className }: IClassNameProps) {
     return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
   }, []);
 
-  // Fetch available years from backend for Month/Year selects
-  useEffect(() => {
-    let mounted = true;
-    const fetchYears = async () => {
-      try {
-        const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/monthly-chart`);
-        const json = await res.json();
-        if (!mounted) return;
-        if (json && Array.isArray(json.years) && json.years.length) {
-          // ensure numbers and sorted desc
-          const ys = json.years.map((y: unknown) => Number(y)).filter(Boolean).sort((a: number, b: number) => b - a);
-          setAvailableYears(ys);
-          // if selectedYear not in list, set to first available
-          if (!ys.includes(selectedYear)) {
-            setSelectedYear(ys[0]);
-          }
-        }
-      } catch {
-        // ignore and keep fallback years
+  const handleYearsAvailable = (yrs: number[]) => {
+    try {
+      const ys = yrs.map((y: unknown) => Number(y)).filter(Boolean).sort((a: number, b: number) => b - a);
+      if (ys.length) {
+        setAvailableYears(ys);
+        if (!ys.includes(selectedYear)) setSelectedYear(ys[0]);
       }
-    };
-    fetchYears();
-    return () => { mounted = false; };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    } catch {
+      // ignore
+    }
+  };
 
   // Month select handler
   const handleYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -201,7 +187,7 @@ function EnergyChart({ className }: IClassNameProps) {
         )}
         {energyChartType === EnergyChartType.Monthly && (
           <Suspense fallback={<Loading />}>
-            <MonthlyChart ref={fetchChartRef} year={selectedYear} />
+            <MonthlyChart ref={fetchChartRef} year={selectedYear} onYearsAvailable={handleYearsAvailable} />
           </Suspense>
         )}
         {energyChartType === EnergyChartType.Yearly && (