mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +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>
|
||||
|
||||
{/* Chart */}
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart
|
||||
data={(() => {
|
||||
// Transform data based on analysisMode
|
||||
if (analysisMode === 'OVERVIEW') {
|
||||
// For OVERVIEW mode, use the selected chart data
|
||||
if (isOverviewCharts(data.charts)) {
|
||||
const selectedChartData = data.charts[chartData];
|
||||
if (!selectedChartData || !selectedChartData.dataset) return [];
|
||||
return selectedChartData.dataset;
|
||||
{/* Chart Container with Empty State Overlay */}
|
||||
<div className='relative'>
|
||||
{/* Chart */}
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart
|
||||
data={(() => {
|
||||
// Transform data based on analysisMode
|
||||
if (analysisMode === 'OVERVIEW') {
|
||||
// For OVERVIEW mode, use the selected chart data
|
||||
if (isOverviewCharts(data.charts)) {
|
||||
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={(() => {
|
||||
// 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',
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 10,
|
||||
left: 0,
|
||||
bottom: 5,
|
||||
}}
|
||||
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 ['', ''];
|
||||
>
|
||||
<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[] = [];
|
||||
|
||||
// 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 || [];
|
||||
}
|
||||
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 || [];
|
||||
}
|
||||
|
||||
// Find the series that matches this line's name
|
||||
const series = seriesData.find((s) => s.label === name);
|
||||
const unit = series?.unit || '';
|
||||
// Get all values from visible series
|
||||
const visibleSeriesIds = Array.from(visibleSeries);
|
||||
const allValues: number[] = [];
|
||||
|
||||
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,
|
||||
}
|
||||
dataset.forEach((item: DashboardChartsDataset) => {
|
||||
visibleSeriesIds.forEach((seriesId) => {
|
||||
const value = item[seriesId];
|
||||
if (typeof value === 'number') {
|
||||
allValues.push(value);
|
||||
}
|
||||
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}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user