Merge pull request #181 from apache-superset/conglei-fix-table-in-sup…

…erset fix(Table): Fixed styling and filtering issues in superset
apache-superset · Aug 21, 2019 · 9f83d8f · 9f83d8f
2 parents 7fcd9bc + 838bb43
commit 9f83d8f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 28 deletions.
diff --git a/packages/superset-ui-plugin-chart-table/src/Table.tsx b/packages/superset-ui-plugin-chart-table/src/Table.tsx
@@ -32,6 +32,8 @@ const defaultProps = {
   onRemoveFilter: NOOP,
 };
 
+const SEARCH_BAR_HEIGHT = 40;
+
 export type TableProps = Props & Readonly<typeof defaultProps>;
 
 type InternalTableProps = TableProps & WithStylesProps;
@@ -174,8 +176,10 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
       }
     });
 
+    const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height;
+
     return (
-      <>
+      <div className={cx(styles.container)}>
         {includeSearch && (
           <div className={cx(styles.searchBar)}>
             <div className={cx(styles.searchBox)}>
@@ -200,14 +204,17 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
           zebra
           rowHeight={heightType}
           renderers={renderers}
-          height={height}
+          height={tableHeight}
         />
-      </>
+      </div>
     );
   }
 }
 
 export default withStyles(({ unit }) => ({
+  container: {
+    display: 'grid',
+  },
   searchBar: {
     alignItems: 'baseline',
     display: 'flex',

diff --git a/packages/superset-ui-plugin-chart-table/src/index.ts b/packages/superset-ui-plugin-chart-table/src/index.ts
@@ -24,6 +24,8 @@ import buildQuery from './buildQuery';
 import TableFormData from './TableFormData';
 
 Core.initialize({ name: 'superset-datatable' });
+const { aesthetic } = Core;
+aesthetic.globals = {};
 
 export default class TableChartPlugin extends ChartPlugin<TableFormData> {
   constructor() {

diff --git a/packages/superset-ui-plugin-chart-table/src/legacy/index.ts b/packages/superset-ui-plugin-chart-table/src/legacy/index.ts
@@ -22,6 +22,8 @@ import transformProps from './transformProps';
 import createMetadata from '../createMetadata';
 
 Core.initialize({ name: 'superset-datatable' });
+const { aesthetic } = Core;
+aesthetic.globals = {};
 
 export default class TableChartPlugin extends ChartPlugin {
   constructor() {

diff --git a/packages/superset-ui-plugin-chart-table/src/renderer.tsx b/packages/superset-ui-plugin-chart-table/src/renderer.tsx
@@ -51,6 +51,28 @@ export const getRenderer = ({
   const isMetric = column.type === 'metric';
   let Parent;
 
+  const boxStyle: CSSProperties = {
+    backgroundColor:
+      enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
+    cursor: isMetric ? 'default' : 'pointer',
+    margin: '0px -16px',
+  };
+
+  const boxContainerStyle: CSSProperties = {
+    alignItems: 'center',
+    display: 'flex',
+    height: HEIGHT_TO_PX[heightType],
+    margin: '0px 16px',
+    position: 'relative',
+    textAlign: isMetric ? 'right' : 'left',
+  };
+
+  const FullCellBackgroundWrapper = ({ children }: { children: React.ReactNode }) => (
+    <div style={boxStyle}>
+      <div style={boxContainerStyle}>{children}</div>
+    </div>
+  );
+
   if (isMetric) {
     let left = 0;
     let width = 0;
@@ -66,21 +88,8 @@ export const getRenderer = ({
       width = Math.round((Math.abs(value) / tot) * 100);
     }
     const color = colorPositiveNegative && value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
-    Parent = ({ children }: { children: React.ReactNode }) => {
-      const boxStyle: CSSProperties = {
-        backgroundColor:
-          enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
-        margin: '0px -16px',
-      };
-      const boxContainerStyle: CSSProperties = {
-        alignItems: 'center',
-        display: 'flex',
-        height: HEIGHT_TO_PX[heightType],
-        margin: '0px 16px',
-        position: 'relative',
-        textAlign: isMetric ? 'right' : 'left',
-      };
 
+    Parent = ({ children }: { children: React.ReactNode }) => {
       const barStyle: CSSProperties = {
         background: color,
         borderRadius: 3,
@@ -91,24 +100,28 @@ export const getRenderer = ({
       };
 
       return (
-        <div style={boxStyle}>
-          <div style={boxContainerStyle}>
-            <div style={barStyle} />
-            <div style={numberStyle}>{children}</div>
-          </div>
-        </div>
+        <FullCellBackgroundWrapper>
+          <div style={barStyle} />
+          <div style={numberStyle}>{children}</div>
+        </FullCellBackgroundWrapper>
       );
     };
   } else {
-    Parent = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+    Parent = ({ children }: { children: React.ReactNode }) => (
+      <FullCellBackgroundWrapper>{children}</FullCellBackgroundWrapper>
+    );
   }
 
   return (
     <div
-      onClick={handleCellSelected({
-        key: keyName,
-        value,
-      })}
+      onClick={
+        isMetric
+          ? null
+          : handleCellSelected({
+              key: keyName,
+              value,
+            })
+      }
     >
       <Parent>{column.format ? column.format(value) : value}</Parent>
     </div>