devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,266 lines (1,112 loc) • 50.2 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, QueryList } from '@angular/core';
import DataSource from 'devextreme/data/data_source';
import { AnimationEaseMode, ChartsDataType, DashStyle, ChartsColor, HatchDirection, Font, LabelPosition, TextOverflow, WordWrap, SeriesLabel, SeriesPoint, Palette, PaletteExtensionMode, ShiftLabelOverlap, Theme } from 'devextreme/common/charts';
import { dxPieChartAnnotationConfig, dxPieChartCommonAnnotationConfig, PieChartSeriesInteractionMode, SmallValuesGroupingMode, PieChartLegendItem, PieChartLegendHoverMode, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, OptionChangedEvent, PointClickEvent, PointHoverChangedEvent, PointSelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, PieChartSegmentDirection, PieChartSeries, PieChartType } from 'devextreme/viz/pie_chart';
import { Format } from 'devextreme/common/core/localization';
import { DataSourceOptions } from 'devextreme/data/data_source';
import { Store } from 'devextreme/data/store';
import { ExportFormat, HorizontalAlignment, Position, Orientation, VerticalEdge, SingleOrMultiple } from 'devextreme/common';
import DxPieChart from 'devextreme/viz/pie_chart';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested';
import { DxiSeriesComponent } from 'devextreme-angular/ui/nested';
import { DxiPieChartAnnotationComponent } from 'devextreme-angular/ui/pie-chart/nested';
import { DxiPieChartSeriesComponent } from 'devextreme-angular/ui/pie-chart/nested';
import type * as DxPieChartTypes from "devextreme/viz/pie_chart_types";
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/ui/pie-chart/nested";
import * as i3 from "devextreme-angular/core";
/**
* The PieChart is a UI component that visualizes data as a circle divided into sectors that each represents a portion of the whole.
*/
export declare class DxPieChartComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxPieChart;
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout(): {
height?: number;
keepLabels?: boolean;
width?: number;
};
set adaptiveLayout(value: {
height?: number;
keepLabels?: boolean;
width?: number;
});
/**
* Specifies animation properties.
*/
get animation(): boolean | {
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
};
set animation(value: boolean | {
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
});
/**
* Specifies the annotation collection.
*/
get annotations(): Array<any | dxPieChartAnnotationConfig>;
set annotations(value: Array<any | dxPieChartAnnotationConfig>);
/**
* Specifies a custom template for content in the pie's center.
*/
get centerTemplate(): any;
set centerTemplate(value: any);
/**
* Specifies settings common for all annotations in the PieChart.
*/
get commonAnnotationSettings(): dxPieChartCommonAnnotationConfig;
set commonAnnotationSettings(value: dxPieChartCommonAnnotationConfig);
/**
* An object defining the configuration properties that are common for all series of the PieChart UI component.
*/
get commonSeriesSettings(): any | {
argumentField?: string;
argumentType?: ChartsDataType | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hoverMode?: PieChartSeriesInteractionMode;
hoverStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
label?: {
argumentFormat?: Format | undefined;
backgroundColor?: string | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
customizeText?: ((pointInfo: any) => string);
displayFormat?: string | undefined;
font?: Font;
format?: Format | undefined;
position?: LabelPosition;
radialOffset?: number;
rotationAngle?: number;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
maxLabelCount?: number | undefined;
minSegmentSize?: number | undefined;
selectionMode?: PieChartSeriesInteractionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
smallValuesGrouping?: {
groupName?: string;
mode?: SmallValuesGroupingMode;
threshold?: number | undefined;
topCount?: number | undefined;
};
tagField?: string;
valueField?: string;
};
set commonSeriesSettings(value: any | {
argumentField?: string;
argumentType?: ChartsDataType | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hoverMode?: PieChartSeriesInteractionMode;
hoverStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
label?: {
argumentFormat?: Format | undefined;
backgroundColor?: string | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
customizeText?: ((pointInfo: any) => string);
displayFormat?: string | undefined;
font?: Font;
format?: Format | undefined;
position?: LabelPosition;
radialOffset?: number;
rotationAngle?: number;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
maxLabelCount?: number | undefined;
minSegmentSize?: number | undefined;
selectionMode?: PieChartSeriesInteractionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
smallValuesGrouping?: {
groupName?: string;
mode?: SmallValuesGroupingMode;
threshold?: number | undefined;
topCount?: number | undefined;
};
tagField?: string;
valueField?: string;
});
/**
* Customizes an individual annotation.
*/
get customizeAnnotation(): ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined;
set customizeAnnotation(value: ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined);
/**
* Customizes the appearance of an individual point label.
*/
get customizeLabel(): ((pointInfo: any) => SeriesLabel);
set customizeLabel(value: ((pointInfo: any) => SeriesLabel));
/**
* Customizes the appearance of an individual series point.
*/
get customizePoint(): ((pointInfo: any) => SeriesPoint);
set customizePoint(value: ((pointInfo: any) => SeriesPoint));
/**
* 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 the diameter of the pie.
*/
get diameter(): number | undefined;
set diameter(value: number | undefined);
/**
* 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>);
/**
* Configures the exporting and printing features.
*/
get export(): {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
};
set export(value: {
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
});
/**
* Specifies the fraction of the inner radius relative to the total radius in the series of the 'doughnut' type. The value should be between 0 and 1.
*/
get innerRadius(): number;
set innerRadius(value: number);
/**
* Specifies PieChart legend properties.
*/
get legend(): {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>);
customizeText?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
hoverMode?: PieChartLegendHoverMode;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
};
set legend(value: {
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>);
customizeText?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
hoverMode?: PieChartLegendHoverMode;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
});
/**
* Configures the loading indicator.
*/
get loadingIndicator(): {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: string;
};
set loadingIndicator(value: {
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: 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;
});
/**
* Specifies the minimum diameter of the pie.
*/
get minDiameter(): number;
set minDiameter(value: number);
/**
* Sets the palette to be used to colorize series and their elements.
*/
get palette(): Array<string> | Palette;
set palette(value: Array<string> | Palette);
/**
* Specifies what to do with colors in the palette when their number is less than the number of series (in the Chart UI component) or points in a series (in the PieChart UI component).
*/
get paletteExtensionMode(): PaletteExtensionMode;
set paletteExtensionMode(value: PaletteExtensionMode);
/**
* 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);
/**
* Specifies whether a single point or multiple points can be selected in the chart.
*/
get pointSelectionMode(): SingleOrMultiple;
set pointSelectionMode(value: SingleOrMultiple);
/**
* Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.
*/
get redrawOnResize(): boolean;
set redrawOnResize(value: boolean);
/**
* Specifies how a chart must behave when point labels overlap.
*/
get resolveLabelOverlapping(): ShiftLabelOverlap;
set resolveLabelOverlapping(value: ShiftLabelOverlap);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Specifies the direction that the pie chart segments will occupy.
*/
get segmentsDirection(): PieChartSegmentDirection;
set segmentsDirection(value: PieChartSegmentDirection);
/**
* Specifies properties for the series of the PieChart UI component.
*/
get series(): Array<PieChartSeries> | PieChartSeries | undefined;
set series(value: Array<PieChartSeries> | PieChartSeries | undefined);
/**
* Defines properties for the series template.
*/
get seriesTemplate(): any;
set seriesTemplate(value: any);
/**
* 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;
});
/**
* Allows you to display several adjoining pies in the same size.
*/
get sizeGroup(): string | undefined;
set sizeGroup(value: string | undefined);
/**
* Specifies the angle in arc degrees from which the first segment of a pie chart should start.
*/
get startAngle(): number;
set startAngle(value: number);
/**
* Sets the name of the theme the UI component uses.
*/
get theme(): Theme;
set theme(value: Theme);
/**
* Configures the UI component's title.
*/
get title(): string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
};
set title(value: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
});
/**
* Configures tooltips.
*/
get tooltip(): {
argumentFormat?: Format | undefined;
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?: ((pointInfo: 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;
};
shared?: boolean;
zIndex?: number | undefined;
};
set tooltip(value: {
argumentFormat?: Format | undefined;
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?: ((pointInfo: 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;
};
shared?: boolean;
zIndex?: number | undefined;
});
/**
* Specifies the type of the pie chart series.
*/
get type(): PieChartType;
set type(value: PieChartType);
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<DisposingEvent>;
/**
* A function that is executed when all series are ready.
*/
onDone: EventEmitter<DoneEvent>;
/**
* 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 when a legend item is clicked or tapped.
*/
onLegendClick: EventEmitter<LegendClickEvent>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<OptionChangedEvent>;
/**
* A function that is executed when a series point is clicked or tapped.
*/
onPointClick: EventEmitter<PointClickEvent>;
/**
* A function that is executed after the pointer enters or leaves a series point.
*/
onPointHoverChanged: EventEmitter<PointHoverChangedEvent>;
/**
* A function that is executed when a series point is selected or selection is canceled.
*/
onPointSelectionChanged: EventEmitter<PointSelectionChangedEvent>;
/**
* 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.
*/
adaptiveLayoutChange: EventEmitter<{
height?: number;
keepLabels?: boolean;
width?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
animationChange: EventEmitter<boolean | {
duration?: number;
easing?: AnimationEaseMode;
enabled?: boolean;
maxPointCountSupported?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
annotationsChange: EventEmitter<Array<any | dxPieChartAnnotationConfig>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
centerTemplateChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonAnnotationSettingsChange: EventEmitter<dxPieChartCommonAnnotationConfig>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonSeriesSettingsChange: EventEmitter<any | {
argumentField?: string;
argumentType?: ChartsDataType | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hoverMode?: PieChartSeriesInteractionMode;
hoverStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
label?: {
argumentFormat?: Format | undefined;
backgroundColor?: string | undefined;
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
connector?: {
color?: string | undefined;
visible?: boolean;
width?: number;
};
customizeText?: ((pointInfo: any) => string);
displayFormat?: string | undefined;
font?: Font;
format?: Format | undefined;
position?: LabelPosition;
radialOffset?: number;
rotationAngle?: number;
textOverflow?: TextOverflow;
visible?: boolean;
wordWrap?: WordWrap;
};
maxLabelCount?: number | undefined;
minSegmentSize?: number | undefined;
selectionMode?: PieChartSeriesInteractionMode;
selectionStyle?: {
border?: {
color?: string | undefined;
dashStyle?: DashStyle | undefined;
visible?: boolean;
width?: number;
};
color?: ChartsColor | string | undefined;
hatching?: {
direction?: HatchDirection;
opacity?: number;
step?: number;
width?: number;
};
highlight?: boolean;
};
smallValuesGrouping?: {
groupName?: string;
mode?: SmallValuesGroupingMode;
threshold?: number | undefined;
topCount?: number | undefined;
};
tagField?: string;
valueField?: string;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeAnnotationChange: EventEmitter<((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeLabelChange: EventEmitter<((pointInfo: any) => SeriesLabel)>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizePointChange: EventEmitter<((pointInfo: any) => SeriesPoint)>;
/**
* 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.
*/
diameterChange: EventEmitter<number | undefined>;
/**
* 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.
*/
exportChange: EventEmitter<{
backgroundColor?: string;
enabled?: boolean;
fileName?: string;
formats?: Array<ExportFormat>;
margin?: number;
printingEnabled?: boolean;
svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
innerRadiusChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
legendChange: EventEmitter<{
backgroundColor?: string | undefined;
border?: {
color?: string;
cornerRadius?: number;
dashStyle?: DashStyle;
opacity?: number | undefined;
visible?: boolean;
width?: number;
};
columnCount?: number;
columnItemSpacing?: number;
customizeHint?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>);
customizeText?: ((pointInfo: {
pointColor: string;
pointIndex: number;
pointName: any;
}) => string);
font?: Font;
horizontalAlignment?: HorizontalAlignment;
hoverMode?: PieChartLegendHoverMode;
itemsAlignment?: HorizontalAlignment | undefined;
itemTextPosition?: Position | undefined;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
markerSize?: number;
markerTemplate?: any;
orientation?: Orientation | undefined;
paddingLeftRight?: number;
paddingTopBottom?: number;
rowCount?: number;
rowItemSpacing?: number;
title?: string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment | undefined;
margin?: {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
};
text?: string;
verticalAlignment?: VerticalEdge;
};
verticalAlignment?: VerticalEdge;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
loadingIndicatorChange: EventEmitter<{
backgroundColor?: string;
enabled?: boolean;
font?: Font;
show?: boolean;
text?: 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.
*/
minDiameterChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteChange: EventEmitter<Array<string> | Palette>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteExtensionModeChange: EventEmitter<PaletteExtensionMode>;
/**
* 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.
*/
pointSelectionModeChange: EventEmitter<SingleOrMultiple>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
redrawOnResizeChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
resolveLabelOverlappingChange: EventEmitter<ShiftLabelOverlap>;
/**
* 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.
*/
segmentsDirectionChange: EventEmitter<PieChartSegmentDirection>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
seriesChange: EventEmitter<Array<PieChartSeries> | PieChartSeries | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
seriesTemplateChange: EventEmitter<any>;
/**
* 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.
*/
sizeGroupChange: EventEmitter<string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
startAngleChange: EventEmitter<number>;
/**
* 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.
*/
titleChange: EventEmitter<string | {
font?: Font;
horizontalAlignment?: HorizontalAlignment;
margin?: number | {
bottom?: number;
left?: number;
right?: number;
top?: number;
};
placeholderSize?: number | undefined;
subtitle?: string | {
font?: Font;
offset?: number;
text?: string;
textOverflow?: TextOverflow;
wordWrap?: WordWrap;
};
text?: string;
textOverflow?: TextOverflow;
verticalAlignment?: VerticalEdge;
wordWrap?: WordWrap;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
tooltipChange: EventEmitter<{
argumentFormat?: Format | undefined;
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?: ((pointInfo: 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;
};
shared?: boolean;
zIndex?: number | undefined;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
typeChange: EventEmitter<PieChartType>;
get annotationsChildren(): QueryList<DxiPieChartAnnotationComponent>;
set annotationsChildren(value: QueryList<DxiPieChartAnnotationComponent>);
get seriesChildren(): QueryList<DxiPieChartSeriesComponent>;
set seriesChildren(value: QueryList<DxiPieChartSeriesComponent>);
get annotationsLegacyChildren(): QueryList<DxiAnnotationComponent>;
set annotationsLegacyChildren(value: QueryList<DxiAnnotationComponent>);
get seriesLegacyChildren(): QueryList<DxiSeriesComponent>;
set seriesLegacyChildren(value: QueryList<DxiSeriesComponent>);
constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any);
protected _createInstance(element: any, options: any): DxPieChart;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
setupChanges(prop: string, changes: SimpleChanges): void;
ngDoCheck(): void;
_setOption(name: string, value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DxPieChartComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DxPieChartComponent, "dx-pie-chart", never, { "adaptiveLayout": { "alias": "adaptiveLayout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "annotations": { "alias": "annotations"; "required": false; }; "centerTemplate": { "alias": "centerTemplate"; "required": false; }; "commonAnnotationSettings": { "alias": "commonAnnotationSettings"; "required": false; }; "commonSeriesSettings": { "alias": "commonSeriesSettings"; "required": false; }; "customizeAnnotation": { "alias": "customizeAnnotation"; "required": false; }; "customizeLabel": { "alias": "customizeLabel"; "required": false; }; "customizePoint": { "alias": "customizePoint"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "export": { "alias": "export"; "required": false; }; "innerRadius": { "alias": "innerRadius"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "minDiameter": { "alias": "minDiameter"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "paletteExtensionMode": { "alias": "paletteExtensionMode"; "required": false; }; "pathModified": { "alias": "pathModified"; "required": false; }; "pointSelectionMode": { "alias": "pointSelectionMode"; "required": false; }; "redrawOnResize": { "alias": "redrawOnResize"; "required": false; }; "resolveLabelOverlapping": { "alias": "resolveLabelOverlapping"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "segmentsDirection": { "alias": "segmentsDirection"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesTemplate": { "alias": "seriesTemplate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "sizeGroup": { "alias": "sizeGroup"; "required": false; }; "startAngle": { "alias": "startAngle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "onDisposing": "onDisposing"; "onDone": "onDone"; "onDrawn": "onDrawn"; "onExported": "onExported"; "onExporting": "onExporting"; "onFileSaving": "onFileSaving"; "onIncidentOccurred": "onIncidentOccurred"; "onInitialized": "onInitialized"; "onLegendClick": "onLegendClick"; "onOptionChanged": "onOptionChanged"; "onPointClick": "onPointClick"; "onPointHoverChanged": "onPointHoverChanged"; "onPointSelectionChanged": "onPointSelectionChanged"; "onTooltipHidden": "onTooltipHidden"; "onTooltipShown": "onTooltipShown"; "adaptiveLayoutChange": "adaptiveLayoutChange"; "animationChange": "animationChange"; "annotationsChange": "annotationsChange"; "centerTemplateChange": "centerTemplateChange"; "commonAnnotationSettingsChange": "commonAnnotationSettingsChange"; "commonSeriesSettingsChange": "commonSeriesSettingsChange"; "customizeAnnotationChange": "customizeAnnotationChange"; "customizeLabelChange": "customizeLabelChange"; "customizePointChange": "customizePointChange"; "dataSourceChange": "dataSourceChange"; "diameterChange": "diameterChange"; "disabledChange": "disabledChange"; "elementAttrChange": "elementAttrChange"; "exportChange": "exportChange"; "innerRadiusChange": "innerRadiusChange"; "legendChange": "legendChange"; "loadingIndicatorChange": "loadingIndicatorChange"; "marginChange": "marginChange"; "minDiameterChange": "minDiameterChange"; "paletteChange": "paletteChange"; "paletteExtensionModeChange": "paletteExtensionModeChange"; "pathModifiedChange": "pathModifiedChange"; "pointSelectionModeChange": "pointSelectionModeChange"; "redrawOnResizeChange": "redrawOnResizeChange"; "resolveLabelOverlappingChange": "resolveLabelOverlappingChange"; "rtlEnabledChange": "rtlEnabledChange"; "segmentsDirectionChange": "segmentsDirectionChange"; "seriesChange": "seriesChange"; "seriesTemplateChange": "seriesTemplateChange"; "sizeChange": "sizeChange"; "sizeGroupChange": "sizeGroupChange"; "startAngleChange": "startAngleChange"; "themeChange": "themeChange"; "titleChange": "titleChange"; "tooltipChange": "tooltipChange"; "typeChange": "typeChange"; }, ["annotationsChildren", "seriesChildren", "annotationsLegacyChildren", "seriesLegacyChildren"], never, false, never>;
}
export declare class DxPieChartModule {
static ɵfac: i0.ɵɵFactoryDeclaration<DxPieChartModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<DxPieChartModule, [typeof DxPieChartComponent], [typeof i1.DxoAdaptiveLayoutModule, typeof i1.DxoAnimationModule, typeof i1.DxiAnnotationModule, typeof i1.DxoBorderModule, typeof i1.DxoFontModule, typeof i1.DxoImageModule, typeof i1.DxoShadowModule, typeof i1.DxoCommonAnnotationSettingsModule, typeof i1.DxoCommonSeriesSettingsModule, typeof i1.DxoColorModule, typeof i1.DxoHoverStyleModule, typeof i1.DxoHatchingModule, typeof i1.DxoLabelModule, typeof i1.DxoArgumentFormatModule, typeof i1.DxoConnectorModule, typeof i1.DxoFormatModule, typeof i1.DxoSelectionStyleModule, typeof i1.DxoSmallValuesGroupingModule, typeof i1.DxoExportModule, typeof i1.DxoLegendModule, typeof i1.DxoMarginModule, typeof i1.DxoTitleModule, typeof i1.DxoSubtitleModule, typeof i1.DxoLoadingIndicatorModule, typeof i1.DxiSeriesModule, typeof i1.DxoSeriesTemplateModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i2.DxoPieChartAdaptiveLayoutModule, typeof i2.DxoPieChartAnimationModule, typeof i2.DxiPieChartAnnotationModule, typeof i2.DxoPieChartAnnotationBorderModule, typeof i2.DxoPieChartArgumentFormatModule, typeof i2.DxoPieChartBorderModule, typeof i2.DxoPieChartColorModule, typeof i2.DxoPieChartCommonAnnotationSettingsModule, typeof i2.DxoPieChartCommonSeriesSettingsModule, typeof i2.DxoPieChartConnectorModule, typeof i2.DxoPieChartExportModule, typeof i2.DxoPieChartFontModule, typeof i2.DxoPieChartFormatModule, typeof i2.DxoPieChartHatchingModule, typeof i2.DxoPieChartHoverStyleModule, typeof i2.DxoPieChartImageModule, typeof i2.DxoPieChartLabelModule, typeof i2.DxoPieChartLegendModule, typeof i2.DxoPieChartLegendTitleModule, typeof i2.DxoPieChartLegendTitleSubtitleModule, typeof i2.DxoPieChartLoadingIndicatorModule, typeof i2.DxoPieChartMarginModule, typeof i2.DxoPieChartPieChartTitleModule, typeof i2.DxoPieChartPieChartTitleSubtitleModule, typeof i2.DxoPieChartSelectionStyleModule, typeof i2.DxiPieChartSeriesModule, typeof i2.DxoPieChartSeriesBorderModule, typeof i2.DxoPieChartSeriesTemplateModule, typeof i2.DxoPieChartShadowModule, typeof i2.DxoPieChartSizeModule, typeof i2.DxoPieChartSmallValuesGroupingModule, typeof i2.DxoPieChartSubtitleModule, typeof i2.DxoPieChartTitleModule, typeof i2.DxoPieChartTooltipModule, typeof i2.DxoPieChartTooltipBorderModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxPieChartComponent, typeof i1.DxoAdaptiveLayoutModule, typeof i1.DxoAnimationModule, typeof i1.DxiAnnotationModule, typeof i1.DxoBorderModule, typeof i1.DxoFontModule, typeof i1.DxoImageModule, typeof i1.DxoShadowModule, typeof i1.DxoCommonAnnotationSettingsModule, typeof i1.DxoCommonSeriesSettingsModule, typeof i1.DxoColorModule, typeof i1.DxoHoverStyleModule, typeof i1.DxoHatchingModule, typeof i1.DxoLabelModule, typeof i1.DxoArgumentFormatModule, typeof i1.DxoConnectorModule, typeof i1.DxoFormatModule, typeof i1.DxoSelectionStyleModule, typeof i1.DxoSmallValuesGroupingModule, typeof i1.DxoExportModule, typeof i1.DxoLegendModule, typeof i1.DxoMarginModule, typeof i1.DxoTitleModule, typeof i1.DxoSubtitleModule, typeof i1.DxoLoadingIndicatorModule, typeof i1.DxiSeriesModule, typeof i1.DxoSeriesTemplateModule, typeof i1.DxoSizeModule, typeof i1.DxoTooltipModule, typeof i2.DxoPieChartAdaptiveLayoutModule, typeof i2.DxoPieChartAnimationModule, typeof i2.DxiPieChartAnnotationModule, typeof i2.DxoPieChartAnnotationBorderModule, typeof i2.DxoPieChartArgumentFormatModule, typeof i2.DxoPieChartBorderModule, typeof i2.DxoPieChartColorModule, typeof i2.DxoPieChartCommonAnnotationSettingsModule, typeof i2.DxoPieChartCommonSeriesSettingsModule, typeof i2.DxoPieChartConnectorModule, typeof i2.DxoPieChartExportModule, typeof i2.DxoPieChartFontModule, typeof i2.DxoPieChartFormatModule, typeof i2.DxoPieChartHatchingModule, typeof i2.DxoPieChartHoverStyleModule, typeof i2.DxoPieChartImageModule, typeof i2.DxoPieChartLabelModule, typeof i2.DxoPieChartLegendModule, typeof i2.DxoPieChartLegendTitleModule, typeof i2.DxoPieChartLegendTitleSubtitleModule, typeof i2.DxoPieChartLoadingIndicatorModule, typeof i2.DxoPieChartMarginModule, typeof i2.DxoPieChartPieChartTitleModule, typeof i2.DxoPieChartPieChartTitleSubtitleModule, typeof i2.DxoPieChartSelectionStyleModule, typeof i2.DxiPieChartSeriesModule, typeof i2.DxoPieChartSeriesBorderModule, typeof i2.DxoPieChartSeriesTemplateModule, typeof i2.DxoPieChartShadowModule, typeof i2.DxoPieChartSizeModule, typeof i2.DxoPieChartSmallValuesGroupingModule, typeof i2.DxoPieChartSubtitleModule, typeof i2.DxoPieChartTitleModule, ty