feat: gauge, goal and bullet graph (alpha) (#614)

Author: monfera

integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-band-in-band-visually-looks-correct-1-snap.png

@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Config } from '../types/config_types';
+import { TAU } from '../../../partition_chart/layout/utils/math';
+import { configMap } from '../../../partition_chart/layout/config/config';
+
+export const configMetadata = {
+  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: {
+      left: { dflt: 0, min: -0.25, max: 0.25, type: 'number' },
+      right: { dflt: 0, min: -0.25, max: 0.25, type: 'number' },
+      top: { dflt: 0, min: -0.25, max: 0.25, type: 'number' },
+      bottom: { dflt: 0, min: -0.25, max: 0.25, type: 'number' },
+    },
+  },
+
+  // general text config
+  fontFamily: {
+    dflt: 'Sans-Serif',
+    type: 'string',
+  },
+
+  // fill text config
+  minFontSize: { dflt: 8, min: 0.1, max: 8, type: 'number', reconfigurable: true },
+  maxFontSize: { dflt: 64, min: 0.1, max: 64, type: 'number' },
+
+  backgroundColor: { dflt: '#ffffff', type: 'color' },
+  sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
+};
+
+export const config: Config = configMap<Config>((item: any) => item.dflt, configMetadata);

integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-confidence-level-visually-looks-correct-1-snap.png

@@ -0,0 +1,43 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Pixels, SizeRatio } from '../../../partition_chart/layout/types/geometry_types';
+import { FontFamily } from '../../../partition_chart/layout/types/types';
+import { Color } from '../../../../utils/commons';
+
+// todo switch to `io-ts` style, generic way of combining static and runtime type info
+export interface Config {
+  angleStart: number;
+  angleEnd: number;
+
+  // shape geometry
+  width: number;
+  height: number;
+  margin: { left: SizeRatio; right: SizeRatio; top: SizeRatio; bottom: SizeRatio };
+
+  // general text config
+  fontFamily: FontFamily;
+
+  // fill text config
+  minFontSize: Pixels;
+  maxFontSize: Pixels;
+
+  // other
+  backgroundColor: Color;
+  sectorLineWidth: Pixels;
+}

integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-full-circle-visually-looks-correct-1-snap.png

@@ -0,0 +1,114 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Config } from './config_types';
+
+import { Pixels, PointObject } from '../../../partition_chart/layout/types/geometry_types';
+import { config } from '../config/config';
+import { SpecTypes } from '../../../../specs/settings';
+import { BandFillColorAccessorInput, GOAL_SUBTYPES } from '../../specs/index';
+
+interface BandViewModel {
+  value: number;
+  fillColor: string;
+}
+
+interface TickViewModel {
+  value: number;
+  text: string;
+}
+
+/** @internal */
+export interface BulletViewModel {
+  subtype: string;
+  base: number;
+  target: number;
+  actual: number;
+  bands: Array<BandViewModel>;
+  ticks: Array<TickViewModel>;
+  labelMajor: string;
+  labelMinor: string;
+  centralMajor: string;
+  centralMinor: string;
+  highestValue: number;
+  lowestValue: number;
+  aboveBaseCount: number;
+  belowBaseCount: number;
+}
+
+/** @internal */
+export type PickFunction = (x: Pixels, y: Pixels) => Array<BulletViewModel>;
+
+/** @internal */
+export type ShapeViewModel = {
+  config: Config;
+  bulletViewModel: BulletViewModel;
+  chartCenter: PointObject;
+  pickQuads: PickFunction;
+};
+
+const commonDefaults = {
+  specType: SpecTypes.Series,
+  subtype: GOAL_SUBTYPES[0],
+  base: 0,
+  target: 100,
+  actual: 50,
+  ticks: [0, 25, 50, 75, 100],
+};
+
+/** @internal */
+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)`;
+  },
+  tickValueFormatter: ({ value }: BandFillColorAccessorInput) => String(value),
+  labelMajor: ({ base }: BandFillColorAccessorInput) => String(base),
+  labelMinor: ({}: BandFillColorAccessorInput) => 'unit',
+  centralMajor: ({ base }: BandFillColorAccessorInput) => String(base),
+  centralMinor: ({ target }: BandFillColorAccessorInput) => String(target),
+};
+
+/** @internal */
+export const nullGoalViewModel = {
+  ...commonDefaults,
+  bands: [],
+  ticks: [],
+  labelMajor: '',
+  labelMinor: '',
+  centralMajor: '',
+  centralMinor: '',
+  highestValue: 100,
+  lowestValue: 0,
+  aboveBaseCount: 0,
+  belowBaseCount: 0,
+};
+
+/** @internal */
+export const nullShapeViewModel = (specifiedConfig?: Config, chartCenter?: PointObject): ShapeViewModel => ({
+  config: specifiedConfig || config,
+  bulletViewModel: nullGoalViewModel,
+  chartCenter: chartCenter || { x: 0, y: 0 },
+  pickQuads: () => [],
+});

integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-goal-alpha-gaps-visually-looks-correct-1-snap.png

@@ -0,0 +1,107 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { TextMeasure } from '../../../partition_chart/layout/types/types';
+import { Config } from '../types/config_types';
+import { BulletViewModel, PickFunction, ShapeViewModel } from '../types/viewmodel_types';
+import { GoalSpec } from '../../specs/index';
+
+/** @internal */
+export function shapeViewModel(textMeasure: TextMeasure, spec: GoalSpec, config: Config): ShapeViewModel {
+  const { width, height, margin } = config;
+
+  const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
+  const innerHeight = height * (1 - Math.min(1, margin.top + margin.bottom));
+
+  const chartCenter = {
+    x: width * margin.left + innerWidth / 2,
+    y: height * margin.top + innerHeight / 2,
+  };
+
+  const pickQuads: PickFunction = (x, y) => {
+    return -innerWidth / 2 <= x && x <= innerWidth / 2 && -innerHeight / 2 <= y && y <= innerHeight / 2
+      ? [bulletViewModel]
+      : [];
+  };
+
+  const {
+    subtype,
+    base,
+    target,
+    actual,
+    bands,
+    ticks,
+    bandFillColor,
+    tickValueFormatter,
+    labelMajor,
+    labelMinor,
+    centralMajor,
+    centralMinor,
+  } = spec;
+
+  const [lowestValue, highestValue] = [base, target, actual, ...bands, ...ticks].reduce(
+    ([min, max], value) => [Math.min(min, value), Math.max(max, value)],
+    [Infinity, -Infinity],
+  );
+
+  const aboveBaseCount = bands.filter((b: number) => b > base).length;
+  const belowBaseCount = bands.filter((b: number) => b <= base).length;
+
+  const callbackArgs = {
+    base,
+    target,
+    actual,
+    highestValue,
+    lowestValue,
+    aboveBaseCount,
+    belowBaseCount,
+  };
+
+  const bulletViewModel: BulletViewModel = {
+    subtype,
+    base,
+    target,
+    actual,
+    bands: bands.map((value: number, index: number) => ({
+      value,
+      fillColor: bandFillColor({ value, index, ...callbackArgs }),
+    })),
+    ticks: ticks.map((value: number, index: number) => ({
+      value,
+      text: tickValueFormatter({ value, index, ...callbackArgs }),
+    })),
+    labelMajor: typeof labelMajor === 'string' ? labelMajor : labelMajor({ value: NaN, index: 0, ...callbackArgs }),
+    labelMinor: typeof labelMinor === 'string' ? labelMinor : labelMinor({ value: NaN, index: 0, ...callbackArgs }),
+    centralMajor:
+      typeof centralMajor === 'string' ? centralMajor : centralMajor({ value: NaN, index: 0, ...callbackArgs }),
+    centralMinor:
+      typeof centralMinor === 'string' ? centralMinor : centralMinor({ value: NaN, index: 0, ...callbackArgs }),
+    highestValue,
+    lowestValue,
+    aboveBaseCount,
+    belowBaseCount,
+  };
+
+  // combined viewModel
+  return {
+    config,
+    chartCenter,
+    bulletViewModel,
+    pickQuads,
+  };
+}