label formatter support added

apxor · Jul 3, 2017 · 3cca838 · 3cca838
1 parent 175e54b
commit 3cca838
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 13 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -98,7 +98,7 @@ <h2 id="project_tagline">{{ site.description | default: site.github.project_tagl
             "month4": [100]
         }
     };
-    window.ReactDOM.render(React.createElement(ReactCohortGraph, {data: data}, null), document.getElementById("root"));
+    window.ReactDOM.render(React.createElement(ReactCohortGraph, {data: data, labelFormatter: function(value){return value.substring(0, 10)}}, null), document.getElementById("root"));
 </script>
 </body>
 </html>
diff --git a/lib/reactcohortgraph.js b/lib/reactcohortgraph.js
@@ -2719,7 +2719,8 @@ var ReactCohortGraph = function (_React$Component) {
             var _props = this.props,
                 _props$showEmptyDataM = _props.showEmptyDataMessage,
                 showEmptyDataMessage = _props$showEmptyDataM === undefined ? true : _props$showEmptyDataM,
-                customEmptyDataMessage = _props.customEmptyDataMessage;
+                customEmptyDataMessage = _props.customEmptyDataMessage,
+                labelFormatter = _props.labelFormatter;
             var _state = this.state,
                 dataStore = _state.dataStore,
                 currentType = _state.currentType,
@@ -2758,7 +2759,7 @@ var ReactCohortGraph = function (_React$Component) {
                                                 'div',
                                                 { style: _styles.TableRow, key: "row" + j },
                                                 row.map(function (cell, k) {
-                                                    return _this2.isFixed(k) && _react2.default.createElement(_components.BodyCell, _extends({ key: "cell" + k }, cell, { valueType: valueType }));
+                                                    return _this2.isFixed(k) && _react2.default.createElement(_components.BodyCell, _extends({ key: "cell" + k }, cell, { valueType: valueType, labelFormatter: labelFormatter }));
                                                 })
                                             );
                                         })
@@ -2822,6 +2823,7 @@ ReactCohortGraph.propTypes = {
     showEmptyDataMessage: _propTypes2.default.bool,
     customEmptyDataMessage: _propTypes2.default.any,
     columnClickEvent: _propTypes2.default.func,
+    labelFormatter: _propTypes2.default.func, //function(label){ return formattedLabel;}
     /*maxDays : PropTypes.number,
     maxWeeks : PropTypes.number, //TODO:
     maxMonths : PropTypes.number,*/
@@ -3037,7 +3039,7 @@ var _initialiseProps = function _initialiseProps() {
                         cellData.type = key;
                         cellData[VALUE] = anotherKey;
                         cellData.valueFor = anotherKey;
-                        cellData.total = data[key][anotherKey][0];
+                        cellData.total = data[key][anotherKey].length > 0 ? data[key][anotherKey][0] : 0;
                         cellData[PERCENT] = 100;
                         cellData.color = _styles.DEFAULT_KEY_CELL_COLOR;
                         cellData.isLabel = true;
@@ -3086,8 +3088,8 @@ var _initialiseProps = function _initialiseProps() {
                 cellData.color = _styles.DEFAULT_HEADER_CELL_COLOR;
                 cellData.label = labelPrefix + ' ' + 0;
                 _this.headers[key].push(cellData); //second cell
-                var largeRow = _this.store[key][0];
                 var totalRows = _this.store[key].length;
+                var largeRow = totalRows > 0 ? _this.store[key][0] : [];
                 largeRow.forEach(function (el, index) {
                     var _this$headers$key$pus;
 
@@ -3274,8 +3276,12 @@ var VALUE = _constants.VALUE_KEYS.VALUE,
 var renderValue = function renderValue(props) {
     var isTotal = props.isTotal,
         isLabel = props.isLabel,
-        valueType = props.valueType;
+        valueType = props.valueType,
+        labelFormatter = props.labelFormatter;
 
+    if (typeof labelFormatter === 'function' && isLabel) {
+        return labelFormatter(props[VALUE]);
+    }
     return isTotal || isLabel ? props[VALUE] : props.valueType === PERCENT ? props[PERCENT] + ' %' : props[VALUE];
 };
 

diff --git a/lib/reactcohortgraph.min.js b/lib/reactcohortgraph.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-cohort-graph",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "Cohort Analysis Graph with ReactJS",
   "main": "lib/reactcohortgraph.js",
   "scripts": {

diff --git a/src/DataStore.js b/src/DataStore.js
@@ -71,7 +71,7 @@ export default class DataStore {
                         cellData.type = key;
                         cellData[VALUE] = anotherKey;
                         cellData.valueFor = anotherKey;
-                        cellData.total = data[key][anotherKey][0];
+                        cellData.total = data[key][anotherKey].length > 0 ? data[key][anotherKey][0] : 0;
                         cellData[PERCENT] = 100;
                         cellData.color = DEFAULT_KEY_CELL_COLOR;
                         cellData.isLabel = true;
@@ -122,8 +122,8 @@ export default class DataStore {
                 cellData.color = DEFAULT_HEADER_CELL_COLOR;
                 cellData.label = labelPrefix + ' ' + 0;
                 this.headers[key].push(cellData); //second cell
-                const largeRow = this.store[key][0];
                 const totalRows = this.store[key].length;
+                const largeRow = totalRows > 0 ? this.store[key][0] : [];
                 largeRow.forEach((el, index) => {
                     if(index < 2) return;
                     const value = this._sumOfColumnWithIndex(this.store[key], index);

diff --git a/src/ReactCohortGraph.js b/src/ReactCohortGraph.js
@@ -61,7 +61,7 @@ class ReactCohortGraph extends React.Component {
     isFixed = (index) => index < 2;
 
     render(){
-        const {showEmptyDataMessage = true, customEmptyDataMessage} = this.props;
+        const {showEmptyDataMessage = true, customEmptyDataMessage, labelFormatter} = this.props;
         const { dataStore, currentType, valueType } = this.state;
         const header = dataStore.getHeader(currentType);
         const rows = dataStore.getRows(currentType);
@@ -85,7 +85,7 @@ class ReactCohortGraph extends React.Component {
                                                 <div style={TableRow} key={"row" + j}>
                                                     {
                                                         row.map((cell, k) =>
-                                                            this.isFixed(k) && <BodyCell key={"cell" + k} {...cell} valueType={valueType} />
+                                                            this.isFixed(k) && <BodyCell key={"cell" + k} {...cell} valueType={valueType} labelFormatter={labelFormatter}/>
                                                         )
                                                     }
                                                 </div>
@@ -142,6 +142,7 @@ ReactCohortGraph.propTypes = {
     showEmptyDataMessage : PropTypes.bool,
     customEmptyDataMessage : PropTypes.any,
     columnClickEvent : PropTypes.func,
+    labelFormatter: PropTypes.func, //function(label){ return formattedLabel;}
     /*maxDays : PropTypes.number,
     maxWeeks : PropTypes.number, //TODO:
     maxMonths : PropTypes.number,*/

diff --git a/src/components.js b/src/components.js
@@ -12,7 +12,10 @@ import { VALUE_KEYS } from './constants';
 const { VALUE, PERCENT } = VALUE_KEYS;
 
 const renderValue = (props) => {
-    const {isTotal, isLabel, valueType} = props;
+    const {isTotal, isLabel, valueType, labelFormatter} = props;
+    if(typeof labelFormatter === 'function' && isLabel){
+        return labelFormatter(props[VALUE]);
+    }
     return (isTotal || isLabel) ? props[VALUE] : (props.valueType === PERCENT ? `${props[PERCENT]} %` : props[VALUE]);
 };