fix(metric): chart not rendered when the trend is empty

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

@@ -50,11 +50,9 @@ export const SparkLine: FunctionComponent<{
   id: string;
   datum: MetricWTrend;
 }> = ({ id, datum: { color, trend, trendA11yTitle, trendA11yDescription, trendShape } }) => {
-  if (!trend) {
-    return null;
-  }
   const sortedTrendData = getSortedData(trend);
-  const [xMin, xMax] = [sortedTrendData.at(0)!.x, sortedTrendData.at(-1)!.x];
+  const xMin = sortedTrendData.at(0)?.x ?? NaN;
+  const xMax = sortedTrendData.at(-1)?.x ?? NaN;
   const [, yMax] = extent(sortedTrendData.map((d) => d.y));
   const xScale = (value: number) => (value - xMin) / (xMax - xMin);
   const yScale = (value: number) => value / yMax;

storybook/stories/test_cases/22_metric_trend_length.story.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { number } from '@storybook/addon-knobs';
+import React, { useMemo } from 'react';
+
+import { Chart, Settings, Metric } from '@elastic/charts';
+import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
+
+import { ChartsStory } from '../../types';
+import { useBaseTheme } from '../../use_base_theme';
+
+const rng = getRandomNumberGenerator();
+
+export const Example: ChartsStory = (_, { title, description }) => {
+  const trendLength = number('Trend length x', 3, { min: 0 });
+  const trendData = Array.from({ length: trendLength })
+    .fill(0)
+    .map((_, x) => ({
+      x,
+      y: rng(0, 100),
+    }));
+
+  return (
+    <Chart title={title} description={description}>
+      <Settings baseTheme={useBaseTheme()} />
+      <Metric
+        id="metrics"
+        data={[
+          [
+            {
+              color: '#3c3c3c',
+              title: 'Zero length trend',
+              value: 0,
+              valueFormatter: (v) => `${v} length`,
+              trend: [],
+              trendShape: 'area',
+            },
+            {
+              color: '#add3f5',
+              title: 'Trend - length 1',
+              value: 1,
+              valueFormatter: (v) => `${v} length`,
+              trend: useMemo(
+                () => [
+                  {
+                    x: 1,
+                    y: rng(0, 100),
+                  },
+                ],
+                [],
+              ),
+              trendShape: 'area',
+            },
+          ],
+          [
+            {
+              color: '#db9b2c',
+              title: 'Trend - length 2',
+              value: 2,
+              valueFormatter: (v) => `${v} length`,
+              trend: useMemo(
+                () => [
+                  {
+                    x: 1,
+                    y: rng(0, 100),
+                  },
+                  {
+                    x: 2,
+                    y: rng(0, 100),
+                  },
+                ],
+                [],
+              ),
+              trendShape: 'area',
+            },
+            {
+              color: '#1ceec6',
+              title: 'Trend - length x',
+              value: trendLength,
+              valueFormatter: (v) => `${v} length`,
+              trend: trendData,
+              trendShape: 'area',
+            },
+          ],
+        ]}
+      />
+    </Chart>
+  );
+};

storybook/stories/test_cases/test_cases.stories.tsx

@@ -21,5 +21,6 @@ export { Example as testPointsOutsideOfDomain } from './8_test_points_outside_of
 export { Example as duplicateLabelsInPartitionLegend } from './9_duplicate_labels_in_partition_legend.story';
 export { Example as highlighterZIndex } from './10_highlighter_z_index.story';
 export { Example as domainEdges } from './21_domain_edges.story';
+export { Example as metricTrendLength } from './22_metric_trend_length.story';
 export { Example as startDayOfWeek } from './11_start_day_of_week.story';
 export { Example as logWithNegativeValues } from './12_log_with_negative_values.story';