React Charts - Tiling Algorithms

Layout algorithms determine the position and size of tiles and groups. In this demo, you can use the drop-down menu below the component to apply different algorithms.

www.wikipedia.org

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import TreeMap, { Colorizer, Tooltip, ITreeMapOptions, ITooltipProps, } from 'devextreme-react/tree-map'; import { TreeMapLayoutAlgorithm } from 'devextreme/viz/tree_map'; import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; import { populationByAge, algorithmLabel } from './data.ts'; const algorithms: (TreeMapLayoutAlgorithm | 'custom')[] = ['sliceanddice', 'squarified', 'strip', 'custom']; function App() { const [selectedAlgorithm, setSelectedAlgorithm] = useState(algorithms[2]); const [ currentAlgorithm, setCurrentAlgorithm, ] = useState<ITreeMapOptions['layoutAlgorithm']>(getCurrentAlgorithm(algorithms[2])); const setAlgorithm = useCallback((data: SelectBoxTypes.ValueChangedEvent) => { setSelectedAlgorithm(data.value); setCurrentAlgorithm(() => getCurrentAlgorithm(data.value)); }, [setSelectedAlgorithm, setCurrentAlgorithm]); return ( <React.Fragment> <TreeMap id="treemap" dataSource={populationByAge} layoutAlgorithm={currentAlgorithm} title="Population by Age Groups" > <Colorizer colorizeGroups={true} type="discrete" /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} format="thousands" /> </TreeMap> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Tiling Algorithm </span> <SelectBox dataSource={algorithms} width={200} inputAttr={algorithmLabel} value={selectedAlgorithm} onValueChanged={setAlgorithm} /> </div> </div> </React.Fragment> ); } const customAlgorithm: ITreeMapOptions['layoutAlgorithm'] = (arg) => { const totalRect = arg.rect.slice(); let totalSum = arg.sum; let side = 0; arg.items.forEach((item) => { const size = Math.round(((totalRect[side + 2] - totalRect[side]) * item.value) / totalSum); const rect = totalRect.slice(); totalSum -= item.value; totalRect[side] += size; rect[side + 2] = totalRect[side]; item.rect = rect; side = 1 - side; }); }; function getCurrentAlgorithm(selectedAlgorithm: (TreeMapLayoutAlgorithm | 'custom')): ITreeMapOptions['layoutAlgorithm'] { let currentAlgorithm: ITreeMapOptions['layoutAlgorithm'] | 'custom' = selectedAlgorithm; if (currentAlgorithm === 'custom') { currentAlgorithm = customAlgorithm; } return currentAlgorithm; } const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { const { data } = arg.node; const parentData = arg.node.getParent().data; return { text: arg.node.isLeaf() ? `<span class='country'>${parentData.name}</span><br />${data.name}<br />${arg.valueText}(${((100 * data.value) / parentData.total).toFixed(1)}%)` : `<span class='country'>${data.name}</span>`, }; }; export default App;

import React, { useCallback, useState } from 'react'; import TreeMap, { Colorizer, Tooltip } from 'devextreme-react/tree-map'; import SelectBox from 'devextreme-react/select-box'; import { populationByAge, algorithmLabel } from './data.js'; const algorithms = ['sliceanddice', 'squarified', 'strip', 'custom']; function App() { const [selectedAlgorithm, setSelectedAlgorithm] = useState(algorithms[2]); const [currentAlgorithm, setCurrentAlgorithm] = useState(getCurrentAlgorithm(algorithms[2])); const setAlgorithm = useCallback( (data) => { setSelectedAlgorithm(data.value); setCurrentAlgorithm(() => getCurrentAlgorithm(data.value)); }, [setSelectedAlgorithm, setCurrentAlgorithm], ); return ( <React.Fragment> <TreeMap id="treemap" dataSource={populationByAge} layoutAlgorithm={currentAlgorithm} title="Population by Age Groups" > <Colorizer colorizeGroups={true} type="discrete" /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} format="thousands" /> </TreeMap> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Tiling Algorithm </span> <SelectBox dataSource={algorithms} width={200} inputAttr={algorithmLabel} value={selectedAlgorithm} onValueChanged={setAlgorithm} /> </div> </div> </React.Fragment> ); } const customAlgorithm = (arg) => { const totalRect = arg.rect.slice(); let totalSum = arg.sum; let side = 0; arg.items.forEach((item) => { const size = Math.round(((totalRect[side + 2] - totalRect[side]) * item.value) / totalSum); const rect = totalRect.slice(); totalSum -= item.value; totalRect[side] += size; rect[side + 2] = totalRect[side]; item.rect = rect; side = 1 - side; }); }; function getCurrentAlgorithm(selectedAlgorithm) { let currentAlgorithm = selectedAlgorithm; if (currentAlgorithm === 'custom') { currentAlgorithm = customAlgorithm; } return currentAlgorithm; } const customizeTooltip = (arg) => { const { data } = arg.node; const parentData = arg.node.getParent().data; return { text: arg.node.isLeaf() ? `<span class='country'>${parentData.name}</span><br />${data.name}<br />${arg.valueText}(${( (100 * data.value) / parentData.total ).toFixed(1)}%)` : `<span class='country'>${data.name}</span>`, }; }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const populationByAge = [{ name: 'Brazil', total: 200050486, items: [{ name: 'Age 0-14', value: 48058462, }, { name: 'Age 15-44', value: 96036995, }, { name: 'Age 45-64', value: 40715296, }, { name: 'Age 65+', value: 15239733, }], }, { name: 'Japan', total: 126345237, items: [{ name: 'Age 0-14', value: 16593766, }, { name: 'Age 15-44', value: 45455276, }, { name: 'Age 45-64', value: 32845790, }, { name: 'Age 65+', value: 31450405, }], }, { name: 'United States', total: 318497627, items: [{ name: 'Age 0-14', value: 63968935, }, { name: 'Age 15-44', value: 127217843, }, { name: 'Age 45-64', value: 83145484, }, { name: 'Age 65+', value: 44165365, }], }]; export const algorithmLabel = { 'aria-label': 'Algorithm' };

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const populationByAge = [ { name: 'Brazil', total: 200050486, items: [ { name: 'Age 0-14', value: 48058462, }, { name: 'Age 15-44', value: 96036995, }, { name: 'Age 45-64', value: 40715296, }, { name: 'Age 65+', value: 15239733, }, ], }, { name: 'Japan', total: 126345237, items: [ { name: 'Age 0-14', value: 16593766, }, { name: 'Age 15-44', value: 45455276, }, { name: 'Age 45-64', value: 32845790, }, { name: 'Age 65+', value: 31450405, }, ], }, { name: 'United States', total: 318497627, items: [ { name: 'Age 0-14', value: 63968935, }, { name: 'Age 15-44', value: 127217843, }, { name: 'Age 45-64', value: 83145484, }, { name: 'Age 65+', value: 44165365, }, ], }, ]; export const algorithmLabel = { 'aria-label': 'Algorithm' };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/25.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#treemap { height: 460px; } .country { font-weight: 500; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }

The TreeMap component supports three layout algorithms out of the box:

Squarified (default)
This algorithm lays the items out so that the aspect ratio will be closer to 1. In other words, this algorithm tries to make items as square as possible.
Strip
This algorithm is a modification of the "Squarified" algorithm. At the beginning, the algorithm has an available area divided into several strips and a set of items to distribute between the strips. Throughout the layout process, the current strip is maintained. For each item to be arranged, the algorithm checks whether or not adding the item to the current strip improves the average aspect ratios of the rectangles in the current strip. If so, the item is added to the current strip. Otherwise, it is added to the next strip.
Slice and Dice
This algorithm uses parallel lines to divide an available area into rectangles that visualize items. In a hierarchical structure, each rectangle that visualizes an item is further divided into smaller rectangles that visualize its children, and so on.

Use the layoutAlgorithm property to specify the tile layout. You can also implement your own algorithm. For this purpose, assign a function to the layoutAlgorithm property. This function calculates the coordinates of two diagonally-opposing points that define a rectangle and assigns them to the required item.