fix(bullet): full circle overlapping tick labels (#2350)

elastic · Mar 12, 2024 · edbff68 · edbff68
1 parent cf9ce81
commit edbff68
Show file tree

Hide file tree

Showing 25 changed files with 24 additions and 11 deletions.
diff --git a/...subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
diff --git a/...subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
diff --git a/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/...circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
diff --git a/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/...nfig-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
diff --git a/...subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/...subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
diff --git a/...ype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/...ype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...main-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...ype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/...ype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/...e/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...tories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/...tories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png
diff --git a/...hots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png b/...hots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png
diff --git a/...let-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/...let-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
diff --git a/...es/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/...es/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
diff --git a/...btype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/...btype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,14 @@ export interface TickOptions {
 
 /** @internal */
 export function getTicks(length: number, { desiredTicks, interval }: Omit<TickOptions, 'nice'>) {
-  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
@@ -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,
             },