feat(goal): dark mode with theme controls (#1299)

integration/helpers.ts

@@ -14,6 +14,7 @@ import path from 'path';
 import { getStorybook, configure } from '@storybook/react';
 
 import { Rotation } from '../packages/charts/src';
+import { ThemeId } from '../storybook/use_base_theme';
 // @ts-ignore
 import { isLegacyVRTServer } from './config';
 
@@ -144,4 +145,21 @@ export const eachRotation = {
   },
 };
 
+const themeIds = Object.values(ThemeId);
+
+/**
+ * This is a wrapper around it.each for Themes
+ * Returns the requried query params to trigger correct theme
+ */
+export const eachTheme = {
+  it(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title
+    return it.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+  describe(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title, jest/valid-describe
+    return describe.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+};
+
 /* eslint-enable jest/no-export */

integration/tests/goal_stories.test.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Goal stories', () => {
@@ -14,10 +15,31 @@ describe('Goal stories', () => {
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260',
     );
   });
+
   it('should render actual tooltip color on hover', async () => {
     await common.expectChartWithMouseAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260&globals=background:white',
       { right: 245, bottom: 120 },
     );
   });
+
+  eachTheme.describe((_, params) => {
+    it('should render gauge with target story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target${params}`,
+      );
+    });
+
+    it('should render minimal goal story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal${params}`,
+      );
+    });
+
+    it('should render vertical negative story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative${params}`,
+      );
+    });
+  });
 });

packages/charts/api/charts.api.md

@@ -791,11 +791,18 @@ export function getNodeName(node: ArrayNode): string;
 // @alpha (undocumented)
 export const Goal: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
 
+// @alpha (undocumented)
+export type GoalLabelAccessor = LabelAccessor<BandFillColorAccessorInput>;
+
 // @alpha (undocumented)
 export interface GoalSpec extends Spec {
     // (undocumented)
     actual: number;
     // (undocumented)
+    angleEnd: number;
+    // (undocumented)
+    angleStart: number;
+    // (undocumented)
     bandFillColor: BandFillColorAccessor;
     // (undocumented)
     bandLabels: string[];
@@ -804,19 +811,19 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     base: number;
     // (undocumented)
-    centralMajor: string | BandFillColorAccessor;
+    centralMajor: string | GoalLabelAccessor;
     // (undocumented)
-    centralMinor: string | BandFillColorAccessor;
+    centralMinor: string | GoalLabelAccessor;
     // (undocumented)
     chartType: typeof ChartType.Goal;
     // Warning: (ae-forgotten-export) The symbol "Config" needs to be exported by the entry point index.d.ts
     //
+    // @deprecated (undocumented)
+    config?: RecursivePartial<Config>;
     // (undocumented)
-    config: RecursivePartial<Config>;
-    // (undocumented)
-    labelMajor: string | BandFillColorAccessor;
+    labelMajor: string | GoalLabelAccessor;
     // (undocumented)
-    labelMinor: string | BandFillColorAccessor;
+    labelMinor: string | GoalLabelAccessor;
     // (undocumented)
     specType: typeof SpecType.Series;
     // Warning: (ae-forgotten-export) The symbol "GoalSubtype" needs to be exported by the entry point index.d.ts
@@ -828,7 +835,31 @@ export interface GoalSpec extends Spec {
     // (undocumented)
     ticks: number[];
     // (undocumented)
-    tickValueFormatter: BandFillColorAccessor;
+    tickValueFormatter: GoalLabelAccessor;
+}
+
+// @public (undocumented)
+export interface GoalStyles {
+    // (undocumented)
+    majorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    majorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    maxFontSize: number;
+    // (undocumented)
+    minFontSize: number;
+    // (undocumented)
+    minorCenterLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    minorLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    progressLine: Pick<StrokeStyle, 'stroke'>;
+    // (undocumented)
+    targetLine: Pick<StrokeStyle, 'stroke'>;
+    // (undocumented)
+    tickLabel: Omit<TextStyle, 'padding' | 'fontSize'>;
+    // (undocumented)
+    tickLine: Pick<StrokeStyle, 'stroke'>;
 }
 
 // @public (undocumented)
@@ -1106,7 +1137,7 @@ export type IsUnknown<T, True, False = never> = unknown extends T ? IsAny<T, Fal
 export type Key = CategoryKey;
 
 // @public (undocumented)
-export type LabelAccessor = (value: PrimitiveValue) => string;
+export type LabelAccessor<T = PrimitiveValue> = (value: T) => string;
 
 // @public (undocumented)
 export const LabelOverflowConstraint: Readonly<{
@@ -2076,6 +2107,8 @@ export interface Theme {
     // (undocumented)
     crosshair: CrosshairStyle;
     // (undocumented)
+    goal: GoalStyles;
+    // (undocumented)
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;

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

@@ -6,18 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { ConfigItem, configMap } from '../../../../common/config_objects';
+import { ConfigItem } from '../../../../common/config_objects';
 import { TAU } from '../../../../common/constants';
-import { Config } from '../types/config_types';
 
-/** @internal */
+/**
+ * Keeping for future config validation checks
+ * @internal
+ */
 export const configMetadata: Record<string, ConfigItem> = {
   angleStart: { dflt: Math.PI + Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
   angleEnd: { dflt: -Math.PI / 4, min: -TAU, max: TAU, type: 'number' },
 
   // shape geometry
-  width: { dflt: 300, min: 0, max: 1024, type: 'number', reconfigurable: false },
-  height: { dflt: 150, min: 0, max: 1024, type: 'number', reconfigurable: false },
   margin: {
     type: 'group',
     values: {
@@ -41,6 +41,3 @@ export const configMetadata: Record<string, ConfigItem> = {
   backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
 };
-
-/** @internal */
-export const config: Config = configMap<Config>((item: ConfigItem) => item.dflt, configMetadata);

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

@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 
+import chroma from 'chroma-js';
+
 import { Pixels, PointObject } from '../../../../common/geometry';
 import { SpecType } from '../../../../specs/constants';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+import { Theme } from '../../../../utils/themes/theme';
 import { BandFillColorAccessorInput } from '../../specs';
 import { GoalSubtype } from '../../specs/constants';
-import { config } from '../config/config';
-import { Config } from './config_types';
 
 /** @internal */
 export interface BandViewModel {
@@ -41,14 +43,16 @@ export interface BulletViewModel {
   lowestValue: number;
   aboveBaseCount: number;
   belowBaseCount: number;
+  angleStart: number;
+  angleEnd: number;
 }
 
 /** @internal */
 export type PickFunction = (x: Pixels, y: Pixels) => Array<BulletViewModel>;
 
 /** @internal */
 export type ShapeViewModel = {
-  config: Config;
+  config: Theme['goal'];
   bulletViewModel: BulletViewModel;
   chartCenter: PointObject;
   pickQuads: PickFunction;
@@ -66,21 +70,18 @@ const commonDefaults = {
 export const defaultGoalSpec = {
   ...commonDefaults,
   bands: [50, 75, 100],
-  bandFillColor: ({ value, base, highestValue, lowestValue }: BandFillColorAccessorInput) => {
-    const aboveBase = value > base;
-    const ratio = aboveBase
-      ? (value - base) / (Math.max(base, highestValue) - base)
-      : (value - base) / (Math.min(base, lowestValue) - base);
-    const level = Math.round(255 * ratio);
-    return aboveBase ? `rgb(0, ${level}, 0)` : `rgb( ${level}, 0, 0)`;
+  bandFillColor: ({ value, highestValue, lowestValue }: BandFillColorAccessorInput) => {
+    const func = chroma.scale(chroma.brewer.Greens).gamma(0.5).domain([highestValue, lowestValue]);
+    return func(value).css();
   },
   tickValueFormatter: ({ value }: BandFillColorAccessorInput) => String(value),
   labelMajor: ({ base }: BandFillColorAccessorInput) => String(base),
-  // eslint-disable-next-line no-empty-pattern
-  labelMinor: ({}: BandFillColorAccessorInput) => 'unit',
+  labelMinor: () => 'unit',
   centralMajor: ({ base }: BandFillColorAccessorInput) => String(base),
   centralMinor: ({ target }: BandFillColorAccessorInput) => (target ? String(target) : ''),
   bandLabels: [],
+  angleStart: Math.PI + Math.PI / 4,
+  angleEnd: -Math.PI / 4,
 };
 
 /** @internal */
@@ -96,12 +97,14 @@ export const nullGoalViewModel = {
   lowestValue: 0,
   aboveBaseCount: 0,
   belowBaseCount: 0,
+  angleStart: 0,
+  angleEnd: 0,
 };
 
 /** @internal */
-export const nullShapeViewModel = (specifiedConfig?: Config, chartCenter?: PointObject): ShapeViewModel => ({
-  config: specifiedConfig || config,
+export const nullShapeViewModel = ({ goal }: Theme = LIGHT_THEME): ShapeViewModel => ({
+  config: goal,
   bulletViewModel: nullGoalViewModel,
-  chartCenter: chartCenter || { x: 0, y: 0 },
+  chartCenter: { x: 0, y: 0 },
   pickQuads: () => [],
 });