From 8b7d33bd36794d2baca6ddd992e4dc86852861ca Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Thu, 26 Sep 2024 12:14:13 -0400
Subject: [PATCH 1/6] Fix for slider labels piling up

---
 index.html           |   9 ++
 src/app.tsx          | 342 +++++++++++++++++++++----------------------
 src/chart-parsing.ts |   8 +-
 src/chart-style.ts   |   6 +
 src/chart.tsx        |  57 +++++---
 5 files changed, 228 insertions(+), 194 deletions(-)

diff --git a/index.html b/index.html
index b984627..a85eb66 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,13 @@
     <!-- <script src="https://alex-nrcan.github.io/geoview/cgpv-main.js"></script> -->
     <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
 
+    <style>
+      /* To help with display */
+      .MuiGrid2-container {
+        width: 600px;
+      }
+    </style>
+
     <script>
       const DATA_INPUT_LINE_1 = {
         chart: 'line',
@@ -861,6 +868,8 @@
 
     <!--------------- CHART IS HERE ----------------->
     <div id="root2aca7b6b288c" style="position: relative; width: 800px;"></div>
+    <!--------------- CHART IS HERE ----------------->
+
     <div>
       <button onclick="redrawChart()" style="padding:5px;"><strong>Looks weird? Redraw!</strong></button>
       <button onclick="isLoadingState(1)" style="padding:5px;"><strong>Sim. loading whole chart</strong></button>
diff --git a/src/app.tsx b/src/app.tsx
index 173bad3..93f52e1 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,171 +1,171 @@
-import { GeoChart } from './chart';
-import { GeoChartConfig, ChartType, ChartOptions, ChartData, GeoChartAction, DefaultDataPoint } from './types';
-import { SchemaValidator } from './chart-schema-validator';
-
-/**
- * Main props for the Application
- */
-export interface TypeAppProps {
-  schemaValidator: SchemaValidator;
-}
-
-/**
- * Create a container to visualize a GeoChart in a standalone manner.
- *
- * @returns {JSX.Element} the element that has the GeoChart
- */
-export function App(props: TypeAppProps): JSX.Element {
-  // Can't type the window object to a 'TypeWindow', because we don't have access to the cgpv library when this line runs.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const w = window as any;
-  // Fetch the cgpv module
-  const { cgpv } = w;
-  const { react, ui } = cgpv;
-  const { useEffect, useState, useCallback } = react;
-  const { Box } = ui.elements;
-  const { schemaValidator } = props;
-
-  // #region USE STATE SECTION ****************************************************************************************
-
-  const [inputs, setInputs] = useState() as [
-    GeoChartConfig<ChartType> | undefined,
-    React.Dispatch<React.SetStateAction<GeoChartConfig<ChartType> | undefined>>
-  ];
-  const [chart, setChart] = useState() as [ChartType, React.Dispatch<React.SetStateAction<ChartType>>];
-  const [data, setData] = useState() as [
-    ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined,
-    React.Dispatch<React.SetStateAction<ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined>>
-  ];
-  const [options, setOptions] = useState() as [ChartOptions | undefined, React.Dispatch<React.SetStateAction<ChartOptions> | undefined>];
-  const [action, setAction] = useState() as [GeoChartAction, React.Dispatch<React.SetStateAction<GeoChartAction>>];
-  const [language, setLanguage] = useState() as [string, React.Dispatch<React.SetStateAction<string>>];
-  const [isLoadingChart, setIsLoadingChart] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-  const [isLoadingDatasource, setIsLoadingDatasource] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-
-  // #endregion
-
-  // #region EVENT HANDLERS SECTION ***********************************************************************************
-
-  /**
-   * Handles when the Chart has to be loaded with data or options.
-   */
-  const handleChartLoad = (e: Event): void => {
-    const ev = e as CustomEvent;
-
-    // If inputs provided
-    if (ev.detail.inputs) {
-      setInputs(ev.detail.inputs);
-    } else {
-      setInputs(undefined); // Clear
-      if (ev.detail.chart) {
-        setChart(ev.detail.chart);
-      }
-      if (ev.detail.options) {
-        setOptions(ev.detail.options);
-      }
-      if (ev.detail.data) {
-        setData(ev.detail.data);
-      }
-      setAction({ shouldRedraw: true });
-    }
-  };
-
-  /**
-   * Handles when the Chart has to be redrawn.
-   */
-  const handleChartRedraw = (): void => {
-    setAction({ shouldRedraw: true });
-  };
-
-  /**
-   * Handles when the Chart has to show a loading state.
-   */
-  const handleChartLoading = (e: Event): void => {
-    const ev = e as CustomEvent;
-
-    setIsLoadingChart(false);
-    setIsLoadingDatasource(false);
-    if (ev.detail.state === 1) setIsLoadingChart(true);
-    if (ev.detail.state === 2) setIsLoadingDatasource(true);
-  };
-
-  // #endregion
-
-  // #region HOOKS SECTION ********************************************************************************************
-
-  /**
-   * Handles when the Chart has parsed inputs.
-   * @param theChart ChartType The chart type
-   * @param theOptions ChartOptions The chart options
-   * @param theData ChartData The chart data
-   */
-  const handleParsed = useCallback((theChart: ChartType, theOptions: ChartOptions, theData: ChartData): void => {
-    // Raise event higher
-    window.dispatchEvent(new CustomEvent('chart/parsed', { detail: { chart: theChart, options: theOptions, data: theData } }));
-  }, []);
-
-  /**
-   * Handles a generic error that happened in the Chart component.
-   * @param error The error message
-   * @param exception The exception that happened (if any)
-   */
-  const handleError = useCallback((error: string, exception: unknown): void => {
-    // Show the error using an alert. We can't use the cgpv SnackBar as that component is attached to
-    // a map and we're not even running a cgpv.init() at all here.
-    // eslint-disable-next-line no-console
-    console.error(error, exception);
-    // eslint-disable-next-line no-alert
-    alert(error);
-  }, []);
-
-  /**
-   * Handles when the Chart language is changed.
-   */
-  const handleChartLanguage = useCallback((e: Event): void => {
-    const ev = e as CustomEvent;
-    setLanguage(ev.detail.language);
-  }, []);
-
-  // Effect hook to add and remove event listeners.
-  // Using window.addEventListener is unconventional here, but this is strictly for the 'app' logic with the index.html.
-  // It's not something to be used by the developers when using the Chart component in their projects.
-  useEffect(() => {
-    window.addEventListener('chart/load', handleChartLoad);
-    window.addEventListener('chart/redraw', handleChartRedraw);
-    window.addEventListener('chart/language', handleChartLanguage);
-    window.addEventListener('chart/isLoading', handleChartLoading);
-    return () => {
-      window.removeEventListener('chart/load', handleChartLoad);
-      window.removeEventListener('chart/redraw', handleChartRedraw);
-      window.removeEventListener('chart/language', handleChartLanguage);
-      window.removeEventListener('chart/isLoading', handleChartLoading);
-    };
-  }, [handleChartLanguage]);
-
-  // #endregion
-
-  // #region RENDER SECTION START *************************************************************************************
-
-  // Render the Chart
-  return (
-    <Box sx={{ padding: '10px' }}>
-      <GeoChart
-        inputs={inputs}
-        schemaValidator={schemaValidator}
-        chart={chart}
-        data={data}
-        options={options}
-        action={action}
-        language={language}
-        isLoadingChart={isLoadingChart}
-        isLoadingDatasource={isLoadingDatasource}
-        onParsed={handleParsed}
-        onError={handleError}
-      />
-    </Box>
-  );
-
-  // #endregion
-}
-
-export default App;
+import { GeoChart } from './chart';
+import { GeoChartConfig, ChartType, ChartOptions, ChartData, GeoChartAction, DefaultDataPoint } from './types';
+import { SchemaValidator } from './chart-schema-validator';
+
+/**
+ * Main props for the Application
+ */
+export interface TypeAppProps {
+  schemaValidator: SchemaValidator;
+}
+
+/**
+ * Create a container to visualize a GeoChart in a standalone manner.
+ *
+ * @returns {JSX.Element} the element that has the GeoChart
+ */
+export function App(props: TypeAppProps): JSX.Element {
+  // Can't type the window object to a 'TypeWindow', because we don't have access to the cgpv library when this line runs.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const w = window as any;
+  // Fetch the cgpv module
+  const { cgpv } = w;
+  const { react, ui } = cgpv;
+  const { useEffect, useState, useCallback } = react;
+  const { Box } = ui.elements;
+  const { schemaValidator } = props;
+
+  // #region USE STATE SECTION ****************************************************************************************
+
+  const [inputs, setInputs] = useState() as [
+    GeoChartConfig<ChartType> | undefined,
+    React.Dispatch<React.SetStateAction<GeoChartConfig<ChartType> | undefined>>
+  ];
+  const [chart, setChart] = useState() as [ChartType, React.Dispatch<React.SetStateAction<ChartType>>];
+  const [data, setData] = useState() as [
+    ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined,
+    React.Dispatch<React.SetStateAction<ChartData<ChartType, DefaultDataPoint<ChartType>, string> | undefined>>
+  ];
+  const [options, setOptions] = useState() as [ChartOptions | undefined, React.Dispatch<React.SetStateAction<ChartOptions> | undefined>];
+  const [action, setAction] = useState() as [GeoChartAction, React.Dispatch<React.SetStateAction<GeoChartAction>>];
+  const [language, setLanguage] = useState() as [string, React.Dispatch<React.SetStateAction<string>>];
+  const [isLoadingChart, setIsLoadingChart] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  const [isLoadingDatasource, setIsLoadingDatasource] = useState() as [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+
+  // #endregion
+
+  // #region EVENT HANDLERS SECTION ***********************************************************************************
+
+  /**
+   * Handles when the Chart has to be loaded with data or options.
+   */
+  const handleChartLoad = (e: Event): void => {
+    const ev = e as CustomEvent;
+
+    // If inputs provided
+    if (ev.detail.inputs) {
+      setInputs(ev.detail.inputs);
+    } else {
+      setInputs(undefined); // Clear
+      if (ev.detail.chart) {
+        setChart(ev.detail.chart);
+      }
+      if (ev.detail.options) {
+        setOptions(ev.detail.options);
+      }
+      if (ev.detail.data) {
+        setData(ev.detail.data);
+      }
+      setAction({ shouldRedraw: true });
+    }
+  };
+
+  /**
+   * Handles when the Chart has to be redrawn.
+   */
+  const handleChartRedraw = (): void => {
+    setAction({ shouldRedraw: true });
+  };
+
+  /**
+   * Handles when the Chart has to show a loading state.
+   */
+  const handleChartLoading = (e: Event): void => {
+    const ev = e as CustomEvent;
+
+    setIsLoadingChart(false);
+    setIsLoadingDatasource(false);
+    if (ev.detail.state === 1) setIsLoadingChart(true);
+    if (ev.detail.state === 2) setIsLoadingDatasource(true);
+  };
+
+  // #endregion
+
+  // #region HOOKS SECTION ********************************************************************************************
+
+  /**
+   * Handles when the Chart has parsed inputs.
+   * @param theChart ChartType The chart type
+   * @param theOptions ChartOptions The chart options
+   * @param theData ChartData The chart data
+   */
+  const handleParsed = useCallback((theChart: ChartType, theOptions: ChartOptions, theData: ChartData): void => {
+    // Raise event higher
+    window.dispatchEvent(new CustomEvent('chart/parsed', { detail: { chart: theChart, options: theOptions, data: theData } }));
+  }, []);
+
+  /**
+   * Handles a generic error that happened in the Chart component.
+   * @param error The error message
+   * @param exception The exception that happened (if any)
+   */
+  const handleError = useCallback((error: string, exception: unknown): void => {
+    // Show the error using an alert. We can't use the cgpv SnackBar as that component is attached to
+    // a map and we're not even running a cgpv.init() at all here.
+    // eslint-disable-next-line no-console
+    console.error(error, exception);
+    // eslint-disable-next-line no-alert
+    alert(error);
+  }, []);
+
+  /**
+   * Handles when the Chart language is changed.
+   */
+  const handleChartLanguage = useCallback((e: Event): void => {
+    const ev = e as CustomEvent;
+    setLanguage(ev.detail.language);
+  }, []);
+
+  // Effect hook to add and remove event listeners.
+  // Using window.addEventListener is unconventional here, but this is strictly for the 'app' logic with the index.html.
+  // It's not something to be used by the developers when using the Chart component in their projects.
+  useEffect(() => {
+    window.addEventListener('chart/load', handleChartLoad);
+    window.addEventListener('chart/redraw', handleChartRedraw);
+    window.addEventListener('chart/language', handleChartLanguage);
+    window.addEventListener('chart/isLoading', handleChartLoading);
+    return () => {
+      window.removeEventListener('chart/load', handleChartLoad);
+      window.removeEventListener('chart/redraw', handleChartRedraw);
+      window.removeEventListener('chart/language', handleChartLanguage);
+      window.removeEventListener('chart/isLoading', handleChartLoading);
+    };
+  }, [handleChartLanguage]);
+
+  // #endregion
+
+  // #region RENDER SECTION START *************************************************************************************
+
+  // Render the Chart
+  return (
+    <Box sx={{ padding: '10px' }}>
+      <GeoChart
+        inputs={inputs}
+        schemaValidator={schemaValidator}
+        chart={chart}
+        data={data}
+        options={options}
+        action={action}
+        language={language}
+        isLoadingChart={isLoadingChart}
+        isLoadingDatasource={isLoadingDatasource}
+        onParsed={handleParsed}
+        onError={handleError}
+      />
+    </Box>
+  );
+
+  // #endregion
+}
+
+export default App;
diff --git a/src/chart-parsing.ts b/src/chart-parsing.ts
index 3870049..5fe61ab 100644
--- a/src/chart-parsing.ts
+++ b/src/chart-parsing.ts
@@ -613,7 +613,8 @@ export function createChartJSOptions<TType extends ChartType>(
   chartConfig: GeoChartConfig<TType>,
   defaultOptions: ChartOptions<TType>,
   yAxisType: ScalePossibilities,
-  language: string
+  language: string,
+  records: TypeJsonObject[] | undefined
 ): ChartOptions<TType> {
   // The Chart JS Options as entered or the default options
   const options = {
@@ -624,6 +625,11 @@ export function createChartJSOptions<TType extends ChartType>(
 
   // If line and using a time series
   if (chartConfig.chart === 'line' && (chartConfig.geochart.xAxis?.type === 'time' || chartConfig.geochart.xAxis?.type === 'timeseries')) {
+    // Try to prevent too many ticks vs the actual number of records in the dynamic range (when 20 ticks might be too many)
+    // Still not ideal, not sure how to make it better and keep performance in check...
+    // const maxTicksLimit = Math.min(20, records?.length || 20);
+
+    // Generate the options object
     const optionsLine = options as ChartOptions<'line'>;
     optionsLine.scales = {
       ...optionsLine.scales,
diff --git a/src/chart-style.ts b/src/chart-style.ts
index 795f067..660a057 100644
--- a/src/chart-style.ts
+++ b/src/chart-style.ts
@@ -114,6 +114,9 @@ export const getSxClasses = (theme: Theme) => {
       '& .MuiSlider-root': {
         color: theme.palette.geoViewColor?.primary.main,
       },
+      '& .MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible': {
+        boxShadow: 'rgba(255, 0, 0, 0.80) 0px 0px 0px 3px !important',
+      },
       '& .MuiSlider-markLabel-overlap': {
         marginTop: '20px',
       },
@@ -148,6 +151,9 @@ export const getSxClasses = (theme: Theme) => {
       '& .MuiSlider-root': {
         color: theme.palette.geoViewColor?.primary.main,
       },
+      '&  .MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible': {
+        boxShadow: 'rgba(255, 0, 0, 0.80) 0px 0px 0px 3px !important',
+      },
       '& .markLabel-top, & .markLabel-bottom': {
         fontFamily: theme.typography.body1.fontFamily,
         fontSize: theme.palette.geoViewFontSize?.sm,
diff --git a/src/chart.tsx b/src/chart.tsx
index 98439af..e53e854 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -266,8 +266,9 @@ export function GeoChart<
 
   /**
    * Helper function to set the x and y axes based on the inputs and values.
-   * @param geochart GeoChartOptionsGeochart The Geochart options
-   * @param datasourceItems TypeJsonObject[] The Datasource items
+   * @param {GeoChartOptionsGeochart} geochart The Geochart options
+   * @param {GeoChartOptionsUI | undefined} uiOptions The Geochart options
+   * @param {TypeJsonObject[]} datasourceItems The Datasource items
    */
   const processAxes = (
     geochart: GeoChartOptionsGeochart,
@@ -297,7 +298,15 @@ export function GeoChart<
         setXSliderMax(xMaxVal);
 
         // If steps are determined by config
-        if (uiOptions?.xSlider!.step) setXSliderSteps(uiOptions?.xSlider!.step);
+        if (uiOptions?.xSlider!.step) {
+          setXSliderSteps(uiOptions?.xSlider!.step);
+        } else {
+          // If date axis
+          if (geochart.xAxis.type === 'time' || geochart.xAxis.type === 'timeseries') {
+            // Default to 1 day per step
+            setXSliderSteps(86400000); // 24h x 60m x 60s x 1000ms = 86,400,000
+          }
+        }
       }
     }
 
@@ -320,7 +329,9 @@ export function GeoChart<
         setYSliderMax(yMaxVal);
 
         // If steps are determined by config
-        if (uiOptions?.ySlider!.step) setYSliderSteps(uiOptions?.ySlider!.step);
+        if (uiOptions?.ySlider!.step) {
+          setYSliderSteps(uiOptions?.ySlider!.step);
+        }
       }
     }
 
@@ -621,7 +632,7 @@ export function GeoChart<
   const updateDataVisibilityUsingState = useCallback(
     (theChartRef: ChartJS<TType, TData, TLabel>, theDatasRegistry: GeoChartSelectedDataset): void => {
       // Log
-      logger.logTraceUseCallback('GEOCHART - processLoadingRecords', theChartRef, theDatasRegistry);
+      logger.logTraceUseCallback('GEOCHART - updateDataVisibilityUsingState', theChartRef, theDatasRegistry);
 
       // Check
       if (!theChartRef) return;
@@ -666,7 +677,7 @@ export function GeoChart<
       logger.logTraceUseCallback('GEOCHART - processLoadingRecords', theInputs, theDatasetRegistry, theDatasRegistry, theLanguage);
 
       // Parse the data
-      const parsedOptions = createChartJSOptions<TType>(theInputs, parentOptions!, theYScale, theLanguage);
+      const parsedOptions = createChartJSOptions<TType>(theInputs, parentOptions!, theYScale, theLanguage, records);
       const parsedData = createChartJSData<TType, TData, TLabel>(
         theInputs,
         theDatasetRegistry,
@@ -1234,8 +1245,8 @@ export function GeoChart<
 
   /**
    * Handles when the Datasource changes
-   * @param e Event The Select change event
-   * @param item MenuItem The selected MenuItem
+   * @param {Event} e The Select change event
+   * @param {MenuItem} item The selected MenuItem
    */
   const handleDatasourceChanged = async (e: Event, item: typeof MenuItem): Promise<void> => {
     // Find the selected datasource reference based on the MenuItem
@@ -1258,9 +1269,9 @@ export function GeoChart<
 
   /**
    * Handles when a dataset was checked/unchecked (via the legend)
-   * @param datasetIndex number Indicates the dataset index that was checked/unchecked
-   * @param datasetLabel string | undefined Indicates the dataset label that was checked/unchecked
-   * @param checked boolean Indicates the checked state
+   * @param {number} datasetIndex - Indicates the dataset index that was checked/unchecked
+   * @param {string | undefined} datasetLabel - Indicates the dataset label that was checked/unchecked
+   * @param {boolean} checked - Indicates the checked state
    */
   const handleDatasetChecked = (datasetIndex: number, datasetLabel: string | undefined, checked: boolean): void => {
     // Keep track
@@ -1275,9 +1286,9 @@ export function GeoChart<
 
   /**
    * Handles when a data was checked/unchecked (via the legend). This is only used by Pie and Doughnut Charts.
-   * @param dataIndex number Indicates the data index that was checked/unchecked
-   * @param dataLabel string Indicates the data label that was checked/unchecked
-   * @param checked boolean Indicates the checked state
+   * @param {number} dataIndex - Indicates the data index that was checked/unchecked
+   * @param {string} dataLabel - Indicates the data label that was checked/unchecked
+   * @param {boolean} checked - Indicates the checked state
    */
   const handleDataChecked = (dataIndex: number, dataLabel: string, checked: boolean): void => {
     // Keep track
@@ -1292,7 +1303,7 @@ export function GeoChart<
 
   /**
    * Handles when the X Slider changes
-   * @param value number | number[] Indicates the slider value
+   * @param {number | number[]} value - Indicates the slider value
    */
   const handleSliderXChange = (newValue: number | number[]): void => {
     // Set the X State
@@ -1304,7 +1315,7 @@ export function GeoChart<
 
   /**
    * Handles when the Y Slider changes
-   * @param value number | number[] Indicates the slider value
+   * @param {number | number[]} newValue - Indicates the slider value
    */
   const handleSliderYChange = (newValue: number | number[]): void => {
     // Set the Y State
@@ -1316,7 +1327,8 @@ export function GeoChart<
 
   /**
    * Handles when the Steps Switcher changes
-   * @param value string Indicates the steps value
+   * @param {unknown} e
+   * @param {MenuItem} item
    */
   const handleStepsSwitcherChanged = (e: unknown, item: typeof MenuItem): void => {
     // Set the step switcher
@@ -1328,7 +1340,8 @@ export function GeoChart<
 
   /**
    * Handles when the Scale Switcher changes
-   * @param value string Indicates the scale type value
+   * @param {unknown} e
+   * @param {MenuItem} item
    */
   const handleScaleSwitcherChanged = (e: unknown, item: typeof MenuItem): void => {
     // Set the scale switcher
@@ -1365,7 +1378,7 @@ export function GeoChart<
 
   /**
    * Handles the display of the label on the X Slider
-   * @param value number | number[] Indicates the slider value
+   * @param {number} value - Indicates the slider value
    */
   const handleSliderXValueDisplay = (value: number): string => {
     // Callback in case we're overriding this behavior
@@ -1384,7 +1397,7 @@ export function GeoChart<
 
   /**
    * Handles the display of the label on the Y Slider
-   * @param value number | number[] Indicates the slider value
+   * @param {number} value - Indicates the slider value
    */
   const handleSliderYValueDisplay = (value: number): string => {
     // Callback in case we're overriding this behavior
@@ -1397,7 +1410,7 @@ export function GeoChart<
 
   /**
    * Handles when the download button is clicked
-   * @param index number Indicates the button drop down selection index when it was clicked.
+   * @param {number} index - Indicates the button drop down selection index when it was clicked.
    * For our button usage:
    * - 0: Means 'download view' was selected when button was clicked
    * - 1: Means 'download all' was selected when button was clicked
@@ -1508,7 +1521,7 @@ export function GeoChart<
     if (inputs && selectedDatasource) {
       if (inputs.chart === 'line' && inputs.ui?.xSlider?.display) {
         return (
-          <Box id="xAxisSlider" sx={sxClasses.xSliderWrapper}>
+          <Box sx={sxClasses.xSliderWrapper}>
             <div style={{ height: '16px' }}>
               {Array.isArray(xSliderValues) && xSliderValues[0] !== xSliderMin && (
                 <span className="markLabel-first">{handleSliderXValueDisplay(xSliderMin)}</span>

From 1b5e5e3e6b330d19b7f2cad7fb32ab9ab3f9594b Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Mon, 30 Sep 2024 10:04:07 -0400
Subject: [PATCH 2/6] Different sliders

---
 src/chart-parsing.ts |   8 +-
 src/chart-style.ts   |  38 ----------
 src/chart.tsx        | 111 ++++++++++++++-------------
 src/utils.ts         | 174 ++++++++++++++++++++++++-------------------
 4 files changed, 157 insertions(+), 174 deletions(-)

diff --git a/src/chart-parsing.ts b/src/chart-parsing.ts
index 5fe61ab..9752b18 100644
--- a/src/chart-parsing.ts
+++ b/src/chart-parsing.ts
@@ -613,8 +613,7 @@ export function createChartJSOptions<TType extends ChartType>(
   chartConfig: GeoChartConfig<TType>,
   defaultOptions: ChartOptions<TType>,
   yAxisType: ScalePossibilities,
-  language: string,
-  records: TypeJsonObject[] | undefined
+  language: string
 ): ChartOptions<TType> {
   // The Chart JS Options as entered or the default options
   const options = {
@@ -625,10 +624,6 @@ export function createChartJSOptions<TType extends ChartType>(
 
   // If line and using a time series
   if (chartConfig.chart === 'line' && (chartConfig.geochart.xAxis?.type === 'time' || chartConfig.geochart.xAxis?.type === 'timeseries')) {
-    // Try to prevent too many ticks vs the actual number of records in the dynamic range (when 20 ticks might be too many)
-    // Still not ideal, not sure how to make it better and keep performance in check...
-    // const maxTicksLimit = Math.min(20, records?.length || 20);
-
     // Generate the options object
     const optionsLine = options as ChartOptions<'line'>;
     optionsLine.scales = {
@@ -637,7 +632,6 @@ export function createChartJSOptions<TType extends ChartType>(
         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
index 660a057..49321f8 100644
--- a/src/chart-style.ts
+++ b/src/chart-style.ts
@@ -114,34 +114,6 @@ export const getSxClasses = (theme: Theme) => {
       '& .MuiSlider-root': {
         color: theme.palette.geoViewColor?.primary.main,
       },
-      '& .MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible': {
-        boxShadow: 'rgba(255, 0, 0, 0.80) 0px 0px 0px 3px !important',
-      },
-      '& .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: '-60px',
-        color: '#000',
-        opacity: 0.6,
-      },
-      '& .markLabel-last': {
-        fontFamily: theme.typography.body1.fontFamily,
-        fontSize: theme.palette.geoViewFontSize?.sm,
-        float: 'right',
-        marginRight: '-60px',
-        color: '#000',
-        opacity: 0.6,
-      },
     },
     ySliderWrapper: {
       height: '70%',
@@ -151,16 +123,6 @@ export const getSxClasses = (theme: Theme) => {
       '& .MuiSlider-root': {
         color: theme.palette.geoViewColor?.primary.main,
       },
-      '&  .MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible': {
-        boxShadow: 'rgba(255, 0, 0, 0.80) 0px 0px 0px 3px !important',
-      },
-      '& .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
index e53e854..635e4e6 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -22,8 +22,8 @@ import {
 } from './types';
 import { SchemaValidator, ValidatorResult } from './chart-schema-validator';
 import { createChartJSOptions, createChartJSData, fetchItemsViaQueryForDatasource, setColorPalettes } from './chart-parsing';
-import { isNumber, downloadJson, getColorFromPalette } from './utils';
 import { getSxClasses } from './chart-style';
+import { isNumber, downloadJson, getColorFromPalette, guessEstimatedStep } from './utils';
 
 /**
  * Main props for the Chart.
@@ -221,11 +221,11 @@ export function GeoChart<
   const [filteredRecords, setFilteredRecords] = useState() as [TypeJsonObject[] | undefined, React.Dispatch<TypeJsonObject[] | undefined>];
   const [xSliderMin, setXSliderMin] = useState(0) as [number, React.Dispatch<number>];
   const [xSliderMax, setXSliderMax] = useState(0) as [number, React.Dispatch<number>];
-  const [xSliderSteps, setXSliderSteps] = useState(1) as [number, React.Dispatch<number>];
+  const [xSliderSteps, setXSliderSteps] = useState() as [number | undefined, React.Dispatch<number | undefined>];
   const [xSliderValues, setXSliderValues] = useState() as [number | number[], React.Dispatch<number | number[]>];
   const [ySliderMin, setYSliderMin] = useState(0) as [number, React.Dispatch<number>];
   const [ySliderMax, setYSliderMax] = useState(0) as [number, React.Dispatch<number>];
-  const [ySliderSteps, setYSliderSteps] = useState(1) as [number, React.Dispatch<number>];
+  const [ySliderSteps, setYSliderSteps] = useState() as [number | undefined, React.Dispatch<number | undefined>];
   const [ySliderValues, setYSliderValues] = useState() as [number | number[], React.Dispatch<number | number[]>];
   const [validatorInputs, setValidatorInputs] = useState() as [ValidatorResult | undefined, React.Dispatch<ValidatorResult | undefined>];
   const [validatorOptions, setValidatorOptions] = useState() as [ValidatorResult | undefined, React.Dispatch<ValidatorResult | undefined>];
@@ -303,8 +303,8 @@ export function GeoChart<
         } else {
           // If date axis
           if (geochart.xAxis.type === 'time' || geochart.xAxis.type === 'timeseries') {
-            // Default to 1 day per step
-            setXSliderSteps(86400000); // 24h x 60m x 60s x 1000ms = 86,400,000
+            // Get an estimated stepping value
+            setXSliderSteps(guessEstimatedStep(xMinVal, xMaxVal));
           }
         }
       }
@@ -340,12 +340,12 @@ export function GeoChart<
 
   /**
    * Helper function to set the x and y axes values based on the min and max of the data or if the values were already set in state.
-   * @param xMinVal number | undefined
-   * @param xMaxVal number | undefined
-   * @param yMinVal number | undefined
-   * @param yMaxVal number | undefined
-   * @param theXSliderValues number[] | undefinedd
-   * @param theYSliderValues number[] | undefined
+   * @param {number | undefined} xMinVal - The min value for X
+   * @param {number | undefined} xMaxVal - The max value for X
+   * @param {number | undefined} yMinVal - The min value for Y
+   * @param {number | undefined} yMaxVal - The max value for Y
+   * @param {number[] | undefined} theXSliderValues - The slider values for X
+   * @param {number[] | undefined} theYSliderValues - The slider values for Y
    */
   const processAxesValues = (
     uiOptions: GeoChartOptionsUI | undefined,
@@ -386,8 +386,10 @@ export function GeoChart<
 
   /**
    * Fetches the items to associated to the given Datasource and then sets the Datasource in GeoChart
-   * @param chartConfig GeoViewGeoChartConfig The chart configuration being used
-   * @param ds GeoChartDatasource The Datasource to fetch the items for
+   * @param {GeoViewGeoChartConfig} chartQuery - The chart query being used
+   * @param {string} theLanguage - The language being used
+   * @param {TypeJsonObject | undefined} sourceItem - The source item to fetch for
+   * @param {Function} errorCallback - Callback called when an error happens while fetching data
    */
   const fetchDatasourceItems = async (
     chartQuery: GeoChartQuery,
@@ -413,7 +415,7 @@ export function GeoChart<
 
   /**
    * Helper function checking for the valid states of a list of ValidatorResults. Returns true if there were no errors found.
-   * @param validators (ValidatorResult | undefined)[] The list of validator results to check for their valid states
+   * @param {(ValidatorResult | undefined)[]} validators - The list of validator results to check for their valid states
    * @returns true if there were no errors in the schema validations
    */
   const hasValidSchemas = (validators: (ValidatorResult | undefined)[]): boolean => {
@@ -442,7 +444,10 @@ export function GeoChart<
 
   /**
    * Updates the selected datasets object in synch with the actual datasets read from the data.
-   * @param theChartData ChartData<TType, TData, TLabel>
+   * @param {TypeJsonObject[] | undefined} items - The items reprensenting the data
+   * @param {string | undefined} catPropertyName - The property name for the categorization
+   * @param {string[] | undefined} paletteBackgrounds - The color palette used for the background colors
+   * @param {string[] | undefined} paletteBorders - The color palette used for the border colors
    */
   const processDatasets = useCallback(
     (
@@ -517,7 +522,11 @@ export function GeoChart<
 
   /**
    * Updates the selected data object in synch with the actual labels read from the data.
-   * @param theChartData ChartData<TType, TData, TLabel>
+   * @param {string} theChartType - The chart type
+   * @param {TypeJsonObject[] | undefined} items - The items to process the labels for
+   * @param {string | undefined} labelPropertyName - The property name to use for labeling
+   * @param {string[] | undefined} paletteBackgrounds - The color palette used for the background colors
+   * @param {string[] | undefined} paletteBorders - The color palette used for the border colors
    */
   const processLabels = useCallback(
     (
@@ -597,8 +606,8 @@ export function GeoChart<
 
   /**
    * Updates the chart dataset visibility based on the currently selected datasets.
-   * @param theChartData ChartData<TType, TData, TLabel>
-   * @param theSelectedDatasets GeoChartSelectedDatasets
+   * @param {ChartJS<TType, TData, TLabel>} theChartRef - The ChartJS reference
+   * @param {GeoChartSelectedDataset} theDatasetRegistry - The dataset registry used by the chart
    */
   const updateDatasetVisibilityUsingState = useCallback(
     (theChartRef: ChartJS<TType, TData, TLabel>, theDatasetRegistry: GeoChartSelectedDataset): void => {
@@ -626,8 +635,8 @@ export function GeoChart<
 
   /**
    * Updates the chart data visibility based on the currently selected data.
-   * @param theChartData ChartData<TType, TData, TLabel>
-   * @param theSelectedData GeoChartSelectedDatasets
+   * @param {ChartJS<TType, TData, TLabel>} theChartRef - The ChartJS reference
+   * @param {GeoChartSelectedDataset} theDatasRegistry - The datas registry used by the chart
    */
   const updateDataVisibilityUsingState = useCallback(
     (theChartRef: ChartJS<TType, TData, TLabel>, theDatasRegistry: GeoChartSelectedDataset): void => {
@@ -660,8 +669,13 @@ export function GeoChart<
 
   /**
    * Essential function to load the records in the Chart.
-   * @param datasource GeoChartDatasource The Datasource on which the records were grabbed
-   * @param records TypeJsonObject[] The actual records to load in the Chart.
+   * @param {GeoChartConfig<TType>} theInputs - The inputs configuration
+   * @param {GeoChartSelectedDataset} theDatasetRegistry - The dataset registry
+   * @param {GeoChartSelectedDataset} theDatasRegistry - The datas registry
+   * @param {string} theLanguage - The language
+   * @param {StepsPossibilities} theSteps - The steps for the graph
+   * @param {ScalePossibilities} theYScale - The scale for the Y axis
+   * @param {TypeJsonObject[] | undefined} records - The records
    */
   const processLoadingRecords = useCallback(
     (
@@ -677,7 +691,7 @@ export function GeoChart<
       logger.logTraceUseCallback('GEOCHART - processLoadingRecords', theInputs, theDatasetRegistry, theDatasRegistry, theLanguage);
 
       // Parse the data
-      const parsedOptions = createChartJSOptions<TType>(theInputs, parentOptions!, theYScale, theLanguage, records);
+      const parsedOptions = createChartJSOptions<TType>(theInputs, parentOptions!, theYScale, theLanguage);
       const parsedData = createChartJSData<TType, TData, TLabel>(
         theInputs,
         theDatasetRegistry,
@@ -715,9 +729,15 @@ export function GeoChart<
   /**
    * Helper function to filter datasource items based on 2 possible and independent axis.
    * For performance reasons, the code cumulates the filtered data instead of treating the axes individually.
-   * @param datasourceItems TypeJsonObject[] The Datasource items
-   * @param xValues number | number[] The values in X to filter on
-   * @param yValues number | number[] The values in Y to filter on
+   * @param {GeoChartConfig<TType>} theInputs - The inputs configuration
+   * @param {GeoChartSelectedDataset} theDatasetRegistry - The dataset registry
+   * @param {GeoChartSelectedDataset} theDatasRegistry - The datas registry
+   * @param {string} theLanguage - The language
+   * @param {StepsPossibilities} theSteps - The steps for the graph
+   * @param {ScalePossibilities} theYScale - The scale for the Y axis
+   * @param {TypeJsonObject[] | undefined} records - The records
+   * @param {number | number[]} xValues - The X axis filtering values
+   * @param {number | number[]} yValues - The Y axis filtering values
    */
   const processLoadingRecordsFilteringFirst = useCallback(
     (
@@ -1380,7 +1400,7 @@ export function GeoChart<
    * Handles the display of the label on the X Slider
    * @param {number} value - Indicates the slider value
    */
-  const handleSliderXValueDisplay = (value: number): string => {
+  const handleSliderXValueFormat = (value: number): string => {
     // Callback in case we're overriding this behavior
     const val = onSliderXValueDisplaying?.(value);
     if (val) return val;
@@ -1399,7 +1419,7 @@ export function GeoChart<
    * Handles the display of the label on the Y Slider
    * @param {number} value - Indicates the slider value
    */
-  const handleSliderYValueDisplay = (value: number): string => {
+  const handleSliderYValueFormat = (value: number): string => {
     // Callback in case we're overriding this behavior
     const val = onSliderYValueDisplaying?.(value);
     if (val) return val;
@@ -1510,7 +1530,10 @@ export function GeoChart<
       }
     }
     return sliderMarks;
-  }, []);
+  }, []) as (
+    sliderValues: number | number[],
+    handleSliderValueDisplay: (value: number) => string
+  ) => void;
 
   /**
    * Renders the X Chart Slider JSX.Element or an empty box
@@ -1522,23 +1545,15 @@ export function GeoChart<
       if (inputs.chart === 'line' && inputs.ui?.xSlider?.display) {
         return (
           <Box sx={sxClasses.xSliderWrapper}>
-            <div style={{ height: '16px' }}>
-              {Array.isArray(xSliderValues) && xSliderValues[0] !== xSliderMin && (
-                <span className="markLabel-first">{handleSliderXValueDisplay(xSliderMin)}</span>
-              )}
-              {Array.isArray(xSliderValues) && xSliderValues[xSliderValues.length - 1] !== xSliderMax && (
-                <span className="markLabel-last">{handleSliderXValueDisplay(xSliderMax)}</span>
-              )}
-            </div>
             <Slider
-              marks={getMarkers(xSliderValues, handleSliderXValueDisplay)}
+              marks={getMarkers([xSliderMin, xSliderMax], handleSliderXValueFormat)}
               min={xSliderMin}
               max={xSliderMax}
               step={xSliderSteps}
               value={xSliderValues || 0}
               onChangeCommitted={handleSliderXChange}
-              onValueDisplay={handleSliderXValueDisplay}
-              onValueDisplayAriaLabel={handleSliderXValueDisplay}
+              onValueLabelFormat={handleSliderXValueFormat}
+              onValueDisplayAriaLabel={handleSliderXValueFormat}
             />
           </Box>
         );
@@ -1559,27 +1574,17 @@ 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(ySliderValues, handleSliderYValueDisplay)}
+              marks={getMarkers([ySliderMin, ySliderMax], handleSliderYValueFormat)}
               min={ySliderMin}
               max={ySliderMax}
               step={ySliderSteps}
               value={ySliderValues || 0}
               orientation="vertical"
               onChangeCommitted={handleSliderYChange}
-              onValueDisplay={handleSliderYValueDisplay}
-              onValueDisplayAriaLabel={handleSliderYValueDisplay}
+              onValueLabelFormat={handleSliderYValueFormat}
+              onValueDisplayAriaLabel={handleSliderYValueFormat}
             />
-            <div style={{ height: '16px' }}>
-              {Array.isArray(ySliderValues) && ySliderValues[0] !== ySliderMin && (
-                <span className="markLabel-bottom">{handleSliderYValueDisplay(ySliderMin)}</span>
-              )}
-            </div>
           </Box>
         );
       }
diff --git a/src/utils.ts b/src/utils.ts
index 534c49c..ddb58b9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,76 +1,98 @@
-/**
- * Checks if the value is a number.
- * @param val unknown An unknown value
- * @returns boolean True when the value is a number.
- */
-export const isNumber = (val: unknown): boolean => {
-  return typeof val === 'number' && !Number.isNaN(val);
-};
-
-/**
- * Finds the color in a palette for the given index.
- * When the index is greater than the palette length, it loops back to the beginning.
- * @param colorPalette string[] The color palette to seek for a color
- * @param index number The index we should find a color for
- * @returns string The color at the specified index location in the palette
- */
-export const getColorFromPalette = (colorPalette: string[] | undefined, index: number, defaultColor: string): string => {
-  if (colorPalette) return colorPalette[index % colorPalette.length];
-  return defaultColor;
-};
-
-/**
- * Extracts the color value without its alpha layer.
- * It accepts colors specified in hex, rgb() and rgba() formats.
- * @param color string The color to extract the value without the alpha layer
- * @returns string The opaque color equivalent in rbg() format.
- */
-export const extractColor = (color: string): string => {
-  // Regular expression patterns for different color formats
-  const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
-  const rgbPattern = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/i;
-  const rgbaPattern = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d*\.?\d+)\)$/i;
-
-  // Check for hex color format
-  const hexMatch = color.match(hexPattern);
-  if (hexMatch) {
-    const hex =
-      hexMatch[1].length === 3
-        ? hexMatch[1]
-            .split('')
-            .map((c) => c + c)
-            .join('')
-        : hexMatch[1];
-    return `#${hex}`;
-  }
-
-  // Check for rgb color format
-  const rgbMatch = color.match(rgbPattern);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-
-  // Check for rgba color format
-  const rgbaMatch = color.match(rgbaPattern);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-
-  // As-is
-  return color;
-};
-
-/**
- * Downloads the data object as a JSON file on the client.
- */
-export const downloadJson = (data: unknown, filename: string): void => {
-  const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data, null, 2))}`;
-  const downloadAnchorNode = document.createElement('a');
-  downloadAnchorNode.setAttribute('href', dataStr);
-  downloadAnchorNode.setAttribute('download', filename);
-  document.body.appendChild(downloadAnchorNode); // required for firefox
-  downloadAnchorNode.click();
-  downloadAnchorNode.remove();
-};
+/**
+ * Checks if the value is a number.
+ * @param val unknown An unknown value
+ * @returns boolean True when the value is a number.
+ */
+export const isNumber = (val: unknown): boolean => {
+  return typeof val === 'number' && !Number.isNaN(val);
+};
+
+/**
+ * Finds the color in a palette for the given index.
+ * When the index is greater than the palette length, it loops back to the beginning.
+ * @param colorPalette string[] The color palette to seek for a color
+ * @param index number The index we should find a color for
+ * @returns string The color at the specified index location in the palette
+ */
+export const getColorFromPalette = (colorPalette: string[] | undefined, index: number, defaultColor: string): string => {
+  if (colorPalette) return colorPalette[index % colorPalette.length];
+  return defaultColor;
+};
+
+/**
+ * Extracts the color value without its alpha layer.
+ * It accepts colors specified in hex, rgb() and rgba() formats.
+ * @param color string The color to extract the value without the alpha layer
+ * @returns string The opaque color equivalent in rbg() format.
+ */
+export const extractColor = (color: string): string => {
+  // Regular expression patterns for different color formats
+  const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+  const rgbPattern = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/i;
+  const rgbaPattern = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d*\.?\d+)\)$/i;
+
+  // Check for hex color format
+  const hexMatch = color.match(hexPattern);
+  if (hexMatch) {
+    const hex =
+      hexMatch[1].length === 3
+        ? hexMatch[1]
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : hexMatch[1];
+    return `#${hex}`;
+  }
+
+  // Check for rgb color format
+  const rgbMatch = color.match(rgbPattern);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  // Check for rgba color format
+  const rgbaMatch = color.match(rgbaPattern);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  // As-is
+  return color;
+};
+
+/**
+ * Downloads the data object as a JSON file on the client.
+ */
+export const downloadJson = (data: unknown, filename: string): void => {
+  const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(data, null, 2))}`;
+  const downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.setAttribute('href', dataStr);
+  downloadAnchorNode.setAttribute('download', filename);
+  document.body.appendChild(downloadAnchorNode); // required for firefox
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
+};
+
+/**
+ * Guesses the estimated steps that should be used by the slider, depending on the value range
+ * @param {number} minValue - The minimum value
+ * @param {number} maxValue - The maximum value
+ * @returns The estimated stepping value based on the min and max values
+ */
+export const guessEstimatedStep = (minValue: number, maxValue: number): number | undefined => {
+  const day1 = 86400000; // 24h x 60m x 60s x 1000ms = 86,400,000ms in a day
+  const month1 = day1 * 30; // 2,592,000,000ms in 1 month
+  const year1 = day1 * 365; // 31,536,000,000ms in 1 year
+  const years2 = year1 * 2; // 63,072,000,000ms in 2 years
+  const years10 = year1 * 10; // 63,072,000,000ms in 2 years
+  const months2 = month1 * 2; // 315,360,000,000 in 10 years
+  const intervalDiff = maxValue - minValue;
+
+  let step: number | undefined;
+  if (intervalDiff > months2) step = day1; // Daily stepping
+  if (intervalDiff > years2) step = month1; // Monthly stepping
+  if (intervalDiff > years10) step = year1; // Yearly stepping
+  return step;
+};

From fb8f0a5bc68db383e929108e611fdec1678232b0 Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Tue, 1 Oct 2024 20:14:03 -0400
Subject: [PATCH 3/6] - Activate label spreading on the X slider (custom
 GeoView attribute) - Disable thumb swapping on the X slider (native Slider
 attribute)

---
 src/chart.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/chart.tsx b/src/chart.tsx
index 635e4e6..aa8b4aa 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -1551,6 +1551,8 @@ export function GeoChart<
               max={xSliderMax}
               step={xSliderSteps}
               value={xSliderValues || 0}
+              disableSwap
+              labelSpread
               onChangeCommitted={handleSliderXChange}
               onValueLabelFormat={handleSliderXValueFormat}
               onValueDisplayAriaLabel={handleSliderXValueFormat}

From 9ec131559e83e9fab4d77e5ecf1b3178447d8fec Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Wed, 2 Oct 2024 09:06:29 -0400
Subject: [PATCH 4/6] Pointing on my host

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index a85eb66..b3e66fd 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
     />
 
     <!-- <script src="http://localhost:8080/cgpv-main.js"></script> -->
-    <!-- <script src="https://alex-nrcan.github.io/geoview/cgpv-main.js"></script> -->
-    <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
+    <script src="https://alex-nrcan.github.io/geoview/cgpv-main.js"></script>
+    <!-- <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script> -->
 
     <style>
       /* To help with display */

From 3cdfdd908b3e514674ae17c3df183b5bf7f37667 Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Wed, 2 Oct 2024 10:21:57 -0400
Subject: [PATCH 5/6] Moved more logic inside the Slider component itself

---
 src/chart.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index aa8b4aa..635e4e6 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -1551,8 +1551,6 @@ export function GeoChart<
               max={xSliderMax}
               step={xSliderSteps}
               value={xSliderValues || 0}
-              disableSwap
-              labelSpread
               onChangeCommitted={handleSliderXChange}
               onValueLabelFormat={handleSliderXValueFormat}
               onValueDisplayAriaLabel={handleSliderXValueFormat}

From 665d171dfaa730393d8aba14315ab39a71e3b348 Mon Sep 17 00:00:00 2001
From: AlexNRCan <alexandre.roy@nrcan-rncan.gc.ca>
Date: Wed, 2 Oct 2024 11:42:31 -0400
Subject: [PATCH 6/6] Comment fix

---
 index.html   | 4 ++--
 src/utils.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index b3e66fd..a85eb66 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
     />
 
     <!-- <script src="http://localhost:8080/cgpv-main.js"></script> -->
-    <script src="https://alex-nrcan.github.io/geoview/cgpv-main.js"></script>
-    <!-- <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script> -->
+    <!-- <script src="https://alex-nrcan.github.io/geoview/cgpv-main.js"></script> -->
+    <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
 
     <style>
       /* To help with display */
diff --git a/src/utils.ts b/src/utils.ts
index ddb58b9..d67d767 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -84,10 +84,10 @@ export const downloadJson = (data: unknown, filename: string): void => {
 export const guessEstimatedStep = (minValue: number, maxValue: number): number | undefined => {
   const day1 = 86400000; // 24h x 60m x 60s x 1000ms = 86,400,000ms in a day
   const month1 = day1 * 30; // 2,592,000,000ms in 1 month
+  const months2 = month1 * 2; // 5,184,000,000ms in 2 months
   const year1 = day1 * 365; // 31,536,000,000ms in 1 year
   const years2 = year1 * 2; // 63,072,000,000ms in 2 years
-  const years10 = year1 * 10; // 63,072,000,000ms in 2 years
-  const months2 = month1 * 2; // 315,360,000,000 in 10 years
+  const years10 = year1 * 10; // 315,360,000,000 in 10 years
   const intervalDiff = maxValue - minValue;
 
   let step: number | undefined;