www.wikipedia.org
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<dx-tree-map
id="treemap"
[dataSource]="citiesPopulations"
title="The Most Populated Cities by Continents"
>
<dxo-tooltip
[enabled]="true"
format="thousands"
[customizeTooltip]="customizeTooltip"
></dxo-tooltip>
</dx-tree-map>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxTreeMapModule } from 'devextreme-angular';
import { CitiesPopulation, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: `app/app.component.html`,
styleUrls: [`app/app.component.css`],
providers: [Service],
})
export class AppComponent {
citiesPopulations: CitiesPopulation[];
constructor(service: Service) {
this.citiesPopulations = service.getCitiesPopulations();
}
customizeTooltip(arg) {
const data = arg.node.data;
let result = null;
if (arg.node.isLeaf()) {
result = `<span class='city'>${data.name}</span> (${
data.country})<br/>Population: ${arg.valueText}`;
}
return {
text: result,
};
}
}
@NgModule({
imports: [
BrowserModule,
DxTreeMapModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #treemap {
height: 500px;
}
::ng-deep .city {
font-weight: 500;
}
import { Injectable } from '@angular/core';
export interface CityPopulation {
value: number;
name: string;
country: string;
}
export interface CitiesPopulation {
name: string;
items: CityPopulation[];
}
const citiesPopulations: CitiesPopulation[] = [{
name: 'Africa',
items: [{
value: 21324000,
name: 'Lagos',
country: 'Nigeria',
}, {
value: 9735000,
name: 'Kinshasa',
country: 'Democratic Republic of the Congo',
}, {
value: 9278441,
name: 'Cairo',
country: 'Egypt',
}],
}, {
name: 'Asia',
items: [{
value: 24256800,
name: 'Shanghai',
country: 'China',
}, {
value: 23500000,
name: 'Karachi',
country: 'Pakistan',
}, {
value: 21516000,
name: 'Beijing',
country: 'China',
}, {
value: 16787941,
name: 'Delhi',
country: 'India',
}, {
value: 15200000,
name: 'Tianjin',
country: 'China',
}],
}, {
name: 'Australia',
items: [{
value: 4840600,
name: 'Sydney',
country: 'Austraila',
}, {
value: 4440000,
name: 'Melbourne',
country: 'Austraila',
}],
}, {
name: 'Europe',
items: [{
value: 14160467,
name: 'Istanbul',
country: 'Turkey',
}, {
value: 12197596,
name: 'Moscow',
country: 'Russia',
}, {
value: 8538689,
name: 'London',
country: 'United Kingdom',
}, {
value: 5191690,
name: 'Saint Petersburg',
country: 'Russia',
}, {
value: 4470800,
name: 'Ankara',
country: 'Turkey',
}, {
value: 3517424,
name: 'Berlin',
country: 'Germany',
}],
}, {
name: 'North America',
items: [{
value: 8874724,
name: 'Mexico City',
country: 'Mexico',
}, {
value: 8550405,
name: 'New York City',
country: 'United States',
}, {
value: 3884307,
name: 'Los Angeles',
country: 'United States',
}, {
value: 2808503,
name: 'Toronto',
country: 'Canada',
}],
}, {
name: 'South America',
items: [{
value: 11895893,
name: 'São Paulo',
country: 'Brazil',
}, {
value: 8693387,
name: 'Lima',
country: 'Peru',
}, {
value: 7776845,
name: 'Bogotá',
country: 'Colombia',
}, {
value: 6429923,
name: 'Rio de Janeiro',
country: 'Brazil',
}],
}];
@Injectable()
export class Service {
getCitiesPopulations() {
return citiesPopulations;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
const componentNames = [
'accordion',
'action-sheet',
'autocomplete',
'bar-gauge',
'box',
'bullet',
'button-group',
'button',
'calendar',
'chart',
'check-box',
'circular-gauge',
'color-box',
'context-menu',
'data-grid',
'date-box',
'date-range-box',
'defer-rendering',
'diagram',
'draggable',
'drawer',
'drop-down-box',
'drop-down-button',
'file-manager',
'file-uploader',
'filter-builder',
'form',
'funnel',
'gallery',
'gantt',
'html-editor',
'linear-gauge',
'list',
'load-indicator',
'load-panel',
'lookup',
'map',
'menu',
'multi-view',
'nested',
'number-box',
'pie-chart',
'pivot-grid-field-chooser',
'pivot-grid',
'polar-chart',
'popover',
'popup',
'progress-bar',
'radio-group',
'range-selector',
'range-slider',
'recurrence-editor',
'resizable',
'responsive-box',
'sankey',
'scheduler',
'scroll-view',
'select-box',
'slider',
'sortable',
'sparkline',
'speed-dial-action',
'splitter',
'switch',
'tab-panel',
'tabs',
'tag-box',
'text-area',
'text-box',
'tile-view',
'toast',
'toolbar',
'tooltip',
'tree-list',
'tree-map',
'tree-view',
'validation-group',
'validation-summary',
'validator',
'vector-map',
];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'@angular/platform-browser-dynamic': {
'esModule': true,
},
'@angular/platform-browser': {
'esModule': true,
},
'@angular/core': {
'esModule': true,
},
'@angular/common': {
'esModule': true,
},
'@angular/common/http': {
'esModule': true,
},
'@angular/compiler': {
'esModule': true,
},
'@angular/animations': {
'esModule': true,
},
'@angular/forms': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
/* @angular */
'@angular/compiler': 'bundles:@angular/compiler.umd.js',
'@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js',
'@angular/core': 'bundles:@angular/core.umd.js',
'@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js',
'@angular/common': 'bundles:@angular/common.umd.js',
'@angular/common/http': 'bundles:@angular/common-http.umd.js',
'@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js',
'@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js',
'@angular/forms': 'bundles:@angular/forms.umd.js',
/* devextreme */
'devextreme': 'npm:devextreme@24.1.7/cjs',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'devextreme/bundles/dx.all': 'npm:devextreme@24.1.7/bundles/dx.all.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.13',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56',
/* devextreme-angular umd maps */
'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js',
'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js',
'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',
...componentNames.reduce((acc, name) => {
acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;
return acc;
}, {}),
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'tslib': 'npm:tslib@2.6.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devexpress-diagram@2.2.13/package.json',
'npm:devexpress-gantt@4.1.56/package.json',
],
};
System.config(window.config);
// System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 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="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.13.3/bundles/zone.umd.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>
Once you assign the data source, specify the valueField and labelField properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are value and name, respectively.
If your data is hierarchical, you also need to specify the childrenField property. The default childrenField property value is items. You can use these data field names to arrange your collection as shown in this demo.
For example, one of the objects in this demo data source looks as follows:
{
name: 'Australia',
items: [{
value: 4840600,
name: 'Sydney',
country: 'Australia',
}, {
value: 4440000,
name: 'Melbourne',
country: 'Australia',
}],
}
This object produces a tile with the Australia label. The Australia tile has two nested tiles labeled Sydney and Melbourne.
To make the TreeMap more informative, you can specify a title and implement a tooltip.