devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
642 lines (612 loc) • 23.2 kB
JavaScript
import * as i2 from '@angular/platform-browser';
import { BrowserTransferStateModule } from '@angular/platform-browser';
import * as i0 from '@angular/core';
import { PLATFORM_ID, Component, Inject, Input, Output, NgModule } from '@angular/core';
import DxSankey from 'devextreme/viz/sankey';
import * as i1 from 'devextreme-angular/core';
import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core';
import { DxoAdaptiveLayoutModule, DxoExportModule, DxoLabelModule, DxoBorderModule, DxoFontModule, DxoShadowModule, DxoLinkModule, DxoHoverStyleModule, DxoHatchingModule, DxoLoadingIndicatorModule, DxoMarginModule, DxoNodeModule, DxoSizeModule, DxoTitleModule, DxoSubtitleModule, DxoTooltipModule, DxoFormatModule } from 'devextreme-angular/ui/nested';
/*!
* devextreme-angular
* Version: 22.1.14
* Build date: Mon Apr 29 2024
*
* Copyright (c) 2012 - 2024 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
*/
/**
* The Sankey is a UI component that visualizes the flow magnitude between value sets. The values being connected are called nodes; the connections - links. The higher the flow magnitude, the wider the link is.
*/
class DxSankeyComponent extends DxComponent {
constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
this._watcherHelper = _watcherHelper;
this._idh = _idh;
this._createEventEmitters([
{ subscribe: 'disposing', emit: 'onDisposing' },
{ subscribe: 'drawn', emit: 'onDrawn' },
{ subscribe: 'exported', emit: 'onExported' },
{ subscribe: 'exporting', emit: 'onExporting' },
{ subscribe: 'fileSaving', emit: 'onFileSaving' },
{ subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },
{ subscribe: 'initialized', emit: 'onInitialized' },
{ subscribe: 'linkClick', emit: 'onLinkClick' },
{ subscribe: 'linkHoverChanged', emit: 'onLinkHoverChanged' },
{ subscribe: 'nodeClick', emit: 'onNodeClick' },
{ subscribe: 'nodeHoverChanged', emit: 'onNodeHoverChanged' },
{ subscribe: 'optionChanged', emit: 'onOptionChanged' },
{ emit: 'adaptiveLayoutChange' },
{ emit: 'alignmentChange' },
{ emit: 'dataSourceChange' },
{ emit: 'disabledChange' },
{ emit: 'elementAttrChange' },
{ emit: 'exportChange' },
{ emit: 'hoverEnabledChange' },
{ emit: 'labelChange' },
{ emit: 'linkChange' },
{ emit: 'loadingIndicatorChange' },
{ emit: 'marginChange' },
{ emit: 'nodeChange' },
{ emit: 'paletteChange' },
{ emit: 'paletteExtensionModeChange' },
{ emit: 'pathModifiedChange' },
{ emit: 'redrawOnResizeChange' },
{ emit: 'rtlEnabledChange' },
{ emit: 'sizeChange' },
{ emit: 'sortDataChange' },
{ emit: 'sourceFieldChange' },
{ emit: 'targetFieldChange' },
{ emit: 'themeChange' },
{ emit: 'titleChange' },
{ emit: 'tooltipChange' },
{ emit: 'weightFieldChange' }
]);
this._idh.setHost(this);
optionHost.setHost(this);
}
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout() {
return this._getOption('adaptiveLayout');
}
set adaptiveLayout(value) {
this._setOption('adaptiveLayout', value);
}
/**
* Aligns node columns vertically.
*/
get alignment() {
return this._getOption('alignment');
}
set alignment(value) {
this._setOption('alignment', value);
}
/**
* Binds the UI component to data.
*/
get dataSource() {
return this._getOption('dataSource');
}
set dataSource(value) {
this._setOption('dataSource', value);
}
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled() {
return this._getOption('disabled');
}
set disabled(value) {
this._setOption('disabled', value);
}
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr() {
return this._getOption('elementAttr');
}
set elementAttr(value) {
this._setOption('elementAttr', value);
}
/**
* Configures the exporting and printing features.
*/
get export() {
return this._getOption('export');
}
set export(value) {
this._setOption('export', value);
}
/**
* Specifies whether nodes and links change their style when they are hovered over or pressed.
*/
get hoverEnabled() {
return this._getOption('hoverEnabled');
}
set hoverEnabled(value) {
this._setOption('hoverEnabled', value);
}
/**
* Configures sankey nodes' labels.
*/
get label() {
return this._getOption('label');
}
set label(value) {
this._setOption('label', value);
}
/**
* Configures sankey links' appearance.
*/
get link() {
return this._getOption('link');
}
set link(value) {
this._setOption('link', value);
}
/**
* Configures the loading indicator.
*/
get loadingIndicator() {
return this._getOption('loadingIndicator');
}
set loadingIndicator(value) {
this._setOption('loadingIndicator', value);
}
/**
* Generates space around the UI component.
*/
get margin() {
return this._getOption('margin');
}
set margin(value) {
this._setOption('margin', value);
}
/**
* Configures sankey nodes' appearance.
*/
get node() {
return this._getOption('node');
}
set node(value) {
this._setOption('node', value);
}
/**
* Sets the palette to be used to colorize sankey nodes.
*/
get palette() {
return this._getOption('palette');
}
set palette(value) {
this._setOption('palette', value);
}
/**
* Specifies how to extend the palette when it contains less colors than the number of sankey nodes.
*/
get paletteExtensionMode() {
return this._getOption('paletteExtensionMode');
}
set paletteExtensionMode(value) {
this._setOption('paletteExtensionMode', value);
}
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified() {
return this._getOption('pathModified');
}
set pathModified(value) {
this._setOption('pathModified', value);
}
/**
* Specifies whether to redraw the UI component when the size of the parent browser window changes or a mobile device rotates.
*/
get redrawOnResize() {
return this._getOption('redrawOnResize');
}
set redrawOnResize(value) {
this._setOption('redrawOnResize', value);
}
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled() {
return this._getOption('rtlEnabled');
}
set rtlEnabled(value) {
this._setOption('rtlEnabled', value);
}
/**
* Specifies the UI component's size in pixels.
*/
get size() {
return this._getOption('size');
}
set size(value) {
this._setOption('size', value);
}
/**
* Specifies nodes' sorting order in their columns.
*/
get sortData() {
return this._getOption('sortData');
}
set sortData(value) {
this._setOption('sortData', value);
}
/**
* Specifies which data source field provides links' source nodes.
*/
get sourceField() {
return this._getOption('sourceField');
}
set sourceField(value) {
this._setOption('sourceField', value);
}
/**
* Specifies which data source field provides links' target nodes.
*/
get targetField() {
return this._getOption('targetField');
}
set targetField(value) {
this._setOption('targetField', value);
}
/**
* Sets the name of the theme the UI component uses.
*/
get theme() {
return this._getOption('theme');
}
set theme(value) {
this._setOption('theme', value);
}
/**
* Configures the UI component's title.
*/
get title() {
return this._getOption('title');
}
set title(value) {
this._setOption('title', value);
}
/**
* Configures tooltips - small pop-up rectangles that display information about a data-visualizing UI component element being pressed or hovered over with the mouse pointer.
*/
get tooltip() {
return this._getOption('tooltip');
}
set tooltip(value) {
this._setOption('tooltip', value);
}
/**
* Specifies which data source field provides links' weights.
*/
get weightField() {
return this._getOption('weightField');
}
set weightField(value) {
this._setOption('weightField', value);
}
_createInstance(element, options) {
return new DxSankey(element, options);
}
ngOnDestroy() {
this._destroyWidget();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
this.setupChanges('alignment', changes);
this.setupChanges('dataSource', changes);
this.setupChanges('palette', changes);
}
setupChanges(prop, changes) {
if (!(prop in this._optionsToUpdate)) {
this._idh.setup(prop, changes);
}
}
ngDoCheck() {
this._idh.doCheck('alignment');
this._idh.doCheck('dataSource');
this._idh.doCheck('palette');
this._watcherHelper.checkWatchers();
super.ngDoCheck();
super.clearChangedOptions();
}
_setOption(name, value) {
let isSetup = this._idh.setupSingle(name, value);
let isChanged = this._idh.getChanges(name, value) !== null;
if (isSetup || isChanged) {
super._setOption(name, value);
}
}
}
/** @nocollapse */ DxSankeyComponent.ɵfac = function DxSankeyComponent_Factory(t) { return new (t || DxSankeyComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.DxTemplateHost), i0.ɵɵdirectiveInject(i1.WatcherHelper), i0.ɵɵdirectiveInject(i1.IterableDifferHelper), i0.ɵɵdirectiveInject(i1.NestedOptionHost), i0.ɵɵdirectiveInject(i2.TransferState), i0.ɵɵdirectiveInject(PLATFORM_ID)); };
/** @nocollapse */ DxSankeyComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DxSankeyComponent, selectors: [["dx-sankey"]], inputs: { adaptiveLayout: "adaptiveLayout", alignment: "alignment", dataSource: "dataSource", disabled: "disabled", elementAttr: "elementAttr", export: "export", hoverEnabled: "hoverEnabled", label: "label", link: "link", loadingIndicator: "loadingIndicator", margin: "margin", node: "node", palette: "palette", paletteExtensionMode: "paletteExtensionMode", pathModified: "pathModified", redrawOnResize: "redrawOnResize", rtlEnabled: "rtlEnabled", size: "size", sortData: "sortData", sourceField: "sourceField", targetField: "targetField", theme: "theme", title: "title", tooltip: "tooltip", weightField: "weightField" }, outputs: { onDisposing: "onDisposing", onDrawn: "onDrawn", onExported: "onExported", onExporting: "onExporting", onFileSaving: "onFileSaving", onIncidentOccurred: "onIncidentOccurred", onInitialized: "onInitialized", onLinkClick: "onLinkClick", onLinkHoverChanged: "onLinkHoverChanged", onNodeClick: "onNodeClick", onNodeHoverChanged: "onNodeHoverChanged", onOptionChanged: "onOptionChanged", adaptiveLayoutChange: "adaptiveLayoutChange", alignmentChange: "alignmentChange", dataSourceChange: "dataSourceChange", disabledChange: "disabledChange", elementAttrChange: "elementAttrChange", exportChange: "exportChange", hoverEnabledChange: "hoverEnabledChange", labelChange: "labelChange", linkChange: "linkChange", loadingIndicatorChange: "loadingIndicatorChange", marginChange: "marginChange", nodeChange: "nodeChange", paletteChange: "paletteChange", paletteExtensionModeChange: "paletteExtensionModeChange", pathModifiedChange: "pathModifiedChange", redrawOnResizeChange: "redrawOnResizeChange", rtlEnabledChange: "rtlEnabledChange", sizeChange: "sizeChange", sortDataChange: "sortDataChange", sourceFieldChange: "sourceFieldChange", targetFieldChange: "targetFieldChange", themeChange: "themeChange", titleChange: "titleChange", tooltipChange: "tooltipChange", weightFieldChange: "weightFieldChange" }, features: [i0.ɵɵProvidersFeature([
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function DxSankeyComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display: block; }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxSankeyComponent, [{
type: Component,
args: [{
selector: 'dx-sankey',
template: '',
styles: [' :host { display: block; }'],
providers: [
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]
}]
}], function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i2.TransferState }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, { adaptiveLayout: [{
type: Input
}], alignment: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], elementAttr: [{
type: Input
}], export: [{
type: Input
}], hoverEnabled: [{
type: Input
}], label: [{
type: Input
}], link: [{
type: Input
}], loadingIndicator: [{
type: Input
}], margin: [{
type: Input
}], node: [{
type: Input
}], palette: [{
type: Input
}], paletteExtensionMode: [{
type: Input
}], pathModified: [{
type: Input
}], redrawOnResize: [{
type: Input
}], rtlEnabled: [{
type: Input
}], size: [{
type: Input
}], sortData: [{
type: Input
}], sourceField: [{
type: Input
}], targetField: [{
type: Input
}], theme: [{
type: Input
}], title: [{
type: Input
}], tooltip: [{
type: Input
}], weightField: [{
type: Input
}], onDisposing: [{
type: Output
}], onDrawn: [{
type: Output
}], onExported: [{
type: Output
}], onExporting: [{
type: Output
}], onFileSaving: [{
type: Output
}], onIncidentOccurred: [{
type: Output
}], onInitialized: [{
type: Output
}], onLinkClick: [{
type: Output
}], onLinkHoverChanged: [{
type: Output
}], onNodeClick: [{
type: Output
}], onNodeHoverChanged: [{
type: Output
}], onOptionChanged: [{
type: Output
}], adaptiveLayoutChange: [{
type: Output
}], alignmentChange: [{
type: Output
}], dataSourceChange: [{
type: Output
}], disabledChange: [{
type: Output
}], elementAttrChange: [{
type: Output
}], exportChange: [{
type: Output
}], hoverEnabledChange: [{
type: Output
}], labelChange: [{
type: Output
}], linkChange: [{
type: Output
}], loadingIndicatorChange: [{
type: Output
}], marginChange: [{
type: Output
}], nodeChange: [{
type: Output
}], paletteChange: [{
type: Output
}], paletteExtensionModeChange: [{
type: Output
}], pathModifiedChange: [{
type: Output
}], redrawOnResizeChange: [{
type: Output
}], rtlEnabledChange: [{
type: Output
}], sizeChange: [{
type: Output
}], sortDataChange: [{
type: Output
}], sourceFieldChange: [{
type: Output
}], targetFieldChange: [{
type: Output
}], themeChange: [{
type: Output
}], titleChange: [{
type: Output
}], tooltipChange: [{
type: Output
}], weightFieldChange: [{
type: Output
}] }); })();
class DxSankeyModule {
}
/** @nocollapse */ DxSankeyModule.ɵfac = function DxSankeyModule_Factory(t) { return new (t || DxSankeyModule)(); };
/** @nocollapse */ DxSankeyModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: DxSankeyModule });
/** @nocollapse */ DxSankeyModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
], DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxTemplateModule] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxSankeyModule, [{
type: NgModule,
args: [{
imports: [
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
],
declarations: [
DxSankeyComponent
],
exports: [
DxSankeyComponent,
DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxTemplateModule
]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DxSankeyModule, { declarations: [DxSankeyComponent], imports: [DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule], exports: [DxSankeyComponent, DxoAdaptiveLayoutModule,
DxoExportModule,
DxoLabelModule,
DxoBorderModule,
DxoFontModule,
DxoShadowModule,
DxoLinkModule,
DxoHoverStyleModule,
DxoHatchingModule,
DxoLoadingIndicatorModule,
DxoMarginModule,
DxoNodeModule,
DxoSizeModule,
DxoTitleModule,
DxoSubtitleModule,
DxoTooltipModule,
DxoFormatModule,
DxTemplateModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { DxSankeyComponent, DxSankeyModule };
//# sourceMappingURL=devextreme-angular-ui-sankey.js.map