From 02bce168259cebfeb92dcd141d547064a8dc4cd0 Mon Sep 17 00:00:00 2001 From: Andrew McNutt Date: Tue, 7 Mar 2017 08:48:02 -0800 Subject: [PATCH] Add partition mode to treemap (#284) --- showcase/index.js | 5 --- showcase/treemap/circle-packed-treemap.js | 38 ----------------- showcase/treemap/simple-treemap.js | 52 ++++++++++++++++++++--- src/styles/examples.scss | 29 +++++++++++-- src/treemap/index.js | 23 +++++++++- 5 files changed, 93 insertions(+), 54 deletions(-) delete mode 100644 showcase/treemap/circle-packed-treemap.js diff --git a/showcase/index.js b/showcase/index.js index 89ee719c7..2b0e20b39 100644 --- a/showcase/index.js +++ b/showcase/index.js @@ -53,7 +53,6 @@ import VoronoiLineChart from './plot/voronoi-line-chart'; import SimpleTreemap from './treemap/simple-treemap'; import TreemapExample from './treemap/dynamic-treemap'; -import CirclePacking from './treemap/circle-packed-treemap'; import SimpleRadialChart from './radial-chart/simple-radial-chart'; import DonutChartExample from './radial-chart/donut-chart'; @@ -249,10 +248,6 @@ const App = (

Animated Treemap

-
-

Circle Packing

- -
diff --git a/showcase/treemap/circle-packed-treemap.js b/showcase/treemap/circle-packed-treemap.js deleted file mode 100644 index bbd66ed5d..000000000 --- a/showcase/treemap/circle-packed-treemap.js +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) 2016 Uber Technologies, Inc. -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the 'Software'), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -import React from 'react'; - -import Treemap from 'treemap'; -import D3FlareData from './d3-flare-example.json'; - -export default class CirclePackedTreemap extends React.Component { - render() { - return ( - - ); - } -} diff --git a/showcase/treemap/simple-treemap.js b/showcase/treemap/simple-treemap.js index ceed3d29f..f111d2012 100644 --- a/showcase/treemap/simple-treemap.js +++ b/showcase/treemap/simple-treemap.js @@ -24,17 +24,55 @@ import Treemap from 'treemap'; import D3FlareData from './d3-flare-example.json'; +const MODE = [ + 'circlePack', + 'partition', + 'partition-pivot', + 'squarify', + 'resquarify', + 'slice', + 'dice', + 'slicedice', + 'binary' +]; + export default class SimpleTreemapExample extends React.Component { + state = { + modeIndex: 0 + } + + updateModeIndex = increment => () => { + const newIndex = this.state.modeIndex + (increment ? 1 : -1); + const modeIndex = newIndex < 0 ? MODE.length - 1 : newIndex >= MODE.length ? 0 : newIndex; + this.setState({modeIndex}); + } render() { + const {modeIndex} = this.state; return ( - +
+
+
+ {'PREV MODE'} +
+
{MODE[modeIndex]}
+
+ {'NEXT MODE'} +
+
+ +
); } diff --git a/src/styles/examples.scss b/src/styles/examples.scss index 446418b3f..a0dd3e396 100644 --- a/src/styles/examples.scss +++ b/src/styles/examples.scss @@ -316,9 +316,32 @@ article { } } -.circle-packed-treemap-example { - .rv-treemap__leaf--circle { - border: thin solid #ddd; +.simple-treemap-example { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 10px; + + .rv-treemap__leaf { + border: thin solid rgba(#ddd, .5); + } + + .simple-treemap-example-controls { + align-items: center; + display: flex; + justify-content: space-between; + padding: 10px 0; + width: 75%; + } + + .simple-treemap-example-button { + border: thin solid #333; + border-radius: 5px; + cursor: pointer; + font-size: 10px; + font-weight: 600; + padding: 5px 10px; } } diff --git a/src/treemap/index.js b/src/treemap/index.js index d150410bc..76b8f0519 100644 --- a/src/treemap/index.js +++ b/src/treemap/index.js @@ -22,6 +22,7 @@ import React, {PropTypes} from 'react'; import { hierarchy, pack, + partition, treemapSquarify, treemapResquarify, treemapSlice, @@ -47,7 +48,9 @@ const TREEMAP_TILE_MODES = { }; const TREEMAP_LAYOUT_MODES = [ - 'circlePack' + 'circlePack', + 'partition', + 'partition-pivot' ]; const NOOP = d => d; @@ -131,6 +134,24 @@ class Treemap extends React.Component { */ _getNodesToRender() { const {data, height, width, mode, padding} = this.props; + if (data && (mode === 'partition' || mode === 'partition-pivot')) { + const partitionFunction = partition() + .size([width, height]) + .padding(padding); + const structuredInput = hierarchy(data) + .sum(d => d.size); + const mappedNodes = partitionFunction(structuredInput).descendants(); + if (mode === 'partition-pivot') { + return mappedNodes.map(node => ({ + ...node, + x0: node.y0, + x1: node.y1, + y0: node.x0, + y1: node.x1 + })); + } + return mappedNodes; + } if (data && mode === 'circlePack') { const packingFunction = pack() .size([width, height])