Gray out null (N/A) values

apache-superset · Jan 14, 2021 · 244eeed · 244eeed
1 parent f44549f
commit 244eeed
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/plugins/plugin-chart-table/src/Styles.tsx b/plugins/plugin-chart-table/src/Styles.tsx
@@ -38,6 +38,9 @@ export default styled.div`
   .dt-metric {
     text-align: right;
   }
+  .dt-is-null {
+    color: ${({ theme: { colors } }) => colors.grayscale.light1};
+  }
   td.dt-is-filter {
     cursor: pointer;
   }

diff --git a/plugins/plugin-chart-table/src/TableChart.tsx b/plugins/plugin-chart-table/src/TableChart.tsx
@@ -220,7 +220,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         // so we ask TS not to check.
         accessor: ((datum: D) => datum[key]) as never,
         Cell: ({ value }: { column: ColumnInstance<D>; value: DataRecordValue }) => {
-          const [isHtml, text] = formatValue(column, value);
+          const [isHtml, text, customClassName] = formatValue(column, value);
           const style = {
             background: valueRange
               ? cellBar({
@@ -236,7 +236,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             // show raw number in title in case of numeric values
             title: typeof value === 'number' ? String(value) : undefined,
             onClick: emitFilter && !valueRange ? () => toggleFilter(key, value) : undefined,
-            className: `${className}${
+            className: `${className} ${customClassName || ''} ${
               isActiveFilterValue(key, value) ? ' dt-is-active-filter' : ''
             }`,
             style,

diff --git a/plugins/plugin-chart-table/src/buildQuery.ts b/plugins/plugin-chart-table/src/buildQuery.ts
@@ -15,7 +15,7 @@ export default function buildQuery(formData: TableChartFormData) {
           operation: 'contribution',
           options: {
             columns: percentMetricLabels,
-            rename_columns: percentMetricLabels.map(x => `% ${x}`),
+            rename_columns: percentMetricLabels.map(x => `%${x}`),
           },
         },
       ];

diff --git a/plugins/plugin-chart-table/src/utils/formatValue.ts b/plugins/plugin-chart-table/src/utils/formatValue.ts
@@ -36,21 +36,21 @@ function isProbablyHTML(text: string) {
   return /<[^>]+>/.test(text);
 }
 /**
- * Format text for cell value
+ * Format text for cell value.
  */
 export default function formatValue(
   { formatter }: DataColumnMeta,
   value: DataRecordValue,
-): [boolean, string] {
+): [boolean, string, string | null] {
   if (value === null) {
-    return [false, 'N/A'];
+    return [false, 'N/A', 'dt-is-null'];
   }
   if (formatter) {
     // in case percent metric can specify percent format in the future
-    return [false, formatter(value as number)];
+    return [false, formatter(value as number), null];
   }
   if (typeof value === 'string') {
-    return isProbablyHTML(value) ? [true, xss.process(value)] : [false, value];
+    return isProbablyHTML(value) ? [true, xss.process(value), null] : [false, value, null];
   }
-  return [false, value.toString()];
+  return [false, value.toString(), null];
 }