igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
322 lines (318 loc) • 12.9 kB
JavaScript
import { EventEmitter, Output, Component, forwardRef, Input, ChangeDetectionStrategy } from '@angular/core';
import { delegateCombine } from "igniteui-angular-core";
import { IgxCategoryAxisBaseComponent } from "./igx-category-axis-base-component";
import { IgxAxisComponent } from "./igx-axis-component";
import { CategoryXAxis } from "./CategoryXAxis";
import * as i0 from "@angular/core";
/**
* Represents a IgxDataChartComponent category X axis.
*
* `CategoryXAxis` class represents a IgxDataChartComponent category X axis.
*
* ```html
* <igx-data-chart [dataSource]="data">
* <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
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* series.yAxis = this.yAxis;
* series.valueMemberPath="value";
* this.chart.series.add(series);
* ```
*/
export let IgxCategoryXAxisComponent = /*@__PURE__*/ (() => {
class IgxCategoryXAxisComponent extends IgxCategoryAxisBaseComponent {
constructor() {
super();
this._actualIntervalChange = null;
this._actualMinorIntervalChange = null;
}
createImplementation() {
return new CategoryXAxis();
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
/**
* Gets or sets interval of labels on the companion axis.
*/
get companionAxisInterval() {
return this.i.rh;
}
set companionAxisInterval(v) {
this.i.rh = +v;
}
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisMinorInterval() {
return this.i.ri;
}
set companionAxisMinorInterval(v) {
this.i.ri = +v;
}
/**
* Gets or sets number of visible categories at maximum zooming level
* This property is overridden by chart's WindowRectMinWidth property
*/
get zoomMaximumCategoryRange() {
return this.i.zoomMaximumCategoryRange;
}
set zoomMaximumCategoryRange(v) {
this.i.zoomMaximumCategoryRange = +v;
}
/**
* Gets or sets maximum pixel span of series item that will be visible at maximum zooming level
* This property ensures that series item does not get stretch above specified value.
* This property is overridden by chart's WindowRectMinWidth property
*/
get zoomMaximumItemSpan() {
return this.i.zoomMaximumItemSpan;
}
set zoomMaximumItemSpan(v) {
this.i.zoomMaximumItemSpan = +v;
}
/**
* Gets or sets range of categories that the chart will zoom in to and fill plot area
* This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get zoomToCategoryRange() {
return this.i.zoomToCategoryRange;
}
set zoomToCategoryRange(v) {
this.i.zoomToCategoryRange = +v;
}
/**
* Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items
* This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get zoomToCategoryStart() {
return this.i.zoomToCategoryStart;
}
set zoomToCategoryStart(v) {
this.i.zoomToCategoryStart = +v;
}
/**
* Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span
* Chart will automatically zoom in until series item has specified pixel span.
* This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get zoomToItemSpan() {
return this.i.zoomToItemSpan;
}
set zoomToItemSpan(v) {
this.i.zoomToItemSpan = +v;
}
/**
* Gets or sets the frequency of displayed labels.
* The set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.
*
* `Interval` determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to _n_ to display a label every _nth_ item.
*
* ```html
* <igx-data-chart [dataSource]="data">
* <igx-category-x-axis #xAxis
* label="label"
* interval="3">
* </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
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* xAxis.interval="3";
* series.yAxis = this.yAxis;
*
* series.valueMemberPath="value";
* this.chart.series.add(series);
* ```
*/
get interval() {
return this.i.rm;
}
set interval(v) {
this.i.rm = +v;
}
/**
* Gets the effective value for the current Interval.
*
* ```ts
* let effectiveInterval: number = xAxis.actualInterval;
* ```
*/
get actualInterval() {
return this.i.rf;
}
set actualInterval(v) {
this.i.rf = +v;
}
/**
* Gets or sets the frequency of displayed minor lines.
* The set value is a factor that determines how the minor lines will be displayed.
*
* `MinorInterval` determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series.
*
* `MinorInterval` is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set `MinorInterval` to 0.1.
*
* ```html
* <igx-data-chart [dataSource]="data">
* <igx-category-x-axis #xAxis
* label="label"
* minorInterval="0.1"
* minorStroke="green"
* minorStrokeThickness="1">
* </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
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* xAxis.minorInterval="0.1";
* series.yAxis = this.yAxis;
* series.valueMemberPath="value";
* this.chart.series.add(series);
* ```
*/
get minorInterval() {
return this.i.rn;
}
set minorInterval(v) {
this.i.rn = +v;
}
/**
* Gets the effective value for the current MinorInterval.
*
* ```ts
* let effectiveMinorInterval: number = xAxis.actualMinorInterval;
* ```
*/
get actualMinorInterval() {
return this.i.rg;
}
set actualMinorInterval(v) {
this.i.rg = +v;
}
/**
* Scrolls the specified item into view.
* @param item * Data item to scroll into view
*/
scrollIntoView(item) {
this.i.r4(item);
}
scrollRangeIntoView(minimum, maximum) {
this.i.r5(minimum, maximum);
}
/**
* Gets window zoom scale required to zoom to specified number of categories
*/
getWindowZoomFromCategories(categoriesCount) {
let iv = this.i.getWindowZoomFromCategories(categoriesCount);
return (iv);
}
/**
* Gets window zoom scale required to zoom to specified span of series item
*/
getWindowZoomFromItemSpan(pixels) {
let iv = this.i.getWindowZoomFromItemSpan(pixels);
return (iv);
}
get actualIntervalChange() {
if (this._actualIntervalChange == null) {
this._actualIntervalChange = new EventEmitter();
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, (o, e) => {
let iv = e;
let ext = this.actualInterval;
if (this.beforeActualIntervalChange) {
this.beforeActualIntervalChange(this, ext);
}
this._actualIntervalChange.emit(ext);
});
}
return this._actualIntervalChange;
}
get actualMinorIntervalChange() {
if (this._actualMinorIntervalChange == null) {
this._actualMinorIntervalChange = new EventEmitter();
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, (o, e) => {
let iv = e;
let ext = this.actualMinorInterval;
if (this.beforeActualMinorIntervalChange) {
this.beforeActualMinorIntervalChange(this, ext);
}
this._actualMinorIntervalChange.emit(ext);
});
}
return this._actualMinorIntervalChange;
}
}
IgxCategoryXAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategoryXAxisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxCategoryXAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxCategoryXAxisComponent, selector: "igx-category-x-axis", inputs: { companionAxisInterval: "companionAxisInterval", companionAxisMinorInterval: "companionAxisMinorInterval", zoomMaximumCategoryRange: "zoomMaximumCategoryRange", zoomMaximumItemSpan: "zoomMaximumItemSpan", zoomToCategoryRange: "zoomToCategoryRange", zoomToCategoryStart: "zoomToCategoryStart", zoomToItemSpan: "zoomToItemSpan", interval: "interval", actualInterval: "actualInterval", minorInterval: "minorInterval", actualMinorInterval: "actualMinorInterval" }, outputs: { actualIntervalChange: "actualIntervalChange", actualMinorIntervalChange: "actualMinorIntervalChange" }, providers: [{ provide: IgxCategoryAxisBaseComponent, useExisting: forwardRef(() => IgxCategoryXAxisComponent) }, { provide: IgxAxisComponent, useExisting: forwardRef(() => IgxCategoryXAxisComponent) }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
return IgxCategoryXAxisComponent;
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategoryXAxisComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-category-x-axis',
template: ``,
providers: [{ provide: IgxCategoryAxisBaseComponent, useExisting: forwardRef(() => IgxCategoryXAxisComponent) }, { provide: IgxAxisComponent, useExisting: forwardRef(() => IgxCategoryXAxisComponent) }],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { companionAxisInterval: [{
type: Input
}], companionAxisMinorInterval: [{
type: Input
}], zoomMaximumCategoryRange: [{
type: Input
}], zoomMaximumItemSpan: [{
type: Input
}], zoomToCategoryRange: [{
type: Input
}], zoomToCategoryStart: [{
type: Input
}], zoomToItemSpan: [{
type: Input
}], interval: [{
type: Input
}], actualInterval: [{
type: Input
}], minorInterval: [{
type: Input
}], actualMinorInterval: [{
type: Input
}], actualIntervalChange: [{
type: Output
}], actualMinorIntervalChange: [{
type: Output
}] } });