UNPKG

igniteui-angular-charts

Version:

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

451 lines (448 loc) 20.7 kB
import { OnDestroy, AfterViewInit, Injector, ComponentFactoryResolver, AfterContentInit, Renderer2, QueryList, NgZone, ViewContainerRef } from '@angular/core'; import { IgxAxisComponent } from './igx-axis-component'; import { IgxSeriesComponent } from './igx-series-component'; import { GridMode } from './GridMode'; import { IgxSeriesViewerComponent } from './igx-series-viewer-component'; import { XamDataChart } from './XamDataChart'; import { IgxSeriesCollection } from './igx-series-collection'; import { IgxAxisCollection } from './igx-axis-collection'; import { ComputedPlotAreaMarginMode } from './ComputedPlotAreaMarginMode'; import { AutoMarginsAndAngleUpdateMode } from './AutoMarginsAndAngleUpdateMode'; import { SeriesPlotAreaMarginHorizontalMode } from './SeriesPlotAreaMarginHorizontalMode'; import { SeriesPlotAreaMarginVerticalMode } from './SeriesPlotAreaMarginVerticalMode'; import * as i0 from "@angular/core"; /** * Represents a chart area containing axes, series, an optional legend and other hosted content. */ export declare class IgxDataChartComponent extends IgxSeriesViewerComponent implements AfterContentInit, AfterViewInit, OnDestroy { private _renderer; private _elRef; private _ngZone; private _componentFactoryResolver; private _injector; contentAxes: QueryList<IgxAxisComponent>; contentSeries: QueryList<IgxSeriesComponent>; _dynamicContent: ViewContainerRef; private _height; private _width; set height(value: string); get height(): string; set width(value: string); get width(): string; /** * Gets or sets the legend used for the current chart. */ get legend(): any; set legend(v: any); /** * The series actually present in the chart. Do not directly modify this array. * This array's contents can be modified by causing Angular to reproject the child content. * Or adding and removing series from the manual series collection on the series property. */ actualSeries: IgxSeriesComponent[]; /** * The axes actually present in the chart. Do not directly modify this array. * This array's contents can be modified by causing Angular to reproject the child content. * Or adding and removing axes from the manual axes collection on the axes property. */ actualAxes: IgxAxisComponent[]; private _container; private _series; /** * A collection or manually added series for the chart. */ get series(): IgxSeriesCollection; private _axes; /** * A collection or manually added axes for the chart. */ get axes(): IgxAxisCollection; private _root; constructor(_renderer: Renderer2, _elRef: ViewContainerRef, _ngZone: NgZone, _componentFactoryResolver: ComponentFactoryResolver, _injector: Injector); ngOnDestroy(): void; private _wrapper; protected createImplementation(): XamDataChart; private _chart; private _dataSource; set dataSource(value: any); get dataSource(): any; private _highlightedDataSource; set highlightedDataSource(value: any); get highlightedDataSource(): any; bindData(): void; bindHighlightedData(): void; private _axesAdapter; private _seriesAdapter; ngAfterContentInit(): void; ngAfterViewInit(): void; updateStyle(): void; private _ensureTooltipCreated; private _defaultTooltips; private _ensureDefaultTooltip; private _onDefaultTooltipsReady; private createTooltip; /** * Gets or sets the channel with which to synchronize. * * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically. */ get syncChannel(): string; set syncChannel(v: string); /** * Gets or sets the bool used to display the window preview shadow. * * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically. */ get synchronizeVertically(): boolean; set synchronizeVertically(v: boolean); /** * Gets or sets the bool used to display the window preview shadow. * * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically. */ get synchronizeHorizontally(): boolean; set synchronizeHorizontally(v: boolean); /** * @hidden */ get i(): XamDataChart; /** * Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts. * * Set `IsSquare` to true to constrain the chart to a square, using the minimum of its height and width. * * ```html * <igx-data-chart [dataSource]="data" * isSquare="true" * width="800px" * height="400px"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis * majorStroke="green"> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.chart.isSquare="True"; * ``` */ get isSquare(): boolean; set isSquare(v: boolean); static ngAcceptInputType_isSquare: boolean | string; /** * A number between 0 and 1 determining the scale of the horizontal zoom. * This property is effectively a shortcut to the Width of the WindowRect property. * * To programmatically change the horizontal zoom level, set `WindowScaleHorizontal` to a value between 0 and 1. * * ```html * <igx-data-chart [dataSource]="data" * windowScaleHorizontal="0.75"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.chart.windowScaleHorizontal="0.75"; * ``` */ get windowScaleHorizontal(): number; set windowScaleHorizontal(v: number); static ngAcceptInputType_windowScaleHorizontal: number | string; /** * A number between 0 and 1 determining the scale of the vertical zoom. * This property is effectively a shortcut to the Height of the WindowRect property. * * To programmatically change the vertical zoom level, set `WindowScaleVertical` to a value between 0 and 1. * * ```html * <igx-data-chart [dataSource]="data" * windowScaleVertical="0.75"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.chart.windowScaleVertical="0.75"; * ``` */ get windowScaleVertical(): number; set windowScaleVertical(v: number); static ngAcceptInputType_windowScaleVertical: number | string; /** * A number between 0 and 1 determining the scale of the horizontal zoom. * This property is effectively a shortcut to the Width of the ActualWindowRect property. */ get actualWindowScaleHorizontal(): number; set actualWindowScaleHorizontal(v: number); static ngAcceptInputType_actualWindowScaleHorizontal: number | string; /** * A number between 0 and 1 determining the scale of the vertical zoom. * This property is effectively a shortcut to the Height of the ActualWindowRect property. */ get actualWindowScaleVertical(): number; set actualWindowScaleVertical(v: number); static ngAcceptInputType_actualWindowScaleVertical: number | string; /** * Gets or sets horizontal zoomability of the current control * * Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming. * * ```html * <igx-data-chart [dataSource]="data" * isHorizontalZoomEnabled="true"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.chart.IsHorizontalZoomEnabled= true; * ``` */ get isHorizontalZoomEnabled(): boolean; set isHorizontalZoomEnabled(v: boolean); static ngAcceptInputType_isHorizontalZoomEnabled: boolean | string; /** * Gets or sets vertical zoomability of the current control * * Set `IsVerticalZoomEnabled` to enable or disable vertical zooming. * * ```html * <igx-data-chart [dataSource]="data" * isVerticalZoomEnabled="true"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` * * ```ts * this.chart.isVerticalZoomEnabled="True"; * ``` */ get isVerticalZoomEnabled(): boolean; set isVerticalZoomEnabled(v: boolean); static ngAcceptInputType_isVerticalZoomEnabled: boolean | string; /** * Gets or sets how grid lines are rendered in relation to series. * * Try setting the `GridMode` property to bring your grid lines in front of the data series. * * ```html * <igx-data-chart [dataSource]="data" * gridMode="beforeSeries"> * <igx-category-x-axis #xAxis * label="label"> * </igx-category-x-axis> * <igx-numeric-y-axis #yAxis * majorStroke="green"> * </igx-numeric-y-axis> * * <igx-column-series * [xAxis]="xAxis" * [yAxis]="yAxis" * valueMemberPath="value"> * </igx-column-series> * </igx-data-chart> * ``` */ get gridMode(): GridMode; set gridMode(v: GridMode); static ngAcceptInputType_gridMode: GridMode | string; /** * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels. */ get alignsGridLinesToPixels(): boolean; set alignsGridLinesToPixels(v: boolean); static ngAcceptInputType_alignsGridLinesToPixels: boolean | string; /** * Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels. */ get autoExpandMarginMaximumValue(): number; set autoExpandMarginMaximumValue(v: number); static ngAcceptInputType_autoExpandMarginMaximumValue: number | string; /** * Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels. */ get autoExpandMarginExtraPadding(): number; set autoExpandMarginExtraPadding(v: number); static ngAcceptInputType_autoExpandMarginExtraPadding: number | string; /** * Gets or sets a whether the series viewer should suppress truncation of axis labels. */ get shouldSuppressAxisLabelTruncation(): boolean; set shouldSuppressAxisLabelTruncation(v: boolean); static ngAcceptInputType_shouldSuppressAxisLabelTruncation: boolean | string; /** * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels. */ get shouldAutoExpandMarginForInitialLabels(): boolean; set shouldAutoExpandMarginForInitialLabels(v: boolean); static ngAcceptInputType_shouldAutoExpandMarginForInitialLabels: boolean | string; /** * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true. */ get shouldConsiderAutoRotationForInitialLabels(): boolean; set shouldConsiderAutoRotationForInitialLabels(v: boolean); static ngAcceptInputType_shouldConsiderAutoRotationForInitialLabels: boolean | string; /** * Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles. */ get suppressAutoMarginAndAngleRecalculation(): boolean; set suppressAutoMarginAndAngleRecalculation(v: boolean); static ngAcceptInputType_suppressAutoMarginAndAngleRecalculation: boolean | string; /** * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true. */ get autoMarginAndAngleUpdateMode(): AutoMarginsAndAngleUpdateMode; set autoMarginAndAngleUpdateMode(v: AutoMarginsAndAngleUpdateMode); static ngAcceptInputType_autoMarginAndAngleUpdateMode: AutoMarginsAndAngleUpdateMode | string; /** * Gets or sets the DefaultAxisStroke property. * The DefaultAxisStroke property defines the brush which is used by the axes when no * Axis.Stroke is set. */ get defaultAxisStroke(): string; set defaultAxisStroke(v: string); /** * Gets or sets the DefaultAxisMajorStroke property. * The DefaultAxisMajorStroke property defines the brush which is used by the axes when no * Axis.MajorStroke is set. */ get defaultAxisMajorStroke(): string; set defaultAxisMajorStroke(v: string); /** * Gets or sets the DefaultAxisMinorStroke property. * The DefaultAxisMinorStroke property defines the brush which is used by the axes when no * Axis.MinorStroke is set. */ get defaultAxisMinorStroke(): string; set defaultAxisMinorStroke(v: string); /** * Gets the actual resolved left plot area margin; */ get actualPlotAreaMarginLeft(): number; set actualPlotAreaMarginLeft(v: number); static ngAcceptInputType_actualPlotAreaMarginLeft: number | string; /** * Gets the actual resolved top plot area margin; */ get actualPlotAreaMarginTop(): number; set actualPlotAreaMarginTop(v: number); static ngAcceptInputType_actualPlotAreaMarginTop: number | string; /** * Gets the actual resolved right plot area margin; */ get actualPlotAreaMarginRight(): number; set actualPlotAreaMarginRight(v: number); static ngAcceptInputType_actualPlotAreaMarginRight: number | string; /** * Gets the actual resolved bottom plot area margin; */ get actualPlotAreaMarginBottom(): number; set actualPlotAreaMarginBottom(v: number); static ngAcceptInputType_actualPlotAreaMarginBottom: number | string; /** * Gets or sets mode to use for automatically calculating the plot area margin. */ get computedPlotAreaMarginMode(): ComputedPlotAreaMarginMode; set computedPlotAreaMarginMode(v: ComputedPlotAreaMarginMode); static ngAcceptInputType_computedPlotAreaMarginMode: ComputedPlotAreaMarginMode | string; /** * Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series. */ get seriesPlotAreaMarginHorizontalMode(): SeriesPlotAreaMarginHorizontalMode; set seriesPlotAreaMarginHorizontalMode(v: SeriesPlotAreaMarginHorizontalMode); static ngAcceptInputType_seriesPlotAreaMarginHorizontalMode: SeriesPlotAreaMarginHorizontalMode | string; /** * Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series. */ get seriesPlotAreaMarginVerticalMode(): SeriesPlotAreaMarginVerticalMode; set seriesPlotAreaMarginVerticalMode(v: SeriesPlotAreaMarginVerticalMode); static ngAcceptInputType_seriesPlotAreaMarginVerticalMode: SeriesPlotAreaMarginVerticalMode | string; /** * Margin applied to the left of the plot area. */ get plotAreaMarginLeft(): number; set plotAreaMarginLeft(v: number); static ngAcceptInputType_plotAreaMarginLeft: number | string; /** * Margin applied above the plot area. */ get plotAreaMarginTop(): number; set plotAreaMarginTop(v: number); static ngAcceptInputType_plotAreaMarginTop: number | string; /** * Margin applied to the right of the plot area. */ get plotAreaMarginRight(): number; set plotAreaMarginRight(v: number); static ngAcceptInputType_plotAreaMarginRight: number | string; /** * Margin applied below the plot area. */ get plotAreaMarginBottom(): number; set plotAreaMarginBottom(v: number); static ngAcceptInputType_plotAreaMarginBottom: number | string; findByName(name: string): any; refreshComputedPlotAreaMargin(): void; recalculateMarginAutoExpansion(): void; recalculateAutoLabelsAngle(): void; /** * Notifies the chart that the CSS styles in effect have been updated. */ styleUpdated(): void; /** * Export serialized visual data. */ exportSerializedVisualData(): string; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDataChartComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxDataChartComponent, "igx-data-chart", never, { "height": "height"; "width": "width"; "legend": "legend"; "dataSource": "dataSource"; "highlightedDataSource": "highlightedDataSource"; "syncChannel": "syncChannel"; "synchronizeVertically": "synchronizeVertically"; "synchronizeHorizontally": "synchronizeHorizontally"; "isSquare": "isSquare"; "windowScaleHorizontal": "windowScaleHorizontal"; "windowScaleVertical": "windowScaleVertical"; "actualWindowScaleHorizontal": "actualWindowScaleHorizontal"; "actualWindowScaleVertical": "actualWindowScaleVertical"; "isHorizontalZoomEnabled": "isHorizontalZoomEnabled"; "isVerticalZoomEnabled": "isVerticalZoomEnabled"; "gridMode": "gridMode"; "alignsGridLinesToPixels": "alignsGridLinesToPixels"; "autoExpandMarginMaximumValue": "autoExpandMarginMaximumValue"; "autoExpandMarginExtraPadding": "autoExpandMarginExtraPadding"; "shouldSuppressAxisLabelTruncation": "shouldSuppressAxisLabelTruncation"; "shouldAutoExpandMarginForInitialLabels": "shouldAutoExpandMarginForInitialLabels"; "shouldConsiderAutoRotationForInitialLabels": "shouldConsiderAutoRotationForInitialLabels"; "suppressAutoMarginAndAngleRecalculation": "suppressAutoMarginAndAngleRecalculation"; "autoMarginAndAngleUpdateMode": "autoMarginAndAngleUpdateMode"; "defaultAxisStroke": "defaultAxisStroke"; "defaultAxisMajorStroke": "defaultAxisMajorStroke"; "defaultAxisMinorStroke": "defaultAxisMinorStroke"; "actualPlotAreaMarginLeft": "actualPlotAreaMarginLeft"; "actualPlotAreaMarginTop": "actualPlotAreaMarginTop"; "actualPlotAreaMarginRight": "actualPlotAreaMarginRight"; "actualPlotAreaMarginBottom": "actualPlotAreaMarginBottom"; "computedPlotAreaMarginMode": "computedPlotAreaMarginMode"; "seriesPlotAreaMarginHorizontalMode": "seriesPlotAreaMarginHorizontalMode"; "seriesPlotAreaMarginVerticalMode": "seriesPlotAreaMarginVerticalMode"; "plotAreaMarginLeft": "plotAreaMarginLeft"; "plotAreaMarginTop": "plotAreaMarginTop"; "plotAreaMarginRight": "plotAreaMarginRight"; "plotAreaMarginBottom": "plotAreaMarginBottom"; }, {}, ["contentAxes", "contentSeries"], never>; }