refactor(FE): Initialize and use current gauge week index

This commit is contained in:
rstubryan
2026-01-09 10:46:05 +07:00
parent 88e3ec7bbc
commit 97c16ce596
@@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useMemo, useState, useEffect } from 'react';
import Card from '@/components/Card';
import UniformityBarChart from '@/components/pages/production/uniformity/chart/UniformityBarChart';
import UniformityGaugeChart from '@/components/pages/production/uniformity/chart/UniformityGaugeChart';
@@ -22,13 +22,27 @@ const UniformityChart = ({
return uniformityData.chart_data;
}, [uniformityData]);
useEffect(() => {
if (uniformityData?.chart_data?.gauge_chart?.week_info) {
const { current_week_index } =
uniformityData.chart_data.gauge_chart.week_info;
setCurrentWeekIndex(current_week_index);
}
}, [uniformityData]);
const barChartData = useMemo(() => {
if (!chartData?.bar_chart) {
if (!chartData?.bar_chart || !chartData?.gauge_chart) {
return [];
}
const { bar_chart } = chartData;
const currentWeekStr = String(bar_chart.current_week);
const { bar_chart, gauge_chart } = chartData;
const currentWeekData = gauge_chart.available_weeks[currentWeekIndex];
if (!currentWeekData || !currentWeekData.has_data) {
return [];
}
const currentWeekStr = String(currentWeekData.week);
const weekData = bar_chart.all_weeks[currentWeekStr];
if (!weekData || !weekData.has_data) {
@@ -42,7 +56,7 @@ const UniformityChart = ({
idealRange: range.ideal_range,
outsideRange: range.outside_range,
}));
}, [chartData]);
}, [chartData, currentWeekIndex]);
const gaugeChartData = useMemo(() => {
if (!chartData?.gauge_chart || !uniformityData) return undefined;
@@ -54,28 +68,33 @@ const UniformityChart = ({
return undefined;
}
const hasPrevWeek = currentWeekIndex > 0;
const hasNextWeek =
currentWeekIndex < gauge_chart.available_weeks.length - 1;
return {
value: currentWeekData.uniformity_percentage,
label: 'Uniformity',
week: `Week ${currentWeekData.week}`,
currentValue: currentWeekData.ideal_count,
totalValue: currentWeekData.total_count,
hasPrevWeek: gauge_chart.week_info.has_prev_week,
hasNextWeek: gauge_chart.week_info.has_next_week,
hasPrevWeek,
hasNextWeek,
};
}, [chartData, currentWeekIndex, uniformityData]);
const handleWeekChange = (direction: 'prev' | 'next') => {
if (!chartData?.gauge_chart) return;
const { available_weeks, week_info } = chartData.gauge_chart;
const { available_weeks } = chartData.gauge_chart;
if (direction === 'prev' && week_info.has_prev_week) {
setCurrentWeekIndex((prev) => Math.max(0, prev - 1));
} else if (direction === 'next' && week_info.has_next_week) {
setCurrentWeekIndex((prev) =>
Math.min(available_weeks.length - 1, prev + 1)
);
if (direction === 'prev' && currentWeekIndex > 0) {
setCurrentWeekIndex((prev) => prev - 1);
} else if (
direction === 'next' &&
currentWeekIndex < available_weeks.length - 1
) {
setCurrentWeekIndex((prev) => prev + 1);
}
};