igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
381 lines (375 loc) • 14.8 kB
JavaScript
import { __extends } from "tslib";
import { EventEmitter, Output, Component, Input } from '@angular/core';
import { delegateCombine } from "igniteui-angular-core";
import { CategoryCollisionMode_$type } from "./CategoryCollisionMode";
import { CategoryTransitionInMode_$type } from "./CategoryTransitionInMode";
import { IgxAssigningCategoryStyleEventArgs } from "./igx-assigning-category-style-event-args";
import { IgxAssigningCategoryMarkerStyleEventArgs } from "./igx-assigning-category-marker-style-event-args";
import { IgxMarkerSeriesComponent } from "./igx-marker-series-component";
import { ensureBool, ensureEnum, toPoint } from "igniteui-angular-core";
import * as i0 from "@angular/core";
/**
* Represents the base class for IgxDataChartComponent category series.
*
* `CategorySeries` class represents the base class for IgxDataChartComponent category series.
*
* ```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"
* isTransitionInEnabled="true">
* </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);
* ```
*/
var IgxCategorySeriesComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgxCategorySeriesComponent, _super);
function IgxCategorySeriesComponent() {
var _this = _super.call(this) || this;
_this._assigningCategoryStyle = null;
_this._assigningCategoryMarkerStyle = null;
return _this;
}
Object.defineProperty(IgxCategorySeriesComponent.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "hasValueAxis", {
get: function () {
return this.i.em;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "isValueAxisInverted", {
get: function () {
return this.i.f6;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "isCategory", {
/**
* Gets whether or not this series is Category series
*/
get: function () {
return this.i.e0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "isCustomCategoryStyleAllowed", {
/**
* Gets or sets whether this category series should allow custom style overrides of its individual visuals.
*/
get: function () {
return this.i.zp;
},
set: function (v) {
this.i.zp = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "isCustomCategoryMarkerStyleAllowed", {
/**
* Gets or sets whether this category series should allow custom style overrides of its individual marker visuals.
*/
get: function () {
return this.i.zo;
},
set: function (v) {
this.i.zo = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "categoryCollisionMode", {
/**
* Gets or sets the category collision mode selection behavior to use for the series.
*/
get: function () {
return this.i.yy;
},
set: function (v) {
this.i.yy = ensureEnum(CategoryCollisionMode_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "useHighMarkerFidelity", {
/**
* Sets or Gets whether to increase marker fidelity for extreme data shapes that have lots of Y variation over short X intervals.
*
* Set `UseHighMarkerFidelity` when your data has high variation along the y-axis within a short span of this x-axis.
*
* ```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"
* markerType="circle"
* useHighMarkerFidelity="true">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* series.yAxis = this.yAxis;
* series.valueMemberPath= "value";
* series.useHighMarkerFidelity= "true";
* this.chart.series.add(series);
* ```
*
* ```ts
* this.columnSeries2.useHighMarkerFidelity= "true";
* ```
*/
get: function () {
return this.i.zv;
},
set: function (v) {
this.i.zv = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "transitionInMode", {
/**
* Gets or sets the method by which to animate the data into the chart when the chart data source is swapped.
* Note: Transitions are not currently supported for stacked series.
*
* `TransitionInMode` controls the direction of the transition-in animation.
*
* ```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"
* isTransitionInEnabled="true"
* transitionInMode="accordionfromRight">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* series.yAxis = this.yAxis;
* series.valueMemberPath="value";
* series.transitionInMode="accordionfromRight";
* this.chart.series.add(series);
* ```
*
* ```ts
*
* this.columnSeries2.transitionInMode= "accordionfromRight";
* ```
*/
get: function () {
return this.i.za;
},
set: function (v) {
this.i.za = ensureEnum(CategoryTransitionInMode_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "isTransitionInEnabled", {
/**
* Gets or sets whether the series should transition into the plot area when a new data source is assigned.
* Note: Transitions are not currently supported for stacked series.
*
* Set `IsTransitionInEnabled` to true if you want your chart series to animate into position when the chart is loading into view.
*
* ```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"
* isTransitionInEnabled="true">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* let series = new IgxColumnSeriesComponent();
* series.xAxis = this.xAxis;
* series.yAxis = this.yAxis;
* series.valueMemberPath="value";
* series.isTransitionInEnabled="true";
* this.chart.series.add(series);
* ```
*/
get: function () {
return this.i.zq;
},
set: function (v) {
this.i.zq = ensureBool(v);
},
enumerable: false,
configurable: true
});
/**
* Returns the offset value for this series if grouped on a category axis.
*/
IgxCategorySeriesComponent.prototype.getOffsetValue = function () {
var iv = this.i.getOffsetValue();
return (iv);
};
/**
* Returns the width of the category grouping this series is in.
*/
IgxCategorySeriesComponent.prototype.getCategoryWidth = function () {
var iv = this.i.getCategoryWidth();
return (iv);
};
/**
* Gets the item that is the best match for the specified world coordinates.
* @param world * The world coordinates to use.
*/
IgxCategorySeriesComponent.prototype.getItem = function (world) {
var iv = this.i.ko(toPoint(world));
return (iv);
};
/**
* Gets the index of the item based on world coordinates.
* @param world * The world coordinates to use.
*/
IgxCategorySeriesComponent.prototype.getItemIndex = function (world) {
var iv = this.i.j4(toPoint(world));
return (iv);
};
/**
* Gets the precise item index, if possible, based on the closeness to the previous or next whole integer. If the series cannot provide this information, GetExactItemIndex will return the same integer value as GetItemIndex.
* @param world * The world position for which to return the index.
*/
IgxCategorySeriesComponent.prototype.getExactItemIndex = function (world) {
var iv = this.i.is(toPoint(world));
return (iv);
};
Object.defineProperty(IgxCategorySeriesComponent.prototype, "assigningCategoryStyle", {
/**
* Event raised when Assigning Category Style
*/
get: function () {
var _this = this;
if (this._assigningCategoryStyle == null) {
this._assigningCategoryStyle = new EventEmitter();
this.i.assigningCategoryStyle = delegateCombine(this.i.assigningCategoryStyle, function (o, e) {
var outerArgs = new IgxAssigningCategoryStyleEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeAssigningCategoryStyle) {
_this.beforeAssigningCategoryStyle(_this, outerArgs);
}
_this._assigningCategoryStyle.emit({
sender: _this,
args: outerArgs
});
});
}
return this._assigningCategoryStyle;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategorySeriesComponent.prototype, "assigningCategoryMarkerStyle", {
/**
* Event raised when Assigning Category Marker Style
*/
get: function () {
var _this = this;
if (this._assigningCategoryMarkerStyle == null) {
this._assigningCategoryMarkerStyle = new EventEmitter();
this.i.assigningCategoryMarkerStyle = delegateCombine(this.i.assigningCategoryMarkerStyle, function (o, e) {
var outerArgs = new IgxAssigningCategoryMarkerStyleEventArgs();
outerArgs._provideImplementation(e);
if (_this.beforeAssigningCategoryMarkerStyle) {
_this.beforeAssigningCategoryMarkerStyle(_this, outerArgs);
}
_this._assigningCategoryMarkerStyle.emit({
sender: _this,
args: outerArgs
});
});
}
return this._assigningCategoryMarkerStyle;
},
enumerable: false,
configurable: true
});
IgxCategorySeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategorySeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxCategorySeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxCategorySeriesComponent, selector: "ng-component", inputs: { isCustomCategoryStyleAllowed: "isCustomCategoryStyleAllowed", isCustomCategoryMarkerStyleAllowed: "isCustomCategoryMarkerStyleAllowed", categoryCollisionMode: "categoryCollisionMode", useHighMarkerFidelity: "useHighMarkerFidelity", transitionInMode: "transitionInMode", isTransitionInEnabled: "isTransitionInEnabled" }, outputs: { assigningCategoryStyle: "assigningCategoryStyle", assigningCategoryMarkerStyle: "assigningCategoryMarkerStyle" }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
return IgxCategorySeriesComponent;
}(IgxMarkerSeriesComponent));
export { IgxCategorySeriesComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategorySeriesComponent, decorators: [{
type: Component,
args: [{
template: "",
}]
}], ctorParameters: function () { return []; }, propDecorators: { isCustomCategoryStyleAllowed: [{
type: Input
}], isCustomCategoryMarkerStyleAllowed: [{
type: Input
}], categoryCollisionMode: [{
type: Input
}], useHighMarkerFidelity: [{
type: Input
}], transitionInMode: [{
type: Input
}], isTransitionInEnabled: [{
type: Input
}], assigningCategoryStyle: [{
type: Output
}], assigningCategoryMarkerStyle: [{
type: Output
}] } });