UNPKG

igniteui-react-charts

Version:

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

789 lines (787 loc) 25.6 kB
import { AxisRangeBufferMode } from "./AxisRangeBufferMode"; import { FeatureState } from "igniteui-react-core"; import { IgrAxis, IIgrAxisProps } from "./igr-axis"; import { NumericAxisBase } from "./NumericAxisBase"; /** * Represents the base class for all IgxDataChartComponent numeric axes. */ export declare abstract class IgrNumericAxisBase<P extends IIgrNumericAxisBaseProps = IIgrNumericAxisBaseProps> extends IgrAxis<P> { /** * @hidden */ get i(): NumericAxisBase; constructor(props: P); /** * Gets or sets if the current axis is of numeric axis type */ get isNumeric(): boolean; /** * Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series. */ get autoRangeBufferMode(): AxisRangeBufferMode; set autoRangeBufferMode(v: AxisRangeBufferMode); /** * Gets or sets the MinimumValue property. * * Used to set the minimum value of a numeric axis. To get the minimum value in effect on a numeric axis use `ActualMinimumValue`. * * ```ts * this.yAxis.minimumValue = 0; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * maximumValue={900} * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get minimumValue(): number; set minimumValue(v: number); /** * Gets the effective minimum value for the current numeric axis object. * * ```ts * let effectiveMinValue: number = yAxis.actualMinimumValue; * ``` */ get actualMinimumValue(): number; set actualMinimumValue(v: number); /** * Gets the effective minimum value for the current numeric axis object. * * The `actualVisibleMinimumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `actualVisibleMinimumValue` may differ from the `actualMinimumValue`, for example when the chart is zoomed. * * ```ts * let effectiveVisibleMinValue: number = yAxis.actualVisibleMinimumValue; * ``` */ get actualVisibleMinimumValue(): number; set actualVisibleMinimumValue(v: number); /** * Gets or sets the MaximumValue property. * * Used to set the maximum value of a numeric axis. To get the maximum value in effect on a numeric axis use `ActualMaximumValue`. * * ```ts * this.yAxis.maximumValue = 80; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get maximumValue(): number; set maximumValue(v: number); /** * Gets the effective maximum value for the current numeric axis object. * * ```ts * let effectiveMaxValue: number = yAxis.actualMaximumValue; * ``` */ get actualMaximumValue(): number; set actualMaximumValue(v: number); /** * Gets the effective visible maximum value for the current numeric axis object. * * The `ActualVisibleMaximumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `ActualVisibleMaximumValue` may differ from the `ActualMaximumValue`, for example when the chart is zoomed. * * ```ts * let effectiveVisibleMaxValue: number = yAxis.actualVisibleMaximumValue; * ``` */ get actualVisibleMaximumValue(): number; set actualVisibleMaximumValue(v: number); /** * Gets or sets the Interval property. * * The `Interval` is used to get or set the numeric axis major interval which specifies how frequent major gridlines and axis labels are rendered on an axis. * * ```ts * this.yAxis.interval = 20; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * maximumValue={900} * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get interval(): number; set interval(v: number); /** * Gets the effective value for the current Interval. * * ```ts * let effectiveInterval: number = yAxis.actualInterval; * ``` */ get actualInterval(): number; set actualInterval(v: number); /** * Gets the effective value for the current max precision. */ get actualMaxPrecision(): number; set actualMaxPrecision(v: number); /** * Gets or sets the the maximum precision to use for the auto interval. */ get maxPrecision(): number; set maxPrecision(v: number); /** * Gets or sets the the maximum precision to use for the auto interval. */ get shouldApplyMaxPrecisionWhenZoomed(): boolean; set shouldApplyMaxPrecisionWhenZoomed(v: boolean); /** * Gets or sets the MinorInterval property. * * The `MinorInterval` is used to get or set the numeric axis minor interval which specifies how frequent minor gridlines are rendered on an axis. Please note, in order for minor gridlines to be displayed the following may also need to be set: `MinorStroke`, `MinorStrokeThickness`. * * ```ts * this.yAxis.minorInterval = 2.5; * this.yAxis.minorStroke = 'blue'; * this.yAxis.minorStrokeThickness = 1; * ``` * * ```ts * <IgrDataChart > * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * minorInterval= 2.5 * minorStroke="blue" /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get minorInterval(): number; set minorInterval(v: number); /** * Gets the effective value for the current MinorInterval. * * ```ts * let effectiveMinorInterval: number = yAxis.actualMinorInterval; * ``` */ get actualMinorInterval(): number; set actualMinorInterval(v: number); /** * Gets or sets the ReferenceValue property. * * Used to get or set a reference value on a numeric axis which when used with an area, bar, or column series will result in the series shapes being drawn above or below the specified value. * * ```ts * this.yAxis.referenceValue = 30; * ``` * * ```ts * <IgrDataChart > * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * referenceValue= {30} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get referenceValue(): number; set referenceValue(v: number); /** * Gets or sets the IsLogarithmic property. * * `IsLogarithmic` is used to get or set whether the numeric axis scaler is in linear or logarithmic mode. For logarithmic scaling, this can be used in conjunction with `LogarithmBase` to further define the logarithmic scale. * * ```ts * this.yAxis.isLogarithmic= true; * this.yAxis.logarithmBase = 2; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * IsLogarithmic="True" * LogarithmBase={2}/> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get isLogarithmic(): boolean; set isLogarithmic(v: boolean); /** * Determines if the axis has a valid logarithmic scale. * * ```ts * let effectiveLogarithmic: boolean = this.yAxis.actualIsLogarithmic * ``` */ get actualIsLogarithmic(): boolean; set actualIsLogarithmic(v: boolean); /** * Gets or sets whether the axis should favor emitting a label at the end of the scale. */ get favorLabellingScaleEnd(): boolean; set favorLabellingScaleEnd(v: boolean); /** * Gets or sets the LogarithmBase property. * * `LogarithmBase` is used to get or set logarithm base when a numeric axis is in Logarithmic scale mode. For logarithmic scaling, this is used in conjunction with `IsLogarithmic` or `ScaleMode` to set logarithmic scaling. * * ```ts * this.yAxis.scaleMode = NumericScaleMode.Logarithmic; * this.yAxis.logarithmBase = 2; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * ScaleMode="Logarithmic" * LogarithmBase={2}/> * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ get logarithmBase(): number; set logarithmBase(v: number); /** * Gets or sets interval of labels on the companion axis. */ get companionAxisInterval(): number; set companionAxisInterval(v: number); /** * Gets or sets interval of minor gridlines on the companion axis. */ get companionAxisMinorInterval(): number; set companionAxisMinorInterval(v: number); /** * Gets or sets minimum value the companion axis. */ get companionAxisMinimumValue(): number; set companionAxisMinimumValue(v: number); /** * Gets or sets maximum value the companion axis. */ get companionAxisMaximumValue(): number; set companionAxisMaximumValue(v: number); /** * Gets or sets whether or not the companion axis is logarithmic. */ get companionAxisIsLogarithmic(): FeatureState; set companionAxisIsLogarithmic(v: FeatureState); /** * Gets or sets logarithm base on the companion axis. */ get companionAxisLogarithmBase(): number; set companionAxisLogarithmBase(v: number); /** * Sets or gets a function which takes an object that produces a formatted label for displaying in the chart. */ get formatAbbreviatedLabel(): (item: any) => string; set formatAbbreviatedLabel(v: (item: any) => string); /** * Gets or sets the label format string to use for the label. */ get abbreviatedLabelFormat(): string; set abbreviatedLabelFormat(v: string); /** * Gets or sets the format specifiers to use with the AbbreviatedLabelFormat string. */ get abbreviatedLabelFormatSpecifiers(): any[]; set abbreviatedLabelFormatSpecifiers(v: any[]); get isFormattingAbbreviatedLargeNumber(): boolean; set isFormattingAbbreviatedLargeNumber(v: boolean); /** * Determines if the axis has a user-defined minimum. * * `HasUserMaximum` is used to determine if a numeric axis has a user definied maximum value. * * ```ts * let hasSetMaximum: boolean = this.yAxis.hasUserMaximum; * ``` */ get hasUserMinimum(): boolean; /** * Determines if the axis has a user-defined maximum. * * `HasUserMinimum` is used to determine if a numeric axis has a user definied minium value. * * ```ts * let hasSetMinimum: boolean = this.yAxis.hasUserMinimum; * ``` */ get hasUserMaximum(): boolean; /** * A boolean indicating whether or not to abbreviate large numbers. */ get abbreviateLargeNumbers(): boolean; set abbreviateLargeNumbers(v: boolean); findByName(name: string): any; getFullRange(): number[]; /** * Unscales a value from screen space into axis space. * @param unscaledValue * The scaled value in screen coordinates to unscale into axis space. * * Unscales a value from screen space into axis space. * * ```ts * let dataValue: number = this.yAxis.unscaleValue(pixel); * ``` */ unscaleValue(unscaledValue: number): number; private _actualMinimumValueChange; private _actualMinimumValueChange_wrapped; get actualMinimumValueChange(): (s: IgrNumericAxisBase, e: number) => void; set actualMinimumValueChange(ev: (s: IgrNumericAxisBase, e: number) => void); private _actualMaximumValueChange; private _actualMaximumValueChange_wrapped; get actualMaximumValueChange(): (s: IgrNumericAxisBase, e: number) => void; set actualMaximumValueChange(ev: (s: IgrNumericAxisBase, e: number) => void); private _actualIntervalChange; private _actualIntervalChange_wrapped; get actualIntervalChange(): (s: IgrNumericAxisBase, e: number) => void; set actualIntervalChange(ev: (s: IgrNumericAxisBase, e: number) => void); private _actualMinorIntervalChange; private _actualMinorIntervalChange_wrapped; get actualMinorIntervalChange(): (s: IgrNumericAxisBase, e: number) => void; set actualMinorIntervalChange(ev: (s: IgrNumericAxisBase, e: number) => void); } export interface IIgrNumericAxisBaseProps extends IIgrAxisProps { /** * Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series. */ autoRangeBufferMode?: AxisRangeBufferMode | string; /** * Gets or sets the MinimumValue property. * * Used to set the minimum value of a numeric axis. To get the minimum value in effect on a numeric axis use `ActualMinimumValue`. * * ```ts * this.yAxis.minimumValue = 0; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * maximumValue={900} * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ minimumValue?: number | string; /** * Gets the effective minimum value for the current numeric axis object. * * ```ts * let effectiveMinValue: number = yAxis.actualMinimumValue; * ``` */ actualMinimumValue?: number | string; /** * Gets the effective minimum value for the current numeric axis object. * * The `actualVisibleMinimumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `actualVisibleMinimumValue` may differ from the `actualMinimumValue`, for example when the chart is zoomed. * * ```ts * let effectiveVisibleMinValue: number = yAxis.actualVisibleMinimumValue; * ``` */ actualVisibleMinimumValue?: number | string; /** * Gets or sets the MaximumValue property. * * Used to set the maximum value of a numeric axis. To get the maximum value in effect on a numeric axis use `ActualMaximumValue`. * * ```ts * this.yAxis.maximumValue = 80; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ maximumValue?: number | string; /** * Gets the effective maximum value for the current numeric axis object. * * ```ts * let effectiveMaxValue: number = yAxis.actualMaximumValue; * ``` */ actualMaximumValue?: number | string; /** * Gets the effective visible maximum value for the current numeric axis object. * * The `ActualVisibleMaximumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `ActualVisibleMaximumValue` may differ from the `ActualMaximumValue`, for example when the chart is zoomed. * * ```ts * let effectiveVisibleMaxValue: number = yAxis.actualVisibleMaximumValue; * ``` */ actualVisibleMaximumValue?: number | string; /** * Gets or sets the Interval property. * * The `Interval` is used to get or set the numeric axis major interval which specifies how frequent major gridlines and axis labels are rendered on an axis. * * ```ts * this.yAxis.interval = 20; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * labelLocation="OutsideLeft" * maximumValue={900} * interval={300} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ interval?: number | string; /** * Gets the effective value for the current Interval. * * ```ts * let effectiveInterval: number = yAxis.actualInterval; * ``` */ actualInterval?: number | string; /** * Gets the effective value for the current max precision. */ actualMaxPrecision?: number | string; /** * Gets or sets the the maximum precision to use for the auto interval. */ maxPrecision?: number | string; /** * Gets or sets the the maximum precision to use for the auto interval. */ shouldApplyMaxPrecisionWhenZoomed?: boolean | string; /** * Gets or sets the MinorInterval property. * * The `MinorInterval` is used to get or set the numeric axis minor interval which specifies how frequent minor gridlines are rendered on an axis. Please note, in order for minor gridlines to be displayed the following may also need to be set: `MinorStroke`, `MinorStrokeThickness`. * * ```ts * this.yAxis.minorInterval = 2.5; * this.yAxis.minorStroke = 'blue'; * this.yAxis.minorStrokeThickness = 1; * ``` * * ```ts * <IgrDataChart > * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * minimumValue={-900} * minorInterval= 2.5 * minorStroke="blue" /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ minorInterval?: number | string; /** * Gets the effective value for the current MinorInterval. * * ```ts * let effectiveMinorInterval: number = yAxis.actualMinorInterval; * ``` */ actualMinorInterval?: number | string; /** * Gets or sets the ReferenceValue property. * * Used to get or set a reference value on a numeric axis which when used with an area, bar, or column series will result in the series shapes being drawn above or below the specified value. * * ```ts * this.yAxis.referenceValue = 30; * ``` * * ```ts * <IgrDataChart > * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * referenceValue= {30} /> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ referenceValue?: number | string; /** * Gets or sets the IsLogarithmic property. * * `IsLogarithmic` is used to get or set whether the numeric axis scaler is in linear or logarithmic mode. For logarithmic scaling, this can be used in conjunction with `LogarithmBase` to further define the logarithmic scale. * * ```ts * this.yAxis.isLogarithmic= true; * this.yAxis.logarithmBase = 2; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * IsLogarithmic="True" * LogarithmBase={2}/> * * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ isLogarithmic?: boolean | string; /** * Determines if the axis has a valid logarithmic scale. * * ```ts * let effectiveLogarithmic: boolean = this.yAxis.actualIsLogarithmic * ``` */ actualIsLogarithmic?: boolean | string; /** * Gets or sets whether the axis should favor emitting a label at the end of the scale. */ favorLabellingScaleEnd?: boolean | string; /** * Gets or sets the LogarithmBase property. * * `LogarithmBase` is used to get or set logarithm base when a numeric axis is in Logarithmic scale mode. For logarithmic scaling, this is used in conjunction with `IsLogarithmic` or `ScaleMode` to set logarithmic scaling. * * ```ts * this.yAxis.scaleMode = NumericScaleMode.Logarithmic; * this.yAxis.logarithmBase = 2; * ``` * * ```ts * <IgrDataChart > * * * <IgrCategoryXAxis name="xAxisYears" * interval={12} labelLocation="OutsideBottom" * label="Year" overlap={1} gap={0.4} /> * * <IgrNumericYAxis name="yAxisLeft" * title="Expanse | Revenue" * ScaleMode="Logarithmic" * LogarithmBase={2}/> * * <IgrLineSeries name="series1" * valueMemberPath="Revenue" * xAxisName="xAxisMonths" * yAxisName="yAxisLeft" /> * </IgrDataChart> * ``` */ logarithmBase?: number | string; /** * Gets or sets interval of labels on the companion axis. */ companionAxisInterval?: number | string; /** * Gets or sets interval of minor gridlines on the companion axis. */ companionAxisMinorInterval?: number | string; /** * Gets or sets minimum value the companion axis. */ companionAxisMinimumValue?: number | string; /** * Gets or sets maximum value the companion axis. */ companionAxisMaximumValue?: number | string; /** * Gets or sets whether or not the companion axis is logarithmic. */ companionAxisIsLogarithmic?: FeatureState | string; /** * Gets or sets logarithm base on the companion axis. */ companionAxisLogarithmBase?: number | string; /** * Sets or gets a function which takes an object that produces a formatted label for displaying in the chart. */ formatAbbreviatedLabel?: (item: any) => string; /** * Gets or sets the label format string to use for the label. */ abbreviatedLabelFormat?: string; /** * Gets or sets the format specifiers to use with the AbbreviatedLabelFormat string. */ abbreviatedLabelFormatSpecifiers?: any[]; isFormattingAbbreviatedLargeNumber?: boolean | string; /** * A boolean indicating whether or not to abbreviate large numbers. */ abbreviateLargeNumbers?: boolean | string; }