[Feature] Add: option for normalized shade coloring for cells

docs/src/App.js

@@ -106,6 +106,7 @@ class App extends Component {
         scrollableTableContentStyles: PropTypes.object,
         headerValueStyles: PropTypes.object,
         headerLabelStyles: PropTypes.object,
+        isNormalizedShadeColor: PropTypes.bool,
     }`}
 </code>
 </pre>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cohort-graph",
-  "version": "2.0.0-beta.3",
+  "version": "2.1.0-beta.0",
   "description": "Cohort Analysis Graph with ReactJS",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/DataStore.js

@@ -80,16 +80,30 @@ export default class DataStore {
                             cellData, ...data[key][anotherKey].map((value, index) => {
                                 const percent = this._getPercentage(cellData.total, value);
                                 return {
-                                    isHeader: false,
-                                    index: index,
-                                    type: key,
-                                    [VALUE]: value,
-                                    valueFor: anotherKey,
-                                    total: cellData.total,
-                                    isTotal: index === 0,
-                                    isCell: index > 0,
-                                    [PERCENT]: percent,
-                                    color: index === 0 ? this.options.bodyCellColor : this._shadeCellWithColor(percent, this.options.shadeColor)
+                                  isHeader: false,
+                                  index: index,
+                                  type: key,
+                                  [VALUE]: value,
+                                  valueFor: anotherKey,
+                                  total: cellData.total,
+                                  isTotal: index === 0,
+                                  isCell: index > 0,
+                                  [PERCENT]: percent,
+                                  color:
+                                    index === 0
+                                      ? this.options.bodyCellColor
+                                      : this.options.isNormalizedShadeColor
+                                      ? this._shadeCellWithColor(
+                                          this._normalizedValue(
+                                            data[key],
+                                            value
+                                          ),
+                                          this.options.shadeColor
+                                        )
+                                      : this._shadeCellWithColor(
+                                          percent,
+                                          this.options.shadeColor
+                                        ),
                                 };
                             })
                         ]);
@@ -337,5 +351,20 @@ export default class DataStore {
             return text.toLowerCase().replace(/\b\w/g, replaced => replaced.toUpperCase());
         }
     }
+
+    /**
+     * Normalized value of cell for color shade
+     * @param array
+     * @param cellValue - cell value
+     * @returns {number} - normalized cell value
+     */
+     _normalizedValue = (array, value) => {
+        let joinedArray = [];
+        Object.entries(array).map((el) => {
+          joinedArray = [...joinedArray, ...el[1].slice(1)];
+        });
+        const nv = ((value - Math.min(...joinedArray)) / (Math.max(...joinedArray) - Math.min(...joinedArray))) * 100;
+        return Math.round(nv);
+      };
 }
 

src/ReactCohortGraph.js

@@ -10,7 +10,7 @@ import {
 } from './styles';
 import DataStore from './DataStore';
 import { HeaderCell, BodyCell, ScrollableContent } from './components';
-import { VALUE_KEYS } from './constants';
+import { DEFAULT_VALUES, VALUE_KEYS } from './constants';
 import {
     DEFAULT_SHADE_COLOR, DEFAULT_BODY_CELL_COLOR,
     DEFAULT_HEADER_CELL_COLOR, DEFAULT_KEY_CELL_COLOR
@@ -35,9 +35,10 @@ class ReactCohortGraph extends React.Component {
     _getStore = (props) => {
         const { data = {},
             shadeColor = DEFAULT_SHADE_COLOR, headerCellColor = DEFAULT_HEADER_CELL_COLOR,
-            bodyCellColor = DEFAULT_BODY_CELL_COLOR, keyCellColor = DEFAULT_KEY_CELL_COLOR
+            bodyCellColor = DEFAULT_BODY_CELL_COLOR, keyCellColor = DEFAULT_KEY_CELL_COLOR,
+            isNormalizedShadeColor = DEFAULT_VALUES.IS_NORMALIZED_SHADE_COLOR,
         } = props;
-        return new DataStore(data, {shadeColor, headerCellColor, bodyCellColor, keyCellColor});
+        return new DataStore(data, {shadeColor, headerCellColor, bodyCellColor, keyCellColor, isNormalizedShadeColor});
     };
 
     componentWillMount(){
@@ -267,6 +268,7 @@ ReactCohortGraph.propTypes = {
     scrollableTableContentStyles: PropTypes.object,
     headerValueStyles: PropTypes.object,
     headerLabelStyles: PropTypes.object,
+    isNormalizedShadeColor: PropTypes.bool,
 };
 
 export default ReactCohortGraph;

src/constants.js

@@ -5,4 +5,8 @@
 export const VALUE_KEYS = {
     VALUE: "value",
     PERCENT: "percent"
-};
+};
+
+export const DEFAULT_VALUES = {
+    IS_NORMALIZED_SHADE_COLOR: false,
+  };

src/index.d.ts

@@ -37,7 +37,8 @@ export interface Props {
     scrollableTablePartStyles?: object;
     scrollableTableContentStyles?: object;
     headerValueStyles?: object;
-    headerLabelStyles?: object
+    headerLabelStyles?: object;
+    isNormalizedShadeColor?: boolean;
 }
 
 declare const ReactCohortGraph: React.ComponentType<Props>;