fix(metric): move MetricSpec.body to MetricBase (#2336)

BREAKING CHANGE: Moves `MetricSpec.body` to `MetricDatum.body`/`MetricBase.body`
elastic · Feb 13, 2024 · 3390e25 · 3390e25
1 parent ffde0ef
commit 3390e25
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 35 deletions.
diff --git a/...hots/all.test.ts-snapshots/baselines/metric-alpha/body-content-chrome-linux.png b/...hots/all.test.ts-snapshots/baselines/metric-alpha/body-content-chrome-linux.png
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1957,7 +1957,7 @@ export function mergeWithDefaultAnnotationLine(config?: RecursivePartial<LineAnn
 export function mergeWithDefaultAnnotationRect(config?: RecursivePartial<RectAnnotationStyle>): RectAnnotationStyle;
 
 // @alpha (undocumented)
-export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", "body", "id">>;
+export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", never, "id">>;
 
 // @alpha (undocumented)
 export type MetricBase = {
@@ -1978,6 +1978,7 @@ export type MetricBase = {
         height: number;
         color: Color;
     }>;
+    body?: ReactNode;
 };
 
 // @alpha (undocumented)
@@ -1992,8 +1993,6 @@ export type MetricElementEvent = {
 
 // @alpha (undocumented)
 export interface MetricSpec extends Spec {
-    // (undocumented)
-    body?: ReactNode;
     // (undocumented)
     chartType: typeof ChartType.Metric;
     // (undocumented)

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/index.tsx b/packages/charts/src/chart_types/metric/renderer/dom/index.tsx
@@ -147,7 +147,6 @@ class Component extends React.Component<StateProps & DispatchProps> {
                     columnIndex={columnIndex}
                     panel={panel}
                     style={style}
-                    body={spec.body}
                     backgroundColor={backgroundColor}
                     contrastOptions={contrastOptions}
                     onElementClick={onElementClick}

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx
@@ -27,7 +27,7 @@ import {
 import { LayoutDirection, isNil } from '../../../../utils/common';
 import { Size } from '../../../../utils/dimensions';
 import { MetricStyle } from '../../../../utils/themes/theme';
-import { MetricSpec, MetricWNumber, isMetricWProgress, isMetricWTrend } from '../../specs';
+import { MetricWNumber, isMetricWProgress, isMetricWTrend } from '../../specs';
 
 /** @internal */
 export const Metric: React.FunctionComponent<{
@@ -40,7 +40,6 @@ export const Metric: React.FunctionComponent<{
   datum: MetricDatum;
   panel: Size;
   style: MetricStyle;
-  body?: MetricSpec['body'];
   backgroundColor: Color;
   contrastOptions: ColorContrastOptions;
   locale: string;
@@ -57,7 +56,6 @@ export const Metric: React.FunctionComponent<{
   datum,
   panel,
   style,
-  body,
   backgroundColor: chartBackgroundColor,
   contrastOptions,
   locale,
@@ -173,7 +171,6 @@ export const Metric: React.FunctionComponent<{
         datum={datumWithInteractionColor}
         panel={panel}
         style={style}
-        body={body}
         onElementClick={onElementClick ? onElementClickHandler : undefined}
         progressBarSize={progressBarSize}
         highContrastTextColor={finalTextColor.keyword}

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/text.tsx b/packages/charts/src/chart_types/metric/renderer/dom/text.tsx
@@ -17,7 +17,7 @@ import { isFiniteNumber, LayoutDirection, renderWithProps } from '../../../../ut
 import { Size } from '../../../../utils/dimensions';
 import { wrapText } from '../../../../utils/text/wrap';
 import { MetricStyle } from '../../../../utils/themes/theme';
-import { isMetricWNumber, isMetricWProgress, MetricDatum, MetricSpec } from '../../specs';
+import { isMetricWNumber, isMetricWProgress, MetricDatum } from '../../specs';
 
 type BreakPoint = 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
@@ -167,13 +167,12 @@ export const MetricText: React.FunctionComponent<{
   datum: MetricDatum;
   panel: Size;
   style: MetricStyle;
-  body?: MetricSpec['body'];
   onElementClick?: () => void;
   highContrastTextColor: Color;
   progressBarSize: 'small';
   locale: string;
-}> = ({ id, datum, panel, style, body, onElementClick, highContrastTextColor, progressBarSize, locale }) => {
-  const { extra, value } = datum;
+}> = ({ id, datum, panel, style, onElementClick, highContrastTextColor, progressBarSize, locale }) => {
+  const { extra, value, body } = datum;
 
   const size = findRange(WIDTH_BP, panel.width);
   const hasProgressBar = isMetricWProgress(datum);

diff --git a/packages/charts/src/chart_types/metric/specs/index.ts b/packages/charts/src/chart_types/metric/specs/index.ts
@@ -31,6 +31,7 @@ export type MetricBase = {
   subtitle?: string;
   extra?: ReactElement;
   icon?: ComponentType<{ width: number; height: number; color: Color }>;
+  body?: ReactNode;
 };
 
 /** @alpha */
@@ -92,7 +93,6 @@ export interface MetricSpec extends Spec {
   specType: typeof SpecType.Series;
   chartType: typeof ChartType.Metric;
   data: (MetricDatum | undefined)[][];
-  body?: ReactNode;
 }
 
 /** @alpha */

diff --git a/storybook/stories/metric/3_body.story.tsx b/storybook/stories/metric/3_body.story.tsx
@@ -76,6 +76,31 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
 
   const numericData: MetricWProgress | MetricWNumber | MetricWTrend = {
     ...data,
+    body: !showBody ? null : (
+      <div className={classNames('myCustomMetricSlot', { showBodyArea })} style={{ paddingTop: 8 }}>
+        <div>
+          <EuiFlexGroup wrap responsive={false} gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiBadge color="success">Healthy</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBadge
+                onMouseDown={(e): void => {
+                  e.stopPropagation(); // stops propagation of metric onElementClick
+                }}
+                onClickAriaLabel=""
+                onClick={() => action('badge click')()}
+                color="danger"
+                iconType="warning"
+                iconSide="left"
+              >
+                13
+              </EuiBadge>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+      </div>
+    ),
     value: Number.parseFloat(value),
     valueFormatter: (d: number) => `${d}${valuePostfix}`,
     ...(progressOrTrend === 'bar' ? { domainMax: progressMax, progressBarDirection } : {}),
@@ -113,28 +138,7 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
         }}
         onElementOut={() => onEventOutAction('out')}
       />
-      <Metric
-        id="1"
-        data={configuredData}
-        body={
-          !showBody ? null : (
-            <div className={classNames('myCustomMetricSlot', { showBodyArea })} style={{ paddingTop: 8 }}>
-              <div>
-                <EuiFlexGroup wrap responsive={false} gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiBadge color="success">Healthy</EuiBadge>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiBadge color="danger" iconType="warning" iconSide="left">
-                      13
-                    </EuiBadge>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </div>
-            </div>
-          )
-        }
-      />
+      <Metric id="1" data={configuredData} />
     </Chart>
   );
 };