WIP: Add Color Scale Data Viewer

Basic color range works

Better types

Support mid color

WIP

Fix imports

Author: iddan

__fixtures__/ColorScale.js

@@ -0,0 +1,53 @@
+// @flow
+
+import { createFixture } from "react-cosmos";
+import Spreadsheet, {
+  createEmptyMatrix
+} from "../src/SpreadsheetStateProvider";
+import createColorScaleDataViewer from "../src/ColorScaleDataViewer";
+import "./index.css";
+
+const ROWS = 10;
+
+const initialData = createEmptyMatrix(ROWS, 4);
+
+const GreenAndWhiteColorScaleDataViewer = createColorScaleDataViewer({
+  minPoint: { type: "minimum", color: "#57BB8A" },
+  maxPoint: { type: "maximum", color: "#FFFFFF" }
+});
+
+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({
+  component: Spreadsheet,
+  props: {
+    data: initialData
+  }
+});

src/ColorScaleDataViewer.js

@@ -0,0 +1,102 @@
+// @flow
+
+import React from "react";
+import { connect } from "unistore/react";
+import tinygradient from "tinygradient";
+import DataViewer from "./DataViewer";
+import type { Props as DataViewerProps } from "./DataViewer";
+
+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: number,
+  columnMinValue: number,
+  columnSize: number,
+  minPoint: MinPoint,
+  midPoint: MidPoint,
+  maxPoint: MaxPoint
+};
+
+const resolveColor = (props: Props): ?string => {
+  const {
+    columnMaxValue,
+    columnMinValue,
+    minPoint,
+    midPoint,
+    maxPoint,
+    columnSize,
+    cell
+  } = props;
+  if (!cell || !cell.value) {
+    return null;
+  }
+  const { value } = cell;
+
+  const colors = midPoint
+    ? [
+        { color: minPoint.color, pos: 0 },
+        { color: midPoint.color, pos: midPoint.value },
+        { 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);
+  return gradient.rgbAt(relativeValue);
+};
+
+const ColorScaleDataViewer = (props: Props) => {
+  const color = resolveColor(props);
+  return (
+    <div style={{ backgroundColor: color }}>
+      <DataViewer {...props} />
+    </div>
+  );
+};
+
+const mapStateToProps = (state, props) => {
+  let columnMaxValue: number;
+  let columnMinValue: number;
+  for (const row of state.data) {
+    const cell = row[props.column];
+    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, columnSize: state.data.length };
+};
+
+const createColorScaleDataViewer = ({
+  minPoint,
+  maxPoint,
+  midPoint
+}: {
+  minPoint: MinPoint,
+  maxPoint: MaxPoint,
+  midPoint?: MidPoint
+}) => {
+  const BoundScaleDataViewer = props => {
+    return (
+      <ColorScaleDataViewer
+        {...props}
+        minPoint={minPoint}
+        midPoint={midPoint}
+        maxPoint={maxPoint}
+      />
+    );
+  };
+  return connect(mapStateToProps)(BoundScaleDataViewer);
+};
+
+export default createColorScaleDataViewer;