igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
348 lines (345 loc) • 12.9 kB
JavaScript
import { __extends } from "tslib";
/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { Component, Input } from '@angular/core';
import { IgxAxisComponent } from './igx-axis-component';
import { toPoint, fromRect, ensureBool, NamePatcher } from "igniteui-angular-core";
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);
* ```
*/
var IgxCategoryAxisBaseComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgxCategoryAxisBaseComponent, _super);
function IgxCategoryAxisBaseComponent() {
var _this = _super.call(this) || this;
_this._chartLevelData = null;
_this._dataSource = null;
if (_this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this));
}
return _this;
}
IgxCategoryAxisBaseComponent.prototype.provideData = function (data) {
this._chartLevelData = data;
this.updateDataSource();
};
IgxCategoryAxisBaseComponent.prototype.updateDataSource = function () {
if (this._dataSource == null) {
this.i.itemsSource = this._chartLevelData;
}
else {
this.i.itemsSource = this._dataSource;
}
};
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "dataSource", {
get: function () {
if (this._dataSource != null) {
return this._dataSource;
}
return this.i.itemsSource;
},
set: function (value) {
this._dataSource = value;
this.updateDataSource();
//console.log("setting axis data source: " + value)
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "isContinuous", {
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get: function () {
return this.i.cd;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "isCategory", {
/**
* Checks if the axis is of category axis type
*/
get: function () {
return this.i.cb;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "itemsCount", {
/**
* Gets the number of items in the current category axis items source.
*/
get: function () {
return this.i.lk;
},
set: function (v) {
this.i.lk = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "gap", {
/**
* 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: function () {
return this.i.k5;
},
set: function (v) {
this.i.k5 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "maximumGap", {
/**
* Gets or sets the maximum gap value to allow. This defaults to 1.0.
*/
get: function () {
return this.i.lc;
},
set: function (v) {
this.i.lc = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "minimumGapSize", {
/**
* Gets or sets the minimum amount of pixels to use for the gap between categories, if possible.
*/
get: function () {
return this.i.ld;
},
set: function (v) {
this.i.ld = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "overlap", {
/**
* 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: function () {
return this.i.le;
},
set: function (v) {
this.i.le = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxCategoryAxisBaseComponent.prototype, "useClusteringMode", {
/**
* 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: function () {
return this.i.kz;
},
set: function (v) {
this.i.kz = ensureBool(v);
},
enumerable: false,
configurable: true
});
IgxCategoryAxisBaseComponent.prototype.getFullRange = function () {
var iv = this.i.ag();
return (iv);
};
IgxCategoryAxisBaseComponent.prototype.getCategoryBoundingBox = function (point, useInterpolation, singularWidth) {
var iv = this.i.mj(toPoint(point), useInterpolation, singularWidth);
return fromRect(iv);
};
IgxCategoryAxisBaseComponent.prototype.getCategoryBoundingBoxHelper = function (point, useInterpolation, singularWidth, isVertical) {
var iv = this.i.mk(toPoint(point), useInterpolation, singularWidth, isVertical);
return fromRect(iv);
};
/**
* Unscales a value from screen space into axis space.
* @param unscaledValue * The scaled value in screen coordinates to unscale into axis space.
*/
IgxCategoryAxisBaseComponent.prototype.unscaleValue = function (unscaledValue) {
var iv = this.i.lg(unscaledValue);
return (iv);
};
IgxCategoryAxisBaseComponent.prototype.notifySetItem = function (index, oldItem, newItem) {
this.i.l4(index, oldItem, newItem);
};
/**
* Used to manually notify the axis that the data source has reset or cleared its items.
*/
IgxCategoryAxisBaseComponent.prototype.notifyClearItems = function () {
this.i.l1();
};
IgxCategoryAxisBaseComponent.prototype.notifyInsertItem = function (index, newItem) {
this.i.l2(index, newItem);
};
IgxCategoryAxisBaseComponent.prototype.notifyRemoveItem = function (index, oldItem) {
this.i.l3(index, oldItem);
};
IgxCategoryAxisBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategoryAxisBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IgxCategoryAxisBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxCategoryAxisBaseComponent, selector: "ng-component", inputs: { dataSource: "dataSource", itemsCount: "itemsCount", gap: "gap", maximumGap: "maximumGap", minimumGapSize: "minimumGapSize", overlap: "overlap", useClusteringMode: "useClusteringMode" }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
return IgxCategoryAxisBaseComponent;
}(IgxAxisComponent));
export { IgxCategoryAxisBaseComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxCategoryAxisBaseComponent, decorators: [{
type: Component,
args: [{
template: "",
}]
}], ctorParameters: function () { return []; }, propDecorators: { dataSource: [{
type: Input
}], itemsCount: [{
type: Input
}], gap: [{
type: Input
}], maximumGap: [{
type: Input
}], minimumGapSize: [{
type: Input
}], overlap: [{
type: Input
}], useClusteringMode: [{
type: Input
}] } });