From 7fe371209986f63103da1e995241aec0cd5968fc Mon Sep 17 00:00:00 2001 From: Maksim Rodin Date: Thu, 25 Jul 2019 16:05:17 +0200 Subject: [PATCH 1/3] Add 'paddingDirections' property to the treemap --- docs/treemap.md | 9 ++++++++- src/treemap/index.js | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/docs/treemap.md b/docs/treemap.md index 6886c06c6..66d9ab483 100644 --- a/docs/treemap.md +++ b/docs/treemap.md @@ -98,7 +98,14 @@ Height of the component. Type: `number` -The padding between cells the cells of the heatmap in pixels. +The padding between the cells of the heatmap in pixels. + +#### paddingDirections (optional) + +Type: `Array` of `string` + +Directions, in which `padding` is applied. Possible values are `['left', 'right', 'top', 'bottom']`. +Any combination can be used. By default (`null`), padding is applied to all directions. #### data diff --git a/src/treemap/index.js b/src/treemap/index.js index a47baa8f5..8e3547718 100644 --- a/src/treemap/index.js +++ b/src/treemap/index.js @@ -91,6 +91,31 @@ function _getScaleFns(props) { }; } +/** + * Adds padding in desired directions to treemapingFunction. + * @param {Function} treemapingFunction function to update. + * @param {Number} padding value in pixels. + * @param {Array} paddingDirections . + * @returns {Function} treemapingFunction, updated with padding. + * @private + */ +function _applyPadding(treemapingFunction, padding, paddingDirections) { + if (!paddingDirections) { + return treemapingFunction.padding(padding); + } + const directionToProperty = { + 'left': 'paddingLeft', + 'right': 'paddingRight', + 'bottom': 'paddingBottom', + 'top': 'paddingTop', + }; + paddingDirections.forEach(direction => { + const property = directionToProperty[direction]; + treemapingFunction = treemapingFunction[property](padding); + }); + return treemapingFunction; +} + class Treemap extends React.Component { constructor(props) { super(props); @@ -114,7 +139,7 @@ class Treemap extends React.Component { */ _getNodesToRender() { const {innerWidth, innerHeight} = this.state; - const {data, mode, padding, sortFunction, getSize} = this.props; + const {data, mode, padding, sortFunction, getSize, paddingDirections} = this.props; if (!data) { return []; } @@ -153,10 +178,9 @@ class Treemap extends React.Component { } const tileFn = TREEMAP_TILE_MODES[mode]; - const treemapingFunction = treemap(tileFn) + const treemapingFunction = _applyPadding(treemap(tileFn) .tile(tileFn) - .size([innerWidth, innerHeight]) - .padding(padding); + .size([innerWidth, innerHeight]), padding, paddingDirections); const structuredInput = hierarchy(data) .sum(getSize) .sort((a, b) => sortFunction(a, b, getSize)); @@ -188,6 +212,7 @@ Treemap.propTypes = { onLeafMouseOut: PropTypes.func, useCirclePacking: PropTypes.bool, padding: PropTypes.number.isRequired, + paddingDirections: PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'top', 'bottom'])), sortFunction: PropTypes.func, width: PropTypes.number.isRequired, getSize: PropTypes.func, @@ -210,6 +235,7 @@ Treemap.defaultProps = { opacityType: OPACITY_TYPE, _opacityValue: DEFAULT_OPACITY, padding: 1, + paddingDirections: null, sortFunction: (a, b, accessor) => { if (!accessor) { return 0; From 3f900e81b7b5d04104ac2ee4cc36e64e286bf7ab Mon Sep 17 00:00:00 2001 From: Maksim Rodin Date: Thu, 15 Aug 2019 10:58:38 +0200 Subject: [PATCH 2/3] Extend 'padding property' for the treemap --- docs/treemap.md | 5 +++-- src/treemap/index.js | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/treemap.md b/docs/treemap.md index 66d9ab483..13686b3a6 100644 --- a/docs/treemap.md +++ b/docs/treemap.md @@ -96,9 +96,10 @@ Height of the component. #### padding -Type: `number` +Type: `number` or `Array` of `number` -The padding between the cells of the heatmap in pixels. +The padding between the cells of the heatmap in pixels. +If Array, then each element should correspond to padding for direction in `paddingDirections` parameter. #### paddingDirections (optional) diff --git a/src/treemap/index.js b/src/treemap/index.js index 8e3547718..903cf6303 100644 --- a/src/treemap/index.js +++ b/src/treemap/index.js @@ -109,9 +109,12 @@ function _applyPadding(treemapingFunction, padding, paddingDirections) { 'bottom': 'paddingBottom', 'top': 'paddingTop', }; + let i = 0; paddingDirections.forEach(direction => { const property = directionToProperty[direction]; - treemapingFunction = treemapingFunction[property](padding); + const paddingForDirection = Array.isArray(padding) ? padding[i] : padding; + i += 1; + treemapingFunction = treemapingFunction[property](paddingForDirection); }); return treemapingFunction; } @@ -211,7 +214,7 @@ Treemap.propTypes = { onLeafMouseOver: PropTypes.func, onLeafMouseOut: PropTypes.func, useCirclePacking: PropTypes.bool, - padding: PropTypes.number.isRequired, + padding: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired, paddingDirections: PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'top', 'bottom'])), sortFunction: PropTypes.func, width: PropTypes.number.isRequired, From 6581543544e88fe60577ae8fea1cd74a5905ae51 Mon Sep 17 00:00:00 2001 From: Maksim Rodin Date: Thu, 15 Aug 2019 11:40:01 +0200 Subject: [PATCH 3/3] Extend 'padding property' for the treemap --- docs/treemap.md | 11 +++++------ src/treemap/index.js | 39 +++++++++++++++++++++------------------ 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/docs/treemap.md b/docs/treemap.md index 13686b3a6..44f5d98d1 100644 --- a/docs/treemap.md +++ b/docs/treemap.md @@ -96,17 +96,16 @@ Height of the component. #### padding -Type: `number` or `Array` of `number` +Type: `number` The padding between the cells of the heatmap in pixels. -If Array, then each element should correspond to padding for direction in `paddingDirections` parameter. -#### paddingDirections (optional) +#### sidePadding (optional) -Type: `Array` of `string` +Type: `Object` of `number` -Directions, in which `padding` is applied. Possible values are `['left', 'right', 'top', 'bottom']`. -Any combination can be used. By default (`null`), padding is applied to all directions. +Directions, in which additional side padding is applied. +Possible keys for object are `['left', 'right', 'top', 'bottom']`. #### data diff --git a/src/treemap/index.js b/src/treemap/index.js index 903cf6303..a97a514a6 100644 --- a/src/treemap/index.js +++ b/src/treemap/index.js @@ -94,14 +94,13 @@ function _getScaleFns(props) { /** * Adds padding in desired directions to treemapingFunction. * @param {Function} treemapingFunction function to update. - * @param {Number} padding value in pixels. - * @param {Array} paddingDirections . - * @returns {Function} treemapingFunction, updated with padding. + * @param {Object} sidePadding . + * @returns {Function} treemapingFunction, updated with side padding. * @private */ -function _applyPadding(treemapingFunction, padding, paddingDirections) { - if (!paddingDirections) { - return treemapingFunction.padding(padding); +function _applySidePadding(treemapingFunction, sidePadding) { + if (!sidePadding) { + return treemapingFunction; } const directionToProperty = { 'left': 'paddingLeft', @@ -109,12 +108,10 @@ function _applyPadding(treemapingFunction, padding, paddingDirections) { 'bottom': 'paddingBottom', 'top': 'paddingTop', }; - let i = 0; - paddingDirections.forEach(direction => { - const property = directionToProperty[direction]; - const paddingForDirection = Array.isArray(padding) ? padding[i] : padding; - i += 1; - treemapingFunction = treemapingFunction[property](paddingForDirection); + Object.entries(sidePadding).forEach(entry => { + const [ direction, padding ] = entry; + const functionProperty = directionToProperty[direction]; + treemapingFunction = treemapingFunction[functionProperty](padding); }); return treemapingFunction; } @@ -142,7 +139,7 @@ class Treemap extends React.Component { */ _getNodesToRender() { const {innerWidth, innerHeight} = this.state; - const {data, mode, padding, sortFunction, getSize, paddingDirections} = this.props; + const {data, mode, padding, sortFunction, getSize, sidePadding} = this.props; if (!data) { return []; } @@ -181,9 +178,10 @@ class Treemap extends React.Component { } const tileFn = TREEMAP_TILE_MODES[mode]; - const treemapingFunction = _applyPadding(treemap(tileFn) + const treemapingFunction = _applySidePadding(treemap(tileFn) .tile(tileFn) - .size([innerWidth, innerHeight]), padding, paddingDirections); + .size([innerWidth, innerHeight]) + .padding(padding), sidePadding); const structuredInput = hierarchy(data) .sum(getSize) .sort((a, b) => sortFunction(a, b, getSize)); @@ -214,8 +212,13 @@ Treemap.propTypes = { onLeafMouseOver: PropTypes.func, onLeafMouseOut: PropTypes.func, useCirclePacking: PropTypes.bool, - padding: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired, - paddingDirections: PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'top', 'bottom'])), + padding: PropTypes.number.isRequired, + sidePadding: PropTypes.shape({ + 'left': PropTypes.number, + 'right': PropTypes.number, + 'top': PropTypes.number, + 'bottom': PropTypes.number, + }), sortFunction: PropTypes.func, width: PropTypes.number.isRequired, getSize: PropTypes.func, @@ -238,7 +241,7 @@ Treemap.defaultProps = { opacityType: OPACITY_TYPE, _opacityValue: DEFAULT_OPACITY, padding: 1, - paddingDirections: null, + sidePadding: null, sortFunction: (a, b, accessor) => { if (!accessor) { return 0;