Timeline Component to support an option to match the legend to the sl…

…ider's steps
wri · Mar 21, 2024 · 05497ee · 05497ee
1 parent 7388409
commit 05497ee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/components/map/components/legend/components/timeline/index.js b/components/map/components/legend/components/timeline/index.js
@@ -15,6 +15,8 @@ const mapStateToProps = (
     startDate,
     endDate,
     trimEndDate,
+    step,
+    matchLegend,
     dynamicTimeline,
     ...props
   }
@@ -28,7 +30,8 @@ const mapStateToProps = (
     dynamicTimeline,
   };
   return {
-    marks: getMarks({ dates, dynamicTimeline }),
+    marks: getMarks({ dates, step, matchLegend, dynamicTimeline }),
+    step,
     ...props,
   };
 };

diff --git a/components/map/components/legend/components/timeline/selectors.js b/components/map/components/legend/components/timeline/selectors.js
@@ -3,7 +3,15 @@ import moment from 'moment';
 import range from 'lodash/range';
 
 const getDates = (state) => state.dates;
-export const getMarks = createSelector(getDates, (dates) => {
+const getSliderStep = (state) => state.step;
+const getMatchLegend = (state) => state.matchLegend;
+
+const getTicksStep = (numOfYears, sliderStep, matchLegend) => {
+  if (matchLegend && sliderStep) return sliderStep - 1;
+  return (numOfYears > 6 ? 6 : numOfYears);
+}
+
+export const getMarks = createSelector(getDates, getSliderStep, getMatchLegend, (dates, sliderStep, matchLegend) => {
   if (!dates) return null;
   const { minDate, maxDate, dynamicTimeline = false } = dates;
   const numOfYears = moment(maxDate).diff(minDate, 'years');
@@ -12,11 +20,12 @@ export const getMarks = createSelector(getDates, (dates) => {
   if (!numOfYears || maxDays <= 365) return null;
 
   const marks = {};
+  const ticksStep = getTicksStep(numOfYears, sliderStep, matchLegend);
 
   let ticks = range(
     0,
     maxDays + 1,
-    maxDays / (numOfYears > 6 ? 6 : numOfYears)
+    maxDays / ticksStep
   );
 
   if (dynamicTimeline) {