[ML] Use EuiDataGrid's own display prop to render chart instead of ref.

elastic · Jun 15, 2020 · c4acf11 · c4acf11
1 parent 4026c82
commit c4acf11
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 129 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
@@ -5,7 +5,7 @@
 }
 
 .mlDataGridChart + .mlDataGridChart {
-  border-left: solid 0px $euiColorLightShade;
+  border-left: none;
 }
 
 .mlDataGridChart__histogram {
@@ -17,11 +17,12 @@
   color: $euiColorMediumShade;
   display: block;
   overflow-x: hidden;
-  margin: $euiSizeXS $euiSizeXS 0px $euiSizeXS;
+  margin: $euiSizeXS 0px 0px 0px;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
   font-style: italic;
+  font-weight: normal;
   line-height: 1.4;
   text-align: left;
 }

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -30,7 +30,6 @@ import { euiDataGridStyle, euiDataGridToolbarSettings } from './common';
 import { UseIndexDataReturnType } from './types';
 // TODO Fix row hovering + bar highlighting
 // import { hoveredRow$ } from './column_chart';
-import { useColumnCharts } from './use_column_charts';
 
 import './data_grid.scss';
 
@@ -61,8 +60,7 @@ export const DataGrid: FC<Props> = memo(
   (props) => {
     const {
       chartsVisible,
-      columnCharts,
-      columns,
+      columnsWithCharts,
       dataTestSubj,
       errorMessage,
       invalidSortingColumnns,
@@ -82,12 +80,6 @@ export const DataGrid: FC<Props> = memo(
       visibleColumns,
     } = props;
 
-    const { columnResizeHandler, refFn } = useColumnCharts(
-      columns.filter((c) => visibleColumns.includes(c.id)),
-      columnCharts,
-      chartsVisible
-    );
-
     // TODO Fix row hovering + bar highlighting
     // const getRowProps = (item: any) => {
     //   return {
@@ -185,10 +177,10 @@ export const DataGrid: FC<Props> = memo(
             <EuiSpacer size="m" />
           </div>
         )}
-        <div ref={refFn} className="mlDataGrid">
+        <div className="mlDataGrid">
           <EuiDataGrid
             aria-label={isWithHeader(props) ? props.title : ''}
-            columns={columns.map((c) => {
+            columns={columnsWithCharts.map((c) => {
               c.initialWidth = 150;
               return c;
             })}
@@ -221,7 +213,6 @@ export const DataGrid: FC<Props> = memo(
               onChangeItemsPerPage,
               onChangePage,
             }}
-            onColumnResize={columnResizeHandler}
           />
         </div>
       </div>
@@ -232,7 +223,7 @@ export const DataGrid: FC<Props> = memo(
 
 function pickProps(props: Props) {
   return [
-    props.columns,
+    props.columnsWithCharts,
     props.dataTestSubj,
     props.errorMessage,
     props.invalidSortingColumnns,

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/types.ts b/x-pack/plugins/ml/public/application/components/data_grid/types.ts
@@ -57,7 +57,7 @@ export interface UseIndexDataReturnType
   extends Pick<
     UseDataGridReturnType,
     | 'chartsVisible'
-    | 'columnCharts'
+    | 'columnsWithCharts'
     | 'errorMessage'
     | 'invalidSortingColumnns'
     | 'noDataMessage'
@@ -74,13 +74,12 @@ export interface UseIndexDataReturnType
     | 'toggleChartVisibility'
     | 'visibleColumns'
   > {
-  columns: EuiDataGridColumn[];
   renderCellValue: RenderCellValue;
 }
 
 export interface UseDataGridReturnType {
   chartsVisible: boolean;
-  columnCharts: ChartData[];
+  columnsWithCharts: EuiDataGridColumn[];
   errorMessage: string;
   invalidSortingColumnns: ColumnId[];
   noDataMessage: string;

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/use_column_charts.tsx b/x-pack/plugins/ml/public/application/components/data_grid/use_column_charts.tsx
diff --git a/...ion/components/data_grid/use_data_grid.ts → ...on/components/data_grid/use_data_grid.tsx b/...ion/components/data_grid/use_data_grid.ts → ...on/components/data_grid/use_data_grid.tsx
@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { EuiDataGridSorting, EuiDataGridColumn } from '@elastic/eui';
 
 import { INDEX_STATUS } from '../../data_frame_analytics/common';
 
+import { ColumnChart } from './column_chart';
 import { INIT_MAX_COLUMNS } from './common';
 import {
   ColumnId,
@@ -95,7 +96,20 @@ export const useDataGrid = (
 
   return {
     chartsVisible,
-    columnCharts,
+    columnsWithCharts: columns.map((c) => {
+      const chartData = columnCharts.find((cd) => cd.id === c.id);
+
+      return {
+        ...c,
+        display:
+          chartData !== undefined && chartsVisible === true ? (
+            <>
+              <ColumnChart chartData={chartData} columnType={c} />
+              {c.id}
+            </>
+          ) : undefined,
+      };
+    }),
     errorMessage,
     invalidSortingColumnns,
     noDataMessage,

diff --git a/.../public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts b/.../public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts
@@ -122,7 +122,6 @@ export const useIndexData = (indexPattern: IndexPattern, query: any): UseIndexDa
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };
diff --git a/x-pack/plugins/transform/public/app/hooks/use_index_data.ts b/x-pack/plugins/transform/public/app/hooks/use_index_data.ts
@@ -15,7 +15,6 @@ import {
   getErrorMessage,
   useDataGrid,
   useRenderCellValue,
-  ChartData,
   EsSorting,
   SearchResponse7,
   UseIndexDataReturnType,
@@ -131,7 +130,6 @@ export const useIndexData = (
 
   return {
     ...dataGrid,
-    columns,
     renderCellValue,
   };
 };