igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
530 lines (523 loc) • 18.9 kB
TypeScript
import * as React from 'react';
import { XamFunnelChart } from './XamFunnelChart';
import { Visibility } from "igniteui-react-core";
import { OuterLabelAlignment } from './OuterLabelAlignment';
import { FunnelSliceDisplay } from './FunnelSliceDisplay';
import { IgrFunnelSliceClickedEventArgs } from './igr-funnel-slice-clicked-event-args';
import { IgrFunnelSliceEventArgs } from './igr-funnel-slice-event-args';
import { IgDataTemplate } from "igniteui-react-core";
import { HighlightedValueDisplayMode } from "igniteui-react-core";
import { IgrFunnelChartSelectedItemsCollection } from './igr-funnel-chart-selected-items-collection';
import { IgrFunnelChartSelectedItemsChangedEventArgs } from './igr-funnel-chart-selected-items-changed-event-args';
export declare class IgrFunnelChart extends React.Component<IIgrFunnelChartProps> {
private container;
private _height;
private _width;
private _elRef;
set height(value: string);
get height(): string;
set width(value: string);
get width(): string;
private _getMainRef;
render(): React.DetailedReactHTMLElement<{
className: string;
ref: (ref: any) => void;
}, any>;
constructor(props: IIgrFunnelChartProps);
destroy(): void;
shouldComponentUpdate(nextProps: any, nextState: any): boolean;
protected initializeProperties(): void;
componentDidMount(): void;
componentWillUnmount(): void;
private _wrapper;
protected createImplementation(): XamFunnelChart;
protected createSeriesComponent(type: string): any;
private _chart;
private _dataSource;
set dataSource(value: Array<any>);
get dataSource(): Array<any>;
bindData(): void;
/**
* Gets or sets the legend used for the current chart.
*/
get legend(): any;
set legend(v: any);
protected _implementation: any;
protected mounted: boolean;
get nativeElement(): HTMLElement;
/**
* @hidden
*/
get i(): XamFunnelChart; /**
* @hidden
*/
static _createFromInternal(internal: any): IgrFunnelChart;
/**
* Gets or sets the value member path for the funnel chart.
*/
get valueMemberPath(): string;
set valueMemberPath(v: string);
/**
* Gets or sets the highlighted value member path for the funnel chart.
*/
get highlightedValueMemberPath(): string;
set highlightedValueMemberPath(v: string);
/**
* Gets the actual opacity of the primary needle while highlighting
*/
get actualHighlightValueOpacity(): number;
set actualHighlightValueOpacity(v: number);
/**
* Gets or sets the opacity while highlighting
*/
get highlightValueOpacity(): number;
set highlightValueOpacity(v: number);
/**
* Gets whether and how to display the highlighted value.
*/
get actualHighlightValueDisplayMode(): HighlightedValueDisplayMode;
set actualHighlightValueDisplayMode(v: HighlightedValueDisplayMode);
/**
* Gets or sets whether and how to display the highlighted value.
*/
get highlightValueDisplayMode(): HighlightedValueDisplayMode;
set highlightValueDisplayMode(v: HighlightedValueDisplayMode);
/**
* Gets or sets the palette of brushes to use for coloring the slices.
*/
get brushes(): string[];
set brushes(v: string[]);
/**
* Gets or sets the palette of brushes to use for outlines on the slices.
*/
get outlines(): string[];
set outlines(v: string[]);
/**
* Gets or sets the percentage (from near 0 to 1) of space the bottom edge of the funnel should take.
*/
get bottomEdgeWidth(): number;
set bottomEdgeWidth(v: number);
/**
* Gets or sets the InnerLabel mapping property for the current series object.
*/
get innerLabelMemberPath(): string;
set innerLabelMemberPath(v: string);
/**
* Gets or sets the OuterLabel mapping property for the current series object.
*/
get outerLabelMemberPath(): string;
set outerLabelMemberPath(v: string);
/**
* Gets or sets whether the inner labels are visible.
*/
get innerLabelVisibility(): Visibility;
set innerLabelVisibility(v: Visibility);
/**
* Gets or sets whether the outer labels are visible.
*/
get outerLabelVisibility(): Visibility;
set outerLabelVisibility(v: Visibility);
/**
* Gets or sets which side of the chart the outer labels should appear.
*/
get outerLabelAlignment(): OuterLabelAlignment;
set outerLabelAlignment(v: OuterLabelAlignment);
/**
* Gets or sets how the heights of the funnel slices should be configured.
*/
get funnelSliceDisplay(): FunnelSliceDisplay;
set funnelSliceDisplay(v: FunnelSliceDisplay);
/**
* Gets or sets the formatter function for inner labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
*/
get formatInnerLabel(): (arg1: any, arg2: number, arg3: any) => string;
set formatInnerLabel(v: (arg1: any, arg2: number, arg3: any) => string);
/**
* Gets or sets the formatter function for outer labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
*/
get formatOuterLabel(): (arg1: any, arg2: number, arg3: any) => string;
set formatOuterLabel(v: (arg1: any, arg2: number, arg3: any) => string);
/**
* Gets or sets how long the animations should take to run.
*/
get transitionDuration(): number;
set transitionDuration(v: number);
/**
* Gets or sets if the funnel should be rendered inverted.
*/
get isInverted(): boolean;
set isInverted(v: boolean);
/**
* Gets or sets whether to use a Bezier curve to define the funnel.
*/
get useBezierCurve(): boolean;
set useBezierCurve(v: boolean);
/**
* Gets or sets whether to allow slices to be selected.
*/
get allowSliceSelection(): boolean;
set allowSliceSelection(v: boolean);
/**
* Gets or sets whether to use the unselected style on unselected slices.
*/
get useUnselectedStyle(): boolean;
set useUnselectedStyle(v: boolean);
/**
* Gets or sets the fill brush.
*/
get selectedSliceFill(): string;
set selectedSliceFill(v: string);
/**
* Gets or sets the stroke brush.
*/
get selectedSliceStroke(): string;
set selectedSliceStroke(v: string);
/**
* Gets or sets the stroke thickness.
*/
get selectedSliceStrokeThickness(): number;
set selectedSliceStrokeThickness(v: number);
/**
* Gets or sets the opacity.
*/
get selectedSliceOpacity(): number;
set selectedSliceOpacity(v: number);
ensureSelectedSliceStyle(): void;
/**
* Gets or sets the fill brush.
*/
get unselectedSliceFill(): string;
set unselectedSliceFill(v: string);
/**
* Gets or sets the stroke brush.
*/
get unselectedSliceStroke(): string;
set unselectedSliceStroke(v: string);
/**
* Gets or sets the stroke thickness.
*/
get unselectedSliceStrokeThickness(): number;
set unselectedSliceStrokeThickness(v: number);
/**
* Gets or sets the opacity.
*/
get unselectedSliceOpacity(): number;
set unselectedSliceOpacity(v: number);
ensureUnselectedSliceStyle(): void;
private _selectedItems;
/**
* Represents the current selected items.
*/
get selectedItems(): IgrFunnelChartSelectedItemsCollection;
set selectedItems(v: IgrFunnelChartSelectedItemsCollection);
/**
* Gets or sets the LegendItemBadgeTemplate to use for the legend items.
*/
get legendItemBadgeTemplate(): IgDataTemplate;
set legendItemBadgeTemplate(v: IgDataTemplate);
/**
* Gets or sets whether to use the outer labels to identify the legend items.
*/
get useOuterLabelsForLegend(): boolean;
set useOuterLabelsForLegend(v: boolean);
/**
* Gets or sets the text style for inner labels
*/
get textStyle(): string;
set textStyle(v: string);
/**
* Gets or sets the text style for outer labels
*/
get outerLabelTextStyle(): string;
set outerLabelTextStyle(v: string);
/**
* Gets or sets the thickness of outline around slices.
*/
get outlineThickness(): number;
set outlineThickness(v: number);
/**
* Gets or sets the scaling value used to affect the pixel density of the control.
* A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
* to appear blurry.
*/
get pixelScalingRatio(): number;
set pixelScalingRatio(v: number);
/**
* Gets or sets the brush used for the outer labels.
*/
get outerLabelTextColor(): string;
set outerLabelTextColor(v: string);
/**
* Gets or sets the brush used for the inner labels.
*/
get textColor(): string;
set textColor(v: string);
findByName(name: string): any;
protected __p: string;
protected _hasUserValues: Set<string>;
protected get hasUserValues(): Set<string>;
protected __m(propertyName: string): void;
protected _stylingContainer: any;
protected _stylingParent: any;
protected _inStyling: boolean;
protected _styling(container: any, component: any, parent?: any): void;
/**
* Use to force the funnel chart to finish any deferred work before printing or evaluating its visual.
* This should only be called if the visual of the funnel chart needs to be synchronously saved or evaluated.
* Calling this method too often will hinder the performance of the funnel chart.
*/
flush(): void;
/**
* Provides container for funnel chart
*/
provideContainer(container: any): void;
/**
* Notifies the controller and view about a size change.
*/
notifyResized(): void;
notifySetItem(source_: any, index: number, oldItem: any, newItem: any): void;
/**
* Manually notifies the chart's data source that the data it has bound to has been cleared and needs to be re-examined.
* This should not be called if the data that the chart is bound to is already observable.
*/
notifyClearItems(source_: any): void;
notifyInsertItem(source_: any, index: number, newItem: any): void;
notifyRemoveItem(source_: any, index: number, oldItem: any): void;
/**
* Toggle selection of item at index.
*/
toggleSelection(index: number): void;
/**
* Exports and serializes the chart visuals.
*/
exportSerializedVisualData(): string;
private _selectedItemsChanged;
private _selectedItemsChanged_wrapped;
/**
* Raised when the SelectedItems collection has changed.
*/
get selectedItemsChanged(): (s: IgrFunnelChart, e: IgrFunnelChartSelectedItemsChangedEventArgs) => void;
set selectedItemsChanged(ev: (s: IgrFunnelChart, e: IgrFunnelChartSelectedItemsChangedEventArgs) => void);
private _sliceClicked;
private _sliceClicked_wrapped;
/**
* Event which is raised when a slice is clicked.
* Function takes first argument null and second argument ui.
* Use ui.owner to obtain reference to igFunnelChart.
* Use ui.index to obtain index of clicked slice.
* Use ui.item to obtain reference to clicked slice item.
* Use ui.selected to check if slice became selected.
*/
get sliceClicked(): (s: IgrFunnelChart, e: IgrFunnelSliceClickedEventArgs) => void;
set sliceClicked(ev: (s: IgrFunnelChart, e: IgrFunnelSliceClickedEventArgs) => void);
private _sliceEnter;
private _sliceEnter_wrapped;
/**
* Raised when a funnel slice is entered.
*/
get sliceEnter(): (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
set sliceEnter(ev: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void);
private _sliceLeave;
private _sliceLeave_wrapped;
/**
* Raised when a funnel slice is left.
*/
get sliceLeave(): (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
set sliceLeave(ev: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void);
private _sliceHover;
private _sliceHover_wrapped;
/**
* Raised when a funnel slice is hovered.
*/
get sliceHover(): (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
set sliceHover(ev: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void);
}
export interface IIgrFunnelChartProps {
width?: string;
height?: string;
children?: React.ReactNode;
legend?: any;
/**
* Gets or sets the data for the chart to use. This can be overriden at the series and axis level.
*/
dataSource?: any[];
/**
* Gets or sets the value member path for the funnel chart.
*/
valueMemberPath?: string;
/**
* Gets or sets the highlighted value member path for the funnel chart.
*/
highlightedValueMemberPath?: string;
/**
* Gets the actual opacity of the primary needle while highlighting
*/
actualHighlightValueOpacity?: number | string;
/**
* Gets or sets the opacity while highlighting
*/
highlightValueOpacity?: number | string;
/**
* Gets whether and how to display the highlighted value.
*/
actualHighlightValueDisplayMode?: HighlightedValueDisplayMode | string;
/**
* Gets or sets whether and how to display the highlighted value.
*/
highlightValueDisplayMode?: HighlightedValueDisplayMode | string;
/**
* Gets or sets the palette of brushes to use for coloring the slices.
*/
brushes?: string[] | string;
/**
* Gets or sets the palette of brushes to use for outlines on the slices.
*/
outlines?: string[] | string;
/**
* Gets or sets the percentage (from near 0 to 1) of space the bottom edge of the funnel should take.
*/
bottomEdgeWidth?: number | string;
/**
* Gets or sets the InnerLabel mapping property for the current series object.
*/
innerLabelMemberPath?: string;
/**
* Gets or sets the OuterLabel mapping property for the current series object.
*/
outerLabelMemberPath?: string;
/**
* Gets or sets whether the inner labels are visible.
*/
innerLabelVisibility?: Visibility | string;
/**
* Gets or sets whether the outer labels are visible.
*/
outerLabelVisibility?: Visibility | string;
/**
* Gets or sets which side of the chart the outer labels should appear.
*/
outerLabelAlignment?: OuterLabelAlignment | string;
/**
* Gets or sets how the heights of the funnel slices should be configured.
*/
funnelSliceDisplay?: FunnelSliceDisplay | string;
/**
* Gets or sets the formatter function for inner labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
*/
formatInnerLabel?: (arg1: any, arg2: number, arg3: any) => string;
/**
* Gets or sets the formatter function for outer labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.
*/
formatOuterLabel?: (arg1: any, arg2: number, arg3: any) => string;
/**
* Gets or sets how long the animations should take to run.
*/
transitionDuration?: number | string;
/**
* Gets or sets if the funnel should be rendered inverted.
*/
isInverted?: boolean | string;
/**
* Gets or sets whether to use a Bezier curve to define the funnel.
*/
useBezierCurve?: boolean | string;
/**
* Gets or sets whether to allow slices to be selected.
*/
allowSliceSelection?: boolean | string;
/**
* Gets or sets whether to use the unselected style on unselected slices.
*/
useUnselectedStyle?: boolean | string;
/**
* Gets or sets the fill brush.
*/
selectedSliceFill?: string;
/**
* Gets or sets the stroke brush.
*/
selectedSliceStroke?: string;
/**
* Gets or sets the stroke thickness.
*/
selectedSliceStrokeThickness?: number | string;
/**
* Gets or sets the opacity.
*/
selectedSliceOpacity?: number | string;
/**
* Gets or sets the fill brush.
*/
unselectedSliceFill?: string;
/**
* Gets or sets the stroke brush.
*/
unselectedSliceStroke?: string;
/**
* Gets or sets the stroke thickness.
*/
unselectedSliceStrokeThickness?: number | string;
/**
* Gets or sets the opacity.
*/
unselectedSliceOpacity?: number | string;
/**
* Gets or sets the LegendItemBadgeTemplate to use for the legend items.
*/
legendItemBadgeTemplate?: IgDataTemplate;
/**
* Gets or sets whether to use the outer labels to identify the legend items.
*/
useOuterLabelsForLegend?: boolean | string;
/**
* Gets or sets the text style for inner labels
*/
textStyle?: string;
/**
* Gets or sets the text style for outer labels
*/
outerLabelTextStyle?: string;
/**
* Gets or sets the thickness of outline around slices.
*/
outlineThickness?: number | string;
/**
* Gets or sets the scaling value used to affect the pixel density of the control.
* A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
* to appear blurry.
*/
pixelScalingRatio?: number | string;
/**
* Gets or sets the brush used for the outer labels.
*/
outerLabelTextColor?: string;
/**
* Gets or sets the brush used for the inner labels.
*/
textColor?: string;
/**
* Raised when the SelectedItems collection has changed.
*/
selectedItemsChanged?: (s: IgrFunnelChart, e: IgrFunnelChartSelectedItemsChangedEventArgs) => void;
/**
* Event which is raised when a slice is clicked.
* Function takes first argument null and second argument ui.
* Use ui.owner to obtain reference to igFunnelChart.
* Use ui.index to obtain index of clicked slice.
* Use ui.item to obtain reference to clicked slice item.
* Use ui.selected to check if slice became selected.
*/
sliceClicked?: (s: IgrFunnelChart, e: IgrFunnelSliceClickedEventArgs) => void;
/**
* Raised when a funnel slice is entered.
*/
sliceEnter?: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
/**
* Raised when a funnel slice is left.
*/
sliceLeave?: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
/**
* Raised when a funnel slice is hovered.
*/
sliceHover?: (s: IgrFunnelChart, e: IgrFunnelSliceEventArgs) => void;
}