always use string version of key for charts

elastic · Oct 5, 2020 · be28b15 · be28b15
1 parent b0d6507
commit be28b15
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx
@@ -51,7 +51,7 @@ export const ColumnChart: FC<Props> = ({ chartData, columnType, dataTestSubj })
               name="count"
               xScaleType={xScaleType}
               yScaleType="linear"
-              xAccessor="key"
+              xAccessor={'key_as_string'}
               yAccessors={['doc_count']}
               styleAccessor={(d) => d.datum.color}
               data={data}

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx b/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx
@@ -67,7 +67,7 @@ export const getFieldType = (schema: EuiDataGridColumn['schema']): KBN_FIELD_TYP
 
 interface NumericDataItem {
   key: number;
-  key_as_string?: string;
+  key_as_string: string | number;
   doc_count: number;
 }
 
@@ -91,7 +91,7 @@ export const isNumericChartData = (arg: any): arg is NumericChartData => {
 
 interface OrdinalDataItem {
   key: string;
-  key_as_string?: string;
+  key_as_string: string;
   doc_count: number;
 }
 
@@ -231,11 +231,13 @@ export const useColumnChart = (
   if (isOrdinalChartData(chartData)) {
     data = chartData.data.map((d: OrdinalDataItem) => ({
       ...d,
+      key_as_string: d.key_as_string || d.key,
       color: getColor(d),
     }));
   } else if (isNumericChartData(chartData)) {
     data = chartData.data.map((d: NumericDataItem) => ({
       ...d,
+      key_as_string: d.key_as_string || d.key,
       color: getColor(d),
     }));
   }