igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
1,511 lines • 67.7 kB
JavaScript
/*
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 { Output, EventEmitter, Component, Input } from '@angular/core';
import { Visibility_$type } from "igniteui-angular-core";
import { HorizontalAlignment_$type } from "igniteui-angular-core";
import { VerticalAlignment_$type } from "igniteui-angular-core";
import { AxisLabelsLocation_$type } from './AxisLabelsLocation';
import { AxisLabelSettings } from './AxisLabelSettings';
import { TitleSettings } from './TitleSettings';
import { AxisTitlePosition_$type } from './AxisTitlePosition';
import { fromDoubleCollection, toDoubleCollection, ensureEnum, arrayFindByName, brushToString, stringToBrush, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-angular-core";
import { delegateCombine } from "igniteui-angular-core";
import { IgxRenderRequestedEventArgs } from './igx-render-requested-event-args';
import { TypeRegistrar } from "igniteui-angular-core";
import { IgxAxisRangeChangedEventArgs } from './igx-axis-range-changed-event-args';
import { IgxAxisAnnotationCollection } from './igx-axis-annotation-collection';
import { AxisAnnotationCollection as AxisAnnotationCollection_internal } from './AxisAnnotationCollection';
import { SyncableObservableCollection$1 } from "igniteui-angular-core";
import { IAxisAnnotation_$type } from './IAxisAnnotation';
import * as i0 from "@angular/core";
/**
* Represents the base class from which all axis types are derived.
*
* The `Axis` is an array of axis objects.
*
* ```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-data-chart>
* ```
*/
export let IgxAxisComponent = /*@__PURE__*/ (() => {
class IgxAxisComponent {
constructor() {
this._renderer = null;
this._annotations = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._rangeChanged = null;
this._renderRequested = null;
this._zoneRunner = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._implementation = this.createImplementation();
this._implementation.externalObject = this;
this.onImplementationCreated();
}
get i() {
return this._implementation;
}
onImplementationCreated() {
}
get axisInternal() {
return this.i;
}
createImplementation() {
return null;
}
ngOnInit() {
}
set name(value) {
//console.log("setting axis name: " + value);
this.i.name = value;
//console.log("checking axis anme: " + this.i.name)
}
get name() {
//console.log("getting axis anme: " + this.i.name)
return this.i.name;
}
provideData(data) {
}
// manually added because auto-gen doesn't create this function which is required by igx-data-chart-component-template.ts
bindAxes(axes) {
}
_provideRenderer(renderer) {
this._renderer = renderer;
this._zoneRunner = (act) => renderer._ngZone.run(act);
}
static _createFromInternal(internal) {
if (!internal) {
return null;
}
if (!internal.$type) {
return null;
}
let name = internal.$type.name;
let externalName = "Igx" + name + "Component";
if (!TypeRegistrar.isRegistered(externalName)) {
return null;
}
return TypeRegistrar.create(externalName);
}
/**
* Gets or sets if the current axis is of category axis type
*/
get isCategory() {
return this.i.df;
}
/**
* Gets or sets if the current axis is of numeric axis type
*
* Gets or sets if the current axis is of numeric axis type
*/
get isNumeric() {
return this.i.dq;
}
/**
* Gets if the current axis is of angular axis type
*/
get isAngular() {
return this.i.dc;
}
/**
* Gets or sets if the current axis is of radial axis type
*/
get isRadial() {
return this.i.du;
}
/**
* Gets if the current axis is a vertical axis.
*/
get isVertical() {
return this.i.dy;
}
/**
* Gets if the current axis is a horizontal axis, e.g. not vertical axis, not radial axis, and not angular axis.
*/
get isHorizontal() {
return this.i.dm;
}
/**
* Gets or sets if the current axis is sorting data items
*/
get isSorting() {
return this.i.dv;
}
/**
* Gets or sets if the current axis is of date time axis type
*/
get isDateTime() {
return this.i.dj;
}
/**
* Gets or sets if the current axis is of ordinal axis type
*/
get isOrdinal() {
return this.i.dr;
}
/**
* Gets or sets if the axis is a piecewise scaling function.
*/
get isPiecewise() {
return this.i.ds;
}
/**
* Gets if the current axis is of category date time axis type
*/
get isCategoryDateTime() {
return this.i.dg;
}
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous() {
return this.i.di;
}
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.
*
* The `FormatLabel` function takes an object that produces a formatted label for displaying in the chart.
*
* ```html
* <igx-data-chart [dataSource]="data" >
* <igx-category-x-axis
* name="xAxis"
* FormatLabel="xAxis_FormatLabel" />
* </igx-data-chart>
* ```
*/
get formatLabel() {
return this.i.az;
}
set formatLabel(v) {
this.i.az = v;
}
/**
* Gets or sets the Title property.
*
* Use `Title` property to display the title of the component.
*
* ```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-data-chart>
* ```
*/
get title() {
return this.i.j0;
}
set title(v) {
this.i.j0 = v;
}
/**
* Gets or sets the Stroke property.
* Null is treated as auto. The axis stroke will be displayed or not based on the axis type and series used with it.
*
* Use `Stroke` property to set the stroke of the chart.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* stroke="blue"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get stroke() {
return brushToString(this.i.om);
}
set stroke(v) {
this.i.om = stringToBrush(v);
}
/**
* Gets or sets the effective stroke used for the axis.
*/
get actualStroke() {
return brushToString(this.i.ob);
}
set actualStroke(v) {
this.i.ob = stringToBrush(v);
}
/**
* Gets or sets the StrokeThickness property.
*
* Use `StrokeThickness` property for the thickness of the stroke.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* strokeThickness= 5
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get strokeThickness() {
return this.i.g4;
}
set strokeThickness(v) {
this.i.g4 = +v;
}
/**
* Gets or sets the StrokeDashArray property.
*/
get strokeDashArray() {
return fromDoubleCollection(this.i.oq);
}
set strokeDashArray(v) {
this.i.oq = toDoubleCollection(v);
}
/**
* Gets or sets the Strip property.
*
* Use `Strip` property to set the strip of the chart.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* strip= "grey"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get strip() {
return brushToString(this.i.ol);
}
set strip(v) {
this.i.ol = stringToBrush(v);
}
/**
* Gets or sets the MajorStroke property.
* Null is treated as auto. Major lines will be displayed or not based on the axis type and series used with it.
*
* Gets or sets the `MajorStroke` using this property.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* majorStroke="black"
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get majorStroke() {
return brushToString(this.i.oi);
}
set majorStroke(v) {
this.i.oi = stringToBrush(v);
}
/**
* Gets or sets the ActualMajorStroke property.
*
* The `ActualMajorStroke` property is used for ActualMajorStroke of the axis.
*/
get actualMajorStroke() {
return brushToString(this.i.n9);
}
set actualMajorStroke(v) {
this.i.n9 = stringToBrush(v);
}
/**
* Gets or sets the MajorStrokeThickness property.
*
* Gets or sets the `MajorStrokeThickness` using this property.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* majorStrokeThickness="1"
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get majorStrokeThickness() {
return this.i.gd;
}
set majorStrokeThickness(v) {
this.i.gd = +v;
}
/**
* Gets or sets the MajorStrokeDashArray property.
*/
get majorStrokeDashArray() {
return fromDoubleCollection(this.i.oo);
}
set majorStrokeDashArray(v) {
this.i.oo = toDoubleCollection(v);
}
/**
* Gets or sets the MinorStroke property.
*
* Gets or sets the minorStroke thickness using `MinorStrokeThickness` property.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* minorStrokeThickness="1"
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get minorStroke() {
return brushToString(this.i.oj);
}
set minorStroke(v) {
this.i.oj = stringToBrush(v);
}
/**
* Gets or sets the ActualMinorStroke property.
*
* The `ActualMinorStroke` property is used for ActualMinorStroke of the axis.
*/
get actualMinorStroke() {
return brushToString(this.i.oa);
}
set actualMinorStroke(v) {
this.i.oa = stringToBrush(v);
}
/**
* Gets or sets the MinorStrokeThickness property.
*/
get minorStrokeThickness() {
return this.i.gg;
}
set minorStrokeThickness(v) {
this.i.gg = +v;
}
/**
* Gets or sets the MinorStrokeDashArray property.
*/
get minorStrokeDashArray() {
return fromDoubleCollection(this.i.op);
}
set minorStrokeDashArray(v) {
this.i.op = toDoubleCollection(v);
}
/**
* Gets or sets the TickStroke property.
*
* Use `TickStroke` property for the color of the tickmarks.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* tickStroke="black"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get tickStroke() {
return brushToString(this.i.on);
}
set tickStroke(v) {
this.i.on = stringToBrush(v);
}
/**
* Gets or sets the TickStrokeThickness property.
*
* Use `TickStrokeThickness` property for thickness of the stroke tickmarks.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* tickStrokeThicknes="2"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get tickStrokeThickness() {
return this.i.g6;
}
set tickStrokeThickness(v) {
this.i.g6 = +v;
}
/**
* Gets or sets the TickStrokeDashArray property.
*/
get tickStrokeDashArray() {
return fromDoubleCollection(this.i.or);
}
set tickStrokeDashArray(v) {
this.i.or = toDoubleCollection(v);
}
/**
* Gets or sets the TickLength property.
*
* Use `TickLength` property for The length of the tickmarks to display for this axis.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* tickLength="5"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get tickLength() {
return this.i.g5;
}
set tickLength(v) {
this.i.g5 = +v;
}
/**
* Gets or sets the IsDisabled property. If true, the axis will not be rendered.
*
* The `IsDisabled` property is used to decide if the axis will not be rendered.
*/
get isDisabled() {
return this.i.dk;
}
set isDisabled(v) {
this.i.dk = ensureBool(v);
}
/**
* Gets or sets the IsInverted property.
*
* Gets or sets the `IsInverted` property.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* isInverted= true
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get isInverted() {
return this.i.dn;
}
set isInverted(v) {
this.i.dn = ensureBool(v);
}
/**
* Gets or sets whether annotations should be shifted to avoid collision, even if this would result in them appearing where they shouldn't be along the scale.
*/
get shouldAvoidAnnotationCollisions() {
return this.i.d5;
}
set shouldAvoidAnnotationCollisions(v) {
this.i.d5 = ensureBool(v);
}
/**
* ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.
*/
get shouldKeepAnnotationsInView() {
return this.i.d7;
}
set shouldKeepAnnotationsInView(v) {
this.i.d7 = ensureBool(v);
}
/**
* Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.
*/
get usePerLabelHeightMeasurement() {
return this.i.eg;
}
set usePerLabelHeightMeasurement(v) {
this.i.eg = ensureBool(v);
}
/**
* Gets or sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc.
*
* Use `UseEnhancedIntervalManagement` property to gets/sets whether to use more advanced heuristics when determining the initial number of labels to render,
* before resolving collisions, etc.
*/
get useEnhancedIntervalManagement() {
return this.i.ef;
}
set useEnhancedIntervalManagement(v) {
this.i.ef = ensureBool(v);
}
/**
* Gets or sets the minimum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels.
*
* The `EnhancedIntervalMinimumCharacters` property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* enhancedIntervalMinimumCharacters=5
* #yAxis>
* </igx-numeric-y-axis>
*
* </igx-data-chart>
* ```
*/
get enhancedIntervalMinimumCharacters() {
return this.i.hh;
}
set enhancedIntervalMinimumCharacters(v) {
this.i.hh = +v;
}
/**
* Gets or sets whether the enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get enhancedIntervalPreferMoreCategoryLabels() {
return this.i.cy;
}
set enhancedIntervalPreferMoreCategoryLabels(v) {
this.i.cy = ensureBool(v);
}
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*/
get labelTextStyle() {
return this.i.a4 ? this.i.a4.textStyle : null;
}
set labelTextStyle(v) {
this.ensureLabelSettings();
this.i.a4.textStyle = v;
}
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*/
get labelTextColor() {
return brushToString(this.i.a4 ? this.i.a4.textColor : null);
}
set labelTextColor(v) {
this.ensureLabelSettings();
this.i.a4.textColor = stringToBrush(v);
}
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get labelLocation() {
return this.i.a4 ? this.i.a4.location : 0;
}
set labelLocation(v) {
this.ensureLabelSettings();
this.i.a4.location = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get labelVisibility() {
return this.i.a4 ? this.i.a4.visibility : 0;
}
set labelVisibility(v) {
this.ensureLabelSettings();
this.i.a4.visibility = ensureEnum(Visibility_$type, v);
}
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
get labelShowFirstLabel() {
return this.i.a4 ? this.i.a4.showFirstLabel : false;
}
set labelShowFirstLabel(v) {
this.ensureLabelSettings();
this.i.a4.showFirstLabel = ensureBool(v);
}
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of the axis.
*/
get labelAngle() {
return this.i.a4 ? this.i.a4.angle : NaN;
}
set labelAngle(v) {
this.ensureLabelSettings();
this.i.a4.angle = +v;
}
/**
* Distance between the axis and the edge of the control.
*
* The `Extent` property is used for the extent.
*/
get labelExtent() {
return this.i.a4 ? this.i.a4.extent : NaN;
}
set labelExtent(v) {
this.ensureLabelSettings();
this.i.a4.extent = +v;
}
/**
* Maximum distance between the axis and the edge of the control.
*/
get labelMaximumExtent() {
return this.i.a4 ? this.i.a4.maximumExtent : NaN;
}
set labelMaximumExtent(v) {
this.ensureLabelSettings();
this.i.a4.maximumExtent = +v;
}
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get labelMaximumExtentPercentage() {
return this.i.a4 ? this.i.a4.maximumExtentPercentage : NaN;
}
set labelMaximumExtentPercentage(v) {
this.ensureLabelSettings();
this.i.a4.maximumExtentPercentage = +v;
}
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get labelLeftMargin() {
return this.i.a4 ? this.i.a4.leftMargin : NaN;
}
set labelLeftMargin(v) {
this.ensureLabelSettings();
this.i.a4.leftMargin = +v;
}
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get labelRightMargin() {
return this.i.a4 ? this.i.a4.rightMargin : NaN;
}
set labelRightMargin(v) {
this.ensureLabelSettings();
this.i.a4.rightMargin = +v;
}
/**
* Margin applied above the {0}.
*
* The `labelTopMargin` property is used for the top margin of the labels.
*/
get labelTopMargin() {
return this.i.a4 ? this.i.a4.topMargin : NaN;
}
set labelTopMargin(v) {
this.ensureLabelSettings();
this.i.a4.topMargin = +v;
}
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get labelBottomMargin() {
return this.i.a4 ? this.i.a4.bottomMargin : NaN;
}
set labelBottomMargin(v) {
this.ensureLabelSettings();
this.i.a4.bottomMargin = +v;
}
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get labelHorizontalAlignment() {
return this.i.a4 ? this.i.a4.horizontalAlignment : 0;
}
set labelHorizontalAlignment(v) {
this.ensureLabelSettings();
this.i.a4.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get labelVerticalAlignment() {
return this.i.a4 ? this.i.a4.verticalAlignment : 0;
}
set labelVerticalAlignment(v) {
this.ensureLabelSettings();
this.i.a4.verticalAlignment = ensureEnum(VerticalAlignment_$type, v);
}
ensureLabelSettings() {
if (this.i.a4) {
return;
}
this.i.a4 = new AxisLabelSettings();
this.i.a4.location = this.i.a6();
this.i.a4.angle = this.i.fr();
this.i.a4.leftMargin = this.i.ft();
this.i.a4.rightMargin = this.i.fu();
this.i.a4.topMargin = this.i.fv();
this.i.a4.bottomMargin = this.i.fs();
this.i.a4.horizontalAlignment = this.i.n6();
this.i.a4.verticalAlignment = this.i.pb();
}
/**
* Gets or sets the CrossingAxis property.
*
* The `CrossingAxis` property is used for CrossingAxis .
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* crossingAxis= "xAxis"
* crossingValue= 700
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get crossingAxis() {
const r = this.i.an;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgxAxisComponent._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set crossingAxis(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.an = null : this.i.an = v.i;
}
/**
* Gets or sets the CrossingValue property.
*
* The `CrossingValue` property is used for CrossingValue of the axis.
*
* ```html
* <igx-data-chart
* [dataSource]="data" >
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* crossingAxis= "xAxis"
* crossingValue= 700
* #yAxis>
* </igx-numeric-y-axis>
* </igx-data-chart>
* ```
*/
get crossingValue() {
return this.i.hq;
}
set crossingValue(v) {
this.i.hq = v;
}
/**
* Gets or sets the title position relative to the axis labels.
*/
get titlePosition() {
return this.i.bz ? this.i.bz.position : 0;
}
set titlePosition(v) {
this.ensureTitleSettings();
this.i.bz.position = ensureEnum(AxisTitlePosition_$type, v);
}
/**
* Gets or sets the text style to use for axis labels.
*
* The `labelTextStyle` property Overrides the style of the text used for the axis labels.
*/
get titleTextStyle() {
return this.i.bz ? this.i.bz.textStyle : null;
}
set titleTextStyle(v) {
this.ensureTitleSettings();
this.i.bz.textStyle = v;
}
/**
* The color of the {0}.
*
* The `labelTextColor` property Overrides the color of the text used for the axis labels.
*/
get titleTextColor() {
return brushToString(this.i.bz ? this.i.bz.textColor : null);
}
set titleTextColor(v) {
this.ensureTitleSettings();
this.i.bz.textColor = stringToBrush(v);
}
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get titleLocation() {
return this.i.bz ? this.i.bz.location : 0;
}
set titleLocation(v) {
this.ensureTitleSettings();
this.i.bz.location = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get titleVisibility() {
return this.i.bz ? this.i.bz.visibility : 0;
}
set titleVisibility(v) {
this.ensureTitleSettings();
this.i.bz.visibility = ensureEnum(Visibility_$type, v);
}
/**
* Gets or sets whether the first label is displayed when the zoom level is set to 1.
*
* The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1.
*/
get titleShowFirstLabel() {
return this.i.bz ? this.i.bz.showFirstLabel : false;
}
set titleShowFirstLabel(v) {
this.ensureTitleSettings();
this.i.bz.showFirstLabel = ensureBool(v);
}
/**
* Gets or sets the angle of the {0}.
*
* The `Angle` property is used to set the angle of the axis.
*/
get titleAngle() {
return this.i.bz ? this.i.bz.angle : NaN;
}
set titleAngle(v) {
this.ensureTitleSettings();
this.i.bz.angle = +v;
}
/**
* Distance between the axis and the edge of the control.
*
* The `Extent` property is used for the extent.
*/
get titleExtent() {
return this.i.bz ? this.i.bz.extent : NaN;
}
set titleExtent(v) {
this.ensureTitleSettings();
this.i.bz.extent = +v;
}
/**
* Maximum distance between the axis and the edge of the control.
*/
get titleMaximumExtent() {
return this.i.bz ? this.i.bz.maximumExtent : NaN;
}
set titleMaximumExtent(v) {
this.ensureTitleSettings();
this.i.bz.maximumExtent = +v;
}
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get titleMaximumExtentPercentage() {
return this.i.bz ? this.i.bz.maximumExtentPercentage : NaN;
}
set titleMaximumExtentPercentage(v) {
this.ensureTitleSettings();
this.i.bz.maximumExtentPercentage = +v;
}
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get titleLeftMargin() {
return this.i.bz ? this.i.bz.leftMargin : NaN;
}
set titleLeftMargin(v) {
this.ensureTitleSettings();
this.i.bz.leftMargin = +v;
}
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get titleRightMargin() {
return this.i.bz ? this.i.bz.rightMargin : NaN;
}
set titleRightMargin(v) {
this.ensureTitleSettings();
this.i.bz.rightMargin = +v;
}
/**
* Margin applied above the {0}.
*
* The `labelTopMargin` property is used for the top margin of the labels.
*/
get titleTopMargin() {
return this.i.bz ? this.i.bz.topMargin : NaN;
}
set titleTopMargin(v) {
this.ensureTitleSettings();
this.i.bz.topMargin = +v;
}
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get titleBottomMargin() {
return this.i.bz ? this.i.bz.bottomMargin : NaN;
}
set titleBottomMargin(v) {
this.ensureTitleSettings();
this.i.bz.bottomMargin = +v;
}
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get titleHorizontalAlignment() {
return this.i.bz ? this.i.bz.horizontalAlignment : 0;
}
set titleHorizontalAlignment(v) {
this.ensureTitleSettings();
this.i.bz.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get titleVerticalAlignment() {
return this.i.bz ? this.i.bz.verticalAlignment : 0;
}
set titleVerticalAlignment(v) {
this.ensureTitleSettings();
this.i.bz.verticalAlignment = ensureEnum(VerticalAlignment_$type, v);
}
ensureTitleSettings() {
if (this.i.bz) {
return;
}
this.i.bz = new TitleSettings();
this.i.bz.location = this.i.a7();
this.i.bz.angle = this.i.fw();
this.i.bz.leftMargin = this.i.fy();
this.i.bz.rightMargin = this.i.fz();
this.i.bz.topMargin = this.i.f0();
this.i.bz.bottomMargin = this.i.fx();
this.i.bz.horizontalAlignment = this.i.n7();
this.i.bz.verticalAlignment = this.i.pc();
}
/**
* Gets or sets whether annotations on this axis will automatically truncate themselves to avoid colliding with each other. This only works
* if the ShouldAvoidAnnotationCollisions property is enabled.
*/
get shouldAutoTruncateAnnotations() {
return this.i.d4;
}
set shouldAutoTruncateAnnotations(v) {
this.i.d4 = ensureBool(v);
}
/**
* Gets the current annotations for the axis.
*/
get annotations() {
if (this._annotations === null) {
let coll = new IgxAxisAnnotationCollection();
let innerColl = this.i.as;
if (!innerColl) {
innerColl = new AxisAnnotationCollection_internal();
}
this._annotations = coll._fromInner(innerColl);
}
return this._annotations;
}
set annotations(v) {
if (this._annotations !== null) {
this._annotations._setSyncTarget(null);
this._annotations = null;
}
let coll = new IgxAxisAnnotationCollection();
this._annotations = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(IAxisAnnotation_$type);
let innerColl = this.i.as;
if (!innerColl) {
innerColl = new AxisAnnotationCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._annotations._setSyncTarget(syncColl);
}
/**
* Gets or sets the coercion methods to use when loading data from data sources.
* Should be specified before setting any member paths, if being used. Setting it later
* will not cause data to be re-imported into the chart.
*
* The `coercionMethods` methods is to use when loading data from data sources. Should be specified before setting any member paths, if being used.
* Setting it later will not cause data to be reimported into the chart.
*/
get coercionMethods() {
return this.i.coercionMethods;
}
set coercionMethods(v) {
this.i.coercionMethods = v;
}
/**
* Gets or sets whether the series should expect that properties in its items source may be functions that need to be
* evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature.
* This value must be set before assigning an item's source to take effect.
*/
get expectFunctions() {
return this.i.expectFunctions;
}
set expectFunctions(v) {
this.i.expectFunctions = ensureBool(v);
}
/**
* Gets or sets the axis label format string.
*
* The `Label` property is used for label mapping of the axis labels.
*/
get label() {
return this.i.hw;
}
set label(v) {
this.i.hw = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get labelFormat() {
return this.i.i9;
}
set labelFormat(v) {
this.i.i9 = v;
}
/**
* Gets or sets the format specifiers to use with the LabelFormat string.
*/
get labelFormatSpecifiers() {
return this.i.ah;
}
set labelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ah = v;
}
/**
* Gets whether this is primary axis created by an user
*/
get isPrimaryAxis() {
return this.i.dt;
}
/**
* Gets whether this is companion axis automatically created for a primary axis
*/
get isCompanionAxis() {
return this.i.dh;
}
set isCompanionAxis(v) {
this.i.dh = ensureBool(v);
}
/**
* Gets or sets whether or not the companion axis enabled for this axis.
*/
get companionAxisEnabled() {
return this.i.co;
}
set companionAxisEnabled(v) {
this.i.co = ensureBool(v);
}
/**
* Gets or sets whether or not the companion axis has opposite location of this axis.
*/
get companionAxisLabelOpposite() {
return this.i.cr;
}
set companionAxisLabelOpposite(v) {
this.i.cr = ensureBool(v);
}
/**
* Gets or sets whether or not the companion axis is inverted.
*/
get companionAxisIsInverted() {
return this.i.cq;
}
set companionAxisIsInverted(v) {
this.i.cq = ensureBool(v);
}
/**
* Gets or sets crossing axis for the companion axis.
*/
get companionAxisCrossingAxis() {
const r = this.i.am;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgxAxisComponent._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set companionAxisCrossingAxis(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.am = null : this.i.am = v.i;
}
/**
* Gets or sets crossing value for the companion axis.
*/
get companionAxisCrossingValue() {
return this.i.fe;
}
set companionAxisCrossingValue(v) {
this.i.fe = +v;
}
/**
* Gets or sets whether or not the companion axis has visible labels.
*/
get companionAxisLabelVisible() {
return this.i.cs;
}
set companionAxisLabelVisible(v) {
this.i.cs = ensureBool(v);
}
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisLabelAngle() {
return this.i.ff;
}
set companionAxisLabelAngle(v) {
this.i.ff = +v;
}
/**
* Gets or sets extent of labels on the companion axis.
*/
get companionAxisLabelExtent() {
return this.i.fg;
}
set companionAxisLabelExtent(v) {
this.i.fg = +v;
}
/**
* Gets or sets location of labels on the companion axis.
*/
get companionAxisLabelLocation() {
return this.i.a5;
}
set companionAxisLabelLocation(v) {
this.i.a5 = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets vertical alignment of the companion axis.
*/
get companionAxisLabelVerticalAlignment() {
return this.i.pa;
}
set companionAxisLabelVerticalAlignment(v) {
this.i.pa = ensureEnum(VerticalAlignment_$type, v);
}
/**
* Gets or sets horizontal alignment of labels on the companion axis.
*/
get companionAxisLabelHorizontalAlignment() {
return this.i.n5;
}
set companionAxisLabelHorizontalAlignment(v) {
this.i.n5 = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets color of labels on the companion axis.
*/
get companionAxisLabelColor() {
return brushToString(this.i.oc);
}
set companionAxisLabelColor(v) {
this.i.oc = stringToBrush(v);
}
/**
* Gets or sets whether or not the companion axis is syncronized with properties of primary axis unless CompanionAxis* properties are set
* In other words, companion axis' LabelExtent will syncronize with primary axis' LabelExtent unless CompanionAxisLabelExtent is set
*/
get companionAxisSyncronizedWithPrimaryAxis() {
return this.i.cw;
}
set companionAxisSyncronizedWithPrimaryAxis(v) {
this.i.cw = ensureBool(v);
}
/**
* Gets or sets color of strips on the companion axis.
*/
get companionAxisStrip() {
return brushToString(this.i.of);
}
set companionAxisStrip(v) {
this.i.of = stringToBrush(v);
}
/**
* Gets or sets color of line stroke on the companion axis.
*/
get companionAxisStroke() {
return brushToString(this.i.og);
}
set companionAxisStroke(v) {
this.i.og = stringToBrush(v);
}
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisMinExtent() {
return this.i.fi;
}
set companionAxisMinExtent(v) {
this.i.fi = +v;
}
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisStrokeThickness() {
return this.i.fk;
}
set companionAxisStrokeThickness(v) {
this.i.fk = +v;
}
/**
* Gets or sets stroke of major gridlines on the companion axis.
*/
get companionAxisMajorStroke() {
return brushToString(this.i.od);
}
set companionAxisMajorStroke(v) {
this.i.od = stringToBrush(v);
}
/**
* Gets or sets thickness of major gridlines on the companion axis.
*/
get companionAxisMajorStrokeThickness() {
return this.i.fh;
}
set companionAxisMajorStrokeThickness(v) {
this.i.fh = +v;
}
/**
* Gets or sets stroke of minior gridlines on the companion axis.
*/
get companionAxisMinorStroke() {
return brushToString(this.i.oe);
}
set companionAxisMinorStroke(v) {
this.i.oe = stringToBrush(v);
}
/**
* Gets or sets thickness of minior gridlines on the companion axis.
*/
get companionAxisMinorStrokeThickness() {
return this.i.fj;
}
set companionAxisMinorStrokeThickness(v) {
this.i.fj = +v;
}
/**
* Gets or sets color of ticks on the companion axis.
*/
get companionAxisTickStroke() {
return brushToString(this.i.oh);
}
set companionAxisTickStroke(v) {
this.i.oh = stringToBrush(v);
}
/**
* Gets or sets length of ticks on the companion axis.
*/
get companionAxisTickLength() {
return this.i.fl;
}
set companionAxisTickLength(v) {
this.i.fl = +v;
}
/**
* Gets or sets label angle on the companion axis.
*/
get companionAxisTickStrokeThickness() {
return this.i.fm;
}
set companionAxisTickStrokeThickness(v) {
this.i.fm = +v;
}
/**
* Gets or sets title on the companion axis.
*/
get companionAxisTitle() {
return this.i.iw;
}
set companionAxisTitle(v) {
this.i.iw = v;
}
/**
* Gets or sets whether or not the companion axis should avoid annotation collisions.
*/
get companionAxisShouldAvoidAnnotationCollisions() {
return this.i.cu;
}
set companionAxisShouldAvoidAnnotationCollisions(v) {
this.i.cu = ensureBool(v);
}
/**
* Gets or sets whether or not the companion axis should auto truncate annotations.
*/
get companionAxisShouldAutoTruncateAnnotations() {
return this.i.ct;
}
set companionAxisShouldAutoTruncateAnnotations(v) {
this.i.ct = ensureBool(v);
}
/**
* Gets or sets whether or not the companion axis should keep annotations in view.
*/
get companionAxisShouldKeepAnnotationsInView() {
return this.i.cv;
}
set companionAxisShouldKeepAnnotationsInView(v) {
this.i.cv = ensureBool(v);
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.crossingAxis && this.crossingAxis.name && this.crossingAxis.name == name) {
return this.crossingAxis;
}
if (this.annotations != null && this.annotations.findByName && this.annotations.findByName(name)) {
return this.annotations.findByName(name);
}
if (this.labelFormatSpecifiers != null && arrayFindByName(this.labelFormatSpecifiers, name)) {
return arrayFindByName(this.labelFormatSpecifiers, name);
}
if (this.companionAxisCrossingAxis && this.companionAxisCrossingAxis.name && this.companionAxisCrossingAxis.name == name) {
return this.companionAxisCrossingAxis;
}
return null;
}
get hasUserValues() {
return this._hasUserValues;
}
__m(propertyName) {
if (!this._inStyling) {
this._hasUserValues.add(propertyName);
}
}
_styling(container, component, parent) {
if (this._inStyling) {
return;
}
this._inStyling = true;
th