devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
449 lines (447 loc) • 22.6 kB
TypeScript
/*!
* devextreme-vue
* Version: 25.1.5
* Build date: Wed Sep 03 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-vue
*/
import { PropType } from "vue";
import Sparkline, { Properties } from "devextreme/viz/sparkline";
import DataSource from "devextreme/data/data_source";
import { DataSourceOptions } from "devextreme/common/data";
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";
type AccessibleOptions = Pick<Properties, "argumentField" | "barNegativeColor" | "barPositiveColor" | "dataSource" | "disabled" | "elementAttr" | "firstLastColor" | "ignoreEmptyPoints" | "lineColor" | "lineWidth" | "lossColor" | "margin" | "maxColor" | "maxValue" | "minColor" | "minValue" | "onDisposing" | "onDrawn" | "onExported" | "onExporting" | "onFileSaving" | "onIncidentOccurred" | "onInitialized" | "onOptionChanged" | "onTooltipHidden" | "onTooltipShown" | "pathModified" | "pointColor" | "pointSize" | "pointSymbol" | "rtlEnabled" | "showFirstLast" | "showMinMax" | "size" | "theme" | "tooltip" | "type" | "valueField" | "winColor" | "winlossThreshold">;
interface DxSparkline extends AccessibleOptions {
readonly instance?: Sparkline;
}
declare const DxSparkline: import("@vue/runtime-core").DefineComponent<{
argumentField: StringConstructor;
barNegativeColor: StringConstructor;
barPositiveColor: StringConstructor;
dataSource: PropType<string | any[] | Record<string, any> | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null>;
disabled: BooleanConstructor;
elementAttr: PropType<Record<string, any>>;
firstLastColor: StringConstructor;
ignoreEmptyPoints: BooleanConstructor;
lineColor: StringConstructor;
lineWidth: NumberConstructor;
lossColor: StringConstructor;
margin: PropType<Record<string, any>>;
maxColor: StringConstructor;
maxValue: NumberConstructor;
minColor: StringConstructor;
minValue: NumberConstructor;
onDisposing: PropType<(e: DisposingEvent) => void>;
onDrawn: PropType<(e: DrawnEvent) => void>;
onExported: PropType<(e: ExportedEvent) => void>;
onExporting: PropType<(e: ExportingEvent) => void>;
onFileSaving: PropType<(e: FileSavingEvent) => void>;
onIncidentOccurred: PropType<(e: IncidentOccurredEvent) => void>;
onInitialized: PropType<(e: InitializedEvent) => void>;
onOptionChanged: PropType<(e: OptionChangedEvent) => void>;
onTooltipHidden: PropType<(e: TooltipHiddenEvent) => void>;
onTooltipShown: PropType<(e: TooltipShownEvent) => void>;
pathModified: BooleanConstructor;
pointColor: StringConstructor;
pointSize: NumberConstructor;
pointSymbol: PropType<PointSymbol>;
rtlEnabled: BooleanConstructor;
showFirstLast: BooleanConstructor;
showMinMax: BooleanConstructor;
size: PropType<Record<string, any>>;
theme: PropType<Theme>;
tooltip: PropType<Record<string, any>>;
type: PropType<SparklineType>;
valueField: StringConstructor;
winColor: StringConstructor;
winlossThreshold: NumberConstructor;
}, unknown, unknown, {
instance(): Sparkline;
}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:argumentField": null;
"update:barNegativeColor": null;
"update:barPositiveColor": null;
"update:dataSource": null;
"update:disabled": null;
"update:elementAttr": null;
"update:firstLastColor": null;
"update:ignoreEmptyPoints": null;
"update:lineColor": null;
"update:lineWidth": null;
"update:lossColor": null;
"update:margin": null;
"update:maxColor": null;
"update:maxValue": null;
"update:minColor": null;
"update:minValue": null;
"update:onDisposing": null;
"update:onDrawn": null;
"update:onExported": null;
"update:onExporting": null;
"update:onFileSaving": null;
"update:onIncidentOccurred": null;
"update:onInitialized": null;
"update:onOptionChanged": null;
"update:onTooltipHidden": null;
"update:onTooltipShown": null;
"update:pathModified": null;
"update:pointColor": null;
"update:pointSize": null;
"update:pointSymbol": null;
"update:rtlEnabled": null;
"update:showFirstLast": null;
"update:showMinMax": null;
"update:size": null;
"update:theme": null;
"update:tooltip": null;
"update:type": null;
"update:valueField": null;
"update:winColor": null;
"update:winlossThreshold": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
argumentField: StringConstructor;
barNegativeColor: StringConstructor;
barPositiveColor: StringConstructor;
dataSource: PropType<string | any[] | Record<string, any> | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null>;
disabled: BooleanConstructor;
elementAttr: PropType<Record<string, any>>;
firstLastColor: StringConstructor;
ignoreEmptyPoints: BooleanConstructor;
lineColor: StringConstructor;
lineWidth: NumberConstructor;
lossColor: StringConstructor;
margin: PropType<Record<string, any>>;
maxColor: StringConstructor;
maxValue: NumberConstructor;
minColor: StringConstructor;
minValue: NumberConstructor;
onDisposing: PropType<(e: DisposingEvent) => void>;
onDrawn: PropType<(e: DrawnEvent) => void>;
onExported: PropType<(e: ExportedEvent) => void>;
onExporting: PropType<(e: ExportingEvent) => void>;
onFileSaving: PropType<(e: FileSavingEvent) => void>;
onIncidentOccurred: PropType<(e: IncidentOccurredEvent) => void>;
onInitialized: PropType<(e: InitializedEvent) => void>;
onOptionChanged: PropType<(e: OptionChangedEvent) => void>;
onTooltipHidden: PropType<(e: TooltipHiddenEvent) => void>;
onTooltipShown: PropType<(e: TooltipShownEvent) => void>;
pathModified: BooleanConstructor;
pointColor: StringConstructor;
pointSize: NumberConstructor;
pointSymbol: PropType<PointSymbol>;
rtlEnabled: BooleanConstructor;
showFirstLast: BooleanConstructor;
showMinMax: BooleanConstructor;
size: PropType<Record<string, any>>;
theme: PropType<Theme>;
tooltip: PropType<Record<string, any>>;
type: PropType<SparklineType>;
valueField: StringConstructor;
winColor: StringConstructor;
winlossThreshold: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:dataSource"?: ((...args: any[]) => any) | undefined;
"onUpdate:disabled"?: ((...args: any[]) => any) | undefined;
"onUpdate:elementAttr"?: ((...args: any[]) => any) | undefined;
"onUpdate:onDisposing"?: ((...args: any[]) => any) | undefined;
"onUpdate:onInitialized"?: ((...args: any[]) => any) | undefined;
"onUpdate:onOptionChanged"?: ((...args: any[]) => any) | undefined;
"onUpdate:rtlEnabled"?: ((...args: any[]) => any) | undefined;
"onUpdate:type"?: ((...args: any[]) => any) | undefined;
"onUpdate:margin"?: ((...args: any[]) => any) | undefined;
"onUpdate:onDrawn"?: ((...args: any[]) => any) | undefined;
"onUpdate:onExported"?: ((...args: any[]) => any) | undefined;
"onUpdate:onExporting"?: ((...args: any[]) => any) | undefined;
"onUpdate:onFileSaving"?: ((...args: any[]) => any) | undefined;
"onUpdate:onIncidentOccurred"?: ((...args: any[]) => any) | undefined;
"onUpdate:onTooltipHidden"?: ((...args: any[]) => any) | undefined;
"onUpdate:onTooltipShown"?: ((...args: any[]) => any) | undefined;
"onUpdate:pathModified"?: ((...args: any[]) => any) | undefined;
"onUpdate:size"?: ((...args: any[]) => any) | undefined;
"onUpdate:theme"?: ((...args: any[]) => any) | undefined;
"onUpdate:tooltip"?: ((...args: any[]) => any) | undefined;
"onUpdate:argumentField"?: ((...args: any[]) => any) | undefined;
"onUpdate:ignoreEmptyPoints"?: ((...args: any[]) => any) | undefined;
"onUpdate:valueField"?: ((...args: any[]) => any) | undefined;
"onUpdate:lineWidth"?: ((...args: any[]) => any) | undefined;
"onUpdate:barNegativeColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:barPositiveColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:firstLastColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:lineColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:lossColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:maxColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:maxValue"?: ((...args: any[]) => any) | undefined;
"onUpdate:minColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:minValue"?: ((...args: any[]) => any) | undefined;
"onUpdate:pointColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:pointSize"?: ((...args: any[]) => any) | undefined;
"onUpdate:pointSymbol"?: ((...args: any[]) => any) | undefined;
"onUpdate:showFirstLast"?: ((...args: any[]) => any) | undefined;
"onUpdate:showMinMax"?: ((...args: any[]) => any) | undefined;
"onUpdate:winColor"?: ((...args: any[]) => any) | undefined;
"onUpdate:winlossThreshold"?: ((...args: any[]) => any) | undefined;
}, {
disabled: boolean;
rtlEnabled: boolean;
pathModified: boolean;
ignoreEmptyPoints: boolean;
showFirstLast: boolean;
showMinMax: boolean;
}>;
declare const DxBorder: import("@vue/runtime-core").DefineComponent<{
color: StringConstructor;
dashStyle: PropType<DashStyle>;
opacity: NumberConstructor;
visible: BooleanConstructor;
width: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:color": null;
"update:dashStyle": null;
"update:opacity": null;
"update:visible": null;
"update:width": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
color: StringConstructor;
dashStyle: PropType<DashStyle>;
opacity: NumberConstructor;
visible: BooleanConstructor;
width: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onUpdate:width"?: ((...args: any[]) => any) | undefined;
"onUpdate:opacity"?: ((...args: any[]) => any) | undefined;
"onUpdate:color"?: ((...args: any[]) => any) | undefined;
"onUpdate:dashStyle"?: ((...args: any[]) => any) | undefined;
}, {
visible: boolean;
}>;
declare const DxFont: import("@vue/runtime-core").DefineComponent<{
color: StringConstructor;
family: StringConstructor;
opacity: NumberConstructor;
size: (NumberConstructor | StringConstructor)[];
weight: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:color": null;
"update:family": null;
"update:opacity": null;
"update:size": null;
"update:weight": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
color: StringConstructor;
family: StringConstructor;
opacity: NumberConstructor;
size: (NumberConstructor | StringConstructor)[];
weight: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:opacity"?: ((...args: any[]) => any) | undefined;
"onUpdate:size"?: ((...args: any[]) => any) | undefined;
"onUpdate:color"?: ((...args: any[]) => any) | undefined;
"onUpdate:family"?: ((...args: any[]) => any) | undefined;
"onUpdate:weight"?: ((...args: any[]) => any) | undefined;
}, {}>;
declare const DxFormat: import("@vue/runtime-core").DefineComponent<{
currency: StringConstructor;
formatter: PropType<(value: number | Date) => string>;
parser: PropType<(value: string) => number | Date>;
precision: NumberConstructor;
type: PropType<string>;
useCurrencyAccountingStyle: BooleanConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:currency": null;
"update:formatter": null;
"update:parser": null;
"update:precision": null;
"update:type": null;
"update:useCurrencyAccountingStyle": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
currency: StringConstructor;
formatter: PropType<(value: number | Date) => string>;
parser: PropType<(value: string) => number | Date>;
precision: NumberConstructor;
type: PropType<string>;
useCurrencyAccountingStyle: BooleanConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:type"?: ((...args: any[]) => any) | undefined;
"onUpdate:currency"?: ((...args: any[]) => any) | undefined;
"onUpdate:formatter"?: ((...args: any[]) => any) | undefined;
"onUpdate:parser"?: ((...args: any[]) => any) | undefined;
"onUpdate:precision"?: ((...args: any[]) => any) | undefined;
"onUpdate:useCurrencyAccountingStyle"?: ((...args: any[]) => any) | undefined;
}, {
useCurrencyAccountingStyle: boolean;
}>;
declare const DxMargin: import("@vue/runtime-core").DefineComponent<{
bottom: NumberConstructor;
left: NumberConstructor;
right: NumberConstructor;
top: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:bottom": null;
"update:left": null;
"update:right": null;
"update:top": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
bottom: NumberConstructor;
left: NumberConstructor;
right: NumberConstructor;
top: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:left"?: ((...args: any[]) => any) | undefined;
"onUpdate:top"?: ((...args: any[]) => any) | undefined;
"onUpdate:bottom"?: ((...args: any[]) => any) | undefined;
"onUpdate:right"?: ((...args: any[]) => any) | undefined;
}, {}>;
declare const DxShadow: import("@vue/runtime-core").DefineComponent<{
blur: NumberConstructor;
color: StringConstructor;
offsetX: NumberConstructor;
offsetY: NumberConstructor;
opacity: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:blur": null;
"update:color": null;
"update:offsetX": null;
"update:offsetY": null;
"update:opacity": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
blur: NumberConstructor;
color: StringConstructor;
offsetX: NumberConstructor;
offsetY: NumberConstructor;
opacity: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:opacity"?: ((...args: any[]) => any) | undefined;
"onUpdate:color"?: ((...args: any[]) => any) | undefined;
"onUpdate:blur"?: ((...args: any[]) => any) | undefined;
"onUpdate:offsetX"?: ((...args: any[]) => any) | undefined;
"onUpdate:offsetY"?: ((...args: any[]) => any) | undefined;
}, {}>;
declare const DxSize: import("@vue/runtime-core").DefineComponent<{
height: NumberConstructor;
width: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:height": null;
"update:width": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
height: NumberConstructor;
width: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:height"?: ((...args: any[]) => any) | undefined;
"onUpdate:width"?: ((...args: any[]) => any) | undefined;
}, {}>;
declare const DxTooltip: import("@vue/runtime-core").DefineComponent<{
arrowLength: NumberConstructor;
border: PropType<Record<string, any>>;
color: StringConstructor;
container: {};
contentTemplate: {};
cornerRadius: NumberConstructor;
customizeTooltip: PropType<(pointsInfo: any) => Record<string, any>>;
enabled: BooleanConstructor;
font: PropType<Record<string, any> | Font>;
format: PropType<string | Record<string, any> | import("devextreme/artifacts/npm/devextreme/common/core/localization").FormatObject | ((value: number | Date) => string) | ((value: Date) => string) | ((value: number) => string) | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((value: number | Date) => string) | undefined>;
interactive: BooleanConstructor;
opacity: NumberConstructor;
paddingLeftRight: NumberConstructor;
paddingTopBottom: NumberConstructor;
shadow: PropType<Record<string, any>>;
zIndex: NumberConstructor;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
"update:isActive": null;
"update:hoveredElement": null;
"update:arrowLength": null;
"update:border": null;
"update:color": null;
"update:container": null;
"update:contentTemplate": null;
"update:cornerRadius": null;
"update:customizeTooltip": null;
"update:enabled": null;
"update:font": null;
"update:format": null;
"update:interactive": null;
"update:opacity": null;
"update:paddingLeftRight": null;
"update:paddingTopBottom": null;
"update:shadow": null;
"update:zIndex": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
arrowLength: NumberConstructor;
border: PropType<Record<string, any>>;
color: StringConstructor;
container: {};
contentTemplate: {};
cornerRadius: NumberConstructor;
customizeTooltip: PropType<(pointsInfo: any) => Record<string, any>>;
enabled: BooleanConstructor;
font: PropType<Record<string, any> | Font>;
format: PropType<string | Record<string, any> | import("devextreme/artifacts/npm/devextreme/common/core/localization").FormatObject | ((value: number | Date) => string) | ((value: Date) => string) | ((value: number) => string) | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((value: number | Date) => string) | undefined>;
interactive: BooleanConstructor;
opacity: NumberConstructor;
paddingLeftRight: NumberConstructor;
paddingTopBottom: NumberConstructor;
shadow: PropType<Record<string, any>>;
zIndex: NumberConstructor;
}>> & {
"onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
"onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
"onUpdate:container"?: ((...args: any[]) => any) | undefined;
"onUpdate:contentTemplate"?: ((...args: any[]) => any) | undefined;
"onUpdate:opacity"?: ((...args: any[]) => any) | undefined;
"onUpdate:enabled"?: ((...args: any[]) => any) | undefined;
"onUpdate:font"?: ((...args: any[]) => any) | undefined;
"onUpdate:color"?: ((...args: any[]) => any) | undefined;
"onUpdate:cornerRadius"?: ((...args: any[]) => any) | undefined;
"onUpdate:format"?: ((...args: any[]) => any) | undefined;
"onUpdate:border"?: ((...args: any[]) => any) | undefined;
"onUpdate:paddingLeftRight"?: ((...args: any[]) => any) | undefined;
"onUpdate:paddingTopBottom"?: ((...args: any[]) => any) | undefined;
"onUpdate:arrowLength"?: ((...args: any[]) => any) | undefined;
"onUpdate:customizeTooltip"?: ((...args: any[]) => any) | undefined;
"onUpdate:interactive"?: ((...args: any[]) => any) | undefined;
"onUpdate:shadow"?: ((...args: any[]) => any) | undefined;
"onUpdate:zIndex"?: ((...args: any[]) => any) | undefined;
}, {
enabled: boolean;
interactive: boolean;
}>;
export default DxSparkline;
export { DxSparkline, DxBorder, DxFont, DxFormat, DxMargin, DxShadow, DxSize, DxTooltip };
import type * as DxSparklineTypes from "devextreme/viz/sparkline_types";
export { DxSparklineTypes };