UNPKG

igniteui-react-charts

Version:

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

530 lines (523 loc) 18.9 kB
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; }