igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
212 lines (209 loc) • 7.84 kB
TypeScript
import { IgRect } from "igniteui-angular-core";
import { IgPoint } from "igniteui-angular-core";
import { IgxAxisComponent } from './igx-axis-component';
import { CategoryAxisBase } from './CategoryAxisBase';
import * as i0 from "@angular/core";
/**
* Represents the base class for all IgxDataChartComponent category-based axes.
*
* ```html
* <igx-data-chart
* [dataSource]="data">
*
* <igx-category-x-axis
* label="label"
* #xAxis>
* </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-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* series.yAxis = this.yAxis;
* series.valueMemberPath="value";
* this.chart.series.add(series);
* ```
*/
export declare abstract class IgxCategoryAxisBaseComponent extends IgxAxisComponent {
constructor();
private _chartLevelData;
provideData(data: any[]): void;
private updateDataSource;
private _dataSource;
set dataSource(value: any);
get dataSource(): any;
/**
* @hidden
*/
get i(): CategoryAxisBase;
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous(): boolean;
static ngAcceptInputType_isContinuous: boolean | string;
/**
* Checks if the axis is of category axis type
*/
get isCategory(): boolean;
static ngAcceptInputType_isCategory: boolean | string;
/**
* Gets the number of items in the current category axis items source.
*/
get itemsCount(): number;
set itemsCount(v: number);
static ngAcceptInputType_itemsCount: number | string;
/**
* Gets or sets the amount of space between adjacent categories for the current axis object.
* The gap is silently clamped to the range [0, 1] when used.
*
* Use the `Gap` property to configure the spacing between items on a category axis with item spacing.
*
* A `Gap` of 0 allocates no space between items. A `Gap` of 1 allocates a space between items equal to the width of one item.
*
* To set the item spacing to 75% the width of one item, set the `Gap` to 0.75, as in this code:
*
* ```html
* <igx-data-chart
* [dataSource]="data">
* <igx-category-x-axis
* label="label"
* gap="0.75"
* #xAxis>
* </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>
* ```
*/
get gap(): number;
set gap(v: number);
static ngAcceptInputType_gap: number | string;
/**
* Gets or sets the maximum gap value to allow. This defaults to 1.0.
*/
get maximumGap(): number;
set maximumGap(v: number);
static ngAcceptInputType_maximumGap: number | string;
/**
* Gets or sets the minimum amount of pixels to use for the gap between categories, if possible.
*/
get minimumGapSize(): number;
set minimumGapSize(v: number);
static ngAcceptInputType_minimumGapSize: number | string;
/**
* Gets or sets the amount of overlap between adjacent categories for the current axis object.
* The overlap is silently clamped to the range [-1, 1] when used.
*
* Use the `Overlap` property to configure the spacing between items on a category axis with item spacing and more than one series.
*
* An `Overlap` of 0 places grouped items adjacent to each other. An `Overlap` of 1 places grouped items in the same axis space, completely overlapping. An `Overlap` of -1 places a space between grouped items equal to the width of one item.
*
* To place grouped items with 75% overlap, set the `Overlap` to 0.75, as in this code:
*
* ```html
* <igx-data-chart
* [dataSource]="data">
*
* <igx-category-x-axis
* label="label"
* overlap="0.75"
* #xAxis>
* </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-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*/
get overlap(): number;
set overlap(v: number);
static ngAcceptInputType_overlap: number | string;
/**
* Gets or sets whether the category axis should use clustering display mode even if no series are present that would force clustering mode.
*
* `UseClusteringMode` applies grouping and spacing to a category axis equivalent to the grouping that occurs when grouping series, such as ColumnSeries, are used.
*
* Try setting it on an axis displaying financial series to adjust the spacing on the left and right sides of the axis:
*
* ```html
* <igx-data-chart
* [dataSource]="financialData">
* <igx-category-x-axis
* label="time"
* useClusteringMode="true"
* #xAxis>
* </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-financial-price-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* openMemberPath="open"
* highMemberPath="high"
* lowMemberPath="low"
* closeMemberPath="close"
* volumeMemberPath="volume">
* </igx-financial-price-series>
* </igx-data-chart>
* ```
*/
get useClusteringMode(): boolean;
set useClusteringMode(v: boolean);
static ngAcceptInputType_useClusteringMode: boolean | string;
getFullRange(): number[];
getCategoryBoundingBox(point: IgPoint, useInterpolation: boolean, singularWidth: number): IgRect;
getCategoryBoundingBoxHelper(point: IgPoint, useInterpolation: boolean, singularWidth: number, isVertical: boolean): IgRect;
/**
* Unscales a value from screen space into axis space.
* @param unscaledValue * The scaled value in screen coordinates to unscale into axis space.
*/
unscaleValue(unscaledValue: number): number;
notifySetItem(index: number, oldItem: any, newItem: any): void;
/**
* Used to manually notify the axis that the data source has reset or cleared its items.
*/
notifyClearItems(): void;
notifyInsertItem(index: number, newItem: any): void;
notifyRemoveItem(index: number, oldItem: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCategoryAxisBaseComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxCategoryAxisBaseComponent, "ng-component", never, { "dataSource": "dataSource"; "itemsCount": "itemsCount"; "gap": "gap"; "maximumGap": "maximumGap"; "minimumGapSize": "minimumGapSize"; "overlap": "overlap"; "useClusteringMode": "useClusteringMode"; }, {}, never, never>;
}