Refactor HistoryDisplay and ModelHistoryDisplay for Improved Layout and Readability

- 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.

src/components/Dashboard/common/HistoryDisplay.jsx

@@ -204,8 +204,11 @@ const HistoryDisplay = ({
     })
   }, [config, themeColors])
 
-  const { slotRef, measureRef, overlay: legendOverflow } =
+  const {
-    useHistoryLegendOverlay(seriesLabels)
+    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',
+                justifyContent: 'center'
-                paddingBottom: 4
               }}
             >
               <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>
             )}

src/components/Dashboard/common/ModelHistoryDisplay.jsx

@@ -164,8 +164,11 @@ const ModelHistoryDisplay = ({
     })
   }, [modelStats, themeColors])
 
-  const { slotRef, measureRef, overlay: legendOverflow } =
+  const {
-    useHistoryLegendOverlay(seriesLabels)
+    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',
+                justifyContent: 'center'
-                paddingBottom: 4
               }}
             >
               <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>
             )}