diff --git a/components/map/components/legend/components/timeline/index.js b/components/map/components/legend/components/timeline/index.js index c83d91e3a7..3d335ba90e 100644 --- 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 index 222c7564f6..7de78b8b8c 100644 --- 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) {