feat(goal): auto generated linear ticks

integration/tests/goal_stories.test.ts

@@ -83,6 +83,14 @@ describe('Goal stories', () => {
     );
   });
 
+  describe('auto ticks', () => {
+    it.each<boolean>([true, false])('reverse %p', async (reverse) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/goal-alpha--auto-linear-ticks&knob-reverse=${reverse}`,
+      );
+    });
+  });
+
   describe('sagitta shifted goal charts', () => {
     it.each<[title: string, startAngle: number, endAngle: number]>([
       // top openings

packages/charts/api/charts.api.md

@@ -993,6 +993,8 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     labelMinor: string | GoalLabelAccessor;
     // (undocumented)
+    nice: boolean;
+    // (undocumented)
     specType: typeof SpecType.Series;
     // Warning: (ae-forgotten-export) The symbol "GoalSubtype" needs to be exported by the entry point index.d.ts
     //
@@ -1001,7 +1003,7 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     target?: number;
     // (undocumented)
-    ticks: number[];
+    ticks?: number[];
     // (undocumented)
     tickValueFormatter: GoalLabelAccessor;
     // (undocumented)

packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts

@@ -62,7 +62,7 @@ export type ShapeViewModel = {
 const commonDefaults = {
   base: 0,
   actual: 50,
-  ticks: [0, 25, 50, 75, 100],
+  nice: false,
 };
 
 /** @internal */

packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { ScaleContinuous } from '../../../../scales';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Theme } from '../../../../utils/themes/theme';
 import { GoalSpec } from '../../specs';
@@ -28,7 +29,6 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     target,
     actual,
     bands,
-    ticks,
     bandFillColor,
     tickValueFormatter,
     labelMajor,
@@ -38,11 +38,24 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     bandLabels,
     angleStart,
     angleEnd,
+    nice,
   } = spec;
-  const [lowestValue, highestValue] = [base, ...(target ? [target] : []), actual, ...bands, ...ticks].reduce(
-    ([min, max], value) => [Math.min(min, value), Math.max(max, value)],
-    [Infinity, -Infinity],
-  );
+  const [lowestValue, highestValue] = [
+    base,
+    ...(target ? [target] : []),
+    actual,
+    ...bands,
+    ...(spec.ticks ?? []),
+  ].reduce(([min, max], value) => [Math.min(min, value), Math.max(max, value)], [Infinity, -Infinity]);
+
+  const ticks =
+    spec.ticks ??
+    new ScaleContinuous({
+      type: 'linear', // TODO allow other scale types
+      domain: [lowestValue, highestValue],
+      range: [0, chartDimensions.width], // TODO apply range based on chart rotation
+      nice,
+    }).ticks();
 
   const aboveBaseCount = bands.filter((b: number) => b > base).length;
   const belowBaseCount = bands.filter((b: number) => b <= base).length;

packages/charts/src/chart_types/goal_chart/specs/index.ts

@@ -46,7 +46,8 @@ export interface GoalSpec extends Spec {
   target?: number;
   actual: number;
   bands: number[];
-  ticks: number[];
+  ticks?: number[];
+  nice: boolean;
   bandFillColor: BandFillColorAccessor;
   tickValueFormatter: GoalLabelAccessor;
   labelMajor: string | GoalLabelAccessor;

storybook/stories/goal/26_auto_linear_ticks.story.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Chart, Goal, Settings } from '@elastic/charts';
+import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs';
+import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants';
+
+import { Color } from '../../../packages/charts/src/common/colors';
+import { useBaseTheme } from '../../use_base_theme';
+
+const subtype = GoalSubtype.Goal;
+
+const colorMap: { [k: number]: Color } = {
+  200: '#fc8d62',
+  250: 'lightgrey',
+  300: '#66c2a5',
+};
+
+const bandFillColor = (x: number): Color => colorMap[x];
+
+export const Example = () => {
+  const reverse = boolean('reverse', false);
+  return (
+    <Chart>
+      <Settings baseTheme={useBaseTheme()} />
+      <Goal
+        id="spec"
+        subtype={subtype}
+        base={0}
+        target={260}
+        actual={280}
+        bands={[200, 250, 300]}
+        angleStart={reverse ? -Math.PI / 4 : Math.PI + Math.PI / 4}
+        angleEnd={reverse ? Math.PI + Math.PI / 4 : -Math.PI / 4}
+        tickValueFormatter={({ value }: BandFillColorAccessorInput) => String(value)}
+        bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
+        labelMajor=""
+        labelMinor=""
+        centralMajor="280 MB/s"
+        centralMinor=""
+      />
+    </Chart>
+  );
+};
+
+Example.parameters = {
+  markdown: `Leaving \`ticks\` as undefined will automatically create a linear ticks array given the domain`,
+};

storybook/stories/goal/goal.stories.tsx

@@ -37,3 +37,4 @@ export { Example as horizontalPlusMinus } from './22_horizontal_plusminus.story'
 export { Example as verticalPlusMinus } from './23_vertical_plusminus.story';
 export { Example as goalPlusMinus } from './24_goal_plusminus.story';
 export { Example as goalSemantics } from './25_goal_semantic.story';
+export { Example as autoLinearTicks } from './26_auto_linear_ticks.story';