From f7a1aa0c2bee1ff7b8e337dc1c3ccb4a779d8c70 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 4 Mar 2020 13:20:39 -0800 Subject: [PATCH] refactor: add filter after formatting --- .../xy_chart/utils/axis_utils.test.ts | 70 +++++++++---------- src/chart_types/xy_chart/utils/axis_utils.ts | 23 +++--- src/chart_types/xy_chart/utils/scales.ts | 2 + src/chart_types/xy_chart/utils/specs.ts | 3 + 4 files changed, 49 insertions(+), 49 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 index 06d9b340f6..9631ab780b 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.test.ts +++ b/src/chart_types/xy_chart/utils/axis_utils.test.ts @@ -30,7 +30,6 @@ 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'; @@ -38,7 +37,6 @@ 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, Settings } from 'luxon'; describe('Axis computational utils', () => { const mockedRect = { @@ -186,7 +184,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' }; @@ -525,39 +523,39 @@ 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 08:00:00', - '2019-01-02 08:00:00', - '2019-01-03 08:00:00', - '2019-01-04 08:00:00', - '2019-01-05 08:00:00', - '2019-01-06 08:00:00', - '2019-01-07 08:00:00', - '2019-01-08 08:00:00', - '2019-01-09 08:00:00', - ]; - const tickFormat = (d: number) => { - Settings.defaultZoneName = 'utc'; - return DateTime.fromMillis(d).toFormat('yyyy-MM-dd HH:mm:ss'); - }; - - expect(removeDupeTickLabels(tickValues, tickFormat)).toEqual(tickLabels); - }); + // 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 08:00:00', + // '2019-01-02 08:00:00', + // '2019-01-03 08:00:00', + // '2019-01-04 08:00:00', + // '2019-01-05 08:00:00', + // '2019-01-06 08:00:00', + // '2019-01-07 08:00:00', + // '2019-01-08 08:00:00', + // '2019-01-09 08:00:00', + // ]; + // const tickFormat = (d: number) => { + // Settings.defaultZoneName = 'utc'; + // 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 index 283fcdc53b..82787a1291 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.ts +++ b/src/chart_types/xy_chart/utils/axis_utils.ts @@ -93,6 +93,7 @@ export function computeAxisTicksDimensions( axisConfig, tickLabelPadding, axisSpec.tickLabelRotation, + axisSpec.duplicateTicks, { timeZone: xDomain.timeZone, }, @@ -138,6 +139,7 @@ export function getScaleForAxisSpec( range, ticks: axisSpec.ticks, integersOnly: axisSpec.integersOnly, + duplicateTicks: axisSpec.duplicateTicks, }); if (yScales.has(axisSpec.groupId)) { return yScales.get(axisSpec.groupId)!; @@ -152,6 +154,7 @@ export function getScaleForAxisSpec( enableHistogramMode, ticks: axisSpec.ticks, integersOnly: axisSpec.integersOnly, + duplicateTicks: axisSpec.duplicateTicks, }); } } @@ -213,10 +216,16 @@ export function computeTickDimensions( axisConfig: AxisConfig, tickLabelPadding: number, tickLabelRotation = 0, + duplicateTicks: boolean = false, tickFormatOptions?: TickFormatterOptions, ) { const tickValues = scale.ticks(); - const tickLabels = removeDupeTickLabels(tickValues, tickFormat, tickFormatOptions); + const duplicateTickLabels = tickValues.map((d) => { + return tickFormat(d, tickFormatOptions); + }); + const tickLabels = duplicateTicks + ? duplicateTickLabels + : duplicateTickLabels.filter((value, index) => duplicateTickLabels.indexOf(value) === index); const { tickLabelStyle: { fontFamily, fontSize }, } = axisConfig; @@ -240,18 +249,6 @@ export function computeTickDimensions( }; } -export function removeDupeTickLabels( - tickValues: Array, - tickFormat: TickFormatter, - tickFormatOptions?: TickFormatterOptions, -) { - return tickValues - .filter((value: number | string, index: number) => tickValues.indexOf(value) === index) - .map((d) => { - return tickFormat(d, tickFormatOptions); - }); -} - /** * Gets the computed x/y coordinates & alignment properties for an axis tick label. * @param isVerticalAxis if the axis is vertical (in contrast to horizontal) diff --git a/src/chart_types/xy_chart/utils/scales.ts b/src/chart_types/xy_chart/utils/scales.ts index 78ff50fd3f..c0a2a3b86b 100644 --- a/src/chart_types/xy_chart/utils/scales.ts +++ b/src/chart_types/xy_chart/utils/scales.ts @@ -60,6 +60,7 @@ interface XScaleOptions { enableHistogramMode?: boolean; ticks?: number; integersOnly?: boolean; + duplicateTicks?: boolean; } /** @@ -122,6 +123,7 @@ interface YScaleOptions { range: [number, number]; ticks?: number; integersOnly?: boolean; + duplicateTicks?: boolean; } /** * Compute the y scales, one per groupId for the y axis. diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts index 97008027ec..b4f4dcc46f 100644 --- a/src/chart_types/xy_chart/utils/specs.ts +++ b/src/chart_types/xy_chart/utils/specs.ts @@ -507,11 +507,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 {