/*! * devextreme-angular-test * Version: 17.2.8 * Build date: Mon Feb 05 2018 * * Copyright (c) 2012 - 2018 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ import { Component, NgModule, ElementRef, NgZone, Input, Output, OnDestroy, Injector, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import DevExpress from 'devextreme/bundles/dx.all'; import DxTreeMap from 'devextreme/viz/tree_map'; import { DxComponent } from '../core/component'; import { DxTemplateHost } from '../core/template-host'; import { DxTemplateModule } from '../core/template'; import { EventsRegistrator } from '../core/events-strategy'; import { NestedOptionHost } from '../core/nested-option'; import { WatcherHelper } from '../core/watcher-helper'; import { IterableDifferHelper } from '../core/iterable-differ-helper'; import { DxoColorizerModule } from './nested/colorizer'; import { DxoExportModule } from './nested/export'; import { DxoGroupModule } from './nested/group'; import { DxoBorderModule } from './nested/border'; import { DxoHoverStyleModule } from './nested/hover-style'; import { DxoLabelModule } from './nested/label'; import { DxoFontModule } from './nested/font'; import { DxoSelectionStyleModule } from './nested/selection-style'; import { DxoLoadingIndicatorModule } from './nested/loading-indicator'; import { DxoSizeModule } from './nested/size'; import { DxoTileModule } from './nested/tile'; import { DxoTitleModule } from './nested/title'; import { DxoMarginModule } from './nested/margin'; import { DxoSubtitleModule } from './nested/subtitle'; import { DxoTooltipModule } from './nested/tooltip'; import { DxoFormatModule } from './nested/format'; import { DxoShadowModule } from './nested/shadow'; /** * The TreeMap is a widget that displays hierarchical data by using nested rectangles. */ @Component({ selector: 'dx-tree-map', template: '', styles: [ ' :host { display: block; }'], providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ] }) export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { instance: DxTreeMap; /** * Specifies the name of the data source field that provides nested items for a group. Applies to hierarchical data sources only. */ @Input() get childrenField(): string { return this._getOption('childrenField'); } set childrenField(value: string) { this._setOption('childrenField', value); } /** * Specifies the name of the data source field that provides colors for tiles. */ @Input() get colorField(): string { return this._getOption('colorField'); } set colorField(value: string) { this._setOption('colorField', value); } /** * Manages the color settings. */ @Input() get colorizer(): any { return this._getOption('colorizer'); } set colorizer(value: any) { this._setOption('colorizer', value); } /** * Specifies the origin of data for the widget. */ @Input() get dataSource(): DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array { return this._getOption('dataSource'); } set dataSource(value: DevExpress.data.DataSource| DevExpress.data.DataSourceOptions| string| Array) { this._setOption('dataSource', value); } /** * Specifies the attributes to be attached to the widget's root element. */ @Input() get elementAttr(): any { return this._getOption('elementAttr'); } set elementAttr(value: any) { this._setOption('elementAttr', value); } /** * Configures the exporting and printing features. */ @Input() get export(): any { return this._getOption('export'); } set export(value: any) { this._setOption('export', value); } /** * Configures groups. */ @Input() get group(): any { return this._getOption('group'); } set group(value: any) { this._setOption('group', value); } /** * Specifies whether tiles and groups change their style when a user pauses on them. */ @Input() get hoverEnabled(): boolean { return this._getOption('hoverEnabled'); } set hoverEnabled(value: boolean) { this._setOption('hoverEnabled', value); } /** * Specifies the name of the data source field that provides IDs for items. Applies to plain data sources only. */ @Input() get idField(): string { return this._getOption('idField'); } set idField(value: string) { this._setOption('idField', value); } /** * Specifies whether the user will interact with a single tile or its group. */ @Input() get interactWithGroup(): boolean { return this._getOption('interactWithGroup'); } set interactWithGroup(value: boolean) { this._setOption('interactWithGroup', value); } /** * Specifies the name of the data source field that provides texts for tile and group labels. */ @Input() get labelField(): string { return this._getOption('labelField'); } set labelField(value: string) { this._setOption('labelField', value); } /** * Specifies the layout algorithm. */ @Input() get layoutAlgorithm(): Function| string { return this._getOption('layoutAlgorithm'); } set layoutAlgorithm(value: Function| string) { this._setOption('layoutAlgorithm', value); } /** * Specifies the direction in which the items will be laid out. */ @Input() get layoutDirection(): string { return this._getOption('layoutDirection'); } set layoutDirection(value: string) { this._setOption('layoutDirection', value); } /** * Configures the loading indicator. */ @Input() get loadingIndicator(): any { return this._getOption('loadingIndicator'); } set loadingIndicator(value: any) { this._setOption('loadingIndicator', value); } /** * Specifies how many hierarchical levels must be visualized. */ @Input() get maxDepth(): number { return this._getOption('maxDepth'); } set maxDepth(value: number) { this._setOption('maxDepth', value); } /** * Specifies the name of the data source field that provides parent IDs for items. Applies to plain data sources only. */ @Input() get parentField(): string { return this._getOption('parentField'); } set parentField(value: string) { this._setOption('parentField', value); } /** * Notifies the widget that it is embedded into an HTML page that uses a tag modifying the path. */ @Input() get pathModified(): boolean { return this._getOption('pathModified'); } set pathModified(value: boolean) { this._setOption('pathModified', value); } /** * Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates. */ @Input() get redrawOnResize(): boolean { return this._getOption('redrawOnResize'); } set redrawOnResize(value: boolean) { this._setOption('redrawOnResize', value); } /** * Decides whether those labels that overflow their tile/group should be hidden or truncated with ellipsis. */ @Input() get resolveLabelOverflow(): string { return this._getOption('resolveLabelOverflow'); } set resolveLabelOverflow(value: string) { this._setOption('resolveLabelOverflow', value); } /** * Switches the widget to a right-to-left representation. */ @Input() get rtlEnabled(): boolean { return this._getOption('rtlEnabled'); } set rtlEnabled(value: boolean) { this._setOption('rtlEnabled', value); } /** * Specifies whether a single or multiple nodes can be in the selected state simultaneously. */ @Input() get selectionMode(): string { return this._getOption('selectionMode'); } set selectionMode(value: string) { this._setOption('selectionMode', value); } /** * Specifies the widget's size in pixels. */ @Input() get size(): any { return this._getOption('size'); } set size(value: any) { this._setOption('size', value); } /** * Sets the name of the theme the widget uses. */ @Input() get theme(): string { return this._getOption('theme'); } set theme(value: string) { this._setOption('theme', value); } /** * Configures tiles. */ @Input() get tile(): any { return this._getOption('tile'); } set tile(value: any) { this._setOption('tile', value); } /** * Configures the widget's title. */ @Input() get title(): string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string } { return this._getOption('title'); } set title(value: string| { font?: DevExpress.viz.Font, horizontalAlignment?: string, margin?: number| { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number, subtitle?: string| { font?: DevExpress.viz.Font, text?: string }, text?: string, verticalAlignment?: string }) { this._setOption('title', value); } /** * Configures tooltips - small pop-up rectangles that display information about a data-visualizing widget element being pressed or hovered over with the mouse pointer. */ @Input() get tooltip(): any { return this._getOption('tooltip'); } set tooltip(value: any) { this._setOption('tooltip', value); } /** * Specifies the name of the data source field that provides values for tiles. */ @Input() get valueField(): string { return this._getOption('valueField'); } set valueField(value: string) { this._setOption('valueField', value); } /** * A handler for the click event. */ @Output() onClick: EventEmitter; /** * A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only. */ @Output() onDisposing: EventEmitter; /** * A handler for the drawn event. Executed when the widget has finished drawing itself. */ @Output() onDrawn: EventEmitter; /** * A handler for the drill event. */ @Output() onDrill: EventEmitter; /** * A handler for the exported event. Executed after data from the widget is exported. */ @Output() onExported: EventEmitter; /** * A handler for the exporting event. Executed before data from the widget is exported. */ @Output() onExporting: EventEmitter; /** * A handler for the fileSaving event. Executed before a file with exported data is saved on the user's local storage. */ @Output() onFileSaving: EventEmitter; /** * A handler for the hoverChanged event. */ @Output() onHoverChanged: EventEmitter; /** * A handler for the incidentOccurred event. Executed when an error or warning appears in the widget. */ @Output() onIncidentOccurred: EventEmitter; /** * A handler for the initialized event. Executed only once, after the widget is initialized. */ @Output() onInitialized: EventEmitter; /** * A handler for the nodesInitialized event. */ @Output() onNodesInitialized: EventEmitter; /** * A handler for the nodesRendering event. */ @Output() onNodesRendering: EventEmitter; /** * A handler for the optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * A handler for the selectionChanged event. */ @Output() onSelectionChanged: EventEmitter; /** * A handler for the childrenFieldChange event. */ @Output() childrenFieldChange: EventEmitter; /** * A handler for the colorFieldChange event. */ @Output() colorFieldChange: EventEmitter; /** * A handler for the colorizerChange event. */ @Output() colorizerChange: EventEmitter; /** * A handler for the dataSourceChange event. */ @Output() dataSourceChange: EventEmitter>; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the exportChange event. */ @Output() exportChange: EventEmitter; /** * A handler for the groupChange event. */ @Output() groupChange: EventEmitter; /** * A handler for the hoverEnabledChange event. */ @Output() hoverEnabledChange: EventEmitter; /** * A handler for the idFieldChange event. */ @Output() idFieldChange: EventEmitter; /** * A handler for the interactWithGroupChange event. */ @Output() interactWithGroupChange: EventEmitter; /** * A handler for the labelFieldChange event. */ @Output() labelFieldChange: EventEmitter; /** * A handler for the layoutAlgorithmChange event. */ @Output() layoutAlgorithmChange: EventEmitter; /** * A handler for the layoutDirectionChange event. */ @Output() layoutDirectionChange: EventEmitter; /** * A handler for the loadingIndicatorChange event. */ @Output() loadingIndicatorChange: EventEmitter; /** * A handler for the maxDepthChange event. */ @Output() maxDepthChange: EventEmitter; /** * A handler for the parentFieldChange event. */ @Output() parentFieldChange: EventEmitter; /** * A handler for the pathModifiedChange event. */ @Output() pathModifiedChange: EventEmitter; /** * A handler for the redrawOnResizeChange event. */ @Output() redrawOnResizeChange: EventEmitter; /** * A handler for the resolveLabelOverflowChange event. */ @Output() resolveLabelOverflowChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the selectionModeChange event. */ @Output() selectionModeChange: EventEmitter; /** * A handler for the sizeChange event. */ @Output() sizeChange: EventEmitter; /** * A handler for the themeChange event. */ @Output() themeChange: EventEmitter; /** * A handler for the tileChange event. */ @Output() tileChange: EventEmitter; /** * A handler for the titleChange event. */ @Output() titleChange: EventEmitter; /** * A handler for the tooltipChange event. */ @Output() tooltipChange: EventEmitter; /** * A handler for the valueFieldChange event. */ @Output() valueFieldChange: EventEmitter; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, injector: Injector, private _watcherHelper: WatcherHelper, private _idh: IterableDifferHelper, optionHost: NestedOptionHost) { super(elementRef, ngZone, templateHost, _watcherHelper); injector.get(EventsRegistrator); this._createEventEmitters([ { subscribe: 'click', emit: 'onClick' }, { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'drawn', emit: 'onDrawn' }, { subscribe: 'drill', emit: 'onDrill' }, { subscribe: 'exported', emit: 'onExported' }, { subscribe: 'exporting', emit: 'onExporting' }, { subscribe: 'fileSaving', emit: 'onFileSaving' }, { subscribe: 'hoverChanged', emit: 'onHoverChanged' }, { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'nodesInitialized', emit: 'onNodesInitialized' }, { subscribe: 'nodesRendering', emit: 'onNodesRendering' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'selectionChanged', emit: 'onSelectionChanged' }, { emit: 'childrenFieldChange' }, { emit: 'colorFieldChange' }, { emit: 'colorizerChange' }, { emit: 'dataSourceChange' }, { emit: 'elementAttrChange' }, { emit: 'exportChange' }, { emit: 'groupChange' }, { emit: 'hoverEnabledChange' }, { emit: 'idFieldChange' }, { emit: 'interactWithGroupChange' }, { emit: 'labelFieldChange' }, { emit: 'layoutAlgorithmChange' }, { emit: 'layoutDirectionChange' }, { emit: 'loadingIndicatorChange' }, { emit: 'maxDepthChange' }, { emit: 'parentFieldChange' }, { emit: 'pathModifiedChange' }, { emit: 'redrawOnResizeChange' }, { emit: 'resolveLabelOverflowChange' }, { emit: 'rtlEnabledChange' }, { emit: 'selectionModeChange' }, { emit: 'sizeChange' }, { emit: 'themeChange' }, { emit: 'tileChange' }, { emit: 'titleChange' }, { emit: 'tooltipChange' }, { emit: 'valueFieldChange' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxTreeMap(element, options); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); this.setupChanges('dataSource', changes); } setupChanges(prop: string, changes: SimpleChanges) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('dataSource'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); } _setOption(name: string, value: any) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } } @NgModule({ imports: [ DxoColorizerModule, DxoExportModule, DxoGroupModule, DxoBorderModule, DxoHoverStyleModule, DxoLabelModule, DxoFontModule, DxoSelectionStyleModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTileModule, DxoTitleModule, DxoMarginModule, DxoSubtitleModule, DxoTooltipModule, DxoFormatModule, DxoShadowModule, DxTemplateModule ], declarations: [ DxTreeMapComponent ], exports: [ DxTreeMapComponent, DxoColorizerModule, DxoExportModule, DxoGroupModule, DxoBorderModule, DxoHoverStyleModule, DxoLabelModule, DxoFontModule, DxoSelectionStyleModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTileModule, DxoTitleModule, DxoMarginModule, DxoSubtitleModule, DxoTooltipModule, DxoFormatModule, DxoShadowModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxTreeMapModule { }