devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
643 lines (612 loc) • 23.1 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 DxBarGauge from 'devextreme/viz/bar_gauge';
import * as i1 from 'devextreme-angular/core';
import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core';
import { DxoAnimationModule, DxoExportModule, DxoGeometryModule, DxoLabelModule, DxoFontModule, DxoFormatModule, DxoLegendModule, DxoBorderModule, DxoItemTextFormatModule, DxoMarginModule, DxoTitleModule, DxoSubtitleModule, DxoLoadingIndicatorModule, DxoSizeModule, DxoTooltipModule, DxoShadowModule } 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 BarGauge UI component contains several circular bars that each indicates a single value.
*/
class DxBarGaugeComponent 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: 'optionChanged', emit: 'onOptionChanged' },
{ subscribe: 'tooltipHidden', emit: 'onTooltipHidden' },
{ subscribe: 'tooltipShown', emit: 'onTooltipShown' },
{ emit: 'animationChange' },
{ emit: 'backgroundColorChange' },
{ emit: 'barSpacingChange' },
{ emit: 'baseValueChange' },
{ emit: 'disabledChange' },
{ emit: 'elementAttrChange' },
{ emit: 'endValueChange' },
{ emit: 'exportChange' },
{ emit: 'geometryChange' },
{ emit: 'labelChange' },
{ emit: 'legendChange' },
{ emit: 'loadingIndicatorChange' },
{ emit: 'marginChange' },
{ emit: 'paletteChange' },
{ emit: 'paletteExtensionModeChange' },
{ emit: 'pathModifiedChange' },
{ emit: 'redrawOnResizeChange' },
{ emit: 'relativeInnerRadiusChange' },
{ emit: 'resolveLabelOverlappingChange' },
{ emit: 'rtlEnabledChange' },
{ emit: 'sizeChange' },
{ emit: 'startValueChange' },
{ emit: 'themeChange' },
{ emit: 'titleChange' },
{ emit: 'tooltipChange' },
{ emit: 'valuesChange' }
]);
this._idh.setHost(this);
optionHost.setHost(this);
}
/**
* Specifies animation properties.
*/
get animation() {
return this._getOption('animation');
}
set animation(value) {
this._setOption('animation', value);
}
/**
* Specifies a color for the remaining segment of the bar's track.
*/
get backgroundColor() {
return this._getOption('backgroundColor');
}
set backgroundColor(value) {
this._setOption('backgroundColor', value);
}
/**
* Specifies a distance between bars in pixels.
*/
get barSpacing() {
return this._getOption('barSpacing');
}
set barSpacing(value) {
this._setOption('barSpacing', value);
}
/**
* Specifies a base value for bars.
*/
get baseValue() {
return this._getOption('baseValue');
}
set baseValue(value) {
this._setOption('baseValue', 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);
}
/**
* Specifies an end value for the gauge's invisible scale.
*/
get endValue() {
return this._getOption('endValue');
}
set endValue(value) {
this._setOption('endValue', value);
}
/**
* Configures the exporting and printing features.
*/
get export() {
return this._getOption('export');
}
set export(value) {
this._setOption('export', value);
}
/**
* Defines the shape of the gauge's arc.
*/
get geometry() {
return this._getOption('geometry');
}
set geometry(value) {
this._setOption('geometry', value);
}
/**
* Specifies the properties of the labels that accompany gauge bars.
*/
get label() {
return this._getOption('label');
}
set label(value) {
this._setOption('label', value);
}
/**
* Configures the legend.
*/
get legend() {
return this._getOption('legend');
}
set legend(value) {
this._setOption('legend', 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);
}
/**
* Sets the palette to be used for colorizing bars in the gauge.
*/
get palette() {
return this._getOption('palette');
}
set palette(value) {
this._setOption('palette', value);
}
/**
* Specifies what to do with colors in the palette when their number is less than the number of bars in the gauge.
*/
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);
}
/**
* Defines the radius of the bar that is closest to the center relatively to the radius of the topmost bar.
*/
get relativeInnerRadius() {
return this._getOption('relativeInnerRadius');
}
set relativeInnerRadius(value) {
this._setOption('relativeInnerRadius', value);
}
/**
* Specifies how the UI component should behave when bar labels overlap: hide certain labels or leave them overlapped.
*/
get resolveLabelOverlapping() {
return this._getOption('resolveLabelOverlapping');
}
set resolveLabelOverlapping(value) {
this._setOption('resolveLabelOverlapping', 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 a start value for the gauge's invisible scale.
*/
get startValue() {
return this._getOption('startValue');
}
set startValue(value) {
this._setOption('startValue', 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.
*/
get tooltip() {
return this._getOption('tooltip');
}
set tooltip(value) {
this._setOption('tooltip', value);
}
/**
* Specifies the array of values to be indicated on a bar gauge.
*/
get values() {
return this._getOption('values');
}
set values(value) {
this._setOption('values', value);
}
_createInstance(element, options) {
return new DxBarGauge(element, options);
}
ngOnDestroy() {
this._destroyWidget();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
this.setupChanges('palette', changes);
this.setupChanges('values', changes);
}
setupChanges(prop, changes) {
if (!(prop in this._optionsToUpdate)) {
this._idh.setup(prop, changes);
}
}
ngDoCheck() {
this._idh.doCheck('palette');
this._idh.doCheck('values');
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 */ DxBarGaugeComponent.ɵfac = function DxBarGaugeComponent_Factory(t) { return new (t || DxBarGaugeComponent)(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 */ DxBarGaugeComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DxBarGaugeComponent, selectors: [["dx-bar-gauge"]], inputs: { animation: "animation", backgroundColor: "backgroundColor", barSpacing: "barSpacing", baseValue: "baseValue", disabled: "disabled", elementAttr: "elementAttr", endValue: "endValue", export: "export", geometry: "geometry", label: "label", legend: "legend", loadingIndicator: "loadingIndicator", margin: "margin", palette: "palette", paletteExtensionMode: "paletteExtensionMode", pathModified: "pathModified", redrawOnResize: "redrawOnResize", relativeInnerRadius: "relativeInnerRadius", resolveLabelOverlapping: "resolveLabelOverlapping", rtlEnabled: "rtlEnabled", size: "size", startValue: "startValue", theme: "theme", title: "title", tooltip: "tooltip", values: "values" }, outputs: { onDisposing: "onDisposing", onDrawn: "onDrawn", onExported: "onExported", onExporting: "onExporting", onFileSaving: "onFileSaving", onIncidentOccurred: "onIncidentOccurred", onInitialized: "onInitialized", onOptionChanged: "onOptionChanged", onTooltipHidden: "onTooltipHidden", onTooltipShown: "onTooltipShown", animationChange: "animationChange", backgroundColorChange: "backgroundColorChange", barSpacingChange: "barSpacingChange", baseValueChange: "baseValueChange", disabledChange: "disabledChange", elementAttrChange: "elementAttrChange", endValueChange: "endValueChange", exportChange: "exportChange", geometryChange: "geometryChange", labelChange: "labelChange", legendChange: "legendChange", loadingIndicatorChange: "loadingIndicatorChange", marginChange: "marginChange", paletteChange: "paletteChange", paletteExtensionModeChange: "paletteExtensionModeChange", pathModifiedChange: "pathModifiedChange", redrawOnResizeChange: "redrawOnResizeChange", relativeInnerRadiusChange: "relativeInnerRadiusChange", resolveLabelOverlappingChange: "resolveLabelOverlappingChange", rtlEnabledChange: "rtlEnabledChange", sizeChange: "sizeChange", startValueChange: "startValueChange", themeChange: "themeChange", titleChange: "titleChange", tooltipChange: "tooltipChange", valuesChange: "valuesChange" }, features: [i0.ɵɵProvidersFeature([
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function DxBarGaugeComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%] { display: block; }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxBarGaugeComponent, [{
type: Component,
args: [{
selector: 'dx-bar-gauge',
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]
}] }]; }, { animation: [{
type: Input
}], backgroundColor: [{
type: Input
}], barSpacing: [{
type: Input
}], baseValue: [{
type: Input
}], disabled: [{
type: Input
}], elementAttr: [{
type: Input
}], endValue: [{
type: Input
}], export: [{
type: Input
}], geometry: [{
type: Input
}], label: [{
type: Input
}], legend: [{
type: Input
}], loadingIndicator: [{
type: Input
}], margin: [{
type: Input
}], palette: [{
type: Input
}], paletteExtensionMode: [{
type: Input
}], pathModified: [{
type: Input
}], redrawOnResize: [{
type: Input
}], relativeInnerRadius: [{
type: Input
}], resolveLabelOverlapping: [{
type: Input
}], rtlEnabled: [{
type: Input
}], size: [{
type: Input
}], startValue: [{
type: Input
}], theme: [{
type: Input
}], title: [{
type: Input
}], tooltip: [{
type: Input
}], values: [{
type: Input
}], onDisposing: [{
type: Output
}], onDrawn: [{
type: Output
}], onExported: [{
type: Output
}], onExporting: [{
type: Output
}], onFileSaving: [{
type: Output
}], onIncidentOccurred: [{
type: Output
}], onInitialized: [{
type: Output
}], onOptionChanged: [{
type: Output
}], onTooltipHidden: [{
type: Output
}], onTooltipShown: [{
type: Output
}], animationChange: [{
type: Output
}], backgroundColorChange: [{
type: Output
}], barSpacingChange: [{
type: Output
}], baseValueChange: [{
type: Output
}], disabledChange: [{
type: Output
}], elementAttrChange: [{
type: Output
}], endValueChange: [{
type: Output
}], exportChange: [{
type: Output
}], geometryChange: [{
type: Output
}], labelChange: [{
type: Output
}], legendChange: [{
type: Output
}], loadingIndicatorChange: [{
type: Output
}], marginChange: [{
type: Output
}], paletteChange: [{
type: Output
}], paletteExtensionModeChange: [{
type: Output
}], pathModifiedChange: [{
type: Output
}], redrawOnResizeChange: [{
type: Output
}], relativeInnerRadiusChange: [{
type: Output
}], resolveLabelOverlappingChange: [{
type: Output
}], rtlEnabledChange: [{
type: Output
}], sizeChange: [{
type: Output
}], startValueChange: [{
type: Output
}], themeChange: [{
type: Output
}], titleChange: [{
type: Output
}], tooltipChange: [{
type: Output
}], valuesChange: [{
type: Output
}] }); })();
class DxBarGaugeModule {
}
/** @nocollapse */ DxBarGaugeModule.ɵfac = function DxBarGaugeModule_Factory(t) { return new (t || DxBarGaugeModule)(); };
/** @nocollapse */ DxBarGaugeModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: DxBarGaugeModule });
/** @nocollapse */ DxBarGaugeModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[
DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
], DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DxBarGaugeModule, [{
type: NgModule,
args: [{
imports: [
DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule
],
declarations: [
DxBarGaugeComponent
],
exports: [
DxBarGaugeComponent,
DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule
]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DxBarGaugeModule, { declarations: [DxBarGaugeComponent], imports: [DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxIntegrationModule,
DxTemplateModule,
BrowserTransferStateModule], exports: [DxBarGaugeComponent, DxoAnimationModule,
DxoExportModule,
DxoGeometryModule,
DxoLabelModule,
DxoFontModule,
DxoFormatModule,
DxoLegendModule,
DxoBorderModule,
DxoItemTextFormatModule,
DxoMarginModule,
DxoTitleModule,
DxoSubtitleModule,
DxoLoadingIndicatorModule,
DxoSizeModule,
DxoTooltipModule,
DxoShadowModule,
DxTemplateModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { DxBarGaugeComponent, DxBarGaugeModule };
//# sourceMappingURL=devextreme-angular-ui-bar-gauge.js.map