feat(bullet): new design style and implementation

.eslintrc.js

@@ -69,7 +69,7 @@ module.exports = {
     '@typescript-eslint/no-unsafe-call': 0, // seems to have issues with default import types
     '@typescript-eslint/unbound-method': 1,
     '@typescript-eslint/no-redeclare': 0, // we use to declare enum type and object with the same name
-    '@typescript-eslint/no-shadow': 0, // we use shadow mostly within the canvas renderer function when we need a new context
+    '@typescript-eslint/no-shadow': 0,
     '@typescript-eslint/quotes': 0,
     '@typescript-eslint/no-unsafe-argument': 1,
     'unicorn/consistent-function-scoping': 1,
@@ -89,7 +89,7 @@ module.exports = {
     'unicorn/number-literal-case': 0, // use prettier lower case preference
     'global-require': 1,
     'import/no-dynamic-require': 1,
-    'no-shadow': 1,
+    'no-shadow': ['warn', { allow: ['ctx'] }], // allow replacing ctx in canvas renderer functions, too tedious to rename at each level
     'react/no-array-index-key': 1,
     'react/prefer-stateless-function': 1,
     'react/require-default-props': 0,

e2e/helpers.ts

@@ -37,7 +37,7 @@ export interface StoryGroupInfo {
 /**
  * Groups to skip in all vrt.
  */
-const groupsToSkip: Set<string> = new Set(['Components/Tooltip']);
+const groupsToSkip: Set<string> = new Set(['Components/Tooltip', 'Bullet Graph']);
 
 /**
  * Stories to skip in all vrt based by group.

e2e/tests/bullet_stories.test.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { test } from '@playwright/test';
+
+import { common } from '../page_objects/common';
+
+test.describe('Bullet stories', () => {
+  test('renders single bullet', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--single');
+  });
+
+  test('renders angular bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 785, height: 800 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--angular');
+  });
+
+  test('renders single row bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 850, height: 800 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--single-row');
+  });
+
+  test('renders single column bullet', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/bullet-graph--single-column',
+    );
+  });
+
+  test('renders grid bullet', async ({ page }) => {
+    await page.setViewportSize({ width: 785, height: 1000 });
+    await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--grid');
+  });
+});

package.json

@@ -81,7 +81,7 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/react": "^6.3.7",
-    "@types/chroma-js": "^2.0.0",
+    "@types/chroma-js": "^2.4.2",
     "@types/classnames": "^2.2.7",
     "@types/color": "^3.0.1",
     "@types/core-js": "^2.5.2",

packages/charts/package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bezier-easing": "^2.1.0",
-    "chroma-js": "^2.1.0",
+    "chroma-js": "^2.4.2",
     "classnames": "^2.2.6",
     "d3-array": "^1.2.4",
     "d3-cloud": "^1.2.5",

packages/charts/src/_reset.scss

@@ -9,3 +9,8 @@
 svg text {
   letter-spacing: normal !important;
 }
+
+html,
+body {
+  font-family: Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
+}

packages/charts/src/chart_types/bullet_graph/chart_state.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 React, { RefObject } from 'react';
+
+import { BulletGraphRenderer } from './renderer/canvas';
+import { canDisplayChartTitles } from './selectors/can_display_chart_titles';
+import { getTooltipAnchor } from './selectors/get_tooltip_anchor';
+import { getTooltipInfo } from './selectors/get_tooltip_info';
+import { isTooltipVisible } from './selectors/is_tooltip_visible';
+import { ChartType } from '../../chart_types';
+import { DEFAULT_CSS_CURSOR } from '../../common/constants';
+import { LegendItem } from '../../common/legend';
+import { Tooltip } from '../../components/tooltip/tooltip';
+import { BackwardRef, GlobalChartState, InternalChartState } from '../../state/chart_state';
+import { InitStatus } from '../../state/selectors/get_internal_is_intialized';
+import { LegendItemLabel } from '../../state/selectors/get_legend_items_labels';
+
+const EMPTY_MAP = new Map();
+const EMPTY_LEGEND_LIST: LegendItem[] = [];
+const EMPTY_LEGEND_ITEM_LIST: LegendItemLabel[] = [];
+
+/** @internal */
+export class BulletGraphState implements InternalChartState {
+  chartType = ChartType.BulletGraph;
+  getChartTypeDescription = () => 'Bullet Graph';
+  chartRenderer = (containerRef: BackwardRef, forwardStageRef: RefObject<HTMLCanvasElement>) => (
+    <>
+      <BulletGraphRenderer forwardStageRef={forwardStageRef} />
+      <Tooltip getChartContainerRef={containerRef} />
+    </>
+  );
+
+  isInitialized = () => InitStatus.Initialized;
+  isBrushAvailable = () => false;
+  isBrushing = () => false;
+  isChartEmpty = () => false;
+  getLegendItems = () => EMPTY_LEGEND_LIST;
+  getLegendItemsLabels = () => EMPTY_LEGEND_ITEM_LIST;
+  getLegendExtraValues = () => EMPTY_MAP;
+  getPointerCursor = () => DEFAULT_CSS_CURSOR;
+  isTooltipVisible(globalState: GlobalChartState) {
+    return isTooltipVisible(globalState);
+  }
+
+  getTooltipInfo(globalState: GlobalChartState) {
+    return getTooltipInfo(globalState);
+  }
+
+  getTooltipAnchor(globalState: GlobalChartState) {
+    return getTooltipAnchor(globalState);
+  }
+
+  eventCallbacks = () => {};
+  getProjectionContainerArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
+  getMainProjectionArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
+  getBrushArea = () => null;
+  getDebugState = () => ({});
+  getSmallMultiplesDomains() {
+    return {
+      smHDomain: [],
+      smVDomain: [],
+    };
+  }
+
+  canDisplayChartTitles(globalState: GlobalChartState) {
+    return canDisplayChartTitles(globalState);
+  }
+}

packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts

@@ -0,0 +1,184 @@
+/*
+ * 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 { angularBullet, horizontalBullet, verticalBullet } from './sub_types';
+import { Color, Colors } from '../../../../common/colors';
+import { Ratio } from '../../../../common/geometry';
+import { cssFontShorthand } from '../../../../common/text_utils';
+import { withContext, clearCanvas } from '../../../../renderers/canvas';
+import { A11ySettings } from '../../../../state/selectors/get_accessibility_config';
+import { renderDebugPoint, renderDebugRect } from '../../../xy_chart/renderer/canvas/utils/debug';
+import { ActiveValue } from '../../selectors/get_active_values';
+import { BulletDimensions } from '../../selectors/get_panel_dimensions';
+import { BulletGraphSpec, BulletGraphSubtype } from '../../spec';
+import {
+  BulletGraphStyle,
+  HEADER_PADDING,
+  SUBTITLE_FONT,
+  SUBTITLE_FONT_SIZE,
+  SUBTITLE_LINE_HEIGHT,
+  TARGET_FONT,
+  TARGET_FONT_SIZE,
+  TITLE_FONT,
+  TITLE_FONT_SIZE,
+  TITLE_LINE_HEIGHT,
+  VALUE_FONT,
+  VALUE_FONT_SIZE,
+} from '../../theme';
+
+/** @internal */
+export function renderBulletGraph(
+  ctx: CanvasRenderingContext2D,
+  dpr: Ratio,
+  props: {
+    debug: boolean;
+    spec?: BulletGraphSpec;
+    a11y: A11ySettings;
+    dimensions: BulletDimensions;
+    activeValues: (ActiveValue | null)[][];
+    style: BulletGraphStyle;
+    backgroundColor: Color;
+  },
+) {
+  const { debug, style, dimensions, activeValues, spec, backgroundColor } = props;
+  withContext(ctx, (ctx) => {
+    ctx.scale(dpr, dpr);
+    clearCanvas(ctx, backgroundColor);
+
+    // clear only if need to render metric or no spec available
+    if (!spec || dimensions.shouldRenderMetric) {
+      return;
+    }
+
+    // render each Small multiple
+    ctx.fillStyle = backgroundColor;
+
+    // layout.headerLayout.forEach((row, rowIndex) =>
+    dimensions.rows.forEach((row, rowIndex) =>
+      row.forEach((bulletGraph, columnIndex) => {
+        if (!bulletGraph) return;
+        const { panel, multiline } = bulletGraph;
+        withContext(ctx, (ctx) => {
+          const verticalAlignment = dimensions.layoutAlignment[rowIndex]!;
+          const activeValue = activeValues?.[rowIndex]?.[columnIndex];
+
+          if (debug) {
+            renderDebugRect(ctx, panel);
+          }
+
+          // move into the panel position
+          ctx.translate(panel.x, panel.y);
+
+          // paint right border
+          ctx.strokeStyle = style.border;
+          // TODO: check paddings
+          if (row.length > 1 && columnIndex < row.length - 1) {
+            ctx.beginPath();
+            ctx.moveTo(panel.width, 0);
+            ctx.lineTo(panel.width, panel.height);
+            ctx.stroke();
+          }
+
+          if (dimensions.rows.length > 1 && columnIndex < dimensions.rows.length) {
+            ctx.beginPath();
+            ctx.moveTo(0, panel.height);
+            ctx.lineTo(panel.width, panel.height);
+            ctx.stroke();
+          }
+
+          // this helps render the header without considering paddings
+          ctx.translate(HEADER_PADDING.left, HEADER_PADDING.top);
+
+          // Title
+          ctx.fillStyle = props.style.textColor;
+          ctx.textBaseline = 'top';
+          ctx.textAlign = 'start';
+          ctx.font = cssFontShorthand(TITLE_FONT, TITLE_FONT_SIZE);
+          bulletGraph.title.forEach((titleLine, lineIndex) => {
+            const y = lineIndex * TITLE_LINE_HEIGHT;
+            ctx.fillText(titleLine, 0, y);
+          });
+
+          // Subtitle
+          if (bulletGraph.subtitle) {
+            const y = verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT;
+            ctx.font = cssFontShorthand(SUBTITLE_FONT, SUBTITLE_FONT_SIZE);
+            ctx.fillText(bulletGraph.subtitle, 0, y);
+          }
+
+          // Value
+          ctx.textBaseline = 'alphabetic';
+          ctx.font = cssFontShorthand(VALUE_FONT, VALUE_FONT_SIZE);
+          if (!multiline) ctx.textAlign = 'end';
+          {
+            const y =
+              verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
+              verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
+              (multiline ? TARGET_FONT_SIZE : 0);
+            const x = multiline ? 0 : bulletGraph.header.width - bulletGraph.targetWidth;
+            ctx.fillText(bulletGraph.value, x, y);
+          }
+
+          // Target
+          ctx.font = cssFontShorthand(TARGET_FONT, TARGET_FONT_SIZE);
+          if (!multiline) ctx.textAlign = 'end';
+          {
+            const x = multiline ? bulletGraph.valueWidth : bulletGraph.header.width;
+            const y =
+              verticalAlignment.maxTitleRows * TITLE_LINE_HEIGHT +
+              verticalAlignment.maxSubtitleRows * SUBTITLE_LINE_HEIGHT +
+              (multiline ? TARGET_FONT_SIZE : 0);
+            ctx.fillText(bulletGraph.target, x, y);
+          }
+
+          ctx.translate(-HEADER_PADDING.left, -HEADER_PADDING.top);
+
+          const { graphArea } = bulletGraph;
+
+          if (spec.subtype !== BulletGraphSubtype.horizontal) {
+            ctx.strokeStyle = style.border;
+            ctx.beginPath();
+            ctx.moveTo(HEADER_PADDING.left, graphArea.origin.y);
+            ctx.lineTo(panel.width - HEADER_PADDING.right, graphArea.origin.y);
+            ctx.stroke();
+          }
+
+          withContext(ctx, (ctx) => {
+            ctx.translate(graphArea.origin.x, graphArea.origin.y);
+
+            if (spec.subtype === BulletGraphSubtype.horizontal) {
+              horizontalBullet(ctx, bulletGraph, style, backgroundColor, activeValue);
+            } else if (spec.subtype === BulletGraphSubtype.vertical) {
+              verticalBullet(ctx, bulletGraph, style, backgroundColor, activeValue);
+            } else {
+              angularBullet(ctx, bulletGraph, style, backgroundColor, spec, debug, activeValue);
+            }
+          });
+
+          if (debug) {
+            withContext(ctx, (ctx) => {
+              ctx.translate(graphArea.origin.x, graphArea.origin.y);
+              renderDebugRect(
+                ctx,
+                {
+                  ...graphArea.size,
+                  x: 0,
+                  y: 0,
+                },
+                0,
+                { color: Colors.Transparent.rgba },
+              );
+              renderDebugPoint(ctx, 0, 0);
+              renderDebugPoint(ctx, graphArea.size.width / 2, graphArea.size.height / 2);
+            });
+          }
+        });
+      }),
+    );
+  });
+}

packages/charts/src/chart_types/bullet_graph/renderer/canvas/constants.ts

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+/** @internal */
+export const TARGET_SIZE = 40;
+
+/** @internal */
+export const TARGET_STROKE_WIDTH = 3;
+
+/** @internal */
+export const BULLET_SIZE = 32;
+
+/** @internal */
+export const BAR_SIZE = 12;
+
+/** @internal */
+export const TICK_WIDTH = 1;
+
+/** @internal */
+export const MIN_TICK_COUNT = 3;
+
+/** @internal */
+export const MAX_TICK_COUNT = 8;
+
+/** @internal */
+export const HOVER_SLOP = 20;
+
+/** @internal */
+export const TICK_INTERVAL = 100;
+
+/** @internal */
+export const ANGULAR_TICK_INTERVAL = 120;