diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png index 69b39ed4a0..e910246a5f 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-discover-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png index defc1d2f57..3672d38c58 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-test-min-height-positive-and-negative-values-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png index 5c5316a4d3..2a142a0894 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-high-data-volume-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png index 24405934bd..fa406ebf68 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-with-linear-x-axis-no-linear-interval-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-debug-options-debug-state-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-debug-options-debug-state-visually-looks-correct-1-snap.png index c77f4003cc..a674fe2bc6 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-debug-options-debug-state-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-debug-options-debug-state-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png index bf465049ee..063852aaf5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-png-export-action-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png index c14cba89e1..567fe72055 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-histogram-bars-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png index 471e612d2e..7baecbdfa9 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png index 67ab65f672..661be124b6 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png index 8dd97b1946..dbd0adc531 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png index 8dd97b1946..dbd0adc531 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png index e234b602b7..2aad933fb3 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-90-1-snap.png index fff9f12d25..8a0d7915cb 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-negative-90-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-negative-90-1-snap.png index c8890c26c9..0215a5c7bf 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-negative-90-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-axis-positions-with-histogram-bar-series-should-render-correct-axis-rotation-negative-90-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png index 69b39ed4a0..e910246a5f 100644 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-test-discover-using-no-custom-min-interval-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png index 8ba96aeca5..6728778b7b 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png differ diff --git a/packages/charts/src/chart_types/xy_chart/utils/get_linear_ticks.ts b/packages/charts/src/chart_types/xy_chart/utils/get_linear_ticks.ts index ea1ca11a1a..18c4bf4373 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/get_linear_ticks.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/get_linear_ticks.ts @@ -30,7 +30,7 @@ const e5 = Math.sqrt(10); const e2 = Math.sqrt(2); /** @internal */ -export function getLinearTicks(start: number, stop: number, count: number, base: number = 2) { +export function getLinearTicks(start: number, stop: number, count: number, base: number = 2): number[] { let reverse, i = -1, n, diff --git a/packages/charts/src/scales/scale_continuous.ts b/packages/charts/src/scales/scale_continuous.ts index 53bfadebff..9847c90fb4 100644 --- a/packages/charts/src/scales/scale_continuous.ts +++ b/packages/charts/src/scales/scale_continuous.ts @@ -148,22 +148,22 @@ export class ScaleContinuous implements Scale { const nicePaddedDomain = isPixelPadded && isNice ? (d3Scale.domain() as number[]) : paddedDomain; this.tickValues = - // This case is for the xScale (minInterval is > 0) when we want to show bars (bandwidth > 0) - // we want to avoid displaying inner ticks between bars in a bar chart when using linear x scale type === ScaleType.Time - ? getTimeTicks(scaleOptions.desiredTickCount, scaleOptions.timeZone, nicePaddedDomain) - : scaleOptions.minInterval <= 0 || scaleOptions.bandwidth <= 0 - ? this.type === ScaleType.Linear - ? getLinearTicks( - nicePaddedDomain[0], - nicePaddedDomain[nicePaddedDomain.length - 1], - scaleOptions.desiredTickCount, - this.linearBase, - ) - : (d3Scale as D3ScaleNonTime).ticks(scaleOptions.desiredTickCount) - : new Array(Math.floor((nicePaddedDomain[1] - nicePaddedDomain[0]) / minInterval) + 1) - .fill(0) - .map((_, i) => nicePaddedDomain[0] + i * minInterval); + ? getTimeTicks( + nicePaddedDomain, + scaleOptions.desiredTickCount, + scaleOptions.timeZone, + scaleOptions.bandwidth === 0 ? 0 : scaleOptions.minInterval, + ) + : type === ScaleType.Linear + ? getLinearNonDenserTicks( + nicePaddedDomain, + scaleOptions.desiredTickCount, + this.linearBase, + scaleOptions.bandwidth === 0 ? 0 : scaleOptions.minInterval, + ) + : (d3Scale as D3ScaleNonTime).ticks(scaleOptions.desiredTickCount); + this.domain = nicePaddedDomain; this.project = (d: number) => d3Scale(d); this.inverseProject = (d: number) => d3Scale.invert(d); @@ -243,14 +243,20 @@ export class ScaleContinuous implements Scale { handleDomainPadding() {} } -function getTimeTicks(desiredTickCount: number, timeZone: string, domain: number[]) { +function getTimeTicks(domain: number[], desiredTickCount: number, timeZone: string, minInterval: number) { const startDomain = getMomentWithTz(domain[0], timeZone); const endDomain = getMomentWithTz(domain[1], timeZone); const offset = startDomain.utcOffset(); const shiftedDomainMin = startDomain.add(offset, 'minutes').valueOf(); const shiftedDomainMax = endDomain.add(offset, 'minutes').valueOf(); const tzShiftedScale = scaleUtc().domain([shiftedDomainMin, shiftedDomainMax]); - const rawTicks = tzShiftedScale.ticks(desiredTickCount); + let currentCount = desiredTickCount; + let rawTicks = tzShiftedScale.ticks(desiredTickCount); + while (rawTicks.length > 2 && currentCount > 0 && rawTicks[1].valueOf() - rawTicks[0].valueOf() < minInterval) { + currentCount--; + rawTicks = tzShiftedScale.ticks(currentCount); + } + const timePerTick = (shiftedDomainMax - shiftedDomainMin) / rawTicks.length; const hasHourTicks = timePerTick < 1000 * 60 * 60 * 12; return rawTicks.map((d: Date) => { @@ -260,6 +266,23 @@ function getTimeTicks(desiredTickCount: number, timeZone: string, domain: number }); } +function getLinearNonDenserTicks( + domain: number[], + desiredTickCount: number, + base: number = 2, + minInterval: number, +): number[] { + const start = domain[0]; + const stop = domain[domain.length - 1]; + let currentCount = desiredTickCount; + let ticks = getLinearTicks(start, stop, desiredTickCount, base); + while (ticks.length > 2 && currentCount > 0 && ticks[1] - ticks[0] < minInterval) { + currentCount--; + ticks = getLinearTicks(start, stop, currentCount, base); + } + return ticks; +} + function isDegenerateDomain(domain: unknown[]): boolean { return domain.every((v) => v === domain[0]); } diff --git a/packages/charts/src/scales/utils.ts b/packages/charts/src/scales/utils.ts new file mode 100644 index 0000000000..e08fd3c79b --- /dev/null +++ b/packages/charts/src/scales/utils.ts @@ -0,0 +1,26 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { getLinearTicks } from '../chart_types/xy_chart/utils/get_linear_ticks'; + +/** @internal */ +export function getLinearNonDenserTicks( + start: number, + stop: number, + count: number, + base: number = 2, + minInterval: number, +): number[] { + let currentCount = count; + let ticks = getLinearTicks(start, stop, count, base); + while (ticks.length > 2 && currentCount > 0 && ticks[1] - ticks[0] < minInterval) { + currentCount--; + ticks = getLinearTicks(start, stop, currentCount, base); + } + return ticks; +} diff --git a/storybook/stories/bar/44_test_single_histogram.story.tsx b/storybook/stories/bar/44_test_single_histogram.story.tsx index 26f976c26f..fba4daa935 100644 --- a/storybook/stories/bar/44_test_single_histogram.story.tsx +++ b/storybook/stories/bar/44_test_single_histogram.story.tsx @@ -65,7 +65,7 @@ export const Example = () => {