fix(metric): use a correct React key for each grid item (elastic#1789)

This PR fixes the problem caused by a wrongly generated React key on each grid items.

Author: markov00

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

@@ -108,13 +108,13 @@ class Component extends React.Component<StateProps & DispatchProps> {
               });
               if (!datum) {
                 return (
-                  <li key={`empty-${columnIndex}`} role="presentation">
+                  <li key={`${columnIndex}-${rowIndex}`} role="presentation">
                     <div className={emptyMetricClassName}></div>
                   </li>
                 );
               }
               return (
-                <li key={`${datum.title}${datum.subtitle}${datum.color}${columnIndex}`}>
+                <li key={`${columnIndex}-${rowIndex}`}>
                   <MetricComponent
                     chartId={chartId}
                     datum={datum}
@@ -132,13 +132,14 @@ class Component extends React.Component<StateProps & DispatchProps> {
               );
             }),
             // fill the grid row with empty panels
-            ...Array.from({ length: totalColumns - columns.length }, (_, columIndex) => {
+            ...Array.from({ length: totalColumns - columns.length }, (_, zeroBasedColumnIndex) => {
+              const columnIndex = zeroBasedColumnIndex + columns.length;
               const emptyMetricClassName = classNames('echMetric', {
-                'echMetric--rightBorder': columns.length + columIndex < totalColumns - 1,
+                'echMetric--rightBorder': columns.length + columnIndex < totalColumns - 1,
                 'echMetric--bottomBorder': rowIndex < totalRows - 1,
               });
               return (
-                <li key={`missing-${columIndex}`} role="presentation">
+                <li key={`missing-${columnIndex}-${rowIndex}`} role="presentation">
                   <div className={emptyMetricClassName}></div>
                 </li>
               );

storybook/stories/metric/2_grid.story.tsx

@@ -8,8 +8,8 @@
 
 import { EuiIcon } from '@elastic/eui';
 import { action } from '@storybook/addon-actions';
-import { select, number, boolean } from '@storybook/addon-knobs';
-import React from 'react';
+import { select, number, boolean, button } from '@storybook/addon-knobs';
+import React, { useState } from 'react';
 
 import {
   Chart,
@@ -142,6 +142,22 @@ export const Example = () => {
   const layout = select('layout', ['grid', 'vertical', 'horizontal'], 'grid');
   const configuredData =
     layout === 'grid' ? split(data, 4) : layout === 'horizontal' ? [data.slice(0, 4)] : split(data.slice(0, 4), 1);
+  const [chartData, setChartData] = useState(configuredData);
+  button('randomize data', () => {
+    setChartData(
+      split(
+        data
+          .slice()
+          .map((d) => {
+            return Math.random() > 0.8 ? undefined : d;
+          })
+          .slice(0, Math.ceil(Math.random() * data.length)),
+        Math.ceil((Math.random() * data.length) / 2),
+      ),
+    );
+  });
+  const debugRandomizedData = boolean('debug randomized data', false);
+
   const onEventClickAction = action('click');
   const onEventOverAction = action('over');
   const onEventOutAction = action('out');
@@ -155,6 +171,11 @@ export const Example = () => {
         width: layout === 'vertical' ? '180px' : '720px',
       }}
     >
+      {debugRandomizedData &&
+        chartData
+          .flat()
+          .map((d) => `[${d?.value}]`)
+          .join(' ')}
       <Chart>
         <Settings
           baseTheme={useBaseTheme()}
@@ -180,7 +201,7 @@ export const Example = () => {
           }}
           onElementOut={() => onEventOutAction('out')}
         />
-        <Metric id="metric" data={configuredData} />
+        <Metric id="metric" data={chartData} />
       </Chart>
     </div>
   );