/*! * 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 DxSparkline from 'devextreme/viz/sparkline'; 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 { DxoMarginModule } from './nested/margin'; import { DxoSizeModule } from './nested/size'; import { DxoTooltipModule } from './nested/tooltip'; import { DxoBorderModule } from './nested/border'; import { DxoFontModule } from './nested/font'; import { DxoFormatModule } from './nested/format'; import { DxoShadowModule } from './nested/shadow'; /** * The Sparkline widget is a compact chart that contains only one series. Owing to their size, sparklines occupy very little space and can be easily collected in a table or embedded straight in text. */ @Component({ selector: 'dx-sparkline', template: '', styles: [ ' :host { display: block; }'], providers: [ DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper ] }) export class DxSparklineComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { instance: DxSparkline; /** * Specifies the data source field that provides arguments for a sparkline. */ @Input() get argumentField(): string { return this._getOption('argumentField'); } set argumentField(value: string) { this._setOption('argumentField', value); } /** * Sets a color for the bars indicating negative values. Available for a sparkline of the bar type only. */ @Input() get barNegativeColor(): string { return this._getOption('barNegativeColor'); } set barNegativeColor(value: string) { this._setOption('barNegativeColor', value); } /** * Sets a color for the bars indicating positive values. Available for a sparkline of the bar type only. */ @Input() get barPositiveColor(): string { return this._getOption('barPositiveColor'); } set barPositiveColor(value: string) { this._setOption('barPositiveColor', value); } /** * Specifies a data source for the sparkline. */ @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); } /** * Sets a color for the boundary of both the first and last points on a sparkline. */ @Input() get firstLastColor(): string { return this._getOption('firstLastColor'); } set firstLastColor(value: string) { this._setOption('firstLastColor', value); } /** * Specifies whether a sparkline ignores null data points or not. */ @Input() get ignoreEmptyPoints(): boolean { return this._getOption('ignoreEmptyPoints'); } set ignoreEmptyPoints(value: boolean) { this._setOption('ignoreEmptyPoints', value); } /** * Sets a color for a line on a sparkline. Available for the sparklines of the line- and area-like types. */ @Input() get lineColor(): string { return this._getOption('lineColor'); } set lineColor(value: string) { this._setOption('lineColor', value); } /** * Specifies a width for a line on a sparkline. Available for the sparklines of the line- and area-like types. */ @Input() get lineWidth(): number { return this._getOption('lineWidth'); } set lineWidth(value: number) { this._setOption('lineWidth', value); } /** * Sets a color for the bars indicating the values that are less than the winloss threshold. Available for a sparkline of the winloss type only. */ @Input() get lossColor(): string { return this._getOption('lossColor'); } set lossColor(value: string) { this._setOption('lossColor', value); } /** * Generates space around the widget. */ @Input() get margin(): any { return this._getOption('margin'); } set margin(value: any) { this._setOption('margin', value); } /** * Sets a color for the boundary of the maximum point on a sparkline. */ @Input() get maxColor(): string { return this._getOption('maxColor'); } set maxColor(value: string) { this._setOption('maxColor', value); } /** * Specifies the maximum value of the sparkline's value axis. */ @Input() get maxValue(): number { return this._getOption('maxValue'); } set maxValue(value: number) { this._setOption('maxValue', value); } /** * Sets a color for the boundary of the minimum point on a sparkline. */ @Input() get minColor(): string { return this._getOption('minColor'); } set minColor(value: string) { this._setOption('minColor', value); } /** * Specifies the minimum value of the sparkline value axis. */ @Input() get minValue(): number { return this._getOption('minValue'); } set minValue(value: number) { this._setOption('minValue', 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); } /** * Sets a color for points on a sparkline. Available for the sparklines of the line- and area-like types. */ @Input() get pointColor(): string { return this._getOption('pointColor'); } set pointColor(value: string) { this._setOption('pointColor', value); } /** * Specifies the diameter of sparkline points in pixels. Available for the sparklines of line- and area-like types. */ @Input() get pointSize(): number { return this._getOption('pointSize'); } set pointSize(value: number) { this._setOption('pointSize', value); } /** * Specifies a symbol to use as a point marker on a sparkline. Available for the sparklines of the line- and area-like types. */ @Input() get pointSymbol(): string { return this._getOption('pointSymbol'); } set pointSymbol(value: string) { this._setOption('pointSymbol', 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 or not to indicate both the first and last values on a sparkline. */ @Input() get showFirstLast(): boolean { return this._getOption('showFirstLast'); } set showFirstLast(value: boolean) { this._setOption('showFirstLast', value); } /** * Specifies whether or not to indicate both the minimum and maximum values on a sparkline. */ @Input() get showMinMax(): boolean { return this._getOption('showMinMax'); } set showMinMax(value: boolean) { this._setOption('showMinMax', 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 the tooltip. */ @Input() get tooltip(): any { return this._getOption('tooltip'); } set tooltip(value: any) { this._setOption('tooltip', value); } /** * Determines the type of a sparkline. */ @Input() get type(): string { return this._getOption('type'); } set type(value: string) { this._setOption('type', value); } /** * Specifies the data source field that provides values for a sparkline. */ @Input() get valueField(): string { return this._getOption('valueField'); } set valueField(value: string) { this._setOption('valueField', value); } /** * Sets a color for the bars indicating the values greater than a winloss threshold. Available for a sparkline of the winloss type only. */ @Input() get winColor(): string { return this._getOption('winColor'); } set winColor(value: string) { this._setOption('winColor', value); } /** * Specifies a value that serves as a threshold for the sparkline of the winloss type. */ @Input() get winlossThreshold(): number { return this._getOption('winlossThreshold'); } set winlossThreshold(value: number) { this._setOption('winlossThreshold', value); } /** * 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 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 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 optionChanged event. Executed after an option of the widget is changed. */ @Output() onOptionChanged: EventEmitter; /** * A handler for the tooltipHidden event. */ @Output() onTooltipHidden: EventEmitter; /** * A handler for the tooltipShown event. */ @Output() onTooltipShown: EventEmitter; /** * A handler for the argumentFieldChange event. */ @Output() argumentFieldChange: EventEmitter; /** * A handler for the barNegativeColorChange event. */ @Output() barNegativeColorChange: EventEmitter; /** * A handler for the barPositiveColorChange event. */ @Output() barPositiveColorChange: EventEmitter; /** * A handler for the dataSourceChange event. */ @Output() dataSourceChange: EventEmitter>; /** * A handler for the elementAttrChange event. */ @Output() elementAttrChange: EventEmitter; /** * A handler for the firstLastColorChange event. */ @Output() firstLastColorChange: EventEmitter; /** * A handler for the ignoreEmptyPointsChange event. */ @Output() ignoreEmptyPointsChange: EventEmitter; /** * A handler for the lineColorChange event. */ @Output() lineColorChange: EventEmitter; /** * A handler for the lineWidthChange event. */ @Output() lineWidthChange: EventEmitter; /** * A handler for the lossColorChange event. */ @Output() lossColorChange: EventEmitter; /** * A handler for the marginChange event. */ @Output() marginChange: EventEmitter; /** * A handler for the maxColorChange event. */ @Output() maxColorChange: EventEmitter; /** * A handler for the maxValueChange event. */ @Output() maxValueChange: EventEmitter; /** * A handler for the minColorChange event. */ @Output() minColorChange: EventEmitter; /** * A handler for the minValueChange event. */ @Output() minValueChange: EventEmitter; /** * A handler for the pathModifiedChange event. */ @Output() pathModifiedChange: EventEmitter; /** * A handler for the pointColorChange event. */ @Output() pointColorChange: EventEmitter; /** * A handler for the pointSizeChange event. */ @Output() pointSizeChange: EventEmitter; /** * A handler for the pointSymbolChange event. */ @Output() pointSymbolChange: EventEmitter; /** * A handler for the rtlEnabledChange event. */ @Output() rtlEnabledChange: EventEmitter; /** * A handler for the showFirstLastChange event. */ @Output() showFirstLastChange: EventEmitter; /** * A handler for the showMinMaxChange event. */ @Output() showMinMaxChange: EventEmitter; /** * A handler for the sizeChange event. */ @Output() sizeChange: EventEmitter; /** * A handler for the themeChange event. */ @Output() themeChange: EventEmitter; /** * A handler for the tooltipChange event. */ @Output() tooltipChange: EventEmitter; /** * A handler for the typeChange event. */ @Output() typeChange: EventEmitter; /** * A handler for the valueFieldChange event. */ @Output() valueFieldChange: EventEmitter; /** * A handler for the winColorChange event. */ @Output() winColorChange: EventEmitter; /** * A handler for the winlossThresholdChange event. */ @Output() winlossThresholdChange: 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: '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: 'argumentFieldChange' }, { emit: 'barNegativeColorChange' }, { emit: 'barPositiveColorChange' }, { emit: 'dataSourceChange' }, { emit: 'elementAttrChange' }, { emit: 'firstLastColorChange' }, { emit: 'ignoreEmptyPointsChange' }, { emit: 'lineColorChange' }, { emit: 'lineWidthChange' }, { emit: 'lossColorChange' }, { emit: 'marginChange' }, { emit: 'maxColorChange' }, { emit: 'maxValueChange' }, { emit: 'minColorChange' }, { emit: 'minValueChange' }, { emit: 'pathModifiedChange' }, { emit: 'pointColorChange' }, { emit: 'pointSizeChange' }, { emit: 'pointSymbolChange' }, { emit: 'rtlEnabledChange' }, { emit: 'showFirstLastChange' }, { emit: 'showMinMaxChange' }, { emit: 'sizeChange' }, { emit: 'themeChange' }, { emit: 'tooltipChange' }, { emit: 'typeChange' }, { emit: 'valueFieldChange' }, { emit: 'winColorChange' }, { emit: 'winlossThresholdChange' } ]); this._idh.setHost(this); optionHost.setHost(this); } protected _createInstance(element, options) { return new DxSparkline(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: [ DxoMarginModule, DxoSizeModule, DxoTooltipModule, DxoBorderModule, DxoFontModule, DxoFormatModule, DxoShadowModule, DxTemplateModule ], declarations: [ DxSparklineComponent ], exports: [ DxSparklineComponent, DxoMarginModule, DxoSizeModule, DxoTooltipModule, DxoBorderModule, DxoFontModule, DxoFormatModule, DxoShadowModule, DxTemplateModule ], providers: [EventsRegistrator] }) export class DxSparklineModule { }