[Table Visualization] split table in rows and columns (#2578)

This PR implement a group component TableVisGroupComponent utilizing TableVisComponent as sub component. It also adds a title to TableVisComponent. Partically resolved: #2379 Signed-off-by: Anan Zhuang <ananzh@amazon.com>
opensearch-project · Oct 17, 2022 · b919b99 · b919b99
1 parent c73840f
commit b919b99
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 36 deletions.
diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.scss b/src/plugins/vis_type_table/public/components/table_vis_app.scss
@@ -0,0 +1,19 @@
+.visTable {
+  flex-direction: column;
+  flex-grow: 1 0 0;
+}
+
+.visTable__group {
+  padding: $euiSizeS;
+  margin-bottom: $euiSizeL;
+
+  > h3 {
+    text-align: center;
+  }
+}
+
+.visTable__groupInColumns {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.tsx b/src/plugins/vis_type_table/public/components/table_vis_app.tsx
@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './table_vis_app.scss';
 import React from 'react';
+import classNames from 'classnames';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { I18nProvider } from '@osd/i18n/react';
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
@@ -12,6 +14,7 @@ import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboa
 import { TableContext } from '../table_vis_response_handler';
 import { TableVisConfig } from '../types';
 import { TableVisComponent } from './table_vis_component';
+import { TableVisComponentGroup } from './table_vis_component_group';
 
 interface TableVisAppProps {
   visData: TableContext;
@@ -25,14 +28,23 @@ export const TableVisApp = ({
   visConfig,
   handlers,
 }: TableVisAppProps & { services: CoreStart }) => {
+  const className = classNames('visTable', {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    visTable__groupInColumns: direction === 'column',
+  });
+
   return (
     <I18nProvider>
       <OpenSearchDashboardsContextProvider services={services}>
-        <div className="tableVis" data-test-subj="tableVisEditor">
+        <div className={className} data-test-subj="visTable">
           {table ? (
             <TableVisComponent table={table} visConfig={visConfig} handlers={handlers} />
           ) : (
-            <></>
+            <TableVisComponentGroup
+              tableGroups={tableGroups}
+              visConfig={visConfig}
+              handlers={handlers}
+            />
           )}
         </div>
       </OpenSearchDashboardsContextProvider>

diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useMemo, useRef } from 'react';
 import { orderBy } from 'lodash';
-import { EuiDataGridProps, EuiDataGrid, EuiDataGridSorting } from '@elastic/eui';
+import { EuiDataGridProps, EuiDataGrid, EuiDataGridSorting, EuiTitle } from '@elastic/eui';
 
 import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { Table } from '../table_vis_response_handler';
@@ -114,40 +114,47 @@ export const TableVisComponent = ({
 
   const footerCellValue = visConfig.showTotal
     ? // @ts-expect-error
-    ({ columnId }) => {
-      const colIndex = columns.findIndex((col) => col.id === columnId);
-      return columns[colIndex]?.formattedTotal || null;
-    }
+      ({ columnId }) => {
+        const colIndex = columns.findIndex((col) => col.id === columnId);
+        return columns[colIndex]?.formattedTotal || null;
+      }
     : undefined;
 
   return (
-    <EuiDataGrid
-      aria-label={ariaLabel}
-      columns={dataGridColumns}
-      columnVisibility={{
-        visibleColumns: columns.map(({ id }) => id),
-        setVisibleColumns: () => { },
-      }}
-      rowCount={rows.length}
-      renderCellValue={renderCellValue}
-      sorting={{ columns: sortedColumns, onSort }}
-      onColumnResize={onColumnResize}
-      pagination={pagination}
-      gridStyle={{
-        border: 'horizontal',
-        header: 'underline',
-      }}
-      minSizeForControls={1}
-      renderFooterCellValue={footerCellValue}
-      toolbarVisibility={{
-        showColumnSelector: false,
-        showSortSelector: false,
-        showFullScreenSelector: false,
-        showStyleSelector: false,
-        additionalControls: (
-          <TableVisControl filename={visConfig.title} rows={sortedRows} columns={columns} />
-        ),
-      }}
-    />
+    <>
+      {title && (
+        <EuiTitle size="xs">
+          <h3>{title}</h3>
+        </EuiTitle>
+      )}
+      <EuiDataGrid
+        aria-label={ariaLabel}
+        columns={dataGridColumns}
+        columnVisibility={{
+          visibleColumns: columns.map(({ id }) => id),
+          setVisibleColumns: () => {},
+        }}
+        rowCount={rows.length}
+        renderCellValue={renderCellValue}
+        sorting={{ columns: sortedColumns, onSort }}
+        onColumnResize={onColumnResize}
+        pagination={pagination}
+        gridStyle={{
+          border: 'horizontal',
+          header: 'underline',
+        }}
+        minSizeForControls={1}
+        renderFooterCellValue={footerCellValue}
+        toolbarVisibility={{
+          showColumnSelector: false,
+          showSortSelector: false,
+          showFullScreenSelector: false,
+          showStyleSelector: false,
+          additionalControls: (
+            <TableVisControl filename={visConfig.title} rows={sortedRows} columns={columns} />
+          ),
+        }}
+      />
+    </>
   );
 };
diff --git a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { memo } from 'react';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { TableGroup } from '../table_vis_response_handler';
+import { TableVisConfig } from '../types';
+import { TableVisComponent } from './table_vis_component';
+
+interface TableVisGroupComponentProps {
+  tableGroups: TableGroup[];
+  visConfig: TableVisConfig;
+  handlers: IInterpreterRenderHandlers;
+}
+
+export const TableVisComponentGroup = memo(
+  ({ tableGroups, visConfig, handlers }: TableVisGroupComponentProps) => {
+    return (
+      <>
+        {tableGroups.map(({ tables, title }) => (
+          <div key={title} className="visTable__group">
+            <TableVisComponent
+              title={title}
+              table={tables[0]}
+              visConfig={visConfig}
+              handlers={handlers}
+            />
+          </div>
+        ))}
+      </>
+    );
+  }
+);
diff --git a/src/plugins/vis_type_table/public/table_vis_response_handler.ts b/src/plugins/vis_type_table/public/table_vis_response_handler.ts
@@ -49,7 +49,7 @@ export interface TableGroup {
 
 export interface TableContext {
   table?: Table;
-  tableGroups?: TableGroup[];
+  tableGroups: TableGroup[];
   direction?: 'row' | 'column';
 }