Skip to content

Commit

Permalink
Extend 'padding property' for the treemap
Browse files Browse the repository at this point in the history
  • Loading branch information
Bi0max committed Sep 16, 2019
1 parent 3f900e8 commit 6581543
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 24 deletions.
11 changes: 5 additions & 6 deletions docs/treemap.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
39 changes: 21 additions & 18 deletions src/treemap/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,27 +94,24 @@ 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',
'right': 'paddingRight',
'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;
}
Expand Down Expand Up @@ -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 [];
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down

0 comments on commit 6581543

Please sign in to comment.