feat(metric): add value icon and color (#2101)

elastic · Jul 18, 2023 · d7134f5 · d7134f5
1 parent 250ca75
commit d7134f5
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 0 deletions.
diff --git a/...ic_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png b/...ic_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png
diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts
@@ -41,4 +41,9 @@ test.describe('Metric', () => {
       'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-EUI icon glyph name=warning&knob-color=rgba(166, 219, 208, 0.47)&knob-extra=1310 (-74% week before)&knob-is numeric metric=false&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=trend&knob-subtitle=&knob-title=Most used in&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=United States&knob-value postfix=&knob-value prefix=&knob-show icon=',
     );
   });
+  test('value icon and value color', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-title=Network out&knob-subtitle=host: 1dc4e&knob-progress or trend=trend&knob-progress bar direction=vertical&knob-trend data points=30&knob-trend shape=area&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-extra=last <b>5m</b>&knob-progress max=100&knob-is numeric metric=true&knob-value=55.23&knob-value prefix=&knob-value postfix=GB&knob-color=rgba(255, 255, 255, 1)&knob-use value color=true&knob-value color=rgba(189, 0, 0, 1)&knob-show icon=true&knob-EUI icon glyph name=warning&knob-show value icon=true&knob-EUI value icon glyph name=sortUp',
+    );
+  });
 });
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1799,6 +1799,13 @@ export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", ne
 export type MetricBase = {
     color: Color;
     title?: string;
+    valueColor?: Color;
+    valueIcon?: ComponentType<{
+        width: number;
+        height: number;
+        color: Color;
+        verticalAlign: 'middle';
+    }>;
     subtitle?: string;
     extra?: ReactElement;
     icon?: ComponentType<{

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/_text.scss b/packages/charts/src/chart_types/metric/renderer/dom/_text.scss
@@ -51,6 +51,13 @@
     overflow: hidden;
   }
 
+  &__valueIcon {
+    display: inline-block;
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+  }
+
   &__part {
     font-weight: bold;
   }

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/text.tsx b/packages/charts/src/chart_types/metric/renderer/dom/text.tsx
@@ -255,6 +255,8 @@ export const MetricText: React.FunctionComponent<{
           style={{
             fontSize: `${VALUE_FONT_SIZE[size]}px`,
             textOverflow: isNumericalMetric ? undefined : 'ellipsis',
+            marginRight: datum.valueIcon ? ICON_SIZE[size] + 8 : undefined,
+            color: datum.valueColor,
           }}
           title={textParts.map(({ text }) => text).join('')}
         >
@@ -272,6 +274,19 @@ export const MetricText: React.FunctionComponent<{
             );
           })}
         </p>
+        {datum.valueIcon && (
+          <p
+            className="echMetricText__valueIcon"
+            style={{ fontSize: `${VALUE_FONT_SIZE[size]}px`, color: datum.valueColor ?? highContrastTextColor }}
+          >
+            {renderWithProps(datum.valueIcon, {
+              width: VALUE_PART_FONT_SIZE[size],
+              height: VALUE_PART_FONT_SIZE[size],
+              color: datum.valueColor ?? highContrastTextColor,
+              verticalAlign: 'middle',
+            })}
+          </p>
+        )}
       </div>
     </div>
   );

diff --git a/packages/charts/src/chart_types/metric/specs/index.ts b/packages/charts/src/chart_types/metric/specs/index.ts
@@ -20,6 +20,8 @@ import { LayoutDirection } from '../../../utils/common';
 export type MetricBase = {
   color: Color;
   title?: string;
+  valueColor?: Color;
+  valueIcon?: ComponentType<{ width: number; height: number; color: Color; verticalAlign: 'middle' }>;
   subtitle?: string;
   extra?: ReactElement;
   icon?: ComponentType<{ width: number; height: number; color: Color }>;

diff --git a/storybook/stories/metric/1_basic.story.tsx b/storybook/stories/metric/1_basic.story.tsx
@@ -60,10 +60,14 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   const valuePrefix = text('value prefix', '');
   const valuePostfix = text('value postfix', ' %');
   const metricColor = color('color', '#3c3c3c');
+  const useValueColor = boolean('use value color', false);
+  const valueColor = color('value color', '#3c3c3c');
   extra = extra.replace('&lt;b&gt;', '<b>');
   extra = extra.replace('&lt;/b&gt;', '</b>');
   const showIcon = boolean('show icon', false);
   const iconType = text('EUI icon glyph name', 'warning');
+  const showValueIcon = boolean('show value icon', false);
+  const valueIconType = text('EUI value icon glyph name', 'sortUp');
   const getIcon =
     (type: string) =>
     ({ width, height, color }: { width: number; height: number; color: string }) => (
@@ -72,9 +76,11 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   const data = {
     color: metricColor,
     title,
+    valueColor: useValueColor ? valueColor : undefined,
     subtitle,
     extra: <span dangerouslySetInnerHTML={{ __html: extra }}></span>,
     ...(showIcon ? { icon: getIcon(iconType) } : {}),
+    ...(showValueIcon ? { valueIcon: getIcon(valueIconType) } : {}),
   };
 
   const numericData: MetricWProgress | MetricWNumber | MetricWTrend = {