feat(goal): optional target tick (#1301)

integration/tests/goal_stories.test.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { common } from '../page_objects';
+
+describe('Goal stories', () => {
+  it('should render without target', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260',
+    );
+  });
+});

packages/charts/api/charts.api.md

@@ -228,7 +228,7 @@ export interface BandFillColorAccessorInput {
     // (undocumented)
     lowestValue: number;
     // (undocumented)
-    target: number;
+    target?: number;
     // (undocumented)
     value: number;
 }
@@ -816,7 +816,7 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     subtype: GoalSubtype;
     // (undocumented)
-    target: number;
+    target?: number;
     // (undocumented)
     ticks: number[];
     // (undocumented)

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

@@ -29,7 +29,7 @@ interface TickViewModel {
 export interface BulletViewModel {
   subtype: string;
   base: number;
-  target: number;
+  target?: number;
   actual: number;
   bands: Array<BandViewModel>;
   ticks: Array<TickViewModel>;
@@ -58,7 +58,6 @@ const commonDefaults = {
   specType: SpecType.Series,
   subtype: GoalSubtype.Goal,
   base: 0,
-  target: 100,
   actual: 50,
   ticks: [0, 25, 50, 75, 100],
 };
@@ -80,7 +79,7 @@ export const defaultGoalSpec = {
   // eslint-disable-next-line no-empty-pattern
   labelMinor: ({}: BandFillColorAccessorInput) => 'unit',
   centralMajor: ({ base }: BandFillColorAccessorInput) => String(base),
-  centralMinor: ({ target }: BandFillColorAccessorInput) => String(target),
+  centralMinor: ({ target }: BandFillColorAccessorInput) => (target ? String(target) : ''),
   bandLabels: [],
 };
 

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

@@ -294,11 +294,15 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
       landmarks: { from: 'base', to: 'actual' },
       aes: { shape, fillColor: 'black', lineWidth: tickLength },
     },
-    {
-      order: 2,
-      landmarks: { at: 'target' },
-      aes: { shape, fillColor: 'black', lineWidth: barThickness / GOLDEN_RATIO },
-    },
+    ...(target
+      ? [
+          {
+            order: 2,
+            landmarks: { at: 'target' },
+            aes: { shape, fillColor: 'black', lineWidth: barThickness / GOLDEN_RATIO },
+          },
+        ]
+      : []),
     ...bulletViewModel.ticks.map((b, i) => ({
       order: 3,
       landmarks: { at: `tick_${i}` },

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

@@ -43,7 +43,7 @@ export function shapeViewModel(spec: GoalSpec, config: Config): ShapeViewModel {
     bandLabels,
   } = spec;
 
-  const [lowestValue, highestValue] = [base, target, actual, ...bands, ...ticks].reduce(
+  const [lowestValue, highestValue] = [base, ...(target ? [target] : []), actual, ...bands, ...ticks].reduce(
     ([min, max], value) => [Math.min(min, value), Math.max(max, value)],
     [Infinity, -Infinity],
   );

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

@@ -23,7 +23,7 @@ export interface BandFillColorAccessorInput {
   value: number;
   index: number;
   base: number;
-  target: number;
+  target?: number;
   highestValue: number;
   lowestValue: number;
   aboveBaseCount: number;
@@ -45,7 +45,7 @@ export interface GoalSpec extends Spec {
   chartType: typeof ChartType.Goal;
   subtype: GoalSubtype;
   base: number;
-  target: number;
+  target?: number;
   actual: number;
   bands: number[];
   ticks: number[];

packages/charts/src/chart_types/goal_chart/state/selectors/get_goal_chart_data.ts

@@ -13,7 +13,7 @@ import { geometries } from './geometries';
 export type GoalChartData = {
   maximum: number;
   minimum: number;
-  target: number;
+  target?: number;
   value: number;
 };
 

storybook/stories/goal/11_gaps.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Goal, Settings } from '@elastic/charts';
@@ -28,24 +29,29 @@ const colorMap: { [k: number]: Color } = {
 
 const bandFillColor = (x: number): Color => colorMap[x];
 
-export const Example = () => (
-  <Chart>
-    <Settings baseTheme={useBaseTheme()} />
-    <Goal
-      id="spec_1"
-      subtype={subtype}
-      base={0}
-      target={260}
-      actual={280}
-      bands={[199, 201, 249, 251, 300]}
-      ticks={[0, 50, 100, 150, 200, 250, 300]}
-      tickValueFormatter={({ value }: BandFillColorAccessorInput) => String(value)}
-      bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
-      labelMajor="Revenue 2020 YTD  "
-      labelMinor="(thousand USD)  "
-      centralMajor="280"
-      centralMinor="target: 260"
-      config={config}
-    />
-  </Chart>
-);
+export const Example = () => {
+  const showTarget = boolean('show target', true);
+  const target = number('target', 260);
+
+  return (
+    <Chart>
+      <Settings baseTheme={useBaseTheme()} />
+      <Goal
+        id="spec_1"
+        subtype={subtype}
+        base={0}
+        target={showTarget ? target : undefined}
+        actual={280}
+        bands={[199, 201, 249, 251, 300]}
+        ticks={[0, 50, 100, 150, 200, 250, 300]}
+        tickValueFormatter={({ value }: BandFillColorAccessorInput) => String(value)}
+        bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
+        labelMajor="Revenue 2020 YTD  "
+        labelMinor="(thousand USD)  "
+        centralMajor="280"
+        centralMinor={showTarget ? `target: ${target}` : undefined}
+        config={config}
+      />
+    </Chart>
+  );
+};