diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png index e7fc8a4b70..85404b550e 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png index 06adb00413..3a2e928798 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png index b6fc01ba79..2fcbd38a8f 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png index e0b39c92b6..5a7f9f4ea5 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png index 9be21da9ca..52f0ad6ff7 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png index 0ff81a4e64..f852ec2c9e 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png index b9bb8afb38..678228043b 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png index 0ff81a4e64..f852ec2c9e 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png index e4362e7dc6..065a071019 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png index 9ecc9ba2f8..46ee6de6f2 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png index 50c311c3f9..faac3936b7 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png index 76228020f8..20149f8b00 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png index 448ab4422c..4513bf8b4c 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png index 7db6c42594..8ba74727f5 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png index 6e6be0744c..dc06e01fbd 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png index 8b01722c7f..7487b68740 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png index 4243451d61..47860c7fcc 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png index 4243451d61..47860c7fcc 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png index 46d97a34b7..8b2def9cbe 100644 Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 65a14798ce..ebca93ea15 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -473,7 +473,7 @@ export interface BulletDatum { targetFormatter?: ValueFormatter; // (undocumented) tickFormatter: ValueFormatter; - ticks?: number | ((domain: GenericDomain) => number[]); + ticks?: number | number[] | ((domain: GenericDomain) => number[]); // (undocumented) title: string; // (undocumented) diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts index 23280f654b..408169e280 100644 --- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts +++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts @@ -15,7 +15,7 @@ import { drawPolarLine } from '../../../../xy_chart/renderer/canvas/lines'; import { renderDebugPoint } from '../../../../xy_chart/renderer/canvas/utils/debug'; import { ActiveValue } from '../../../selectors/get_active_values'; import { BulletPanelDimensions } from '../../../selectors/get_panel_dimensions'; -import { BulletSpec } from '../../../spec'; +import { BulletSpec, BulletSubtype } from '../../../spec'; import { BulletStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme'; import { getAngledChartSizing } from '../../../utils/angular'; import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH } from '../constants'; @@ -44,7 +44,15 @@ export function angularBullet( // const counterClockwise = true; const counterClockwise = startAngle < endAngle && start > end; const [min, max] = sortNumbers([start, end]) as ContinuousDomain; - const formatterColorTicks = ticks.map((v) => ({ value: v, formattedValue: datum.tickFormatter(v) })); + const filteredTicks = + spec.subtype !== BulletSubtype.circle + ? ticks + : min === ticks.at(0) && max === ticks.at(-1) + ? ticks.slice(0, -1) + : max === ticks.at(0) && min === ticks.at(-1) + ? ticks.slice(1) + : ticks; + const formatterColorTicks = filteredTicks.map((v) => ({ value: v, formattedValue: datum.tickFormatter(v) })); // Color bands colorBands.forEach((band) => { diff --git a/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts b/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts index bbbf2c0a48..26c99b1e9c 100644 --- a/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts +++ b/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts @@ -211,6 +211,8 @@ function getScaleWithTicks(domain: GenericDomain, range: Range, tickOptions: Tic return { scale, - ticks: customRange ? ticks(updatedDomain).filter(isWithinRange(updatedDomain)) : scale.ticks(ticks), + ticks: customRange + ? (Array.isArray(ticks) ? ticks : ticks(updatedDomain)).filter(isWithinRange(updatedDomain)) + : scale.ticks(ticks), }; } diff --git a/packages/charts/src/chart_types/bullet_graph/spec.ts b/packages/charts/src/chart_types/bullet_graph/spec.ts index df5bc1cab4..6e76b67f9d 100644 --- a/packages/charts/src/chart_types/bullet_graph/spec.ts +++ b/packages/charts/src/chart_types/bullet_graph/spec.ts @@ -37,7 +37,7 @@ export interface BulletDatum { * * See https://d3js.org/d3-scale/linear#linear_ticks */ - ticks?: number | ((domain: GenericDomain) => number[]); + ticks?: number | number[] | ((domain: GenericDomain) => number[]); syncCursor?: boolean; valueFormatter: ValueFormatter; targetFormatter?: ValueFormatter; diff --git a/packages/charts/src/chart_types/bullet_graph/utils/ticks.ts b/packages/charts/src/chart_types/bullet_graph/utils/ticks.ts index 9c6d70fdbe..65ba9ba975 100644 --- a/packages/charts/src/chart_types/bullet_graph/utils/ticks.ts +++ b/packages/charts/src/chart_types/bullet_graph/utils/ticks.ts @@ -23,7 +23,14 @@ export interface TickOptions { /** @internal */ export function getTicks(length: number, { desiredTicks, interval }: Omit) { - if ((isFiniteNumber(desiredTicks) && desiredTicks > 0) || typeof desiredTicks === 'function') return desiredTicks; + if ( + (isFiniteNumber(desiredTicks) && desiredTicks >= 0) || + typeof desiredTicks === 'function' || + Array.isArray(desiredTicks) + ) { + return desiredTicks; + } + const target = Math.floor(length / interval); return clamp(target, MIN_TICK_COUNT, MAX_TICK_COUNT); } diff --git a/storybook/stories/bullet_graph/1_single.story.tsx b/storybook/stories/bullet_graph/1_single.story.tsx index e4bcc27f81..1c542b5723 100644 --- a/storybook/stories/bullet_graph/1_single.story.tsx +++ b/storybook/stories/bullet_graph/1_single.story.tsx @@ -72,11 +72,7 @@ export const Example: ChartsStory = (_, { title, description }) => { domain: [start, end], niceDomain, ticks: - tickStrategy[0] === 'count' - ? ticks - : tickStrategy[0] === 'placements' - ? () => tickPlacements - : undefined, + tickStrategy[0] === 'count' ? ticks : tickStrategy[0] === 'placements' ? tickPlacements : undefined, valueFormatter: formatter, tickFormatter: formatter, },