devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
592 lines (470 loc) • 22.9 kB
TypeScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 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 { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core';
import DataSource from 'devextreme/data/data_source';
import { DataSourceOptions } from 'devextreme/data/data_source';
import { Store } from 'devextreme/data/store';
import { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, SparklineType } from 'devextreme/viz/sparkline';
import { PointSymbol, Theme, DashStyle, Font } from 'devextreme/common/charts';
import { Format } from 'devextreme/common/core/localization';
import DxSparkline from 'devextreme/viz/sparkline';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import type * as DxSparklineTypes from "devextreme/viz/sparkline_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/sparkline/nested";
import * as i3 from "devextreme-angular/core";
/**
* The Sparkline UI component 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.
*/
export declare class DxSparklineComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxSparkline;
/**
* Specifies the data source field that provides arguments for a sparkline.
*/
get argumentField(): string;
set argumentField(value: string);
/**
* Sets a color for the bars indicating negative values. Available for a sparkline of the bar type only.
*/
get barNegativeColor(): string;
set barNegativeColor(value: string);
/**
* Sets a color for the bars indicating positive values. Available for a sparkline of the bar type only.
*/
get barPositiveColor(): string;
set barPositiveColor(value: string);
/**
* Binds the UI component to data.
*/
get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string;
set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string);
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): Record<string, any>;
set elementAttr(value: Record<string, any>);
/**
* Sets a color for the boundary of both the first and last points on a sparkline.
*/
get firstLastColor(): string;
set firstLastColor(value: string);
/**
* Specifies whether the sparkline should ignore null data points.
*/
get ignoreEmptyPoints(): boolean;
set ignoreEmptyPoints(value: boolean);
/**
* Sets a color for a line on a sparkline. Available for the sparklines of the line- and area-like types.
*/
get lineColor(): string;
set lineColor(value: string);
/**
* Specifies a width for a line on a sparkline. Available for the sparklines of the line- and area-like types.
*/
get lineWidth(): number;
set lineWidth(value: number);
/**
* 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.
*/
get lossColor(): string;
set lossColor(value: string);
/**
* Generates space around the UI component.
*/
get margin(): {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
set margin(value: {
bottom?: number;
left?: number;
right?: number;
top?: number;
});
/**
* Sets a color for the boundary of the maximum point on a sparkline.
*/
get maxColor(): string;
set maxColor(value: string);
/**
* Specifies the maximum value of the sparkline's value axis.
*/
get maxValue(): number | undefined;
set maxValue(value: number | undefined);
/**
* Sets a color for the boundary of the minimum point on a sparkline.
*/
get minColor(): string;
set minColor(value: string);
/**
* Specifies the minimum value of the sparkline value axis.
*/
get minValue(): number | undefined;
set minValue(value: number | undefined);
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified(): boolean;
set pathModified(value: boolean);
/**
* Sets a color for points on a sparkline. Available for the sparklines of the line- and area-like types.
*/
get pointColor(): string;
set pointColor(value: string);
/**
* Specifies the diameter of sparkline points in pixels. Available for the sparklines of line- and area-like types.
*/
get pointSize(): number;
set pointSize(value: number);
/**
* Specifies a symbol to use as a point marker on a sparkline. Available for the sparklines of the line- and area-like types.
*/
get pointSymbol(): PointSymbol;
set pointSymbol(value: PointSymbol);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Specifies whether or not to indicate both the first and last values on a sparkline.
*/
get showFirstLast(): boolean;
set showFirstLast(value: boolean);
/**
* Specifies whether or not to indicate both the minimum and maximum values on a sparkline.
*/
get showMinMax(): boolean;
set showMinMax(value: boolean);
/**
* Specifies the UI component's size in pixels.
*/
get size(): {
height?: number | undefined;
width?: number | undefined;
};
set size(value: {
height?: number | undefined;
width?: number | undefined;
});
/**
* Sets the name of the theme the UI component uses.
*/
get theme(): Theme;
set theme(value: Theme);
/**
* Configures the tooltip.
*/
get tooltip(): {
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((pointsInfo: any) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
interactive?: boolean;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
};
set tooltip(value: {
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((pointsInfo: any) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
interactive?: boolean;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
});
/**
* Determines the type of a sparkline.
*/
get type(): SparklineType;
set type(value: SparklineType);
/**
* Specifies the data source field that provides values for a sparkline.
*/
get valueField(): string;
set valueField(value: string);
/**
* Sets a color for the bars indicating the values greater than a winloss threshold. Available for a sparkline of the winloss type only.
*/
get winColor(): string;
set winColor(value: string);
/**
* Specifies a value that serves as a threshold for the sparkline of the winloss type.
*/
get winlossThreshold(): number;
set winlossThreshold(value: number);
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function that is executed when the UI component's rendering has finished.
*/
onDrawn: EventEmitter<DrawnEvent>;
/**
* A function that is executed after the UI component is exported.
*/
onExported: EventEmitter<ExportedEvent>;
/**
* A function that is executed before the UI component is exported.
*/
onExporting: EventEmitter<ExportingEvent>;
/**
* A function that is executed before a file with exported UI component is saved to the user's local storage.
*/
onFileSaving: EventEmitter<FileSavingEvent>;
/**
* A function that is executed when an error or warning occurs.
*/
onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<InitializedEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that is executed when a tooltip becomes hidden.
*/
onTooltipHidden: EventEmitter<TooltipHiddenEvent>;
/**
* A function that is executed when a tooltip appears.
*/
onTooltipShown: EventEmitter<TooltipShownEvent>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
argumentFieldChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
barNegativeColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
barPositiveColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange: EventEmitter<Record<string, any>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
firstLastColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
ignoreEmptyPointsChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
lineColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
lineWidthChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
lossColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
marginChange: EventEmitter<{
bottom?: number;
left?: number;
right?: number;
top?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
maxColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
maxValueChange: EventEmitter<number | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
minColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
minValueChange: EventEmitter<number | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pathModifiedChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pointColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pointSizeChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pointSymbolChange: EventEmitter<PointSymbol>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rtlEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
showFirstLastChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
showMinMaxChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
sizeChange: EventEmitter<{
height?: number | undefined;
width?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
themeChange: EventEmitter<Theme>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
tooltipChange: EventEmitter<{
arrowLength?: number;
border?: {
color?: string;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
color?: string;
container?: any | string | undefined;
contentTemplate?: any;
cornerRadius?: number;
customizeTooltip?: ((pointsInfo: any) => Record<string, any>) | undefined;
enabled?: boolean;
font?: Font;
format?: Format | undefined;
interactive?: boolean;
opacity?: number | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
shadow?: {
blur?: number;
color?: string;
offsetX?: number;
offsetY?: number;
opacity?: number;
};
zIndex?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
typeChange: EventEmitter<SparklineType>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
valueFieldChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
winColorChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
winlossThresholdChange: EventEmitter<number>;
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any);
protected _createInstance(element: any, options: any): DxSparkline;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setupChanges(prop: string, changes: SimpleChanges): void;
ngDoCheck(): void;
_setOption(name: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DxSparklineComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DxSparklineComponent, "dx-sparkline", never, { "argumentField": { "alias": "argumentField"; "required": false; }; "barNegativeColor": { "alias": "barNegativeColor"; "required": false; }; "barPositiveColor": { "alias": "barPositiveColor"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "firstLastColor": { "alias": "firstLastColor"; "required": false; }; "ignoreEmptyPoints": { "alias": "ignoreEmptyPoints"; "required": false; }; "lineColor": { "alias": "lineColor"; "required": false; }; "lineWidth": { "alias": "lineWidth"; "required": false; }; "lossColor": { "alias": "lossColor"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "maxColor": { "alias": "maxColor"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "minColor": { "alias": "minColor"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "pathModified": { "alias": "pathModified"; "required": false; }; "pointColor": { "alias": "pointColor"; "required": false; }; "pointSize": { "alias": "pointSize"; "required": false; }; "pointSymbol": { "alias": "pointSymbol"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; }; "showMinMax": { "alias": "showMinMax"; "required": false; }; "size": { "alias": "size"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "winColor": { "alias": "winColor"; "required": false; }; "winlossThreshold": { "alias": "winlossThreshold"; "required": false; }; }, { "onDisposing": "onDisposing"; "onDrawn": "onDrawn"; "onExported": "onExported"; "onExporting": "onExporting"; "onFileSaving": "onFileSaving"; "onIncidentOccurred": "onIncidentOccurred"; "onInitialized": "onInitialized"; "onOptionChanged": "onOptionChanged"; "onTooltipHidden": "onTooltipHidden"; "onTooltipShown": "onTooltipShown"; "argumentFieldChange": "argumentFieldChange"; "barNegativeColorChange": "barNegativeColorChange"; "barPositiveColorChange": "barPositiveColorChange"; "dataSourceChange": "dataSourceChange"; "disabledChange": "disabledChange"; "elementAttrChange": "elementAttrChange"; "firstLastColorChange": "firstLastColorChange"; "ignoreEmptyPointsChange": "ignoreEmptyPointsChange"; "lineColorChange": "lineColorChange"; "lineWidthChange": "lineWidthChange"; "lossColorChange": "lossColorChange"; "marginChange": "marginChange"; "maxColorChange": "maxColorChange"; "maxValueChange": "maxValueChange"; "minColorChange": "minColorChange"; "minValueChange": "minValueChange"; "pathModifiedChange": "pathModifiedChange"; "pointColorChange": "pointColorChange"; "pointSizeChange": "pointSizeChange"; "pointSymbolChange": "pointSymbolChange"; "rtlEnabledChange": "rtlEnabledChange"; "showFirstLastChange": "showFirstLastChange"; "showMinMaxChange": "showMinMaxChange"; "sizeChange": "sizeChange"; "themeChange": "themeChange"; "tooltipChange": "tooltipChange"; "typeChange": "typeChange"; "valueFieldChange": "valueFieldChange"; "winColorChange": "winColorChange"; "winlossThresholdChange": "winlossThresholdChange"; }, never, never, false, never>;
}
export declare class DxSparklineModule {
static ɵfac: i0.ɵɵFactoryDeclaration<DxSparklineModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<DxSparklineModule, [typeof DxSparklineComponent], [typeof i1.DxoMarginModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i1.DxoBorderModule, typeof i1.DxoFontModule, typeof i1.DxoFormatModule, typeof i1.DxoShadowModule, typeof i2.DxoSparklineBorderModule, typeof i2.DxoSparklineFontModule, typeof i2.DxoSparklineFormatModule, typeof i2.DxoSparklineMarginModule, typeof i2.DxoSparklineShadowModule, typeof i2.DxoSparklineSizeModule, typeof i2.DxoSparklineTooltipModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxSparklineComponent, typeof i1.DxoMarginModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i1.DxoBorderModule, typeof i1.DxoFontModule, typeof i1.DxoFormatModule, typeof i1.DxoShadowModule, typeof i2.DxoSparklineBorderModule, typeof i2.DxoSparklineFontModule, typeof i2.DxoSparklineFormatModule, typeof i2.DxoSparklineMarginModule, typeof i2.DxoSparklineShadowModule, typeof i2.DxoSparklineSizeModule, typeof i2.DxoSparklineTooltipModule, typeof i3.DxTemplateModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<DxSparklineModule>;
}
export { DxSparklineTypes };