From 46cf10cffd4b15f169556acfe426c6b48b7a2d43 Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Fri, 12 Jul 2019 21:41:48 +0300
Subject: [PATCH 1/6] WIP: Add Color Scale Data Viewer

---
 __fixtures__/ColorScale.js  | 22 ++++++++++++++++++++++
 src/ColorScaleDataViewer.js | 35 +++++++++++++++++++++++++++++++++++
 src/DataViewer.js           |  2 +-
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 __fixtures__/ColorScale.js
 create mode 100644 src/ColorScaleDataViewer.js

diff --git a/__fixtures__/ColorScale.js b/__fixtures__/ColorScale.js
new file mode 100644
index 00000000..2d3c33cc
--- /dev/null
+++ b/__fixtures__/ColorScale.js
@@ -0,0 +1,22 @@
+import { createFixture } from "react-cosmos";
+import Spreadsheet, {
+  createEmptyMatrix
+} from "../src/SpreadsheetStateProvider";
+import ColorScaleDataViewer from "../src/ColorScaleDataViewer";
+import "./index.css";
+
+const initialData = createEmptyMatrix(4, 4);
+
+for (let i = 0; i < 4; i++) {
+  initialData[i][0] = {
+    DataViewer: ColorScaleDataViewer,
+    value: i + 1
+  };
+}
+
+export default createFixture({
+  component: Spreadsheet,
+  props: {
+    data: initialData
+  }
+});
diff --git a/src/ColorScaleDataViewer.js b/src/ColorScaleDataViewer.js
new file mode 100644
index 00000000..1799a664
--- /dev/null
+++ b/src/ColorScaleDataViewer.js
@@ -0,0 +1,35 @@
+// @flow
+
+import React from "react";
+import DataViewer from "./DataViewer";
+import type { Props as DataViewerProps } from "./DataViewer";
+import { connect } from "unistore/react";
+
+type ColorScalePoint =
+  | { color: string, type: "number", value: number }
+  | { color: string, type: "percent", value: number }
+  | { color: string, type: "percentile", value: number };
+
+type Props = DataViewerProps & {
+  columnMaxValue: ColorScalePoint | { type: "minimum", color: string },
+  columnMinValue: ColorScalePoint | { type: "maximum", color: string },
+  maxPoint: {}
+};
+
+const ColorScaleDataViewer = (props: Props) => {
+  console.log(props.cell.value, props.columnMaxValue, props.columnMinValue);
+  return <DataViewer {...props} />;
+};
+
+const mapStateToProps = (state, props) => {
+  let columnMaxValue: number = 0;
+  let columnMinValue: number = 0;
+  for (const row of state.data) {
+    const cell = row[props.column];
+    columnMaxValue = Math.max(cell.value, columnMaxValue);
+    columnMinValue = Math.min(cell.value, columnMinValue);
+  }
+  return { columnMaxValue, columnMinValue };
+};
+
+export default connect(mapStateToProps)(ColorScaleDataViewer);
diff --git a/src/DataViewer.js b/src/DataViewer.js
index d3d92874..2394351c 100755
--- a/src/DataViewer.js
+++ b/src/DataViewer.js
@@ -13,7 +13,7 @@ type Cell = {
   }>
 };
 
-type Props = Types.CellComponentProps<Cell, Node> & {
+export type Props = Types.CellComponentProps<Cell, Node> & {
   formulaParser: FormulaParser
 };
 

From 33dfc5f736954dafbfc8a649c3d8a66d74c77a9f Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Sun, 14 Jul 2019 01:21:13 +0300
Subject: [PATCH 2/6] Basic color range works

---
 __fixtures__/ColorScale.js  |  7 ++-
 package.json                |  1 +
 src/ColorScaleDataViewer.js | 90 ++++++++++++++++++++++++++++++++-----
 src/DataViewer.css          |  0
 src/DataViewer.js           |  3 +-
 src/Spreadsheet.css         | 10 ++++-
 yarn.lock                   |  5 +++
 7 files changed, 100 insertions(+), 16 deletions(-)
 create mode 100644 src/DataViewer.css

diff --git a/__fixtures__/ColorScale.js b/__fixtures__/ColorScale.js
index 2d3c33cc..c170273f 100644
--- a/__fixtures__/ColorScale.js
+++ b/__fixtures__/ColorScale.js
@@ -2,14 +2,17 @@ import { createFixture } from "react-cosmos";
 import Spreadsheet, {
   createEmptyMatrix
 } from "../src/SpreadsheetStateProvider";
-import ColorScaleDataViewer from "../src/ColorScaleDataViewer";
+import createColorScaleDataViewer from "../src/ColorScaleDataViewer";
 import "./index.css";
 
 const initialData = createEmptyMatrix(4, 4);
 
 for (let i = 0; i < 4; i++) {
   initialData[i][0] = {
-    DataViewer: ColorScaleDataViewer,
+    DataViewer: createColorScaleDataViewer({
+      minPoint: { type: "maximum", color: "#57BB8A" },
+      maxPoint: { type: "minimum", color: "#FFFFFF" }
+    }),
     value: i + 1
   };
 }
diff --git a/package.json b/package.json
index ef306e66..7ade0a9c 100755
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "classnames": "^2.2.6",
     "clipboard-polyfill": "^2.4.7",
     "fbjs": "^1.0.0",
+    "gradstop": "^2.2.3",
     "hot-formula-parser": "^3.0.0",
     "unistore": "^3.4.1"
   },
diff --git a/src/ColorScaleDataViewer.js b/src/ColorScaleDataViewer.js
index 1799a664..6dce184d 100644
--- a/src/ColorScaleDataViewer.js
+++ b/src/ColorScaleDataViewer.js
@@ -1,35 +1,101 @@
 // @flow
 
 import React from "react";
+import { connect } from "unistore/react";
+import gradstop from "gradstop";
 import DataViewer from "./DataViewer";
 import type { Props as DataViewerProps } from "./DataViewer";
-import { connect } from "unistore/react";
 
 type ColorScalePoint =
   | { color: string, type: "number", value: number }
   | { color: string, type: "percent", value: number }
   | { color: string, type: "percentile", value: number };
 
+type MinPoint = ColorScalePoint | { type: "minimum", color: string };
+type MidPoint = ColorScalePoint | null;
+type MaxPoint = ColorScalePoint | { type: "maximum", color: string };
+
 type Props = DataViewerProps & {
-  columnMaxValue: ColorScalePoint | { type: "minimum", color: string },
-  columnMinValue: ColorScalePoint | { type: "maximum", color: string },
-  maxPoint: {}
+  columnMaxValue: number,
+  columnMinValue: number,
+  columnSize: number,
+  minPoint: ColorScalePoint | { type: "minimum", color: string },
+  midPoint: ColorScalePoint,
+  maxPoint: ColorScalePoint | { type: "maximum", color: string }
+};
+
+const resolveColor = (props: Props): ?string => {
+  const {
+    columnMaxValue,
+    columnMinValue,
+    minPoint,
+    midPoint,
+    maxPoint,
+    columnSize,
+    cell
+  } = props;
+  if (!cell || !cell.value) {
+    return null;
+  }
+  const { value } = cell;
+  /** @todo handle midPoint  */
+  const gradient = gradstop({
+    stops: columnSize,
+    inputFormat: "hex",
+    colorArray: midPoint
+      ? [minPoint.color, midPoint.color, maxPoint.color]
+      : [minPoint.color, maxPoint.color]
+  });
+  const relativeValue =
+    (value - columnMinValue) / (columnMaxValue - columnMinValue);
+  const index = Math.floor(relativeValue * (columnSize - 1));
+  return gradient[index];
 };
 
 const ColorScaleDataViewer = (props: Props) => {
-  console.log(props.cell.value, props.columnMaxValue, props.columnMinValue);
-  return <DataViewer {...props} />;
+  const color = resolveColor(props);
+  return (
+      <div style={{ backgroundColor: color }}>
+        <DataViewer {...props} />
+      </div>
+  );
 };
 
 const mapStateToProps = (state, props) => {
-  let columnMaxValue: number = 0;
-  let columnMinValue: number = 0;
+  let columnMaxValue: number;
+  let columnMinValue: number;
   for (const row of state.data) {
     const cell = row[props.column];
-    columnMaxValue = Math.max(cell.value, columnMaxValue);
-    columnMinValue = Math.min(cell.value, columnMinValue);
+    const value = cell && cell.value;
+    if (!value) {
+      continue;
+    }
+    columnMaxValue = columnMaxValue ? Math.max(value, columnMaxValue) : value;
+    columnMinValue = columnMinValue ? Math.min(value, columnMinValue) : value;
   }
-  return { columnMaxValue, columnMinValue };
+  return { columnMaxValue, columnMinValue, columnSize: state.data.length };
+};
+
+const createColorScaleDataViewer = ({
+  minPoint,
+  maxPoint,
+  midPoint = null
+}: {
+  minPoint: MinPoint,
+  maxPoint: MaxPoint,
+  midPoint: MidPoint
+}) => {
+  const BoundScaleDataViewer = props => {
+    return (
+      <ColorScaleDataViewer
+        {...props}
+        minPoint={minPoint}
+        midPoint={midPoint}
+        maxPoint={maxPoint}
+      />
+    );
+  };
+  return connect(mapStateToProps)(BoundScaleDataViewer);
 };
 
-export default connect(mapStateToProps)(ColorScaleDataViewer);
+export default createColorScaleDataViewer;
diff --git a/src/DataViewer.css b/src/DataViewer.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/DataViewer.js b/src/DataViewer.js
index 2394351c..ed995d6c 100755
--- a/src/DataViewer.js
+++ b/src/DataViewer.js
@@ -4,6 +4,7 @@ import React from "react";
 import type { ComponentType, Node } from "react";
 import type { Parser as FormulaParser } from "hot-formula-parser";
 import * as Types from "./types";
+import './DataViewer.css';
 
 type Cell = {
   component?: ComponentType<{
@@ -33,7 +34,7 @@ const DataViewer = ({ getValue, cell, column, row, formulaParser }: Props) => {
     const { result, error } = formulaParser.parse(rawValue.slice(1));
     return error || toView(result);
   }
-  return toView(rawValue);
+  return <div className="DataViewer">{toView(rawValue)}</div>;
 };
 
 export default DataViewer;
diff --git a/src/Spreadsheet.css b/src/Spreadsheet.css
index ac71b8ac..1ffee779 100755
--- a/src/Spreadsheet.css
+++ b/src/Spreadsheet.css
@@ -32,13 +32,21 @@
   outline: none;
 }
 
+.Spreadsheet td {
+  padding: 0;
+}
+
+.Spreadsheet .DataViewer,
+.Spreadsheet th {
+  padding: 4px;
+}
+
 .Spreadsheet td,
 .Spreadsheet th {
   min-width: 6em;
   min-height: 1.9em;
   height: 1.9em;
   max-height: 1.9em;
-  padding: 4px;
   border: 1px solid rgb(231, 231, 231);
   overflow: hidden;
   word-break: keep-all;
diff --git a/yarn.lock b/yarn.lock
index bfd64a2e..d6d7b2af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4148,6 +4148,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
+gradstop@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/gradstop/-/gradstop-2.2.3.tgz#b60922677d31cef479587f976f97f43222e80a5a"
+  integrity sha512-omtiHZCI/vykWcXNDYdrHhe7VUnnZvya94wAHRLI8ciDkAviXYrT+pwP7ybYqK7uwYir59auBCY5ggwBlVSmsg==
+
 "growl@~> 1.10.0":
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"

From 6918680e1b2ebb2f30bf4392fbd68bf570eafbaf Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Sun, 14 Jul 2019 01:22:20 +0300
Subject: [PATCH 3/6] Better types

---
 src/ColorScaleDataViewer.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ColorScaleDataViewer.js b/src/ColorScaleDataViewer.js
index 6dce184d..5cd2dec3 100644
--- a/src/ColorScaleDataViewer.js
+++ b/src/ColorScaleDataViewer.js
@@ -19,9 +19,9 @@ type Props = DataViewerProps & {
   columnMaxValue: number,
   columnMinValue: number,
   columnSize: number,
-  minPoint: ColorScalePoint | { type: "minimum", color: string },
-  midPoint: ColorScalePoint,
-  maxPoint: ColorScalePoint | { type: "maximum", color: string }
+  minPoint: MinPoint,
+  midPoint: MidPoint,
+  maxPoint: MaxPoint
 };
 
 const resolveColor = (props: Props): ?string => {
@@ -55,9 +55,9 @@ const resolveColor = (props: Props): ?string => {
 const ColorScaleDataViewer = (props: Props) => {
   const color = resolveColor(props);
   return (
-      <div style={{ backgroundColor: color }}>
-        <DataViewer {...props} />
-      </div>
+    <div style={{ backgroundColor: color }}>
+      <DataViewer {...props} />
+    </div>
   );
 };
 

From 28242e7d5c221afaca6cd55dda661f7d1cebe9d9 Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Sun, 14 Jul 2019 01:43:49 +0300
Subject: [PATCH 4/6] Support mid color

---
 __fixtures__/ColorScale.js  | 32 ++++++++++++++++++++++++++------
 package.json                |  2 +-
 src/ColorScaleDataViewer.js | 27 ++++++++++++++-------------
 yarn.lock                   | 23 ++++++++++++++++++-----
 4 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/__fixtures__/ColorScale.js b/__fixtures__/ColorScale.js
index c170273f..d66988bf 100644
--- a/__fixtures__/ColorScale.js
+++ b/__fixtures__/ColorScale.js
@@ -1,3 +1,5 @@
+// @flow
+
 import { createFixture } from "react-cosmos";
 import Spreadsheet, {
   createEmptyMatrix
@@ -5,14 +7,32 @@ import Spreadsheet, {
 import createColorScaleDataViewer from "../src/ColorScaleDataViewer";
 import "./index.css";
 
-const initialData = createEmptyMatrix(4, 4);
+const ROWS = 5;
+
+const initialData = createEmptyMatrix(ROWS, 4);
 
-for (let i = 0; i < 4; i++) {
+const GreenAndWhiteColorScaleDataViewer = createColorScaleDataViewer({
+  minPoint: { type: "minimum", color: "#57BB8A" },
+  maxPoint: { type: "maximum", color: "#FFFFFF" }
+});
+
+for (let i = 0; i < ROWS; i++) {
+  console.log(i, initialData[i]);
   initialData[i][0] = {
-    DataViewer: createColorScaleDataViewer({
-      minPoint: { type: "maximum", color: "#57BB8A" },
-      maxPoint: { type: "minimum", color: "#FFFFFF" }
-    }),
+    DataViewer: GreenAndWhiteColorScaleDataViewer,
+    value: i + 1
+  };
+}
+
+const RedYellowGreenColorScaleDataViewer = createColorScaleDataViewer({
+  minPoint: { type: "minimum", color: "#57BB8A" },
+  midPoint: { type: "percent", color: "#FFD665", value: 0.5 },
+  maxPoint: { type: "maximum", color: "#E67B73" }
+});
+
+for (let i = 0; i < ROWS; i++) {
+  initialData[i][1] = {
+    DataViewer: RedYellowGreenColorScaleDataViewer,
     value: i + 1
   };
 }
diff --git a/package.json b/package.json
index 7ade0a9c..6cb6a2b8 100755
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "classnames": "^2.2.6",
     "clipboard-polyfill": "^2.4.7",
     "fbjs": "^1.0.0",
-    "gradstop": "^2.2.3",
     "hot-formula-parser": "^3.0.0",
+    "tinygradient": "^1.0.0",
     "unistore": "^3.4.1"
   },
   "devDependencies": {
diff --git a/src/ColorScaleDataViewer.js b/src/ColorScaleDataViewer.js
index 5cd2dec3..d01812ec 100644
--- a/src/ColorScaleDataViewer.js
+++ b/src/ColorScaleDataViewer.js
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { connect } from "unistore/react";
-import gradstop from "gradstop";
+import tinygradient from "tinygradient";
 import DataViewer from "./DataViewer";
 import type { Props as DataViewerProps } from "./DataViewer";
 
@@ -38,18 +38,19 @@ const resolveColor = (props: Props): ?string => {
     return null;
   }
   const { value } = cell;
-  /** @todo handle midPoint  */
-  const gradient = gradstop({
-    stops: columnSize,
-    inputFormat: "hex",
-    colorArray: midPoint
-      ? [minPoint.color, midPoint.color, maxPoint.color]
-      : [minPoint.color, maxPoint.color]
-  });
+
+  const colors = midPoint
+    ? [
+        { color: minPoint.color, pos: 0 },
+        { color: midPoint.color, pos: 0.5 },
+        { color: maxPoint.color, pos: 1 }
+      ]
+    : [{ color: minPoint.color, pos: 0 }, { color: maxPoint.color, pos: 1 }];
+
+  const gradient = tinygradient(colors);
   const relativeValue =
     (value - columnMinValue) / (columnMaxValue - columnMinValue);
-  const index = Math.floor(relativeValue * (columnSize - 1));
-  return gradient[index];
+  return gradient.rgbAt(relativeValue);
 };
 
 const ColorScaleDataViewer = (props: Props) => {
@@ -79,11 +80,11 @@ const mapStateToProps = (state, props) => {
 const createColorScaleDataViewer = ({
   minPoint,
   maxPoint,
-  midPoint = null
+  midPoint
 }: {
   minPoint: MinPoint,
   maxPoint: MaxPoint,
-  midPoint: MidPoint
+  midPoint?: MidPoint
 }) => {
   const BoundScaleDataViewer = props => {
     return (
diff --git a/yarn.lock b/yarn.lock
index d6d7b2af..27d06282 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1106,6 +1106,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/tinycolor2@^1.4.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
+  integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw==
+
 "@types/yargs@^12.0.9":
   version "12.0.9"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0"
@@ -4148,11 +4153,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
-gradstop@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/gradstop/-/gradstop-2.2.3.tgz#b60922677d31cef479587f976f97f43222e80a5a"
-  integrity sha512-omtiHZCI/vykWcXNDYdrHhe7VUnnZvya94wAHRLI8ciDkAviXYrT+pwP7ybYqK7uwYir59auBCY5ggwBlVSmsg==
-
 "growl@~> 1.10.0":
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
@@ -8404,6 +8404,19 @@ tiny-emitter@^2.0.1:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tinycolor2@^1.0.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
+tinygradient@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tinygradient/-/tinygradient-1.0.0.tgz#6890a94094f0aef83a7d79661ec11772aa1a01a7"
+  integrity sha512-M/z15v3AosFCNIf4XVSl0y55/Hu8U/t4ucLhOSnqrF2cViDQKIAzCU4NjJYm1aIzFdz+nZA8QaHXO+ZJVfpgrQ==
+  dependencies:
+    "@types/tinycolor2" "^1.4.0"
+    tinycolor2 "^1.0.0"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

From fd981c4b19571b5d8c21ff5b6f44b196bad0f729 Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Sun, 29 Sep 2019 09:50:11 +0300
Subject: [PATCH 5/6] WIP

---
 __fixtures__/ColorScale.js  | 26 +++++++++++++++++---------
 src/ColorScaleDataViewer.js |  2 +-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/__fixtures__/ColorScale.js b/__fixtures__/ColorScale.js
index d66988bf..90fcdd87 100644
--- a/__fixtures__/ColorScale.js
+++ b/__fixtures__/ColorScale.js
@@ -7,7 +7,7 @@ import Spreadsheet, {
 import createColorScaleDataViewer from "../src/ColorScaleDataViewer";
 import "./index.css";
 
-const ROWS = 5;
+const ROWS = 10;
 
 const initialData = createEmptyMatrix(ROWS, 4);
 
@@ -16,25 +16,33 @@ const GreenAndWhiteColorScaleDataViewer = createColorScaleDataViewer({
   maxPoint: { type: "maximum", color: "#FFFFFF" }
 });
 
-for (let i = 0; i < ROWS; i++) {
-  console.log(i, initialData[i]);
-  initialData[i][0] = {
-    DataViewer: GreenAndWhiteColorScaleDataViewer,
-    value: i + 1
-  };
-}
-
 const RedYellowGreenColorScaleDataViewer = createColorScaleDataViewer({
   minPoint: { type: "minimum", color: "#57BB8A" },
   midPoint: { type: "percent", color: "#FFD665", value: 0.5 },
   maxPoint: { type: "maximum", color: "#E67B73" }
 });
 
+const UnbalanacedRedYellowGreenColorScaleDataViewer = createColorScaleDataViewer(
+  {
+    minPoint: { type: "minimum", color: "#57BB8A" },
+    midPoint: { type: "percent", color: "#FFD665", value: 0.7 },
+    maxPoint: { type: "maximum", color: "#E67B73" }
+  }
+);
+
 for (let i = 0; i < ROWS; i++) {
+  initialData[i][0] = {
+    DataViewer: GreenAndWhiteColorScaleDataViewer,
+    value: i + 1
+  };
   initialData[i][1] = {
     DataViewer: RedYellowGreenColorScaleDataViewer,
     value: i + 1
   };
+  initialData[i][2] = {
+    DataViewer: UnbalanacedRedYellowGreenColorScaleDataViewer,
+    value: i + 1
+  };
 }
 
 export default createFixture({
diff --git a/src/ColorScaleDataViewer.js b/src/ColorScaleDataViewer.js
index d01812ec..10e77a14 100644
--- a/src/ColorScaleDataViewer.js
+++ b/src/ColorScaleDataViewer.js
@@ -42,7 +42,7 @@ const resolveColor = (props: Props): ?string => {
   const colors = midPoint
     ? [
         { color: minPoint.color, pos: 0 },
-        { color: midPoint.color, pos: 0.5 },
+        { color: midPoint.color, pos: midPoint.value },
         { color: maxPoint.color, pos: 1 }
       ]
     : [{ color: minPoint.color, pos: 0 }, { color: maxPoint.color, pos: 1 }];

From 22ca5af07baa0c59bda654177ae706212dde547b Mon Sep 17 00:00:00 2001
From: Iddan Aaronsohn <mail@aniddan.com>
Date: Sat, 6 Feb 2021 02:48:44 +0200
Subject: [PATCH 6/6] Fix imports

---
 src/index.ts                        |  1 +
 src/stories/Spreadsheet.stories.tsx | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 11d960bc..07e4e449 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,7 @@
 export { default, default as Spreadsheet } from "./SpreadsheetStateProvider";
 export type { Props } from "./SpreadsheetStateProvider";
 export { createEmptyMatrix, getComputedValue } from "./util";
+export { default as createColorScaleDataViewer } from "./ColorScaleDataViewer";
 export type { Matrix } from "./matrix";
 export type {
   CellBase,
diff --git a/src/stories/Spreadsheet.stories.tsx b/src/stories/Spreadsheet.stories.tsx
index 9f5b9fba..550a5329 100644
--- a/src/stories/Spreadsheet.stories.tsx
+++ b/src/stories/Spreadsheet.stories.tsx
@@ -1,13 +1,18 @@
 import * as React from "react";
 import { Story, Meta } from "@storybook/react/types-6-0";
-import { createEmptyMatrix, Spreadsheet, Props, CellBase } from "..";
+import {
+  createEmptyMatrix,
+  Spreadsheet,
+  Props,
+  CellBase,
+  createColorScaleDataViewer,
+} from "..";
 import * as Matrix from "../matrix";
 import { AsyncCellDataEditor, AsyncCellDataViewer } from "./AsyncCellData";
 import CustomCell from "./CustomCell";
 import { RangeEdit, RangeView } from "./RangeDataComponents";
 import { SelectEdit, SelectView } from "./SelectDataComponents";
 import { CustomCornerIndicator } from "./CustomCornerIndicator";
-import createColorScaleDataViewer from "../ColorScaleDataViewer";
 
 type StringCell = CellBase<string | undefined>;
 type NumberCell = CellBase<number | undefined>;
@@ -145,9 +150,7 @@ export const WithCornerIndicator: Story<Props<StringCell>> = (props) => (
 );
 
 export const Filter: Story<Props<StringCell>> = (props) => {
-  const [data, setData] = React.useState(
-    EMPTY_DATA as Matrix.Matrix<StringCell>
-  );
+  const [data, setData] = React.useState(EMPTY_DATA);
   const [filter, setFilter] = React.useState("");
 
   const handleFilterChange = React.useCallback(
@@ -166,7 +169,7 @@ export const Filter: Story<Props<StringCell>> = (props) => {
     if (filter.length === 0) {
       return data;
     }
-    const filtered: Matrix.Matrix<StringCell> = [];
+    const filtered = createEmptyMatrix<StringCell>(0, 0);
     for (let row = 0; row < data.length; row++) {
       if (data.length !== 0) {
         for (let column = 0; column < data[0].length; column++) {