fix: add helper function to remove duplicate tickLabels from axis

elastic · Mar 3, 2020 · f4904f2 · f4904f2
1 parent 6bf9a69
commit f4904f2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/src/chart_types/xy_chart/utils/axis_utils.test.ts b/src/chart_types/xy_chart/utils/axis_utils.test.ts
@@ -31,13 +31,15 @@ import {
   getAxisTickLabelPadding,
   isVerticalGrid,
   isHorizontalGrid,
+  removeDupeTickLabels,
 } 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';
 
 describe('Axis computational utils', () => {
   const mockedRect = {
@@ -524,6 +526,38 @@ describe('Axis computational utils', () => {
     ];
     expect(visibleOverlappingTicksAndLabels).toEqual(expectedVisibleOverlappingTicksAndLabels);
   });
+  test('should remove duplicate tick labels when tick values repeat', () => {
+    const tickValues = [
+      1546329600000,
+      1546329600000,
+      1546329600000,
+      1546329600000,
+      1546416000000,
+      1546502400000,
+      1546588800000,
+      1546675200000,
+      1546761600000,
+      1546848000000,
+      1546934400000,
+      1547020800000,
+    ];
+    const tickLabels = [
+      '2019-01-01 00:00:00',
+      '2019-01-02 00:00:00',
+      '2019-01-03 00:00:00',
+      '2019-01-04 00:00:00',
+      '2019-01-05 00:00:00',
+      '2019-01-06 00:00:00',
+      '2019-01-07 00:00:00',
+      '2019-01-08 00:00:00',
+      '2019-01-09 00:00:00',
+    ];
+    const tickFormat = (d: number) => {
+      return DateTime.fromMillis(d).toFormat('yyyy-MM-dd HH:mm:ss');
+    };
+
+    expect(removeDupeTickLabels(tickValues, tickFormat)).toEqual(tickLabels);
+  });
   test('should compute min max range for on 0 deg bottom', () => {
     const minMax = getMinMaxRange(Position.Bottom, 0, {
       width: 100,

diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts
@@ -69,7 +69,6 @@ export function computeAxisTicksDimensions(
   if (axisSpec.hide) {
     return null;
   }
-
   const scale = getScaleForAxisSpec(
     axisSpec,
     xDomain,
@@ -207,7 +206,7 @@ export const getMaxBboxDimensions = (
   };
 };
 
-function computeTickDimensions(
+export function computeTickDimensions(
   scale: Scale,
   tickFormat: TickFormatter,
   bboxCalculator: BBoxCalculator,
@@ -217,10 +216,7 @@ function computeTickDimensions(
   tickFormatOptions?: TickFormatterOptions,
 ) {
   const tickValues = scale.ticks();
-  const tickLabels = tickValues.map((d) => {
-    return tickFormat(d, tickFormatOptions);
-  });
-
+  const tickLabels = removeDupeTickLabels(tickValues, tickFormat, tickFormatOptions);
   const {
     tickLabelStyle: { fontFamily, fontSize },
   } = axisConfig;
@@ -234,7 +230,6 @@ function computeTickDimensions(
     getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding),
     { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 },
   );
-
   return {
     tickValues,
     tickLabels,
@@ -245,6 +240,21 @@ function computeTickDimensions(
   };
 }
 
+export function removeDupeTickLabels(
+  tickValues: Array<number | string>,
+  tickFormat: TickFormatter,
+  tickFormatOptions?: TickFormatterOptions,
+) {
+  return (
+    tickValues
+      // @ts-ignore
+      .filter((value: any, index: number) => tickValues.indexOf(value) === index)
+      .map((d: any) => {
+        return tickFormat(d, tickFormatOptions);
+      })
+  );
+}
+
 /**
  * The Konva api sets the top right corner of a shape as the default origin of rotation.
  * In order to apply rotation to tick labels while preserving their relative position to the axis,