feat: remove duplicate tick labels from axis

src/chart_types/xy_chart/state/utils.ts

@@ -295,9 +295,14 @@ export function computeSeriesGeometries(
 
   // compute how many series are clustered
   const { stackedBarsInCluster, totalBarsInCluster } = countBarsInCluster(stacked, nonStacked);
-
   // compute scales
-  const xScale = computeXScale({ xDomain, totalBarsInCluster, range: [0, width], barsPadding, enableHistogramMode });
+  const xScale = computeXScale({
+    xDomain,
+    totalBarsInCluster,
+    range: [0, width],
+    barsPadding,
+    enableHistogramMode,
+  });
   const yScales = computeYScales({ yDomains: yDomain, range: [height, 0] });
 
   // compute colors

src/chart_types/xy_chart/utils/axis_utils.test.ts

@@ -22,7 +22,7 @@ import { AxisSpec, DomainRange, AxisStyle } from './specs';
 import { Position } from '../../../utils/commons';
 import { LIGHT_THEME } from '../../../utils/themes/light_theme';
 import { AxisId, GroupId } from '../../../utils/ids';
-import { ScaleType } from '../../../scales';
+import { ScaleType, Scale } from '../../../scales';
 import {
   AxisTick,
   AxisTicksDimensions,
@@ -48,13 +48,16 @@ import {
   getAxisTickLabelPadding,
   isVerticalGrid,
   isHorizontalGrid,
+  enableDuplicatedTicks,
 } from './axis_utils';
 import { CanvasTextBBoxCalculator } from '../../../utils/bbox/canvas_text_bbox_calculator';
 import { SvgTextBBoxCalculator } from '../../../utils/bbox/svg_text_bbox_calculator';
 import { niceTimeFormatter } from '../../../utils/data/formatters';
 import { mergeYCustomDomainsByGroupId } from '../state/selectors/merge_y_custom_domains';
 import { ChartTypes } from '../..';
 import { SpecTypes } from '../../../specs/settings';
+import { DateTime } from 'luxon';
+import { computeXScale } from './scales';
 
 describe('Axis computational utils', () => {
   const mockedRect = {
@@ -202,7 +205,7 @@ describe('Axis computational utils', () => {
     expect(axisDimensions).toEqual(axis1Dims);
 
     const computeScalelessSpec = () => {
-      computeAxisTicksDimensions(ungroupedAxisSpec, xDomain, [yDomain], 1, bboxCalculator, 0, axes);
+      computeAxisTicksDimensions(ungroupedAxisSpec, xDomain, [yDomain], 1, bboxCalculator, 0, axes, undefined, false);
     };
 
     const ungroupedAxisSpec = { ...verticalAxisSpec, groupId: 'foo' };
@@ -1436,4 +1439,88 @@ describe('Axis computational utils', () => {
 
     expect(getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle)).toEqual(2);
   });
+  test('should show unique tick labels if duplicateTicks is set to false', () => {
+    const now = DateTime.fromISO('2019-01-11T00:00:00.000')
+      .setZone('utc+1')
+      .toMillis();
+    const oneDay = 1000 * 60 * 60 * 24;
+    const formatter = niceTimeFormatter([now, now + oneDay * 31]);
+    const axisSpec: AxisSpec = {
+      id: 'bottom',
+      position: 'bottom',
+      enableDuplicatedTicks: false,
+      chartType: 'xy_axis',
+      specType: 'axis',
+      groupId: '__global__',
+      hide: false,
+      showOverlappingLabels: false,
+      showOverlappingTicks: false,
+      tickSize: 10,
+      tickPadding: 10,
+      tickLabelRotation: 0,
+      tickFormat: formatter,
+    };
+    const xDomainTime: XDomain = {
+      type: 'xDomain',
+      isBandScale: false,
+      domain: [1547190000000, 1547622000000],
+      minInterval: 86400000,
+      scaleType: ScaleType.Time,
+    };
+    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const offset = 0;
+    const tickFormatOption = { timeZone: 'utc+1' };
+    expect(enableDuplicatedTicks(axisSpec, scale, offset, tickFormatOption)).toEqual([
+      { value: 1547208000000, label: '2019-01-11', position: 25.145833333333332 },
+      { value: 1547251200000, label: '2019-01-12', position: 85.49583333333334 },
+      { value: 1547337600000, label: '2019-01-13', position: 206.19583333333333 },
+      { value: 1547424000000, label: '2019-01-14', position: 326.8958333333333 },
+      { value: 1547510400000, label: '2019-01-15', position: 447.59583333333336 },
+      { value: 1547596800000, label: '2019-01-16', position: 568.2958333333333 },
+    ]);
+  });
+  test('should show duplicate tick labels if duplicateTicks is set to true', () => {
+    const now = DateTime.fromISO('2019-01-11T00:00:00.000')
+      .setZone('utc+1')
+      .toMillis();
+    const oneDay = 1000 * 60 * 60 * 24;
+    const formatter = niceTimeFormatter([now, now + oneDay * 31]);
+    const axisSpec: AxisSpec = {
+      id: 'bottom',
+      position: 'bottom',
+      enableDuplicatedTicks: true,
+      chartType: 'xy_axis',
+      specType: 'axis',
+      groupId: '__global__',
+      hide: false,
+      showOverlappingLabels: false,
+      showOverlappingTicks: false,
+      tickSize: 10,
+      tickPadding: 10,
+      tickLabelRotation: 0,
+      tickFormat: formatter,
+    };
+    const xDomainTime: XDomain = {
+      type: 'xDomain',
+      isBandScale: false,
+      domain: [1547190000000, 1547622000000],
+      minInterval: 86400000,
+      scaleType: ScaleType.Time,
+    };
+    const scale: Scale = computeXScale({ xDomain: xDomainTime, totalBarsInCluster: 0, range: [0, 603.5] });
+    const offset = 0;
+    const tickFormatOption = { timeZone: 'utc+1' };
+    expect(enableDuplicatedTicks(axisSpec, scale, offset, tickFormatOption)).toEqual([
+      { value: 1547208000000, label: '2019-01-11', position: 25.145833333333332 },
+      { value: 1547251200000, label: '2019-01-12', position: 85.49583333333334 },
+      { value: 1547294400000, label: '2019-01-12', position: 145.84583333333333 },
+      { value: 1547337600000, label: '2019-01-13', position: 206.19583333333333 },
+      { value: 1547380800000, label: '2019-01-13', position: 266.54583333333335 },
+      { value: 1547424000000, label: '2019-01-14', position: 326.8958333333333 },
+      { value: 1547467200000, label: '2019-01-14', position: 387.24583333333334 },
+      { value: 1547510400000, label: '2019-01-15', position: 447.59583333333336 },
+      { value: 1547553600000, label: '2019-01-15', position: 507.9458333333333 },
+      { value: 1547596800000, label: '2019-01-16', position: 568.2958333333333 },
+    ]);
+  });
 });

src/chart_types/xy_chart/utils/axis_utils.ts

@@ -87,7 +87,6 @@ export function computeAxisTicksDimensions(
   if (axisSpec.hide) {
     return null;
   }
-
   const scale = getScaleForAxisSpec(
     axisSpec,
     xDomain,
@@ -225,7 +224,7 @@ export const getMaxBboxDimensions = (
   };
 };
 
-function computeTickDimensions(
+export function computeTickDimensions(
   scale: Scale,
   tickFormat: TickFormatter,
   bboxCalculator: BBoxCalculator,
@@ -238,11 +237,9 @@ function computeTickDimensions(
   const tickLabels = tickValues.map((d) => {
     return tickFormat(d, tickFormatOptions);
   });
-
   const {
     tickLabelStyle: { fontFamily, fontSize },
   } = axisConfig;
-
   const {
     maxLabelBboxWidth,
     maxLabelBboxHeight,
@@ -252,7 +249,6 @@ function computeTickDimensions(
     getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding),
     { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 },
   );
-
   return {
     tickValues,
     tickLabels,
@@ -444,14 +440,42 @@ export function getAvailableTicks(
 
     return [firstTick, lastTick];
   }
-  return ticks.map((tick) => {
+  return enableDuplicatedTicks(axisSpec, scale, offset, tickFormatOptions);
+}
+
+export function enableDuplicatedTicks(
+  axisSpec: AxisSpec,
+  scale: Scale,
+  offset: number,
+  tickFormatOptions?: TickFormatterOptions,
+) {
+  const ticks = scale.ticks();
+  const labels = [...new Set(ticks.map((tick) => axisSpec.tickFormat(tick, tickFormatOptions)))];
+  const allTicks = ticks.map((tick) => {
     return {
       value: tick,
       label: axisSpec.tickFormat(tick, tickFormatOptions),
       position: scale.scale(tick) + offset,
     };
   });
+
+  if (axisSpec.enableDuplicatedTicks === false) {
+    const uniqueTickLabels: { value: any; label: string; position: number }[] = [];
+    allTicks.filter((value, index) => {
+      for (let i = 0; i < labels.length; i++) {
+        if (labels[i] === allTicks[index].label) {
+          uniqueTickLabels.push(allTicks[index]);
+          // once uniqueTickLabels has the unique label, remove the label from the labels array so it doesnt create a duplicate
+          labels.splice(i, 1);
+        }
+      }
+    });
+    return uniqueTickLabels;
+  } else {
+    return allTicks;
+  }
 }
+
 export function getVisibleTicks(allTicks: AxisTick[], axisSpec: AxisSpec, axisDim: AxisTicksDimensions): AxisTick[] {
   // We sort the ticks by position so that we can incrementally compute previousOccupiedSpace
   allTicks.sort((a: AxisTick, b: AxisTick) => a.position - b.position);

src/chart_types/xy_chart/utils/specs.ts

@@ -525,11 +525,14 @@ export interface AxisSpec extends Spec {
   style?: AxisStyle;
   /** Show only integar values **/
   integersOnly?: boolean;
+  /** Remove duplicate ticks, default is false*/
+  enableDuplicatedTicks?: boolean;
 }
 
 export type TickFormatterOptions = {
   timeZone?: string;
 };
+
 export type TickFormatter = (value: any, options?: TickFormatterOptions) => string;
 
 export interface AxisStyle {

stories/line/10_duplicate_ticks.tsx

@@ -0,0 +1,64 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import React from 'react';
+import { Axis, Chart, LineSeries, Position, ScaleType, niceTimeFormatter } from '../../src/';
+import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
+import { boolean } from '@storybook/addon-knobs';
+import { DateTime } from 'luxon';
+
+export const example = () => {
+  const now = DateTime.fromISO('2019-01-11T00:00:00.000')
+    .setZone('utc+1')
+    .toMillis();
+  const oneDay = 1000 * 60 * 60 * 24;
+  const formatter = niceTimeFormatter([now, now + oneDay * 31]);
+  const duplicateTicksInAxis = boolean('Show duplicate ticks in x axis', false);
+  return (
+    <Chart className="story-chart">
+      <Axis
+        id="bottom"
+        position={Position.Bottom}
+        tickFormat={formatter}
+        enableDuplicatedTicks={duplicateTicksInAxis}
+      />
+      <Axis
+        id="left"
+        title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+        position={Position.Left}
+        tickFormat={(d) => `${Number(d).toFixed(1)}`}
+      />
+      <LineSeries
+        id="lines"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
+        data={[
+          { x: now, y: 2 },
+          { x: now + oneDay, y: 3 },
+          { x: now + oneDay * 2, y: 3 },
+          { x: now + oneDay * 3, y: 4 },
+          { x: now + oneDay * 4, y: 8 },
+          { x: now + oneDay * 5, y: 6 },
+        ]}
+        timeZone="local"
+      />
+    </Chart>
+  );
+};

stories/line/line.stories.tsx

@@ -34,3 +34,4 @@ export { example as curvedWithAxisAndLegend } from './6_curved';
 export { example as multipleWithAxisAndLegend } from './7_multiple';
 export { example as stackedWithAxisAndLegend } from './8_stacked';
 export { example as multiSeriesWithLogValues } from './9_multi_series';
+export { example as duplicateTicksDates } from './10_duplicate_ticks';