fix(bullet): add a11y summary and debugState (#2352)

packages/charts/api/charts.api.md

@@ -478,6 +478,34 @@ export interface BulletDatum {
     valueFormatter: ValueFormatter;
 }
 
+// @public (undocumented)
+export interface BulletDebugState {
+    // (undocumented)
+    activeValue?: number;
+    // (undocumented)
+    rows: (BulletDebugStateRow | null)[][];
+}
+
+// @public (undocumented)
+export interface BulletDebugStateRow {
+    // (undocumented)
+    colorBands: string[];
+    // (undocumented)
+    domain: GenericDomain;
+    // (undocumented)
+    subtitle?: string;
+    // (undocumented)
+    subtype: BulletSubtype;
+    // (undocumented)
+    target?: number;
+    // (undocumented)
+    ticks: number[];
+    // (undocumented)
+    title: string;
+    // (undocumented)
+    value: number;
+}
+
 // Warning: (ae-incompatible-release-tags) The symbol "BulletProps" is marked as @public, but its signature references "Bullet" which is marked as @alpha
 //
 // @public (undocumented)
@@ -933,7 +961,11 @@ export interface DebugState {
     axes?: DebugStateAxes;
     // (undocumented)
     bars?: DebugStateBar[];
+    // (undocumented)
+    bullet?: BulletDebugState;
     // Warning: (ae-forgotten-export) The symbol "HeatmapDebugState" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
     heatmap?: HeatmapDebugState;
     // (undocumented)
     legend?: DebugStateLegend;

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

@@ -10,6 +10,7 @@ import React, { RefObject } from 'react';
 
 import { BulletRenderer } from './renderer/canvas';
 import { canDisplayChartTitles } from './selectors/can_display_chart_titles';
+import { getDebugStateSelector } from './selectors/get_debug_state';
 import { getTooltipAnchor } from './selectors/get_tooltip_anchor';
 import { getTooltipInfo } from './selectors/get_tooltip_info';
 import { isTooltipVisible } from './selectors/is_tooltip_visible';
@@ -28,7 +29,7 @@ const EMPTY_LEGEND_ITEM_LIST: LegendItemLabel[] = [];
 /** @internal */
 export class BulletState implements InternalChartState {
   chartType = ChartType.Bullet;
-  getChartTypeDescription = () => 'Bullet Graph';
+  getChartTypeDescription = () => 'Bullet chart';
   chartRenderer = (containerRef: BackwardRef, forwardStageRef: RefObject<HTMLCanvasElement>) => (
     <>
       <BulletRenderer forwardStageRef={forwardStageRef} />
@@ -60,7 +61,7 @@ export class BulletState implements InternalChartState {
   getProjectionContainerArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
   getMainProjectionArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
   getBrushArea = () => null;
-  getDebugState = () => ({});
+  getDebugState = (state: GlobalChartState) => getDebugStateSelector(state);
   getSmallMultiplesDomains() {
     return {
       smHDomain: [],

packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx

@@ -14,6 +14,7 @@ import { renderBullet } from './bullet';
 import { ColorContrastOptions } from '../../../../common/color_calcs';
 import { colorToRgba } from '../../../../common/color_library_wrappers';
 import { Color, Colors } from '../../../../common/colors';
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { AlignedGrid } from '../../../../components/grid/aligned_grid';
 import { ElementOverListener, settingsBuildProps } from '../../../../specs';
 import { onChartRendered } from '../../../../state/actions/chart';
@@ -152,7 +153,9 @@ class Component extends React.Component<Props> {
           style={size}
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
-        ></canvas>
+        >
+          <ScreenReaderSummary />
+        </canvas>
         {dimensions.shouldRenderMetric && (
           <div className="echBulletAsMetric" style={{ width: '100%', height: '100%' }}>
             <AlignedGrid<BulletDatum>

packages/charts/src/chart_types/bullet_graph/selectors/get_debug_state.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { getActiveValue } from './get_active_value';
+import { getBulletSpec } from './get_bullet_spec';
+import { getPanelDimensions } from './get_panel_dimensions';
+import { createCustomCachedSelector } from '../../../state/create_selector';
+import { BulletDebugStateRow, DebugState } from '../../../state/types';
+
+/** @internal */
+export const getDebugStateSelector = createCustomCachedSelector(
+  [getPanelDimensions, getActiveValue, getBulletSpec],
+  (dimensions, activeValue, spec): DebugState => {
+    return {
+      bullet: {
+        rows: dimensions.rows.map((row) => {
+          return row.map((d): BulletDebugStateRow | null => {
+            if (!d) return d;
+
+            const { datum, colorBands, ticks, domain } = d;
+            const { title, subtitle, target, value } = datum;
+            return {
+              title,
+              subtitle,
+              target,
+              value,
+              subtype: spec.subtype,
+              colorBands: colorBands.map((b) => b.color),
+              ticks,
+              domain,
+            };
+          });
+        }),
+        activeValue: activeValue?.value,
+      },
+    };
+  },
+);

packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts

@@ -35,6 +35,7 @@ export type BulletPanelDimensions = {
   };
   scale: ScaleLinear<number, number>;
   ticks: number[];
+  domain: GenericDomain;
   colorScale: ChromaColorScale;
   colorBands: ColorTick[];
   panel: Rect;
@@ -109,7 +110,7 @@ function getSubtypeDimensions(
   { ticks: desiredTicks, domain, niceDomain }: BulletDatum,
   { colorBands: defaultColorBandsConfig, fallbackBandColor }: BulletStyle,
   backgroundColor: Color,
-): Pick<BulletPanelDimensions, 'scale' | 'colorScale' | 'colorBands' | 'ticks'> {
+): Pick<BulletPanelDimensions, 'scale' | 'colorScale' | 'colorBands' | 'ticks' | 'domain'> {
   switch (subtype) {
     case BulletSubtype.circle:
     case BulletSubtype.halfCircle:
@@ -134,6 +135,7 @@ function getSubtypeDimensions(
 
       return {
         scale,
+        domain: scale.domain() as GenericDomain,
         ticks,
         colorBands,
         colorScale,
@@ -158,6 +160,7 @@ function getSubtypeDimensions(
 
       return {
         scale,
+        domain: scale.domain() as GenericDomain,
         ticks,
         colorBands,
         colorScale,
@@ -182,6 +185,7 @@ function getSubtypeDimensions(
 
       return {
         scale,
+        domain: scale.domain() as GenericDomain,
         ticks,
         colorBands,
         colorScale,

packages/charts/src/index.ts

@@ -27,6 +27,8 @@ export {
   DebugStateAxis,
   DebugStateBase,
   DebugStateLegendItem,
+  BulletDebugState,
+  BulletDebugStateRow,
   PointerValue,
 } from './state/types';
 export { toEntries } from './utils/common';

packages/charts/src/state/types.ts

@@ -8,9 +8,10 @@
 
 import type { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types';
 import { Pixels } from '../common/geometry';
-import { AnnotationType, BaseDatum, LineAnnotationDatum, RectAnnotationDatum } from '../specs';
+import { AnnotationType, BaseDatum, BulletSubtype, LineAnnotationDatum, RectAnnotationDatum } from '../specs';
 import { Accessor } from '../utils/accessor';
 import type { Datum, Position } from '../utils/common';
+import { GenericDomain } from '../utils/domain';
 import type { GeometryValue } from '../utils/geometry';
 import { LineAnnotationStyle, RectAnnotationStyle } from '../utils/themes/theme';
 
@@ -116,6 +117,24 @@ export type DebugStateAnnotations = {
   data: LineAnnotationDatum | RectAnnotationDatum;
 };
 
+/** @public */
+export interface BulletDebugStateRow {
+  subtype: BulletSubtype;
+  target?: number;
+  value: number;
+  title: string;
+  subtitle?: string;
+  colorBands: string[];
+  ticks: number[];
+  domain: GenericDomain;
+}
+
+/** @public */
+export interface BulletDebugState {
+  rows: (BulletDebugStateRow | null)[][];
+  activeValue?: number;
+}
+
 /**
  * Describes _visible_ chart state for use in functional tests
  *
@@ -129,9 +148,9 @@ export interface DebugState {
   lines?: DebugStateLine[];
   bars?: DebugStateBar[];
   annotations?: DebugStateAnnotations[];
-  /** Heatmap chart debug state */
   heatmap?: HeatmapDebugState;
   partition?: PartitionDebugState[];
+  bullet?: BulletDebugState;
 }
 
 /**

storybook/stories/bullet_graph/1_single.story.tsx

@@ -14,11 +14,13 @@ import { Chart, Bullet, BulletSubtype, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
+import { getDebugStateLogger } from '../utils/debug_state_logger';
 import { customKnobs } from '../utils/knobs';
 import { getKnobFromEnum } from '../utils/knobs/utils';
 
 export const Example: ChartsStory = (_, { title, description }) => {
   const debug = boolean('debug', false);
+  const debugState = boolean('Enable debug state', false);
   const bulletTitle = text('title', 'Error rate', 'General');
   const subtitle = text('subtitle', '', 'General');
   const value = number('value', 56, { range: true, min: -200, max: 200 }, 'General');
@@ -51,7 +53,12 @@ export const Example: ChartsStory = (_, { title, description }) => {
 
   return (
     <Chart title={title} description={description}>
-      <Settings debug={debug} baseTheme={useBaseTheme()} />
+      <Settings
+        debug={debug}
+        onRenderChange={getDebugStateLogger(debugState)}
+        debugState={debugState}
+        baseTheme={useBaseTheme()}
+      />
       <Bullet
         id="bullet"
         subtype={subtype}

storybook/stories/bullet_graph/6_grid.story.tsx

@@ -14,10 +14,12 @@ import { Chart, Bullet, BulletSubtype, Settings, Tooltip } from '@elastic/charts
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
+import { getDebugStateLogger } from '../utils/debug_state_logger';
 import { getKnobFromEnum } from '../utils/knobs/utils';
 
 export const Example: ChartsStory = (_, { title, description }) => {
   const debug = boolean('debug', false);
+  const debugState = boolean('Enable debug state', false);
   const hideTooltip = boolean('hide tooltip', false);
   const syncCursor = boolean('sync cursor', false);
   const tickSnapStep = number('active tick step', 1, { min: 0, max: 10 });
@@ -32,7 +34,12 @@ export const Example: ChartsStory = (_, { title, description }) => {
 
   return (
     <Chart title={title} description={description}>
-      <Settings baseTheme={useBaseTheme()} debug={debug} />
+      <Settings
+        debug={debug}
+        onRenderChange={getDebugStateLogger(debugState)}
+        debugState={debugState}
+        baseTheme={useBaseTheme()}
+      />
       <Tooltip type={hideTooltip ? 'none' : undefined} />
       <Bullet
         id="bubbles"

storybook/stories/goal/2_gauge_with_target.story.tsx

@@ -16,11 +16,13 @@ import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/co
 import { Color } from '../../../packages/charts/src/common/colors';
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
+import { getDebugStateLogger } from '../utils/debug_state_logger';
 import { getBandFillColorFn } from '../utils/utils';
 
 const subtype = GoalSubtype.Goal;
 
 export const Example: ChartsStory = (_, { title, description }) => {
+  const debugState = boolean('Enable debug state', false);
   const base = number('base', 0, { range: true, min: 0, max: 300, step: 1 });
   const target = number('target', 260, { range: true, min: 0, max: 300, step: 1 });
   const actual = number('actual', 170, { range: true, min: 0, max: 300, step: 1 });
@@ -59,7 +61,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
 
   return (
     <Chart title={title} description={description}>
-      <Settings baseTheme={useBaseTheme()} />
+      <Settings baseTheme={useBaseTheme()} onRenderChange={getDebugStateLogger(debugState)} debugState={debugState} />
       <Goal
         id="spec_1"
         subtype={subtype}