farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor HistoryDisplay and ModelHistoryDisplay for Improved Layout and Readability

Browse Source 
- Reformatted code for better readability by adjusting the structure of the useHistoryLegendOverlay hook.
- Updated padding in Card components for consistent layout across displays.
- Enhanced Flex components with consistent gap values for improved spacing.
- Added overflow handling to div elements to prevent layout issues with chart rows.
- Improved loading state handling for better user feedback when no data is available.
This commit is contained in:
Tom Butcher 2026-08-30 14:07:56 +01:00
parent 3c53278e9f
commit b212331129
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Dashboard/common/HistoryDisplay.jsx
View File

@ -204,8 +204,11 @@ const HistoryDisplay = ({
})
}, [config, themeColors])
const { slotRef, measureRef, overlay: legendOverflow } =
useHistoryLegendOverlay(seriesLabels)
const {
slotRef,
measureRef,
overlay: legendOverflow
} = useHistoryLegendOverlay(seriesLabels)
if (!objectType || !config) {
return null
@ -247,9 +250,9 @@ const HistoryDisplay = ({
return (
<Card
style={{ width: '100%' }}
styles={{ body: { padding: '12px', ...styles } }}
styles={{ body: { padding: '12px 12px 6px 12px', ...styles } }}
>
<Flex gap='small' vertical>
<Flex gap='12px' vertical>
<Flex style={{ width: '100%' }} justify='space-between' align='center'>
<Flex align='center' gap='5px' justify='flex-start'>
{!startDate && !endDate && (
@ -325,6 +328,7 @@ const HistoryDisplay = ({
style={{
height: toCssHeight(height),
display: 'flex',
gap: 12,
flexDirection: 'column',
minHeight: 0
}}
@ -334,8 +338,7 @@ const HistoryDisplay = ({
style={{
flexShrink: 0,
display: 'flex',
justifyContent: 'center',
paddingBottom: 4
justifyContent: 'center'
}}
>
<HistoryChartLegend
@ -344,7 +347,7 @@ const HistoryDisplay = ({
/>
</div>
)}
<div style={{ flex: 1, minHeight: 0 }}>
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
{chartRows.length > 0 && (
<HistoryEChart
chartRows={chartRows}
@ -355,7 +358,11 @@ const HistoryDisplay = ({
/>
)}
{loading == false && chartRows.length == 0 && (
<Flex justify='center' align='center' style={{ height: '100%' }}>
<Flex
justify='center'
align='center'
style={{ height: '100%', marginBottom: 6 }}
>
<MissingPlaceholder message='No data available.' />
</Flex>
)}

33
src/components/Dashboard/common/ModelHistoryDisplay.jsx
View File

@ -164,8 +164,11 @@ const ModelHistoryDisplay = ({
})
}, [modelStats, themeColors])
const { slotRef, measureRef, overlay: legendOverflow } =
useHistoryLegendOverlay(seriesLabels)
const {
slotRef,
measureRef,
overlay: legendOverflow
} = useHistoryLegendOverlay(seriesLabels)
if (!objectType) {
return null
@ -371,9 +374,9 @@ const ModelHistoryDisplay = ({
return (
<Card
style={{ width: '100%' }}
styles={{ body: { padding: '12px', ...styles } }}
styles={{ body: { padding: '12px 12px 6px 12px', ...styles } }}
>
<Flex gap='small' vertical>
<Flex gap='12px' vertical>
<Flex style={{ width: '100%' }} justify='space-between' align='center'>
<Flex align='center' gap='5px' justify='flex-start'>
{!startDate && !endDate && (
@ -434,7 +437,9 @@ const ModelHistoryDisplay = ({
<Flex gap='middle' align='center' justify='flex-end'>
{!startDate && !endDate && (
<>
{loading == true && chartRows.length != 0 && <LoadingOutlined />}
{loading == true && chartRows.length != 0 && (
<LoadingOutlined />
)}
<Segmented
size='small'
options={[
@ -456,6 +461,7 @@ const ModelHistoryDisplay = ({
style={{
height: toCssHeight(height),
display: 'flex',
gap: 12,
flexDirection: 'column',
minHeight: 0
}}
@ -465,8 +471,7 @@ const ModelHistoryDisplay = ({
style={{
flexShrink: 0,
display: 'flex',
justifyContent: 'center',
paddingBottom: 4
justifyContent: 'center'
}}
>
<HistoryChartLegend
@ -475,7 +480,7 @@ const ModelHistoryDisplay = ({
/>
</div>
)}
<div style={{ flex: 1, minHeight: 0 }}>
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
{chartRows.length > 0 && (
<HistoryEChart
chartRows={chartRows}
@ -485,12 +490,20 @@ const ModelHistoryDisplay = ({
/>
)}
{loading == true && chartRows.length == 0 && (
<Flex justify='center' align='center' style={{ height: '100%' }}>
<Flex
justify='center'
align='center'
style={{ height: '100%', marginBottom: 6 }}
>
<LoadingOutlined />
</Flex>
)}
{loading == false && chartRows.length == 0 && (
<Flex justify='center' align='center' style={{ height: '100%' }}>
<Flex
justify='center'
align='center'
style={{ height: '100%', marginBottom: 6 }}
>
<MissingPlaceholder message='No data available.' />
</Flex>
)}