Merge pull request #3 from basselAhmed/master

Add headerFormatter prop
apxor · Nov 1, 2018 · eef1ae6 · eef1ae6
2 parents 52fe9c5 + 5999b68
commit eef1ae6
Show file tree

Hide file tree

Showing 5 changed files with 1,257 additions and 1,218 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ Basic Version with minimal visualization without any actions or events.
     bodyCellColor: PropTypes.string,
     keyCellColor: PropTypes.string,
     labelFormatter: PropTypes.func, //function(label){ return formattedLabel;}
+    headerFormatter: PropTypes.func, //function(header){ return formattedheader;}
     //enableTooltip : PropTypes.bool, TODO
     showAbsolute : PropTypes.bool,
     toggleValues : PropTypes.bool,

diff --git a/lib/reactcohortgraph.js b/lib/reactcohortgraph.js
@@ -2768,6 +2768,7 @@ var ReactCohortGraph = function (_React$Component) {
                 showEmptyDataMessage = _props2$showEmptyData === undefined ? true : _props2$showEmptyData,
                 customEmptyDataMessage = _props2.customEmptyDataMessage,
                 labelFormatter = _props2.labelFormatter,
+                headerFormatter = _props2.headerFormatter,
                 _props2$bodyCellStyle = _props2.bodyCellStyles,
                 bodyCellStyles = _props2$bodyCellStyle === undefined ? {} : _props2$bodyCellStyle,
                 _props2$headerCellSty = _props2.headerCellStyles,
@@ -2797,6 +2798,7 @@ var ReactCohortGraph = function (_React$Component) {
             var WrapperStyles = (0, _styles.wrapper)(wrapperStyles);
             var ScrollableTablePartStyles = (0, _styles.scrollableTablePart)(scrollableTablePartStyles);
             var ScrollableTableContentStyles = (0, _styles.scrollableTableContent)(scrollableTableContentStyles);
+            console.log(header);
             if (header && header.length > 0) {
                 return _react2.default.createElement(
                     'div',
@@ -2821,7 +2823,7 @@ var ReactCohortGraph = function (_React$Component) {
                                             'div',
                                             { style: TableHeadingStyles },
                                             header.map(function (headerCell, i) {
-                                                return _this2.isFixed(i) && _react2.default.createElement(_components.HeaderCell, _extends({ tableCellStyles: tableCellStyles, headerLabelStyles: headerLabelStyles, style: headerCellStyles, key: "header" + i }, headerCell, { valueType: valueType }));
+                                                return _this2.isFixed(i) && _react2.default.createElement(_components.HeaderCell, _extends({ tableCellStyles: tableCellStyles, headerLabelStyles: headerLabelStyles, style: headerCellStyles, key: "header" + i }, headerCell, { headerFormatter: headerFormatter, valueType: valueType }));
                                             })
                                         ),
                                         _react2.default.createElement(
@@ -2852,7 +2854,7 @@ var ReactCohortGraph = function (_React$Component) {
                                                 'div',
                                                 { style: TableHeadingStyles },
                                                 header.map(function (headerCell, i) {
-                                                    return !_this2.isFixed(i) && _react2.default.createElement(_components.HeaderCell, _extends({ tableCellStyles: tableCellStyles, style: headerCellStyles, key: "header" + i }, headerCell, { valueType: valueType }));
+                                                    return !_this2.isFixed(i) && _react2.default.createElement(_components.HeaderCell, _extends({ tableCellStyles: tableCellStyles, style: headerCellStyles, key: "header" + i }, headerCell, { headerFormatter: headerFormatter, valueType: valueType }));
                                                 })
                                             ),
                                             _react2.default.createElement(
@@ -2929,6 +2931,7 @@ ReactCohortGraph.propTypes = {
     bodyCellColor: _propTypes2.default.string,
     keyCellColor: _propTypes2.default.string,
     labelFormatter: _propTypes2.default.func, //function(label){ return formattedLabel;}
+    headerFormatter: _propTypes2.default.func,
     /*maxDays : PropTypes.number,
     maxWeeks : PropTypes.number, //TODO:
     maxMonths : PropTypes.number,*/
@@ -3418,14 +3421,25 @@ var renderValue = function renderValue(props) {
     return isTotal || isLabel ? props[VALUE] : props.valueType === PERCENT ? props[PERCENT] + ' %' : props[VALUE];
 };
 
+var renderHeader = function renderHeader(props) {
+    var isHeader = props.isHeader,
+        headerFormatter = props.headerFormatter,
+        label = props.label;
+
+    if (typeof headerFormatter === 'function' && isHeader) {
+        return headerFormatter(label);
+    }
+    return label;
+};
+
 var HeaderCell = exports.HeaderCell = function HeaderCell(props) {
     return _react2.default.createElement(
         'div',
         { style: _extends({}, (0, _styles.tableCell)(props.tableCellStyles), { backgroundColor: props.color }, props.style) },
         _react2.default.createElement(
             'p',
             { style: (0, _styles.headerLabel)(props.headerLabelStyles) },
-            props.label
+            renderHeader(props)
         ),
         _react2.default.createElement(
             'span',