igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
1,505 lines • 101 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 { EventEmitter, Output, Component, Input } from '@angular/core';
import { Visibility_$type } from "igniteui-angular-core";
import { TransitionInSpeedType_$type } from './TransitionInSpeedType';
import { SeriesHitTestMode_$type } from './SeriesHitTestMode';
import { fromDoubleCollection, toDoubleCollection, brushToString, stringToBrush, toPoint, fromPoint, toRect, fromRect, stringToColor, colorToString, ensureEnum, ensureBool, toSpinal, initializePropertiesFromCss, NamePatcher, arrayFindByName } from "igniteui-angular-core";
import { IgxRenderRequestedEventArgs } from './igx-render-requested-event-args';
import { delegateCombine, TypeRegistrar } from "igniteui-angular-core";
import { SeriesVisibleRangeMode_$type } from './SeriesVisibleRangeMode';
import { SeriesHighlightingMode_$type } from './SeriesHighlightingMode';
import { SeriesOutlineMode_$type } from './SeriesOutlineMode';
import { LegendItemBadgeMode_$type } from "igniteui-angular-core";
import { LegendItemBadgeShape_$type } from "igniteui-angular-core";
import { PenLineJoin_$type } from "igniteui-angular-core";
import { PenLineCap_$type } from "igniteui-angular-core";
import { ValueLayerValueMode_$type } from './ValueLayerValueMode';
import { IgxSeriesLayerCollection } from './igx-series-layer-collection';
import { SeriesLayerCollection as SeriesLayerCollection_internal } from './SeriesLayerCollection';
import { SeriesLayer } from './SeriesLayer';
import { SyncableObservableCollection$1 } from "igniteui-angular-core";
import { TransitionOutSpeedType_$type } from './TransitionOutSpeedType';
import { SeriesHighlightedValuesDisplayMode_$type } from "igniteui-angular-core";
//import { DataLegendSeriesContext, DataLegendSeriesContext_$type } from 'igniteui-core/DataLegendSeriesContext';
//import { DataLegendSeriesInfo, DataLegendSeriesInfo_$type } from 'igniteui-core/DataLegendSeriesInfo';
import { IgxSeriesLayerPropertyOverlayCollection } from './igx-series-layer-property-overlay-collection';
import { SeriesLayerPropertyOverlayCollection as SeriesLayerPropertyOverlayCollection_internal } from './SeriesLayerPropertyOverlayCollection';
import { SeriesLayerPropertyOverlay } from './SeriesLayerPropertyOverlay';
import { SeriesSelectionMode_$type } from './SeriesSelectionMode';
import { IgxTransitionOutCompletedEventArgs } from './igx-transition-out-completed-event-args';
import * as i0 from "@angular/core";
export const IgxSeriesComponent_PROVIDERS = [];
/**
* Represents the base class for all IgxDataChartComponent series.
*/
export let IgxSeriesComponent = /*@__PURE__*/ (() => {
class IgxSeriesComponent {
constructor() {
//@Input()
//set opacity(value: number) {
// this.i.opacity = +value;
//}
//get opacity(): number {
// return this.i.opacity;
//}
//@Input()
//set visibility(v: Visibility) {
// this.i.visibility = ensureEnum<Visibility>(Visibility_$type, v);
//}
//get visibility(): Visibility {
// return this.i.visibility;
//}
this._chartLevelData = null;
this._dataSource = null;
this._chartLevelHighlightedData = null;
this._highlightedDataSource = null;
this._tooltipTemplate = null;
this._tooltipContent = null;
this._tooltipContainerTemplate = null;
this._renderer = null;
this._highlightedValuesExtraPropertyOverlays = null;
this._layers = null;
this._actualLayers = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._transitionOutCompleted = 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() {
}
createImplementation() {
return null;
}
get seriesInternal() {
return this.i;
}
ngOnInit() {
}
set name(value) {
this.i.name = value;
}
get name() {
return this.i.name;
}
/**
* Gets or sets the legend used for the current series.
*/
get legend() {
if (this.i.legend != null)
return this.i.legend.externalObject;
}
set legend(v) {
if (v != undefined && v != null)
this.i.legend = v.i;
}
provideData(data) {
this._chartLevelData = data;
this.updateDataSource();
}
onUpdateDataSource(dataSource) {
return dataSource;
}
updateDataSource() {
if (this._dataSource == null) {
this.i.itemsSource = this.onUpdateDataSource(this._chartLevelData);
}
else {
this.i.itemsSource = this.onUpdateDataSource(this._dataSource);
}
}
set dataSource(value) {
this._dataSource = value;
this.updateDataSource();
//console.log("setting axis data source: " + value)
}
get dataSource() {
if (this._dataSource != null) {
return this._dataSource;
}
return this.i.itemsSource;
}
provideHighlightedData(data) {
this._chartLevelHighlightedData = data;
this.updatehighlightedDataSource();
}
onUpdatehighlightedDataSource(highlightedDataSource) {
return highlightedDataSource;
}
updatehighlightedDataSource() {
if (this._highlightedDataSource == null) {
this.i.highlightedItemsSource = this.onUpdatehighlightedDataSource(this._chartLevelHighlightedData);
}
else {
this.i.highlightedItemsSource = this.onUpdatehighlightedDataSource(this._highlightedDataSource);
}
}
set highlightedDataSource(value) {
this._highlightedDataSource = value;
this.updatehighlightedDataSource();
//console.log("setting axis data source: " + value)
}
get highlightedDataSource() {
if (this._highlightedDataSource != null) {
return this._highlightedDataSource;
}
return this.i.highlightedItemsSource;
}
bindAxes(axes) {
}
bindSeries(series) {
}
set tooltipTemplate(value) {
this._tooltipTemplate = value;
if (value == null) {
if (this._tooltipContent !== null) {
this._tooltipContent.destroy();
this._tooltipContent = null;
}
}
if (this._tooltipContent != null) {
this._tooltipContent.instance.template = this._tooltipTemplate;
}
else {
if (this.owner != null) {
this.owner._ensureTooltipCreated(this);
}
}
}
get tooltipTemplate() {
return this._tooltipTemplate;
}
set tooltipContainerTemplate(value) {
this._tooltipContainerTemplate = value;
if (this._tooltipContent != null) {
this._tooltipContent.instance.containerTemplate = this._tooltipContainerTemplate;
}
}
get tooltipContainerTemplate() {
return this._tooltipContainerTemplate;
}
_ensureTooltipCreated(createTooltip, createWrapper) {
if (this._tooltipTemplate == null) {
this.i.toolTip = null;
}
if (this._tooltipContent == null && this._tooltipTemplate != null) {
let tooltip = createTooltip();
if (tooltip == null) {
return;
}
this._tooltipContent = tooltip;
tooltip.instance.template = this._tooltipTemplate;
this.i.toolTip = createWrapper(tooltip.location.nativeElement);
}
}
_ensureTooltipDestroyed() {
if (this._tooltipContent !== null) {
this._tooltipContent.destroy();
this._tooltipContent = null;
}
}
_provideRenderer(renderer) {
this._renderer = renderer;
this._zoneRunner = (act) => {
if (renderer !== null) {
renderer._ngZone.run(act);
}
else {
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 unique key used to identify the series in data legend
*/
get dataLegendKey() {
return this.i.dataLegendKey;
}
/**
* Gets or sets a name used for grouping multiple series in the Data Legend
* If not set, series will be grouped by series family, e.g. Category, Range, Financial, Scatter
*/
get dataLegendGroup() {
return this.i.me;
}
set dataLegendGroup(v) {
this.i.me = v;
}
/**
* Gets or sets a name used for grouping highlighted series in the Data Legend
* If not set, series will default to parent series' DataLegendGroup, e.g. Category, Range, Financial, Scatter
*/
get highlightedValuesDataLegendGroup() {
return this.i.mu;
}
set highlightedValuesDataLegendGroup(v) {
this.i.mu = v;
}
/**
* Gets whether the series is an annotation layer.
*/
get isToolTipLayer() {
return this.i.f7;
}
/**
* Gets whether the series is an annotation layer.
*
* ```ts
* let isAnnotationLayer: boolean = this.series.isAnnotationLayer;
* ```
*/
get isAnnotationLayer() {
return this.i.ev;
}
/**
* Gets whether the series is an crosshair annotation layer.
*/
get isAnnotationCrosshairLayer() {
return this.i.er;
}
/**
* Gets whether the series is an callout annotation layer.
*/
get isAnnotationCalloutLayer() {
return this.i.eq;
}
/**
* Gets whether the series is an annotation layer displayed only when hovering over the chart.
* Crosshair Layer, Category Highlight Layer, Category Tooltip Layer, Item Tooltip Layer
*/
get isAnnotationHoverLayer() {
return this.i.eu;
}
/**
* Gets whether the series is final value annotation layer.
*/
get isAnnotationFinalValue() {
return this.i.et;
}
/**
* Gets whether the series is final value annotation layer.
*/
get isUserAnnotationLayer() {
return this.i.f9;
}
/**
* Gets whether the series is final user annotation tooltip layer.
*/
get isUserAnnotationToolTipLayer() {
return this.i.ga;
}
/**
* Gets whether the series is a value annotation layer.
*/
get isAnnotationValueLayer() {
return this.i.ew;
}
/**
* Gets whether the series is a data annotation layer that support binding to data source
* DataAnnotationShapeLayer, DataAnnotationSliceLayer, DataAnnotationStripLayer
*/
get isAnnotationDataLayer() {
return this.i.es;
}
/**
* Gets whether the current series is oriented vertically.
*
* ```ts
* let isVertical: boolean = this.series.isVertical;
* ```
*/
get isVertical() {
return this.i.isVertical;
}
/**
* Gets whether the current series is a stack fragment.
*
* ```ts
* let isFragment: boolean = this.series.isFragment;
* ```
*/
get isFragment() {
return this.i.isFragment;
}
/**
* Gets whether the current series shows an area or line shape.
*
* ```ts
* let isAreaorLine: boolean = this.series.isAreaorLine;
* ```
*/
get isAreaOrLine() {
return this.i.ey;
}
/**
* Gets whether the current series shows an area shape.
*/
get isArea() {
return this.i.ex;
}
/**
* Gets whether the current series shows an area shape.
*/
get hasValueAxis() {
return this.i.em;
}
/**
* Gets whether the current series shows an area shape.
*/
get isValueAxisInverted() {
return this.i.gb;
}
/**
* Gets whether the current series shows only line shapes.
*/
get isLineOnly() {
return this.i.fn;
}
/**
* Gets whether the current series shows a line contour shape.
*/
get isLineContour() {
return this.i.fm;
}
/**
* Gets whether the current series shows a spline shape.
*/
get isSpline() {
return this.i.f3;
}
/**
* Gets whether the current series shows a column shape.
*/
get isColumn() {
return this.i.e2;
}
/**
* Gets whether the current series shows a horizontal column shape.
*/
get isBar() {
return this.i.e0;
}
/**
* Gets whether the current series shows a waterfall column shape.
*/
get isWaterfall() {
return this.i.gc;
}
/**
* Gets whether the current series shows a polyline shape.
*/
get isPolyline() {
return this.i.fu;
}
/**
* Gets whether the current series shows a polygon shape.
*/
get isPolygon() {
return this.i.ft;
}
/**
* Gets whether the current series shows pixels.
*/
get isPixel() {
return this.i.fr;
}
/**
* Gets whether the current series shows a pie shape.
*/
get isPie() {
return this.i.fq;
}
/**
* Gets whether the current series shows a tile imagery.
*/
get isTile() {
return this.i.f6;
}
/**
* Gets whether the current series shows step shapes.
*/
get isStep() {
return this.i.f4;
}
/**
* Gets whether the current series shows interactive shape controls.
*/
get isShapeControl() {
return this.i.f1;
}
/**
* Gets whether the current series is a polar type series.
*
* ```ts
* let isPolar: boolean = this.series.isPolar;
* ```
*/
get isPolar() {
return this.i.fs;
}
/**
* Gets whether the current series is a scatter type series.
*
* ```ts
* let isScatter: boolean = this.series.isScatter;
* ```
*/
get isScatter() {
return this.i.fz;
}
/**
* Gets whether the current series is a radial type series.
*
* ```ts
* let isRadial: boolean = this.series.isRadial;
* ```
*/
get isRadial() {
return this.i.fw;
}
/**
* Gets whether the current series is a stacked type series.
*
* ```ts
* let isStacked: boolean = this.series.isStacked;
* ```
*/
get isStacked() {
return this.i.isStacked;
}
/**
* Gets whether the current series is a financial type series.
*
* ```ts
* let isFinancial: boolean = this.series.isFinancial;
* ```
*/
get isFinancial() {
return this.i.fa;
}
/**
* Gets whether the current series is a range type series.
*
* ```ts
* let isRange: boolean = this.series.isRange;
* ```
*/
get isRange() {
return this.i.fx;
}
/**
* Gets whether the current series is a category type series.
*
* ```ts
* let isCategory: boolean = this.series.isCategory;
* ```
*/
get isCategory() {
return this.i.e1;
}
/**
* Gets whether the current series is a geographic series.
*
* ```ts
* let isGeographic: boolean = this.series.isGeographic;
* ```
*/
get isGeographic() {
return this.i.ff;
}
/**
* Gets whether the current series is a shape type series.
*/
get isShape() {
return this.i.f0;
}
/**
* Gets whether the series is a value overlay.
*/
get isValueOverlay() {
return this.i.isValueOverlay;
}
/**
* Gets whether the series is a highlight overlay.
*/
get isHighlightOverlay() {
return this.i.fi;
}
/**
* Gets whether the series supports summarization in Data Legend and Data Tooltip.
*/
get isSummarizationSupported() {
return this.i.isSummarizationSupported;
}
get isLayer() {
return this.i.isLayer;
}
/**
* Gets whether the series has only marker as visuals
*/
get hasOnlyMarkers() {
return this.i.ek;
}
/**
* Gets whether the series has financial OHLC/candlestick visuals
*/
get isFinancialSeries() {
return this.i.fd;
}
/**
* Gets whether the series is financial overlay
*/
get isFinancialOverlay() {
return this.i.fc;
}
/**
* Gets whether the series is financial indicator
*/
get isFinancialIndicator() {
return this.i.fb;
}
/**
* Gets whether the series is financial waterfall
*/
get isFinancialWaterfall() {
return this.i.fe;
}
/**
* Gets whether the default crosshair behavior should be disabled if this series is present.
*
* `IsDefaultCrosshairBehaviorDisabled` defaults to true for annotation layers. When not using annotaion layers, you can show crosshairs by setting the chart's `CrosshairVisibility` to true.
*
* ```ts
* let isDefaultCrosshairBehaviorDisabled: boolean = this.series.isDefaultCrosshairBehaviorDisabled;
* ```
*/
get isDefaultCrosshairBehaviorDisabled() {
return this.i.e4;
}
/**
* Gets whether the default tooltip behavior should be disabled if this series is present.
*
* ```ts
* let isDefaultTooltipBehaviorDisabled: boolean = this.series.isDefaultTooltipBehaviorDisabled;
* ```
*/
get isDefaultTooltipBehaviorDisabled() {
return this.i.e5;
}
/**
* Returns whether the current series supports visual markers.
*
* ```ts
* let hasMarkers: boolean = this.series.hasMarkers;
* ```
*/
get hasMarkers() {
return this.i.hasMarkers;
}
/**
* Returns whether the current series has a visible marker style.
*/
get hasVisibleMarkers() {
return this.i.en;
}
/**
* Gets the current extra layers for the series.
*/
get highlightedValuesExtraPropertyOverlays() {
if (this._highlightedValuesExtraPropertyOverlays === null) {
let coll = new IgxSeriesLayerPropertyOverlayCollection();
let innerColl = this.i.cf;
if (!innerColl) {
innerColl = new SeriesLayerPropertyOverlayCollection_internal();
}
this._highlightedValuesExtraPropertyOverlays = coll._fromInner(innerColl);
}
return this._highlightedValuesExtraPropertyOverlays;
}
set highlightedValuesExtraPropertyOverlays(v) {
if (this._highlightedValuesExtraPropertyOverlays !== null) {
this._highlightedValuesExtraPropertyOverlays._setSyncTarget(null);
this._highlightedValuesExtraPropertyOverlays = null;
}
let coll = new IgxSeriesLayerPropertyOverlayCollection();
this._highlightedValuesExtraPropertyOverlays = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(SeriesLayerPropertyOverlay.$type);
let innerColl = this.i.cf;
if (!innerColl) {
innerColl = new SeriesLayerPropertyOverlayCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._highlightedValuesExtraPropertyOverlays._setSyncTarget(syncColl);
}
/**
* Gets if the series uses an index, which can be used to auto-assign it a color.
*
* ```ts
* let isIndexed: boolean = this.series.isIndexed;
* ```
*/
get isIndexed() {
return this.i.fj;
}
/**
* Gets if the series should appear in any legends.
*
* ```ts
* let isUsableInLegend: boolean = this.series.isUsableInLegend;
* ```
*/
get isUsableInLegend() {
return this.i.isUsableInLegend;
}
/**
* Gets or sets whether or not the current series will have a legend item displayed in a legend.
*
* The `LegendItemVisibilty` can be used to exclude only certain `Series` from the `Legend`.
*/
get legendItemVisibility() {
return this.i.legendItemVisibility;
}
set legendItemVisibility(v) {
this.i.legendItemVisibility = ensureEnum(Visibility_$type, v);
}
/**
* Gets or sets the LegendItemBadgeTemplate property.
* The legend item badge is created according to the LegendItemBadgeTemplate on-demand by
* the series object itself.
*/
get legendItemBadgeTemplate() {
return this.i.legendItemBadgeTemplate;
}
set legendItemBadgeTemplate(v) {
this.i.legendItemBadgeTemplate = v;
}
/**
* Gets the actual legend item badge template used by the series.
*/
get actualLegendItemBadgeTemplate() {
return this.i.td;
}
set actualLegendItemBadgeTemplate(v) {
this.i.td = v;
}
/**
* Gets the effective legend badge outline for the current series.
*/
get actualLegendItemBadgeOutline() {
return brushToString(this.i.vv);
}
set actualLegendItemBadgeOutline(v) {
this.i.vv = stringToBrush(v);
}
/**
* Gets the effective legend badge fill for the current series.
*/
get actualLegendItemBadgeBrush() {
return brushToString(this.i.vu);
}
set actualLegendItemBadgeBrush(v) {
this.i.vu = stringToBrush(v);
}
/**
* Gets or sets the type of legend badge representing the current series in a legend.
* This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series
*/
get legendItemBadgeShape() {
return this.i.legendItemBadgeShape;
}
set legendItemBadgeShape(v) {
this.i.legendItemBadgeShape = ensureEnum(LegendItemBadgeShape_$type, v);
}
/**
* Gets or sets the mode of legend badge representing the current series in a legend.
* This property will be ignored when the LegendItemTemplate/LegendItemBadgeTemplate property is set on the series
*/
get legendItemBadgeMode() {
return this.i.be;
}
set legendItemBadgeMode(v) {
this.i.be = ensureEnum(LegendItemBadgeMode_$type, v);
}
/**
* Gets or sets the LegendItemTemplate property.
* The legend item control content is created according to the LegendItemTemplate on-demand by
* the series object itself.
*/
get legendItemTemplate() {
return this.i.legendItemTemplate;
}
set legendItemTemplate(v) {
this.i.legendItemTemplate = v;
}
/**
* Gets or sets the DiscreteLegendItemTemplate property.
* The legend item control content is created according to the DiscreteLegendItemTemplate on-demand by
* the series object itself.
*/
get discreteLegendItemTemplate() {
return this.i.te;
}
set discreteLegendItemTemplate(v) {
this.i.te = v;
}
/**
* Gets the Index property.
*/
get index() {
return this.i.index;
}
set index(v) {
this.i.index = +v;
}
/**
* Gets or sets the easing function used to morph the current series.
*
* The `TransitioninDuration` and `TransitionEasingFunction` can be used to play animation when data is added or removed from a `Series`. To play an initial animation see `TransitionInDuration`.
*
* ```ts
* this.series.transitionEasingFunction = EasingFunctions.cubicEase;
* ```
*/
get transitionEasingFunction() {
return this.i.de;
}
set transitionEasingFunction(v) {
this.i.de = v;
}
/**
* Gets or sets the EasingFunction used to morph the current series during the initial transition.
*
* The `TransitionInEasingFunction` can be used with `IsTransitionInEnabled` to cofigure the animation when a new datasource is loaded.
*
* ```ts
* this.series.transitionInEasingFunction = EasingFunctions.cubicEase;
* ```
*/
get transitionInEasingFunction() {
return this.i.df;
}
set transitionInEasingFunction(v) {
this.i.df = v;
}
/**
* Gets or sets the EasingFunction used to morph the current series during the initial transition.
*/
get transitionOutEasingFunction() {
return this.i.dg;
}
set transitionOutEasingFunction(v) {
this.i.dg = v;
}
/**
* Gets or sets the duration of the current series' morph.
*
* The `TransitionDuration` can be used to play animation when data is added or removed from a `Series`. To play an initial animation see `TransitionInDuration`.
*
* ```html
* <igx-data-chart
* [dataSource]="data"
* animateSeriesWhenAxisRangeChanges=true>
* <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"
* transitionInMode="accordionFromBottom"
* isTransitionInEnabled=true
* transitionInSpeedType="indexScaled"
* transitionDuration=500
* transitionInDuration=500>
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.transitionDuration = 500;
* ```
*/
get transitionDuration() {
return this.i.km;
}
set transitionDuration(v) {
this.i.km = +v;
}
get actualResolution() {
return this.i.ik;
}
set actualResolution(v) {
this.i.ik = +v;
}
/**
* Gets or sets the current series object's rendering resolution.
*
* Setting the `Resolution` on a Series to a higher value can help with performance, but it will lower the graphical fidelity of the line. As such, it can be increased up until the fidelity is unacceptable.
*
* ```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-line-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* resolution=1.5>
* </igx-line-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.resolution = 1.5;
* ```
*/
get resolution() {
return this.i.jr;
}
set resolution(v) {
this.i.jr = +v;
}
/**
* Gets or sets the top margin to use when getting a visible axis range for the series.
*/
get visibleRangeMarginTop() {
return this.i.j3;
}
set visibleRangeMarginTop(v) {
this.i.j3 = +v;
}
/**
* Gets or sets the bottom margin to use when getting a visible axis range for the series.
*/
get visibleRangeMarginBottom() {
return this.i.j0;
}
set visibleRangeMarginBottom(v) {
this.i.j0 = +v;
}
/**
* Gets or sets the left margin to use when getting a visible axis range for the series.
*/
get visibleRangeMarginLeft() {
return this.i.j1;
}
set visibleRangeMarginLeft(v) {
this.i.j1 = +v;
}
/**
* Gets or sets the right margin to use when getting a visible axis range for the series.
*/
get visibleRangeMarginRight() {
return this.i.j2;
}
set visibleRangeMarginRight(v) {
this.i.j2 = +v;
}
/**
* Gets or sets the Title property.
* The legend item control is created according to the Title on-demand by
* the series object itself.
*
* The `Series` `Title` may be used in tooltips and legends.
*
* ```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"
* showDefaultTooltip="true"
* title="InStock Items">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.title = "InStock Items";
* ```
*/
get title() {
return this.i.title;
}
set title(v) {
this.i.title = v;
}
/**
* Gets or sets the HighlightedTitleSuffix property.
*/
get highlightedTitleSuffix() {
return this.i.ms;
}
set highlightedTitleSuffix(v) {
this.i.ms = v;
}
/**
* Gets or sets whether the highlighted values layer should have a legend item.
*/
get highlightedLegendItemVisibility() {
return this.i.xh;
}
set highlightedLegendItemVisibility(v) {
this.i.xh = ensureEnum(Visibility_$type, v);
}
/**
* Gets or sets the brush to use for the series.
*
* The `Brush` along with the `Outline` and `Negative Brush` can be used to affect the visuals of the `Series`.
*
* ```html
* <igx-data-chart #chart
* [dataSource]="data">
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
* <igx-area-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* brush="red">
* </igx-area-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.brush = "red";
* ```
*/
get brush() {
return brushToString(this.i.vy);
}
set brush(v) {
this.i.vy = stringToBrush(v);
}
/**
* Gets the effective brush for the current series object.
*
* ```ts
* let actualBrush: string = series.actualBrush;
* ```
*/
get actualBrush() {
return brushToString(this.i.vs);
}
set actualBrush(v) {
this.i.vs = stringToBrush(v);
}
/**
* Gets or sets the selection brush to use for the series.
*/
get selectionBrush() {
return brushToString(this.i.wi);
}
set selectionBrush(v) {
this.i.wi = stringToBrush(v);
}
/**
* Gets or sets the Focus brush to use for the series.
*/
get focusBrush() {
return brushToString(this.i.v3);
}
set focusBrush(v) {
this.i.v3 = stringToBrush(v);
}
/**
* Gets the effective emphasis brush for the current series object.
*/
get actualSelectionBrush() {
return brushToString(this.i.vx);
}
set actualSelectionBrush(v) {
this.i.vx = stringToBrush(v);
}
/**
* Gets the effective emphasis brush for the current series object.
*/
get actualFocusBrush() {
return brushToString(this.i.vt);
}
set actualFocusBrush(v) {
this.i.vt = stringToBrush(v);
}
/**
* Gets the effective brush for the current series object with opacity removed so its contrasty for use as a font color.
*/
get safeActualBrush() {
return brushToString(this.i.safeActualBrush);
}
set safeActualBrush(v) {
this.i.safeActualBrush = stringToBrush(v);
}
/**
* Gets or sets the brush to use for the outline of the series.
* Some series types, such as LineSeries, do not display outlines. Therefore, this property does not affect some charts.
*
* The `Outline` along with the `Brush` and `NegativeBrush` can be used to affect the visuals of the `Series`.
*
* ```html
* <igx-data-chart #chart
* [dataSource]="data">
* <igx-category-x-axis
* label="label"
* #xAxis>
* </igx-category-x-axis>
* <igx-numeric-y-axis
* #yAxis>
* </igx-numeric-y-axis>
* <igx-area-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* outline="red">
* </igx-area-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.brush = "red";
* ```
*/
get outline() {
return brushToString(this.i.we);
}
set outline(v) {
this.i.we = stringToBrush(v);
}
/**
* Gets the effective outline for the current series object.
*
* ```ts
* let actualOutline: string = series.ActualOutline;
* ```
*/
get actualOutline() {
return brushToString(this.i.vw);
}
set actualOutline(v) {
this.i.vw = stringToBrush(v);
}
/**
* Gets or sets the brush that specifies current series object's line join style.
*/
get lineJoin() {
return this.i.wo;
}
set lineJoin(v) {
this.i.wo = ensureEnum(PenLineJoin_$type, v);
}
/**
* Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.
*/
get highlightedValuesDisplayMode() {
return this.i.bw;
}
set highlightedValuesDisplayMode(v) {
this.i.bw = ensureEnum(SeriesHighlightedValuesDisplayMode_$type, v);
}
/**
* Gets or sets whether and how to display highlighted values for the series. Note, this is distinct from the highlighting feature that indicates what is closest or under the mouse.
*/
get shouldAnimateOnDataSourceSwap() {
return this.i.gm;
}
set shouldAnimateOnDataSourceSwap(v) {
this.i.gm = ensureBool(v);
}
/**
* Gets or sets the width of the current series object's line thickness.
*
* Depending on the `Series` type, this can be the main brush used, or just the outline. For example, when using a `LineSeries` it will affect the thickness of the lines drawn, whereas when using a `ColumnSeries` it will affect the outer border thickness of the columns.
*
* ```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-line-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* thickness=5>
* </igx-line-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.thickness=5;
* ```
*/
get thickness() {
return this.i.jy;
}
set thickness(v) {
this.i.jy = +v;
}
/**
* Gets the effective Thickness for the current series object.
*/
get actualThickness() {
return this.i.il;
}
set actualThickness(v) {
this.i.il = +v;
}
/**
* Gets or sets a collection of Double values that indicate the pattern of dashes and gaps that
* is used to outline the current series object.
*/
get dashArray() {
return fromDoubleCollection(this.i.wl);
}
set dashArray(v) {
this.i.wl = toDoubleCollection(v);
}
/**
* Gets or sets the width of the current series object's line thickness when the series is selected.
*/
get selectionThickness() {
return this.i.ju;
}
set selectionThickness(v) {
this.i.ju = +v;
}
/**
* Gets actual highlighting mode
*/
get actualHighlightingMode() {
return this.i.by;
}
set actualHighlightingMode(v) {
this.i.by = ensureEnum(SeriesHighlightingMode_$type, v);
}
/**
* Gets actual Selection mode
*/
get actualSelectionMode() {
return this.i.cq;
}
set actualSelectionMode(v) {
this.i.cq = ensureEnum(SeriesSelectionMode_$type, v);
}
/**
* Gets actual Selection mode
*/
get actualFocusMode() {
return this.i.cp;
}
set actualFocusMode(v) {
this.i.cp = ensureEnum(SeriesSelectionMode_$type, v);
}
/**
* Gets actual HighlightedValues fade opacity
*/
get actualHighlightedValuesFadeOpacity() {
return this.i.ih;
}
set actualHighlightedValuesFadeOpacity(v) {
this.i.ih = +v;
}
/**
* Gets or sets the target opacity to fade to for fade style HighlightedValues.
*/
get highlightedValuesFadeOpacity() {
return this.i.jm;
}
set highlightedValuesFadeOpacity(v) {
this.i.jm = +v;
}
/**
* Gets actual highlighting fade opacity
*/
get actualHighlightingFadeOpacity() {
return this.i.ii;
}
set actualHighlightingFadeOpacity(v) {
this.i.ii = +v;
}
/**
* Gets or sets the target opacity to fade to for fade style highlighting.
*/
get highlightingFadeOpacity() {
return this.i.jn;
}
set highlightingFadeOpacity(v) {
this.i.jn = +v;
}
/**
* Gets or sets whether the ActualLegend is FinancialLegend or normal Legend.
*/
get isActualLegendFinancial() {
return this.i.ep;
}
set isActualLegendFinancial(v) {
this.i.ep = ensureBool(v);
}
/**
* Gets or sets whether the component level highlight mode is ignored.
*/
get isComponentHighlightingModeIgnored() {
return this.i.e3;
}
set isComponentHighlightingModeIgnored(v) {
this.i.e3 = ensureBool(v);
}
/**
* Gets or sets whether highlighting should be enabled for this series, if this type of series supports highlighting.
*
* ```html
* <igx-data-chart #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"
* isHighlightEnabled="true">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.isHighlightingEnabled = true;
* ```
*/
get isHighlightingEnabled() {
return this.i.fg;
}
set isHighlightingEnabled(v) {
this.i.fg = ensureBool(v);
}
/**
* Gets or sets whether the series should use individual palette colors for each item.
*/
get useItemWiseColors() {
return this.i.hf;
}
set useItemWiseColors(v) {
this.i.hf = ensureBool(v);
}
get isColoredItemwise() {
return this.i.isColoredItemwise;
}
/**
* Gets or sets whether the opacity should be automatically shifted for the safe actual brush.
*/
get shouldShiftOpacityForSafeActualBrush() {
return this.i.gr;
}
set shouldShiftOpacityForSafeActualBrush(v) {
this.i.gr = ensureBool(v);
}
/**
* Gets or sets whether the opacity should be automatically shifted for the safe actual brush.
*/
get shouldRemoveHighlightedDataOnLayerHidden() {
return this.i.gp;
}
set shouldRemoveHighlightedDataOnLayerHidden(v) {
this.i.gp = ensureBool(v);
}
/**
* Gets or sets whether this series should suppress it's auto callouts
*/
get shouldHideAutoCallouts() {
return this.i.go;
}
set shouldHideAutoCallouts(v) {
this.i.go = ensureBool(v);
}
/**
* Gets or sets whether drop shadow should be enabled for this series.
*
* `IsDropShadowEnabled` is used to decide whether drop shadow should be enabled for this 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-line-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* isDropShadowEnabled=true>
* </igx-line-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.isDropShadowEnabled = true;
* ```
*/
get isDropShadowEnabled() {
return this.i.e8;
}
set isDropShadowEnabled(v) {
this.i.e8 = ensureBool(v);
}
/**
* Gets or sets the shadow blur.
* This property is ignored when
* Series.UseSingleShadow is set to true.
*
* `ShadowBlur` can be set in conjection with `IsDropShadowEnabled` to further define the drop shadow effect.
*
* ```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"
* isDropShadowEnabled="true"
* shadowBlur="7"
* shadowColor="blue">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.shadowBlur = 7;
* ```
*/
get shadowBlur() {
return this.i.jv;
}
set shadowBlur(v) {
this.i.jv = +v;
}
/**
* Gets or sets the drop shadow color.
*
* `ShadowColor` can be set in conjection with `IsDropShadowEnabled` to further define the drop shadow effect.
*
* ```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"
* isDropShadowEnabled="true"
* shadowBlur="7"
* shadowColor="blue">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.series.shadowColor = "blue";
* ```
*/
get shadowColor() {
return colorToString(this.i.wk);
}
set shadowColor(v) {
this.i.wk = stringToColor(v);
}
/**
* Gets or sets whether drop shadow is applied to the whole series visual or to each of the individual shapes forming the series.
* When this property is set to true, no
* Series.ShadowBlur is applied.
*
* ```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-line-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value"
* isDropShadowEnabled=true
* markerType="circle"
* useS