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

@@ -202,7 +202,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' };

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,
@@ -157,6 +156,7 @@ export function getScaleForAxisSpec(
       range,
       ticks: axisSpec.ticks,
       integersOnly: axisSpec.integersOnly,
+      duplicateTicks: axisSpec.duplicateTicks,
     });
     if (yScales.has(axisSpec.groupId)) {
       return yScales.get(axisSpec.groupId)!;
@@ -171,6 +171,7 @@ export function getScaleForAxisSpec(
       enableHistogramMode,
       ticks: axisSpec.ticks,
       integersOnly: axisSpec.integersOnly,
+      duplicateTicks: axisSpec.duplicateTicks,
     });
   }
 }
@@ -225,24 +226,23 @@ export const getMaxBboxDimensions = (
   };
 };
 
-function computeTickDimensions(
+export function computeTickDimensions(
   scale: Scale,
   tickFormat: TickFormatter,
   bboxCalculator: BBoxCalculator,
   axisConfig: AxisConfig,
   tickLabelPadding: number,
   tickLabelRotation = 0,
+  // duplicateTicks: boolean = false,
   tickFormatOptions?: TickFormatterOptions,
 ) {
   const tickValues = scale.ticks();
   const tickLabels = tickValues.map((d) => {
     return tickFormat(d, tickFormatOptions);
   });
-
   const {
     tickLabelStyle: { fontFamily, fontSize },
   } = axisConfig;
-
   const {
     maxLabelBboxWidth,
     maxLabelBboxHeight,
@@ -252,7 +252,6 @@ function computeTickDimensions(
     getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding),
     { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 },
   );
-
   return {
     tickValues,
     tickLabels,
@@ -444,14 +443,42 @@ export function getAvailableTicks(
 
     return [firstTick, lastTick];
   }
-  return ticks.map((tick) => {
+  return getDuplicateTicks(axisSpec, scale, offset, tickFormatOptions);
+}
+
+export function getDuplicateTicks(
+  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.duplicateTicks === 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/scales.ts

@@ -78,6 +78,7 @@ interface XScaleOptions {
   enableHistogramMode?: boolean;
   ticks?: number;
   integersOnly?: boolean;
+  duplicateTicks?: boolean;
 }
 
 /**
@@ -87,7 +88,16 @@ interface XScaleOptions {
  * @param axisLength the length of the x axis
  */
 export function computeXScale(options: XScaleOptions): Scale {
-  const { xDomain, totalBarsInCluster, range, barsPadding, enableHistogramMode, ticks, integersOnly } = options;
+  const {
+    xDomain,
+    totalBarsInCluster,
+    range,
+    barsPadding,
+    enableHistogramMode,
+    ticks,
+    integersOnly,
+    duplicateTicks,
+  } = options;
   const { scaleType, minInterval, domain, isBandScale, timeZone } = xDomain;
   const rangeDiff = Math.abs(range[1] - range[0]);
   const isInverse = range[1] < range[0];
@@ -129,7 +139,7 @@ export function computeXScale(options: XScaleOptions): Scale {
     } else {
       return new ScaleContinuous(
         { type: scaleType, domain, range },
-        { bandwidth: 0, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks, integersOnly },
+        { bandwidth: 0, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks, integersOnly, duplicateTicks },
       );
     }
   }
@@ -140,6 +150,7 @@ interface YScaleOptions {
   range: [number, number];
   ticks?: number;
   integersOnly?: boolean;
+  duplicateTicks?: boolean;
 }
 /**
  * Compute the y scales, one per groupId for the y axis.
@@ -148,7 +159,7 @@ interface YScaleOptions {
  */
 export function computeYScales(options: YScaleOptions): Map<GroupId, Scale> {
   const yScales: Map<GroupId, Scale> = new Map();
-  const { yDomains, range, ticks, integersOnly } = options;
+  const { yDomains, range, ticks, integersOnly, duplicateTicks } = options;
   yDomains.forEach(({ scaleType: type, domain, groupId }) => {
     const yScale = new ScaleContinuous(
       {
@@ -159,6 +170,7 @@ export function computeYScales(options: YScaleOptions): Map<GroupId, Scale> {
       {
         ticks,
         integersOnly,
+        duplicateTicks,
       },
     );
     yScales.set(groupId, yScale);

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*/
+  duplicateTicks?: boolean;
 }
 
 export type TickFormatterOptions = {
   timeZone?: string;
 };
+
 export type TickFormatter = (value: any, options?: TickFormatterOptions) => string;
 
 export interface AxisStyle {

src/scales/scale_continuous.ts

@@ -139,6 +139,8 @@ interface ScaleOptions {
   isSingleValueHistogram: boolean;
   /** Show only integer values **/
   integersOnly?: boolean;
+  /** Show duplicate tick values default to false */
+  duplicateTicks?: boolean;
 }
 const defaultScaleOptions: ScaleOptions = {
   bandwidth: 0,
@@ -149,6 +151,7 @@ const defaultScaleOptions: ScaleOptions = {
   ticks: 10,
   isSingleValueHistogram: false,
   integersOnly: false,
+  duplicateTicks: false,
 };
 export class ScaleContinuous implements Scale {
   readonly bandwidth: number;

stories/line/10_duplicate_ticks.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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} duplicateTicks={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 },
+        ]}
+      />
+    </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';