From d28e97a0b2ef032cd4275bd14f2441acf5e991c7 Mon Sep 17 00:00:00 2001
From: Amelia Wattenberger <wattenberger@github.com>
Date: Fri, 21 Jan 2022 13:21:59 -0500
Subject: [PATCH 1/2] feat: add support for colors

---
 src/components/cells/color.tsx | 26 ++++++++++++++++++++++++++
 src/store.ts                   | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/components/cells/color.tsx

diff --git a/src/components/cells/color.tsx b/src/components/cells/color.tsx
new file mode 100644
index 0000000..d0b2f33
--- /dev/null
+++ b/src/components/cells/color.tsx
@@ -0,0 +1,26 @@
+import { Fragment } from 'react';
+import DOMPurify from 'dompurify';
+import 'twin.macro';
+
+interface ColorCellProps {
+  value: string;
+  formattedValue: string;
+  rawValue: string;
+}
+
+export function ColorCell(props: ColorCellProps) {
+  return (
+    <Fragment>
+      <div tw="absolute top-0 bottom-0 left-0 w-4" style={{
+        background: props.value,
+      }} />
+      <div
+        tw="truncate"
+        title={props.rawValue}
+        dangerouslySetInnerHTML={{
+          __html: DOMPurify.sanitize(props.formattedValue),
+        }}
+      />
+    </Fragment>
+  );
+}
diff --git a/src/store.ts b/src/store.ts
index 7adeab6..3daafd7 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -8,6 +8,7 @@ import {
   max,
   min,
   extent,
+  rgb,
 } from 'd3';
 import fromPairs from 'lodash/fromPairs';
 import isEqual from 'lodash/isEqual';
@@ -22,6 +23,7 @@ import { TimeCell } from './components/cells/time';
 import { NumberCell } from './components/cells/number';
 import { RawNumberCell } from './components/cells/raw-number';
 import { StringCell } from './components/cells/string';
+import { ColorCell } from './components/cells/color';
 import { CategoryCell } from './components/cells/category';
 import { StringFilter } from './components/filters/string';
 import { CategoryFilter } from './components/filters/category';
@@ -571,6 +573,17 @@ function generateSchema(data: any[]) {
           return false;
         }
       };
+      const isColor = (value: any) => {
+        try {
+          if (typeof value === 'string') {
+            const color = rgb(value);
+            return !!color;
+          }
+          return false;
+        } catch (e) {
+          return false;
+        }
+      };
       const isFirstValueADate = isDate(value);
       if (isFirstValueADate) {
         const values = data.map((d) => d[metric]).filter((d) => d);
@@ -598,6 +611,17 @@ function generateSchema(data: any[]) {
         const areMultipleValuesTimes = !values.find((d) => !isTime(d));
         if (areMultipleValuesTimes) return [metric, 'time'];
       }
+
+      const isFirstValueAColor = isColor(value);
+      if (isFirstValueAColor) {
+        const values = data
+          .map((d) => d[metric])
+          .filter((d) => d)
+          .slice(0, 30);
+        const areMultipleValuesColors = !values.find((d) => !isColor(d));
+        if (areMultipleValuesColors) return [metric, 'color'];
+      }
+
       const isFirstValueAnArray = Array.isArray(value);
       if (isFirstValueAnArray) {
         const values = data.map((d) => d[metric]).filter((d) => d);
@@ -610,6 +634,7 @@ function generateSchema(data: any[]) {
             : 'short-array',
         ];
       }
+
       const isObject = typeof value === 'object';
       if (isObject) {
         return [metric, 'object'];
@@ -729,6 +754,13 @@ export const cellTypeMap = {
     shortFormat: (d: string) => d,
     sortValueType: 'string',
   },
+  color: {
+    cell: ColorCell,
+    filter: StringFilter,
+    format: (d: string) => d,
+    shortFormat: (d: string) => d,
+    sortValueType: 'string',
+  },
   object: {
     cell: StringCell,
     filter: StringFilter,

From 99185776a8dfed2e4fb598e1898277a9b575aa06 Mon Sep 17 00:00:00 2001
From: Amelia Wattenberger <wattenberger@github.com>
Date: Fri, 21 Jan 2022 13:26:40 -0500
Subject: [PATCH 2/2] v0.13.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5346953..78cf4e2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.12.3",
+  "version": "0.13.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",