feat(metric): Metric visualization

integration/tests/metric_stories.test.ts

@@ -11,27 +11,27 @@ import { common } from '../page_objects';
 describe('Metric', () => {
   it('should render horizontal progress bar', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-progress bar=small&knob-progress bar orientation=horizontal&knob-orientation=grid',
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:light&knob-use progress bar=true&knob-progress bar direction=horizontal&knob-max trend data points=30&knob-layout=grid',
     );
   });
   it('should render no progress bar', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-progress bar=none&knob-progress bar orientation=vertical&knob-orientation=grid',
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:light&knob-use progress bar=&knob-progress bar direction=horizontal&knob-max trend data points=30&knob-layout=grid',
     );
   });
   it('should render vertical progress bar  in dark mode', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-dark&knob-orientation=grid&knob-progress bar=small&knob-progress bar orientation=vertical',
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=vertical&knob-use progress bar=true',
     );
   });
   it('should render horizontal progress bar in dark mode', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-dark&knob-orientation=grid&knob-progress bar=small&knob-progress bar orientation=horizontal',
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=true',
     );
   });
   it('should render no progress bar  in dark mode', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:eui-dark&knob-orientation=grid&knob-progress bar=none&knob-progress bar orientation=horizontal',
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=',
     );
   });
 });

packages/charts/api/charts.api.md

@@ -1048,7 +1048,7 @@ export function getNodeName(node: ArrayNode): string;
 // Warning: (ae-forgotten-export) The symbol "buildProps" needs to be exported by the entry point index.d.ts
 //
 // @alpha
-export const Goal: (props: SFProps<GoalSpec, keyof typeof buildProps_2['overrides'], keyof typeof buildProps_2['defaults'], keyof typeof buildProps_2['optionals'], keyof typeof buildProps_2['requires']>) => null;
+export const Goal: (props: SFProps<GoalSpec, keyof typeof buildProps['overrides'], keyof typeof buildProps['defaults'], keyof typeof buildProps['optionals'], keyof typeof buildProps['requires']>) => null;
 
 // @alpha (undocumented)
 export interface GoalDomainRange {
@@ -1650,10 +1650,8 @@ export function mergeWithDefaultAnnotationRect(config?: RecursivePartial<RectAnn
 // @public @deprecated
 export function mergeWithDefaultTheme(theme: PartialTheme, defaultTheme?: Theme, auxiliaryThemes?: PartialTheme[]): Theme;
 
-// Warning: (ae-forgotten-export) The symbol "buildProps" needs to be exported by the entry point index.d.ts
-//
-// @alpha
-export const Metric: (props: SFProps<MetricSpec, keyof typeof buildProps['overrides'], keyof typeof buildProps['defaults'], keyof typeof buildProps['optionals'], keyof typeof buildProps['requires']>) => null;
+// @alpha (undocumented)
+export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", never, "id">>;
 
 // @alpha (undocumented)
 export type MetricBase = {
@@ -1672,10 +1670,6 @@ export interface MetricSpec extends Spec {
     // (undocumented)
     data: (MetricBase | MetricWProgress | MetricWTrend | undefined)[][];
     // (undocumented)
-    progressBarMode: ProgressBarMode;
-    // (undocumented)
-    progressBarOrientation?: LayoutDirection;
-    // (undocumented)
     specType: typeof SpecType.Series;
 }
 
@@ -1687,7 +1681,7 @@ export interface MetricStyle {
     // (undocumented)
     background: Color;
     // (undocumented)
-    barBg: Color;
+    barBackground: Color;
     // (undocumented)
     nonFiniteText: string;
     // (undocumented)
@@ -1699,7 +1693,11 @@ export interface MetricStyle {
 
 // @alpha (undocumented)
 export type MetricWProgress = MetricBase & {
-    domain: [min: number, max: number];
+    domain: {
+        min: number;
+        max: number;
+    };
+    progressBarDirection?: LayoutDirection;
 };
 
 // @alpha (undocumented)
@@ -1708,6 +1706,9 @@ export type MetricWTrend = MetricBase & {
         x: number;
         y: number;
     }[];
+    trendShape?: 'area' | 'bar';
+    trendA11yTitle?: string;
+    trendA11yDescription?: string;
 };
 
 // @public (undocumented)
@@ -2027,15 +2028,6 @@ export type Predicate = $Values<typeof Predicate>;
 // @public
 export type PrimitiveValue = string | number | null;
 
-// @alpha (undocumented)
-export const ProgressBarMode: Readonly<{
-    None: "none";
-    Small: "small";
-}>;
-
-// @alpha (undocumented)
-export type ProgressBarMode = $Values<typeof ProgressBarMode>;
-
 // @public
 export type ProjectedValues = {
     x: PrimitiveValue;

packages/charts/src/chart_types/metric/renderer/_index.scss

@@ -10,6 +10,7 @@
 
 .echMetric {
   position: relative;
+  overflow: hidden;
 
   &--rightBorder {
     border-right: 1px solid #343741;

packages/charts/src/chart_types/metric/renderer/dom/_text.scss

@@ -9,46 +9,38 @@
 
 .echMetricText {
   position: relative;
-  padding: 10px;
+  padding: 8px;
+  height: 100%;
+  z-index: 1;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content min-content auto min-content min-content;
-  height: 100%;
+
   &__title {
-    font-weight: 500;
-    @include lineClamp(3);
-  }
-  &__titleS {
-    font-size: 16px;
-  }
-  &__titleM {
-    font-size: 24px;
+    font-weight: 400;
   }
+
   &__subtitle {
     padding-top: 5px;
-    font-size: 14px;
     font-weight: 300;
-    @include lineClamp(2);
+  }
+
+  &__extra {
+    text-align: right;
+    font-weight: 400;
   }
 
   &__value {
+    position: relative;
     font-weight: 600;
     text-align: right;
     white-space: nowrap;
   }
-  &__valueS {
-    font-size: 32px;
-  }
-  &__valueM {
-    font-size: 48px;
-  }
-  &__unit {
-    font-size: 14px;
+
+  &__part {
     font-weight: 400;
   }
-  &__extra {
-    text-align: right;
-  }
+
   &__gap {
     position: relative;
   }

packages/charts/src/chart_types/metric/renderer/dom/index.tsx

@@ -26,15 +26,16 @@ import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/
 import { LayoutDirection } from '../../../../utils/common';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
 import { MetricStyle } from '../../../../utils/themes/theme';
-import { isMetricWProgress, isMetricWTrend, MetricSpec, ProgressBarMode } from '../../specs';
+import { isMetricWProgress, isMetricWTrend, MetricSpec } from '../../specs';
 import { chartSize } from '../../state/selectors/chart_size';
-import { getSpecs } from '../../state/selectors/data';
+import { getMetricSpecs } from '../../state/selectors/data';
 import { ProgressBar } from './progress';
 import { SparkLine } from './sparkline';
 import { MetricText } from './text';
 
 interface ReactiveChartStateProps {
   initialized: boolean;
+  chartId: string;
   size: {
     width: number;
     height: number;
@@ -66,6 +67,7 @@ class Component extends React.Component<Props> {
 
   render() {
     const {
+      chartId,
       initialized,
       size: { width, height },
       a11y,
@@ -76,7 +78,7 @@ class Component extends React.Component<Props> {
       return null;
     }
     // ignoring other specs
-    const { data, progressBarMode, progressBarOrientation } = specs[0];
+    const { data } = specs[0];
 
     const maxRows = data.length;
     const maxColumns = data.reduce((acc, curr) => {
@@ -90,14 +92,15 @@ class Component extends React.Component<Props> {
         aria-labelledby={a11y.labelId}
         aria-describedby={a11y.descriptionId}
         style={{
-          gridTemplateColumns: `repeat(${maxColumns}, minmax(180px, 1fr)`,
-          gridTemplateRows: `repeat(${maxRows}, minmax(100px, 1fr)`,
+          gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr)`,
+          gridTemplateRows: `repeat(${maxRows}, minmax(64px, 1fr)`,
         }}
       >
         {data
           .map((columns, ri) => {
             return [
               ...columns.map((d, ci) => {
+                const metricHTMLId = `echMetric-${chartId}-${ri}-${ci}`;
                 // fill undefined with empty panels
                 const emptyMetricClassName = classNames('echMetric', {
                   'echMetric--rightBorder': ci < maxColumns - 1,
@@ -106,47 +109,27 @@ class Component extends React.Component<Props> {
                 if (!d) {
                   return <div key={`empty-${ci}`} className={emptyMetricClassName}></div>;
                 }
-
+                const hasProgressBar = isMetricWProgress(d);
+                const progressBarDirection = isMetricWProgress(d) ? d.progressBarDirection : undefined;
                 const metricPanelClassName = classNames(emptyMetricClassName, {
-                  'echMetric--small': progressBarMode === ProgressBarMode.Small,
-                  'echMetric--vertical': progressBarOrientation === LayoutDirection.Vertical,
-                  'echMetric--horizontal': progressBarOrientation === LayoutDirection.Horizontal,
+                  'echMetric--small': hasProgressBar,
+                  'echMetric--vertical': progressBarDirection === LayoutDirection.Vertical,
+                  'echMetric--horizontal': progressBarDirection === LayoutDirection.Horizontal,
                 });
 
                 return (
                   <div
+                    role="figure"
+                    aria-labelledby={d.title && metricHTMLId}
                     key={`${d.title}${d.subtitle}${d.color}${ci}`}
                     className={metricPanelClassName}
-                    style={{ backgroundColor: style.background }}
+                    style={{
+                      backgroundColor: !isMetricWTrend(d) && !isMetricWProgress(d) ? d.color : style.background,
+                    }}
                   >
-                    {isMetricWTrend(d) && <SparkLine datum={d} curve="linear" />}
-                    {isMetricWProgress(d) && progressBarMode !== ProgressBarMode.None && (
-                      <ProgressBar
-                        mode={progressBarMode}
-                        orientation={progressBarOrientation}
-                        datum={d}
-                        barBg={style.barBg}
-                      />
-                    )}
-                    {isMetricWProgress(d) && progressBarMode === ProgressBarMode.None && (
-                      <ProgressBar
-                        mode={progressBarMode}
-                        orientation={progressBarOrientation}
-                        barBg={style.barBg}
-                        datum={{
-                          value: 100,
-                          domain: [100, 100],
-                          color: d.color,
-                        }}
-                      />
-                    )}
-                    <MetricText
-                      datum={d}
-                      panel={panel}
-                      style={style}
-                      progressBarMode={progressBarMode}
-                      progressBarOrientation={progressBarOrientation}
-                    />
+                    <MetricText id={metricHTMLId} datum={d} panel={panel} style={style} />
+                    {isMetricWTrend(d) && <SparkLine id={metricHTMLId} datum={d} />}
+                    {isMetricWProgress(d) && <ProgressBar datum={d} barBackground={style.barBackground} />}
                   </div>
                 );
               }),
@@ -176,6 +159,7 @@ const mapDispatchToProps = (dispatch: Dispatch): ReactiveChartDispatchProps =>
 
 const DEFAULT_PROPS: ReactiveChartStateProps = {
   initialized: false,
+  chartId: '',
   specs: [],
   size: {
     width: 0,
@@ -190,7 +174,8 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
   }
   return {
     initialized: true,
-    specs: getSpecs(state),
+    chartId: state.chartId,
+    specs: getMetricSpecs(state),
     size: chartSize(state),
     a11y: getA11ySettingsSelector(state),
     style: getChartThemeSelector(state).metric,

packages/charts/src/chart_types/metric/renderer/dom/progress.tsx

@@ -11,33 +11,40 @@ import React from 'react';
 
 import { Color } from '../../../../common/colors';
 import { clamp, LayoutDirection } from '../../../../utils/common';
-import { MetricWProgress, MetricSpec, ProgressBarMode } from '../../specs';
+import { MetricWProgress } from '../../specs';
 
 /** @internal */
 export const ProgressBar: React.FunctionComponent<{
-  datum: Pick<MetricWProgress, 'domain' | 'value' | 'color'>;
-  mode: MetricSpec['progressBarMode'];
-  orientation: MetricSpec['progressBarOrientation'];
-  barBg: Color;
-}> = ({ datum: { domain, value, color }, mode, orientation, barBg }) => {
-  const isVertical = orientation === LayoutDirection.Vertical;
-  const isSmall = mode === ProgressBarMode.Small;
-  const percent = clamp((domain ? value / (domain[1] - domain[0]) : 1) * 100, 0, 100);
+  datum: Pick<MetricWProgress, 'title' | 'domain' | 'value' | 'color' | 'progressBarDirection'>;
+  barBackground: Color;
+}> = ({ datum: { title, domain, value, color, progressBarDirection }, barBackground }) => {
+  const verticalDirection = progressBarDirection === LayoutDirection.Vertical;
+  // currently we provide only the small progress bar;
+  const isSmall = true;
+  const percent = Number(clamp((domain ? value / (domain.max - domain.min) : 1) * 100, 0, 100).toFixed(2));
 
   const bgClassName = classNames('echSingleMetricProgress', {
-    'echSingleMetricProgress--vertical': isVertical,
-    'echSingleMetricProgress--horizontal': !isVertical,
+    'echSingleMetricProgress--vertical': verticalDirection,
+    'echSingleMetricProgress--horizontal': !verticalDirection,
     'echSingleMetricProgress--small': isSmall,
   });
   const barClassName = classNames('echSingleMetricProgressBar', {
-    'echSingleMetricProgressBar--vertical': isVertical,
-    'echSingleMetricProgressBar--horizontal': !isVertical,
+    'echSingleMetricProgressBar--vertical': verticalDirection,
+    'echSingleMetricProgressBar--horizontal': !verticalDirection,
     'echSingleMetricProgressBar--small': isSmall,
   });
-  const percentProp = isVertical ? { height: `${percent}%` } : { width: `${percent}%` };
+  const percentProp = verticalDirection ? { height: `${percent}%` } : { width: `${percent}%` };
   return (
-    <div className={bgClassName} style={{ background: isSmall ? barBg : undefined }}>
-      <div className={barClassName} style={{ background: color, ...percentProp }} />
+    <div className={bgClassName} style={{ background: isSmall ? barBackground : undefined }}>
+      <div
+        className={barClassName}
+        style={{ background: color, ...percentProp }}
+        role="meter"
+        aria-label={title ? `Percentage of ${title}` : 'Percentage'}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={percent}
+      />
     </div>
   );
 };