From 3cca838422a6575247250c169ef78ab4e6a42090 Mon Sep 17 00:00:00 2001 From: Jyothi Babu Araja Date: Mon, 3 Jul 2017 22:42:54 +0530 Subject: [PATCH] label formatter support added --- _layouts/default.html | 2 +- lib/reactcohortgraph.js | 16 +++++++++++----- lib/reactcohortgraph.min.js | 2 +- package.json | 2 +- src/DataStore.js | 4 ++-- src/ReactCohortGraph.js | 5 +++-- src/components.js | 5 ++++- 7 files changed, 23 insertions(+), 13 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 32503ba..fafc0e5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -98,7 +98,7 @@

{{ 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")); \ No newline at end of file diff --git a/lib/reactcohortgraph.js b/lib/reactcohortgraph.js index 3e17e8a..9c9c647 100644 --- 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 index 778310d..ac4a4a3 100644 --- a/lib/reactcohortgraph.min.js +++ b/lib/reactcohortgraph.min.js @@ -3,4 +3,4 @@ object-assign (c) Sindre Sorhus @license MIT */ -var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,u,c=r(e),s=1;s.")}return t}function i(e,n){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=v.uniqueKey||(v.uniqueKey={}),o=a(n);if(!r[o]){r[o]=!0;var i="";e&&e._owner&&e._owner!==s.current&&(i=" It was passed a child from "+e._owner.getName()+"."),"production"!==t.env.NODE_ENV&&h(!1,'Each child in an array or iterator should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.%s',o,i,l.getCurrentStackAddendum(e))}}}function u(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n0&&(this.setState({currentType:Object.keys(e)[0]}),this.setState({dataStore:new h.default(e||{})}))}},{key:"componentWillReceiveProps",value:function(e){var t=e.data,n=e.dataType,r=e.valueType,o=this.state.currentType;Object.keys(t).length>0&&(""===o||r===this.state.valueType&&n===o?this.setState({dataStore:new h.default(t||{})}):this.setState({currentType:n||Object.keys(t)[0],valueType:r}))}},{key:"componentDidMount",value:function(){}},{key:"render",value:function(){var e=this,t=this.props,n=t.showEmptyDataMessage,r=void 0===n||n,o=t.customEmptyDataMessage,a=this.state,i=a.dataStore,c=a.currentType,s=a.valueType,p=i.getHeader(c),f=i.getRows(c);return p&&p.length>0?l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableBody},l.default.createElement("div",{style:d.TableRow},l.default.createElement("div",{style:d.FixedTablePart},l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableHeading},p.map(function(t,n){return e.isFixed(n)&&l.default.createElement(v.HeaderCell,u({key:"header"+n},t,{valueType:s}))})),l.default.createElement("div",{style:d.TableBody},f.map(function(t,n){return l.default.createElement("div",{style:d.TableRow,key:"row"+n},t.map(function(t,n){return e.isFixed(n)&&l.default.createElement(v.BodyCell,u({key:"cell"+n},t,{valueType:s}))}))})))),l.default.createElement("div",{style:d.ScrollableTablePart},l.default.createElement(v.ScrollableContent,null,l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableHeading},p.map(function(t,n){return!e.isFixed(n)&&l.default.createElement(v.HeaderCell,u({key:"header"+n},t,{valueType:s}))})),l.default.createElement("div",{style:d.TableBody},f.map(function(t,n){return l.default.createElement("div",{style:d.TableRow,key:"row"+n},t.map(function(t,n){return!e.isFixed(n)&&l.default.createElement(v.BodyCell,u({key:"cell"+n},t,{valueType:s}))}))})))))))):r?o||l.default.createElement("h3",null,"No Data..!"):void 0}}]),t}(l.default.Component);b.propTypes={data:f.default.object.isRequired,dataType:f.default.string.isRequired,valueType:f.default.string.isRequired,cellClickEvent:f.default.func,showEmptyDataMessage:f.default.bool,customEmptyDataMessage:f.default.any,columnClickEvent:f.default.func,showAbsolute:f.default.bool,toggleValues:f.default.bool,showHeaderValues:f.default.bool},t.default=b},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t "+t)},this.getHighestRowSize=function(t){if(e.store.hasOwnProperty(t))return e.store[t][0].length;console.error("No Columns Found for type => "+t)},this.getCellData=function(t,n,r){if(e.store.hasOwnProperty(t))try{return e.store[t][n][r]}catch(e){console.error("No Data Found for cell with type => "+t+", row => "+n+", col => "+r)}else console.error("No Data Found for cell with type => "+t+", row => "+n+", col => "+r)},this.getHeaderCellData=function(t,n){if(e.headers.hasOwnProperty(t))try{return e.headers[t][n]}catch(e){console.error("No Data Found for cell with type => "+t+", col => "+n)}else console.error("No Data Found for cell with type => "+t+", col => "+n)},this.getHeader=function(t){return e.headers.hasOwnProperty(t)?e.headers[t]:(console.error("No Headers Found for type => "+t),[])},this.getRows=function(t){return e.store.hasOwnProperty(t)?e.store[t]:(console.error("No Headers Found for type => "+t),[])},this._shadeCellWithColor=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#3f83a3",n=1-Math.ceil(e/10)/10,r=parseInt(t.slice(1),16),o=n<0?0:255,a=n<0?-1*n:n,i=r>>16,u=r>>8&255,c=255&r;return"#"+(16777216+65536*(Math.round((o-i)*a)+i)+256*(Math.round((o-u)*a)+u)+(Math.round((o-c)*a)+c)).toString(16).slice(1)},this._getPercentage=function(e,t){return e?Math.round(t/e*100*100)/100:e},this._isValidHex=function(e){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(e)},this._turnCamelCase=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];if("string"==typeof e)return e.toLowerCase().replace(/\b\w/g,function(e){return e.toUpperCase()})}};t.default=p},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.ScrollableContent=t.BodyCell=t.HeaderCell=void 0;var i=function(){function e(e,t){for(var n=0;n ",this.refs,this.ref.parentNode),this.setState({width:this.ref.parentNode.clientWidth-1}),window.addEventListener("resize",function(){e.setState({width:e.ref.parentNode.clientWidth-1})})}},{key:"render",value:function(){var e=this;return s.default.createElement("div",{ref:function(t){return e.ref=t},style:u({},l.ScrollableTableContent,{width:this.state.width})},this.props.children)}}]),t}(s.default.Component)},function(e,t,n){"use strict";e.exports=n(22).default},function(e,t,n){"use strict";(function(t){function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{o("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,i)}catch(e){p=e}if(a(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,typeof p),p instanceof Error&&!(p.message in u)){u[p.message]=!0;var f=s?s():"";a(!1,"Failed %s type: %s%s",r,p.message,null!=f?f:"")}}}if("production"!==t.env.NODE_ENV)var o=n(2),a=n(1),i=n(12),u={};e.exports=r}).call(t,n(0))},function(e,t,n){"use strict";var r=n(16);e.exports=function(e){return r(e,!1)}},function(e,t,n){"use strict";var r=n(5),o=n(2),a=n(12);e.exports=function(){function e(e,t,n,r,i,u){u!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r};e.exports=n(16)(o,!0)}else e.exports=n(28)()}).call(t,n(0))},function(e,t,n){"use strict";function r(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function o(e){var t=/(=0|=2)/g,n={"=0":"=","=2":":"};return(""+("."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1))).replace(t,function(e){return n[e]})}var a={escape:r,unescape:o};e.exports=a},function(e,t,n){"use strict";(function(t){var r=n(4),o=n(2),a=function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)},i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},u=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},c=function(e,t,n,r){var o=this;if(o.instancePool.length){var a=o.instancePool.pop();return o.call(a,e,t,n,r),a}return new o(e,t,n,r)},s=function(e){var n=this;e instanceof n||("production"!==t.env.NODE_ENV?o(!1,"Trying to release an instance into a pool of a different type."):r("25")),e.destructor(),n.instancePool.length1?u-1:0),s=1;s.")}return t}function i(e,n){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=v.uniqueKey||(v.uniqueKey={}),o=a(n);if(!r[o]){r[o]=!0;var i="";e&&e._owner&&e._owner!==s.current&&(i=" It was passed a child from "+e._owner.getName()+"."),"production"!==t.env.NODE_ENV&&h(!1,'Each child in an array or iterator should have a unique "key" prop.%s%s See https://fb.me/react-warning-keys for more information.%s',o,i,l.getCurrentStackAddendum(e))}}}function u(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n0&&(this.setState({currentType:Object.keys(e)[0]}),this.setState({dataStore:new h.default(e||{})}))}},{key:"componentWillReceiveProps",value:function(e){var t=e.data,n=e.dataType,r=e.valueType,o=this.state.currentType;Object.keys(t).length>0&&(""===o||r===this.state.valueType&&n===o?this.setState({dataStore:new h.default(t||{})}):this.setState({currentType:n||Object.keys(t)[0],valueType:r}))}},{key:"componentDidMount",value:function(){}},{key:"render",value:function(){var e=this,t=this.props,n=t.showEmptyDataMessage,r=void 0===n||n,o=t.customEmptyDataMessage,a=t.labelFormatter,i=this.state,c=i.dataStore,s=i.currentType,p=i.valueType,f=c.getHeader(s),y=c.getRows(s);return f&&f.length>0?l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableBody},l.default.createElement("div",{style:d.TableRow},l.default.createElement("div",{style:d.FixedTablePart},l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableHeading},f.map(function(t,n){return e.isFixed(n)&&l.default.createElement(v.HeaderCell,u({key:"header"+n},t,{valueType:p}))})),l.default.createElement("div",{style:d.TableBody},y.map(function(t,n){return l.default.createElement("div",{style:d.TableRow,key:"row"+n},t.map(function(t,n){return e.isFixed(n)&&l.default.createElement(v.BodyCell,u({key:"cell"+n},t,{valueType:p,labelFormatter:a}))}))})))),l.default.createElement("div",{style:d.ScrollableTablePart},l.default.createElement(v.ScrollableContent,null,l.default.createElement("div",{style:d.Table},l.default.createElement("div",{style:d.TableHeading},f.map(function(t,n){return!e.isFixed(n)&&l.default.createElement(v.HeaderCell,u({key:"header"+n},t,{valueType:p}))})),l.default.createElement("div",{style:d.TableBody},y.map(function(t,n){return l.default.createElement("div",{style:d.TableRow,key:"row"+n},t.map(function(t,n){return!e.isFixed(n)&&l.default.createElement(v.BodyCell,u({key:"cell"+n},t,{valueType:p}))}))})))))))):r?o||l.default.createElement("h3",null,"No Data..!"):void 0}}]),t}(l.default.Component);b.propTypes={data:f.default.object.isRequired,dataType:f.default.string.isRequired,valueType:f.default.string.isRequired,cellClickEvent:f.default.func,showEmptyDataMessage:f.default.bool,customEmptyDataMessage:f.default.any,columnClickEvent:f.default.func,labelFormatter:f.default.func,showAbsolute:f.default.bool,toggleValues:f.default.bool,showHeaderValues:f.default.bool},t.default=b},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0?t[n][a][0]:0,i[l]=100,i.color=u.DEFAULT_KEY_CELL_COLOR,i.isLabel=!0,e.store[n].push([i].concat(o(t[n][a].map(function(t,o){var c,p=e._getPercentage(i.total,t);return c={type:n},r(c,s,t),r(c,"valueFor",a),r(c,"total",i.total),r(c,"isTotal",0===o),r(c,l,p),r(c,"color",0===o?u.DEFAULT_CELL_COLOR:e._shadeCellWithColor(p)),c}))))}}(a)}}(n)},this._buildHeaders=function(){for(var t in e.store)!function(t){if(e.store.hasOwnProperty(t)){var n=e._turnCamelCase(t.slice(0,-1));e.headers[t]=[],e.headers[t].push({value:"",color:u.DEFAULT_HEADER_CELL_COLOR,isLabel:!0,label:e._turnCamelCase(t)});var o={};o.isHeader=!0,o.index=0,o.type=t,o[s]=e._sumOfColumnWithIndex(e.store[t],1),o.valueFor=t,o.total=o.value,o[l]=100,o.isTotal=!0,o.color=u.DEFAULT_HEADER_CELL_COLOR,o.label=n+" 0",e.headers[t].push(o);var a=e.store[t].length,i=a>0?e.store[t][0]:[];i.forEach(function(u,c){var p;if(!(c<2)){var f=e._sumOfColumnWithIndex(e.store[t],c),d=e._getPercentage(e._sumOfFirstColumnUpToIndex(e.store[t],a-c),f);e.headers[t].push((p={isHeader:!0,index:c,type:t},r(p,s,f),r(p,"valueFor",i[0]),r(p,"total",o.total),r(p,l,d),r(p,"color",e._shadeCellWithColor(d)),r(p,"label",n+" "+(c-1)),p))}})}}(t)},this._sumOfArrayElements=function(e){return e.reduce(function(e,t){return e+t})},this._sumOfColumnWithIndex=function(e,t){var n=0;return e.forEach(function(e){try{n+=e[t].value}catch(e){n+=0}}),n},this._sumOfFirstColumnUpToIndex=function(e,t){for(var n=0,r=0;r<=t;r++)try{n+=e[r][1].value}catch(e){n+=0}return n},this.getTypeData=function(t){if(e.store.hasOwnProperty(t))return e.store[t];console.error("No Data Found for type => "+t)},this.getHighestRowSize=function(t){if(e.store.hasOwnProperty(t))return e.store[t][0].length;console.error("No Columns Found for type => "+t)},this.getCellData=function(t,n,r){if(e.store.hasOwnProperty(t))try{return e.store[t][n][r]}catch(e){console.error("No Data Found for cell with type => "+t+", row => "+n+", col => "+r)}else console.error("No Data Found for cell with type => "+t+", row => "+n+", col => "+r)},this.getHeaderCellData=function(t,n){if(e.headers.hasOwnProperty(t))try{return e.headers[t][n]}catch(e){console.error("No Data Found for cell with type => "+t+", col => "+n)}else console.error("No Data Found for cell with type => "+t+", col => "+n)},this.getHeader=function(t){return e.headers.hasOwnProperty(t)?e.headers[t]:(console.error("No Headers Found for type => "+t),[])},this.getRows=function(t){return e.store.hasOwnProperty(t)?e.store[t]:(console.error("No Headers Found for type => "+t),[])},this._shadeCellWithColor=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#3f83a3",n=1-Math.ceil(e/10)/10,r=parseInt(t.slice(1),16),o=n<0?0:255,a=n<0?-1*n:n,i=r>>16,u=r>>8&255,c=255&r;return"#"+(16777216+65536*(Math.round((o-i)*a)+i)+256*(Math.round((o-u)*a)+u)+(Math.round((o-c)*a)+c)).toString(16).slice(1)},this._getPercentage=function(e,t){return e?Math.round(t/e*100*100)/100:e},this._isValidHex=function(e){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(e)},this._turnCamelCase=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];if("string"==typeof e)return e.toLowerCase().replace(/\b\w/g,function(e){return e.toUpperCase()})}};t.default=p},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.ScrollableContent=t.BodyCell=t.HeaderCell=void 0;var i=function(){function e(e,t){for(var n=0;n ",this.refs,this.ref.parentNode),this.setState({width:this.ref.parentNode.clientWidth-1}),window.addEventListener("resize",function(){e.setState({width:e.ref.parentNode.clientWidth-1})})}},{key:"render",value:function(){var e=this;return s.default.createElement("div",{ref:function(t){return e.ref=t},style:u({},l.ScrollableTableContent,{width:this.state.width})},this.props.children)}}]),t}(s.default.Component)},function(e,t,n){"use strict";e.exports=n(22).default},function(e,t,n){"use strict";(function(t){function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{o("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,i)}catch(e){p=e}if(a(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,typeof p),p instanceof Error&&!(p.message in u)){u[p.message]=!0;var f=s?s():"";a(!1,"Failed %s type: %s%s",r,p.message,null!=f?f:"")}}}if("production"!==t.env.NODE_ENV)var o=n(2),a=n(1),i=n(12),u={};e.exports=r}).call(t,n(0))},function(e,t,n){"use strict";var r=n(16);e.exports=function(e){return r(e,!1)}},function(e,t,n){"use strict";var r=n(5),o=n(2),a=n(12);e.exports=function(){function e(e,t,n,r,i,u){u!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r};e.exports=n(16)(o,!0)}else e.exports=n(28)()}).call(t,n(0))},function(e,t,n){"use strict";function r(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function o(e){var t=/(=0|=2)/g,n={"=0":"=","=2":":"};return(""+("."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1))).replace(t,function(e){return n[e]})}var a={escape:r,unescape:o};e.exports=a},function(e,t,n){"use strict";(function(t){var r=n(4),o=n(2),a=function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)},i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},u=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},c=function(e,t,n,r){var o=this;if(o.instancePool.length){var a=o.instancePool.pop();return o.call(a,e,t,n,r),a}return new o(e,t,n,r)},s=function(e){var n=this;e instanceof n||("production"!==t.env.NODE_ENV?o(!1,"Trying to release an instance into a pool of a different type."):r("25")),e.destructor(),n.instancePool.length1?u-1:0),s=1;s 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 index b1fcf26..c810080 100644 --- 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 {
{ row.map((cell, k) => - this.isFixed(k) && + this.isFixed(k) && ) }
@@ -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 index d5f3369..83320c2 100644 --- 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]); };