fix geochart label observations

Canadian-Geospatial-Platform · Mar 26, 2024 · 3d64a56 · 3d64a56
1 parent b0bd3d5
commit 3d64a56
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/src/chart-parsing.ts b/src/chart-parsing.ts
@@ -628,6 +628,8 @@ export function createChartJSOptions<TType extends ChartType>(
       x: {
         type: chartConfig.geochart.xAxis?.type,
         ticks: {
+          autoSkip: true,
+          maxTicksLimit: 20,
           major: {
             enabled: true,
           },

diff --git a/src/chart-style.ts b/src/chart-style.ts
@@ -109,29 +109,44 @@ export const getSxClasses = (theme: Theme) => {
       '& .MuiSlider-markLabel-overlap': {
         marginTop: '20px',
       },
+      '& .MuiSlider-markLabel-first': {
+        marginLeft: '-40px',
+      },
+      '& .MuiSlider-markLabel-last': {
+        marginLeft: '40px',
+      },
       '& .markLabel-first': {
         fontFamily: theme.typography.body1.fontFamily,
         fontSize: theme.palette.geoViewFontSize.sm,
         float: 'left',
-        marginLeft: '-50px',
+        marginLeft: '-60px',
         color: '#000',
         opacity: 0.6,
       },
       '& .markLabel-last': {
         fontFamily: theme.typography.body1.fontFamily,
         fontSize: theme.palette.geoViewFontSize.sm,
         float: 'right',
-        marginRight: '-50px',
+        marginRight: '-60px',
         color: '#000',
         opacity: 0.6,
       },
     },
     ySliderWrapper: {
-      height: '75%',
+      height: '70%',
       textAlign: 'center',
+      marginTop: '-20px',
+      marginLeft: '20px',
       '& .MuiSlider-root': {
         color: theme.palette.geoViewColor.primary.main,
       },
+      '& .markLabel-top, & .markLabel-bottom': {
+        fontFamily: theme.typography.body1.fontFamily,
+        fontSize: theme.palette.geoViewFontSize.sm,
+        marginLeft: '-30px',
+        color: '#000',
+        opacity: 0.6,
+      },
     },
     loadingDatasource: {
       backgroundColor: 'transparent',

diff --git a/src/chart.tsx b/src/chart.tsx
@@ -1423,38 +1423,21 @@ export function GeoChart<
    * Generate marker labels for the slider values
    * @returns The array of slider markers
    */
-  const getMarkers = useCallback(
-    (sliderMin: number, sliderMax: number, sliderValues: number | number[], handleSliderValueDisplay: (value: number) => string) => {
-      const sliderMarks: {
-        value: number;
-        label: string;
-      }[] = [];
-      if (Array.isArray(sliderValues)) {
-        if (sliderMin !== undefined) {
-          sliderMarks.push({
-            value: sliderMin,
-            label: handleSliderValueDisplay(sliderMin),
-          });
-        }
-        for (let i = 0; i < sliderValues.length; i++) {
-          if (sliderValues[i] !== sliderMin || sliderValues[i] !== sliderMax) {
-            sliderMarks.push({
-              value: sliderValues[i],
-              label: handleSliderValueDisplay(sliderValues[i]),
-            });
-          }
-        }
-        if (sliderMax !== undefined) {
-          sliderMarks.push({
-            value: sliderMax,
-            label: handleSliderValueDisplay(sliderMax),
-          });
-        }
+  const getMarkers = useCallback((sliderValues: number | number[], handleSliderValueDisplay: (value: number) => string) => {
+    const sliderMarks: {
+      value: number;
+      label: string;
+    }[] = [];
+    if (Array.isArray(sliderValues)) {
+      for (let i = 0; i < sliderValues.length; i++) {
+        sliderMarks.push({
+          value: sliderValues[i],
+          label: handleSliderValueDisplay(sliderValues[i]),
+        });
       }
-      return sliderMarks;
-    },
-    []
-  );
+    }
+    return sliderMarks;
+  }, []);
 
   const checkOverlap = (
     prev: Element | null,
@@ -1574,7 +1557,7 @@ export function GeoChart<
               )}
             </div>
             <Slider
-              marks={getMarkers(undefined, undefined, xSliderValues, handleSliderXValueDisplay)}
+              marks={getMarkers(xSliderValues, handleSliderXValueDisplay)}
               min={xSliderMin}
               max={xSliderMax}
               step={xSliderSteps}
@@ -1602,8 +1585,13 @@ export function GeoChart<
       if (inputs.chart === 'line' && inputs.ui?.ySlider?.display) {
         return (
           <Box sx={sxClasses.ySliderWrapper}>
+            <div style={{ height: '16px', marginBottom: '10px' }}>
+              {Array.isArray(ySliderValues) && ySliderValues[ySliderValues.length - 1] !== ySliderMax && (
+                <span className="markLabel-top">{handleSliderYValueDisplay(ySliderMax)}</span>
+              )}
+            </div>
             <Slider
-              marks={getMarkers(ySliderMin, ySliderMax, ySliderValues, handleSliderYValueDisplay)}
+              marks={getMarkers(ySliderValues, handleSliderYValueDisplay)}
               min={ySliderMin}
               max={ySliderMax}
               step={ySliderSteps}
@@ -1613,6 +1601,11 @@ export function GeoChart<
               onValueDisplay={handleSliderYValueDisplay}
               onValueDisplayAriaLabel={handleSliderYValueDisplay}
             />
+            <div style={{ height: '16px' }}>
+              {Array.isArray(ySliderValues) && ySliderValues[0] !== ySliderMin && (
+                <span className="markLabel-bottom">{handleSliderYValueDisplay(ySliderMin)}</span>
+              )}
+            </div>
           </Box>
         );
       }
@@ -1825,7 +1818,7 @@ export function GeoChart<
     // The xs: 1, 11 and 12 used here are as documented online
     return (
       <Paper sx={{ ...sx, ...sxClasses.mainGeoChartContainer }}>
-        <Grid container>
+        <Grid container sx={{ m: '20px' }}>
           <Grid item xs={12}>
             <Box sx={sxClasses.header}>
               {renderDatasourceSelector()}