mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
fix(FE): add empty state overlay on chart null value
This commit is contained in:
randy-ar
@@ -283,261 +283,311 @@ const DashboardLineChart = ({
|
|||||||
})()}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Chart */}
|
{/* Chart Container with Empty State Overlay */}
|
||||||
<ResponsiveContainer width='100%' height={350}>
|
<div className='relative'>
|
||||||
<LineChart
|
{/* Chart */}
|
||||||
data={(() => {
|
<ResponsiveContainer width='100%' height={350}>
|
||||||
// Transform data based on analysisMode
|
<LineChart
|
||||||
if (analysisMode === 'OVERVIEW') {
|
data={(() => {
|
||||||
// For OVERVIEW mode, use the selected chart data
|
// Transform data based on analysisMode
|
||||||
if (isOverviewCharts(data.charts)) {
|
if (analysisMode === 'OVERVIEW') {
|
||||||
const selectedChartData = data.charts[chartData];
|
// For OVERVIEW mode, use the selected chart data
|
||||||
if (!selectedChartData || !selectedChartData.dataset) return [];
|
if (isOverviewCharts(data.charts)) {
|
||||||
return selectedChartData.dataset;
|
const selectedChartData = data.charts[chartData];
|
||||||
|
if (!selectedChartData || !selectedChartData.dataset)
|
||||||
|
return [];
|
||||||
|
return selectedChartData.dataset;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
} else {
|
||||||
|
// For COMPARISON mode, use the first available comparison chart
|
||||||
|
if (isComparisonCharts(data.charts)) {
|
||||||
|
const chartData =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
|
||||||
|
if (!chartData || !chartData.dataset) return [];
|
||||||
|
return chartData.dataset;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
}
|
}
|
||||||
return [];
|
|
||||||
} else {
|
|
||||||
// For COMPARISON mode, use the first available comparison chart
|
|
||||||
if (isComparisonCharts(data.charts)) {
|
|
||||||
const chartData =
|
|
||||||
data.charts.location ||
|
|
||||||
data.charts.flock ||
|
|
||||||
data.charts.kandang;
|
|
||||||
|
|
||||||
if (!chartData || !chartData.dataset) return [];
|
|
||||||
return chartData.dataset;
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 10,
|
|
||||||
left: 0,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
|
||||||
<XAxis
|
|
||||||
dataKey='week'
|
|
||||||
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
label={{
|
|
||||||
value: 'Weeks',
|
|
||||||
position: 'insideBottom',
|
|
||||||
offset: -5,
|
|
||||||
style: { fontSize: 12, fill: '#9ca3af' },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
domain={(() => {
|
|
||||||
// Calculate dynamic domain based on visible data
|
|
||||||
let seriesData: DashboardChartsSeries[] = [];
|
|
||||||
let dataset: DashboardChartsDataset[] = [];
|
|
||||||
|
|
||||||
if (
|
|
||||||
analysisMode === 'OVERVIEW' &&
|
|
||||||
isOverviewCharts(data.charts)
|
|
||||||
) {
|
|
||||||
seriesData = data.charts[chartData]?.series || [];
|
|
||||||
dataset = data.charts[chartData]?.dataset || [];
|
|
||||||
} else if (
|
|
||||||
analysisMode === 'COMPARISON' &&
|
|
||||||
isComparisonCharts(data.charts)
|
|
||||||
) {
|
|
||||||
const comparisonChart =
|
|
||||||
data.charts.location ||
|
|
||||||
data.charts.flock ||
|
|
||||||
data.charts.kandang;
|
|
||||||
seriesData = comparisonChart?.series || [];
|
|
||||||
dataset = comparisonChart?.dataset || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get all values from visible series
|
|
||||||
const visibleSeriesIds = Array.from(visibleSeries);
|
|
||||||
const allValues: number[] = [];
|
|
||||||
|
|
||||||
dataset.forEach((item: DashboardChartsDataset) => {
|
|
||||||
visibleSeriesIds.forEach((seriesId) => {
|
|
||||||
const value = item[seriesId];
|
|
||||||
if (typeof value === 'number') {
|
|
||||||
allValues.push(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (allValues.length === 0) return [0, 100];
|
|
||||||
|
|
||||||
const minValue = Math.min(...allValues);
|
|
||||||
const maxValue = Math.max(...allValues);
|
|
||||||
|
|
||||||
// Add padding (10% on each side)
|
|
||||||
const padding = (maxValue - minValue) * 0.1;
|
|
||||||
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
|
||||||
const domainMax = Math.ceil(maxValue + padding);
|
|
||||||
|
|
||||||
return [domainMin, domainMax];
|
|
||||||
})()}
|
})()}
|
||||||
ticks={(() => {
|
margin={{
|
||||||
// Calculate dynamic ticks based on domain
|
top: 5,
|
||||||
let seriesData: DashboardChartsSeries[] = [];
|
right: 10,
|
||||||
let dataset: DashboardChartsDataset[] = [];
|
left: 0,
|
||||||
|
bottom: 5,
|
||||||
if (
|
|
||||||
analysisMode === 'OVERVIEW' &&
|
|
||||||
isOverviewCharts(data.charts)
|
|
||||||
) {
|
|
||||||
seriesData = data.charts[chartData]?.series || [];
|
|
||||||
dataset = data.charts[chartData]?.dataset || [];
|
|
||||||
} else if (
|
|
||||||
analysisMode === 'COMPARISON' &&
|
|
||||||
isComparisonCharts(data.charts)
|
|
||||||
) {
|
|
||||||
const comparisonChart =
|
|
||||||
data.charts.location ||
|
|
||||||
data.charts.flock ||
|
|
||||||
data.charts.kandang;
|
|
||||||
seriesData = comparisonChart?.series || [];
|
|
||||||
dataset = comparisonChart?.dataset || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const visibleSeriesIds = Array.from(visibleSeries);
|
|
||||||
const allValues: number[] = [];
|
|
||||||
|
|
||||||
dataset.forEach((item: DashboardChartsDataset) => {
|
|
||||||
visibleSeriesIds.forEach((seriesId) => {
|
|
||||||
const value = item[seriesId];
|
|
||||||
if (typeof value === 'number') {
|
|
||||||
allValues.push(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (allValues.length === 0) return [0, 25, 50, 75, 100];
|
|
||||||
|
|
||||||
const minValue = Math.min(...allValues);
|
|
||||||
const maxValue = Math.max(...allValues);
|
|
||||||
const padding = (maxValue - minValue) * 0.1;
|
|
||||||
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
|
||||||
const domainMax = Math.ceil(maxValue + padding);
|
|
||||||
|
|
||||||
// Generate 5 evenly spaced ticks
|
|
||||||
const range = domainMax - domainMin;
|
|
||||||
const step = range / 4;
|
|
||||||
|
|
||||||
return [
|
|
||||||
domainMin,
|
|
||||||
Math.round(domainMin + step),
|
|
||||||
Math.round(domainMin + step * 2),
|
|
||||||
Math.round(domainMin + step * 3),
|
|
||||||
domainMax,
|
|
||||||
];
|
|
||||||
})()}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: '#1f2937',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
color: 'white',
|
|
||||||
}}
|
}}
|
||||||
labelStyle={{ color: 'white', marginBottom: '4px' }}
|
>
|
||||||
itemStyle={{ color: 'white', fontSize: '12px' }}
|
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
||||||
labelFormatter={(value) => `Week ${value}`}
|
<XAxis
|
||||||
formatter={(
|
dataKey='week'
|
||||||
value: number | undefined,
|
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||||
name: string | undefined
|
tickLine={false}
|
||||||
) => {
|
axisLine={{ stroke: '#e5e7eb' }}
|
||||||
if (value === undefined || name === undefined) return ['', ''];
|
label={{
|
||||||
|
value: 'Weeks',
|
||||||
|
position: 'insideBottom',
|
||||||
|
offset: -5,
|
||||||
|
style: { fontSize: 12, fill: '#9ca3af' },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={{ stroke: '#e5e7eb' }}
|
||||||
|
domain={(() => {
|
||||||
|
// Calculate dynamic domain based on visible data
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
let dataset: DashboardChartsDataset[] = [];
|
||||||
|
|
||||||
// Get series data to find the unit
|
if (
|
||||||
let seriesData: DashboardChartsSeries[] = [];
|
analysisMode === 'OVERVIEW' &&
|
||||||
if (
|
isOverviewCharts(data.charts)
|
||||||
analysisMode === 'OVERVIEW' &&
|
) {
|
||||||
isOverviewCharts(data.charts)
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
) {
|
dataset = data.charts[chartData]?.dataset || [];
|
||||||
seriesData = data.charts[chartData]?.series || [];
|
} else if (
|
||||||
} else if (
|
analysisMode === 'COMPARISON' &&
|
||||||
analysisMode === 'COMPARISON' &&
|
isComparisonCharts(data.charts)
|
||||||
isComparisonCharts(data.charts)
|
) {
|
||||||
) {
|
const comparisonChart =
|
||||||
const comparisonChart =
|
data.charts.location ||
|
||||||
data.charts.location ||
|
data.charts.flock ||
|
||||||
data.charts.flock ||
|
data.charts.kandang;
|
||||||
data.charts.kandang;
|
seriesData = comparisonChart?.series || [];
|
||||||
seriesData = comparisonChart?.series || [];
|
dataset = comparisonChart?.dataset || [];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Find the series that matches this line's name
|
// Get all values from visible series
|
||||||
const series = seriesData.find((s) => s.label === name);
|
const visibleSeriesIds = Array.from(visibleSeries);
|
||||||
const unit = series?.unit || '';
|
const allValues: number[] = [];
|
||||||
|
|
||||||
return [`${value} ${unit}`, name];
|
dataset.forEach((item: DashboardChartsDataset) => {
|
||||||
}}
|
visibleSeriesIds.forEach((seriesId) => {
|
||||||
/>
|
const value = item[seriesId];
|
||||||
{/* Dynamic Line rendering based on visible series */}
|
if (typeof value === 'number') {
|
||||||
{(() => {
|
allValues.push(value);
|
||||||
let seriesData: DashboardChartsSeries[] = [];
|
|
||||||
|
|
||||||
if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
|
|
||||||
seriesData = data.charts[chartData]?.series || [];
|
|
||||||
} else if (
|
|
||||||
analysisMode === 'COMPARISON' &&
|
|
||||||
isComparisonCharts(data.charts)
|
|
||||||
) {
|
|
||||||
const comparisonChart =
|
|
||||||
data.charts.location ||
|
|
||||||
data.charts.flock ||
|
|
||||||
data.charts.kandang;
|
|
||||||
seriesData = comparisonChart?.series || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return seriesData
|
|
||||||
.filter((series) => visibleSeries.has(series.id))
|
|
||||||
.map((series, index) => {
|
|
||||||
const isStandard = series.id
|
|
||||||
.toString()
|
|
||||||
.toLowerCase()
|
|
||||||
.includes('std');
|
|
||||||
// Use series.id directly as dataKey to match dataset fields
|
|
||||||
const dataKey = series.id.toString();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Line
|
|
||||||
key={series.id}
|
|
||||||
type='monotone'
|
|
||||||
dataKey={dataKey}
|
|
||||||
name={series.label}
|
|
||||||
stroke={getLineColor(series.id, index, analysisMode)}
|
|
||||||
opacity={isStandard ? 0.5 : 1}
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeDasharray={isStandard ? '5 5' : undefined}
|
|
||||||
dot={
|
|
||||||
isStandard
|
|
||||||
? false
|
|
||||||
: {
|
|
||||||
r: 3,
|
|
||||||
fill: '#fff',
|
|
||||||
stroke: getLineColor(
|
|
||||||
series.id,
|
|
||||||
index,
|
|
||||||
analysisMode
|
|
||||||
),
|
|
||||||
strokeWidth: 2,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
activeDot={isStandard ? undefined : { r: 5 }}
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allValues.length === 0) return [0, 100];
|
||||||
|
|
||||||
|
const minValue = Math.min(...allValues);
|
||||||
|
const maxValue = Math.max(...allValues);
|
||||||
|
|
||||||
|
// Add padding (10% on each side)
|
||||||
|
const padding = (maxValue - minValue) * 0.1;
|
||||||
|
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
||||||
|
const domainMax = Math.ceil(maxValue + padding);
|
||||||
|
|
||||||
|
return [domainMin, domainMax];
|
||||||
|
})()}
|
||||||
|
ticks={(() => {
|
||||||
|
// Calculate dynamic ticks based on domain
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
let dataset: DashboardChartsDataset[] = [];
|
||||||
|
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
dataset = data.charts[chartData]?.dataset || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
dataset = comparisonChart?.dataset || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const visibleSeriesIds = Array.from(visibleSeries);
|
||||||
|
const allValues: number[] = [];
|
||||||
|
|
||||||
|
dataset.forEach((item: DashboardChartsDataset) => {
|
||||||
|
visibleSeriesIds.forEach((seriesId) => {
|
||||||
|
const value = item[seriesId];
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
allValues.push(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allValues.length === 0) return [0, 25, 50, 75, 100];
|
||||||
|
|
||||||
|
const minValue = Math.min(...allValues);
|
||||||
|
const maxValue = Math.max(...allValues);
|
||||||
|
const padding = (maxValue - minValue) * 0.1;
|
||||||
|
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
||||||
|
const domainMax = Math.ceil(maxValue + padding);
|
||||||
|
|
||||||
|
// Generate 5 evenly spaced ticks
|
||||||
|
const range = domainMax - domainMin;
|
||||||
|
const step = range / 4;
|
||||||
|
|
||||||
|
return [
|
||||||
|
domainMin,
|
||||||
|
Math.round(domainMin + step),
|
||||||
|
Math.round(domainMin + step * 2),
|
||||||
|
Math.round(domainMin + step * 3),
|
||||||
|
domainMax,
|
||||||
|
];
|
||||||
|
})()}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: '#1f2937',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
color: 'white',
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: 'white', marginBottom: '4px' }}
|
||||||
|
itemStyle={{ color: 'white', fontSize: '12px' }}
|
||||||
|
labelFormatter={(value) => `Week ${value}`}
|
||||||
|
formatter={(
|
||||||
|
value: number | undefined,
|
||||||
|
name: string | undefined
|
||||||
|
) => {
|
||||||
|
if (value === undefined || name === undefined) return ['', ''];
|
||||||
|
|
||||||
|
// Get series data to find the unit
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the series that matches this line's name
|
||||||
|
const series = seriesData.find((s) => s.label === name);
|
||||||
|
const unit = series?.unit || '';
|
||||||
|
|
||||||
|
return [`${value} ${unit}`, name];
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Dynamic Line rendering based on visible series */}
|
||||||
|
{(() => {
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return seriesData
|
||||||
|
.filter((series) => visibleSeries.has(series.id))
|
||||||
|
.map((series, index) => {
|
||||||
|
const isStandard = series.id
|
||||||
|
.toString()
|
||||||
|
.toLowerCase()
|
||||||
|
.includes('std');
|
||||||
|
// Use series.id directly as dataKey to match dataset fields
|
||||||
|
const dataKey = series.id.toString();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Line
|
||||||
|
key={series.id}
|
||||||
|
type='monotone'
|
||||||
|
dataKey={dataKey}
|
||||||
|
name={series.label}
|
||||||
|
stroke={getLineColor(series.id, index, analysisMode)}
|
||||||
|
opacity={isStandard ? 0.5 : 1}
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeDasharray={isStandard ? '5 5' : undefined}
|
||||||
|
dot={
|
||||||
|
isStandard
|
||||||
|
? false
|
||||||
|
: {
|
||||||
|
r: 3,
|
||||||
|
fill: '#fff',
|
||||||
|
stroke: getLineColor(
|
||||||
|
series.id,
|
||||||
|
index,
|
||||||
|
analysisMode
|
||||||
|
),
|
||||||
|
strokeWidth: 2,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
activeDot={isStandard ? undefined : { r: 5 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
|
||||||
|
{/* Empty State Overlay */}
|
||||||
|
{(() => {
|
||||||
|
// Get current dataset
|
||||||
|
let dataset: DashboardChartsDataset[] = [];
|
||||||
|
|
||||||
|
if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
|
||||||
|
dataset = data.charts[chartData]?.dataset || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location || data.charts.flock || data.charts.kandang;
|
||||||
|
dataset = comparisonChart?.dataset || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show empty state if dataset is empty
|
||||||
|
if (dataset.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
|
||||||
|
{/* Chart icon */}
|
||||||
|
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:chart-bar'
|
||||||
|
className='text-white'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
/>
|
/>
|
||||||
);
|
</div>
|
||||||
});
|
|
||||||
})()}
|
{/* Empty state text */}
|
||||||
</LineChart>
|
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||||
</ResponsiveContainer>
|
Data Not Yet Available
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||||
|
Please change your filters to get the data.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user