Basic color range works

Author: iddan

__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
   };
 }

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"
   },

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;

src/DataViewer.css

@@ -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;

src/DataViewer.js

@@ -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;

src/Spreadsheet.css

@@ -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"