From 244eeed615353090671e2007920965f9ff8d9e0f Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Thu, 14 Jan 2021 13:50:30 -0800
Subject: [PATCH] Gray out null (N/A) values

---
 plugins/plugin-chart-table/src/Styles.tsx           |  3 +++
 plugins/plugin-chart-table/src/TableChart.tsx       |  4 ++--
 plugins/plugin-chart-table/src/buildQuery.ts        |  2 +-
 plugins/plugin-chart-table/src/utils/formatValue.ts | 12 ++++++------
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/plugins/plugin-chart-table/src/Styles.tsx b/plugins/plugin-chart-table/src/Styles.tsx
index 800e274e96..f04fe4ad4c 100644
--- 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
index 147df685eb..9230b24a97 100644
--- 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
index 5b25596671..e392b83b9c 100644
--- 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
index b576de65ca..09a665d38b 100644
--- 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];
 }