feat(metric): Metric visualization

integration/tests/metric_stories.test.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.
+ */
+
+import { common } from '../page_objects';
+
+describe('Metric', () => {
+  it('should render horizontal progress bar', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      '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--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--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--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--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

@@ -14,6 +14,7 @@ import { LegacyRef } from 'react';
 import { OptionalKeys } from 'utility-types';
 import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RequiredKeys } from 'utility-types';
 
@@ -523,6 +524,7 @@ export const ChartType: Readonly<{
     XYAxis: "xy_axis";
     Heatmap: "heatmap";
     Wordcloud: "wordcloud";
+    Metric: "metric";
 }>;
 
 // @public (undocumented)
@@ -1663,6 +1665,76 @@ export function mergeWithDefaultAnnotationRect(config?: RecursivePartial<RectAnn
 // @public @deprecated
 export function mergeWithDefaultTheme(theme: PartialTheme, defaultTheme?: Theme, auxiliaryThemes?: PartialTheme[]): Theme;
 
+// @alpha (undocumented)
+export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", never, "id">>;
+
+// @alpha (undocumented)
+export type MetricBase = {
+    value: number;
+    valueFormatter: (d: number) => string;
+    color: Color;
+    title?: string;
+    subtitle?: string;
+    extra?: ReactElement;
+};
+
+// @alpha (undocumented)
+export interface MetricSpec extends Spec {
+    // (undocumented)
+    chartType: typeof ChartType.Metric;
+    // (undocumented)
+    data: (MetricBase | MetricWProgress | MetricWTrend | undefined)[][];
+    // (undocumented)
+    specType: typeof SpecType.Series;
+}
+
+// @alpha (undocumented)
+export type MetricSpecProps = ComponentProps<typeof Metric>;
+
+// @public (undocumented)
+export interface MetricStyle {
+    // (undocumented)
+    background: Color;
+    // (undocumented)
+    barBackground: Color;
+    // (undocumented)
+    nonFiniteText: string;
+    // (undocumented)
+    text: {
+        darkColor: Color;
+        lightColor: Color;
+    };
+}
+
+// @alpha (undocumented)
+export const MetricTrendShape: Readonly<{
+    Bars: "bars";
+    Area: "area";
+}>;
+
+// @alpha (undocumented)
+export type MetricTrendShape = $Values<typeof MetricTrendShape>;
+
+// @alpha (undocumented)
+export type MetricWProgress = MetricBase & {
+    domain: {
+        min: number;
+        max: number;
+    };
+    progressBarDirection?: LayoutDirection;
+};
+
+// @alpha (undocumented)
+export type MetricWTrend = MetricBase & {
+    trend: {
+        x: number;
+        y: number;
+    }[];
+    trendShape?: MetricTrendShape;
+    trendA11yTitle?: string;
+    trendA11yDescription?: string;
+};
+
 // @public (undocumented)
 export const MODEL_KEY = "parent";
 
@@ -2532,6 +2604,8 @@ export interface Theme {
     legend: LegendStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
+    // (undocumented)
+    metric: MetricStyle;
     partition: PartitionStyle;
     // (undocumented)
     scales: ScalesConfig;

packages/charts/src/chart_types/index.ts

@@ -20,6 +20,7 @@ export const ChartType = Object.freeze({
   XYAxis: 'xy_axis' as const,
   Heatmap: 'heatmap' as const,
   Wordcloud: 'wordcloud' as const,
+  Metric: 'metric' as const,
 });
 /** @public */
 export type ChartType = $Values<typeof ChartType>;

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

@@ -0,0 +1,38 @@
+.echMetricContainer {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  align-content: start;
+  justify-content: stretch;
+  align-items: stretch;
+  user-select: text;
+}
+
+.echMetric {
+  position: relative;
+  overflow: hidden;
+
+  &--rightBorder {
+    border-right: 1px solid #343741;
+  }
+
+  &--bottomBorder {
+    border-bottom: 1px solid #343741;
+  }
+
+  &--vertical {
+    &.echMetric--small {
+      padding-left: 10px;
+    }
+  }
+
+  &--horizontal {
+    &.echMetric--small {
+      padding-bottom: 10px;
+    }
+  }
+}
+
+@import 'dom/text';
+@import 'dom/progress';
+@import 'dom/sparkline';

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

@@ -0,0 +1,47 @@
+.echSingleMetricProgress {
+  position: absolute;
+  overflow: hidden;
+
+  &--vertical {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    &.echSingleMetricProgress--small {
+      right: auto;
+      width: 10px;
+    }
+  }
+
+  &--horizontal {
+    left: 0;
+    right: 0;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    &.echSingleMetricProgress--small {
+      top: auto;
+      height: 10px;
+    }
+  }
+}
+
+.echSingleMetricProgressBar {
+  &--vertical {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+  }
+  &--horizontal {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,28 @@
+.echSingleMetricSparkline {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.echSingleMetricSparkline__svg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.echSingleMetricChart--small {
+  position: absolute;
+  top: auto;
+  left: auto;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  height: 30px;
+}

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

@@ -0,0 +1,47 @@
+@mixin lineClamp($maxLines) {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $maxLines; /* number of lines to show */
+  line-clamp: $maxLines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.echMetricText {
+  position: relative;
+  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;
+
+  &__title {
+    font-weight: 400;
+  }
+
+  &__subtitle {
+    padding-top: 5px;
+    font-weight: 300;
+  }
+
+  &__extra {
+    text-align: right;
+    font-weight: 400;
+  }
+
+  &__value {
+    position: relative;
+    font-weight: 600;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  &__part {
+    font-weight: 400;
+  }
+
+  &__gap {
+    position: relative;
+  }
+}