UNPKG

igniteui-webcomponents-charts

Version:

Ignite UI Web Components charting components for building rich data visualizations using TypeScript APIs.

821 lines (819 loc) 35.3 kB
/* 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 { WebComponentRenderer, WebComponentWrapper } from "igniteui-webcomponents-core"; import { TypeRegistrar } from "igniteui-webcomponents-core"; import { CategoryChart } from './CategoryChart'; import { CategoryChartType_$type } from './CategoryChartType'; import { CategorySeriesMarkerCollisionAvoidance_$type } from './CategorySeriesMarkerCollisionAvoidance'; import { CategoryTransitionInMode_$type } from './CategoryTransitionInMode'; import { TransitionInSpeedType_$type } from './TransitionInSpeedType'; import { fromBrushCollection, toBrushCollection, ensureEnum, ensureBool, NamePatcher, enumToString, brushCollectionToString, getAllPropertyNames, toSpinal } from "igniteui-webcomponents-core"; import { IgcXYChartComponent } from './igc-xy-chart-component'; import { DataChartStylingDefaults } from './DataChartStylingDefaults'; import { DataSeriesType } from "igniteui-webcomponents-core"; import { IgcDataContext } from "igniteui-webcomponents-core"; import { IgcCategoryXAxisComponent } from './igc-category-x-axis-component'; import { IgcNumericYAxisComponent } from './igc-numeric-y-axis-component'; import { RegisterElementHelper } from "igniteui-webcomponents-core"; import { AxisRangeBufferMode_$type } from './AxisRangeBufferMode'; import { AutoMarginsAndAngleUpdateMode_$type } from './AutoMarginsAndAngleUpdateMode'; let IgcCategoryChartComponent = /*@__PURE__*/ (() => { class IgcCategoryChartComponent extends IgcXYChartComponent { set height(value) { this._height = value; this.style.height = value; this.notifyResized(); } get height() { return this._height; } set width(value) { this._width = value; this.style.width = value; this.notifyResized(); } get width() { return this._width; } constructor() { super(); this._disconnected = false; this._dataSource = null; this._defaultTooltips = null; if (this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this)); } this._renderer = new WebComponentRenderer(this, document, true, DataChartStylingDefaults); //this._implementation = this.createImplementation(); this._container = this._renderer.createElement("div"); this._renderer.updateRoot(this._container); //this._renderer.rootWrapper.append(this._container); this._container.setStyleProperty("display", "block"); this._container.setStyleProperty("width", "100%"); this._container.setStyleProperty("height", "100%"); this._wrapper = this._renderer; var chart = this.i; this._chart = chart; if (chart.xAxis) { let x = document.createElement("igc-category-x-axis"); //new IgcCategoryXAxisComponent(); //(<any>x)._provideRenderer(this._renderer); x._implementation = chart.xAxis; chart.xAxis.externalObject = x; } if (chart.yAxis) { let y = document.createElement("igc-numeric-y-axis"); //(<any>y)._provideRenderer(this._renderer); y._implementation = chart.yAxis; chart.yAxis.externalObject = y; } chart.provideContainer(this._renderer); this.bindData(); chart.notifyResized(); this._renderer.addSizeWatcher(() => { this._chart.notifyResized(); }); //this._initialized = true; } destroy() { this._chart.destroy(); this._wrapper.destroy(); } disconnectedCallback() { this._disconnected = true; if (this.i) { this.i.onDetachedFromUI(); } } connectedCallback() { if (this._disconnected) { this._disconnected = false; if (this.i) { this.i.onAttachedToUI(); } return; } this.classList.add("ig-category-chart"); this.classList.add("igc-category-chart"); this.appendChild(this._renderer.rootWrapper.getNativeElement()); this._attached = true; this.style.display = "block"; this.style.height = this._height; this.style.width = this._width; this._flushQueuedAttributes(); // supports themes or custom properties set in CSS this._styling(this, this); this.afterContentInit(); } afterContentInit() { this.initializeContent(); } createImplementation() { return new CategoryChart(); } get i() { return this._implementation; } createSeriesComponent(type) { if (TypeRegistrar.isRegistered(type)) { let s = TypeRegistrar.create(type); s.owner = this; s._provideRenderer(this._wrapper); return s; } else { //we shouldn't get here, hopefully. throw Error("series type not loaded: " + type); } } createSeries(type) { switch (type) { case DataSeriesType.Area: return this.createSeriesComponent('IgcAreaSeriesComponent'); case DataSeriesType.Column: return this.createSeriesComponent('IgcColumnSeriesComponent'); case DataSeriesType.Line: return this.createSeriesComponent('IgcLineSeriesComponent'); case DataSeriesType.Point: return this.createSeriesComponent('IgcPointSeriesComponent'); case DataSeriesType.Spline: return this.createSeriesComponent('IgcSplineSeriesComponent'); case DataSeriesType.SplineArea: return this.createSeriesComponent('IgcSplineAreaSeriesComponent'); case DataSeriesType.StepArea: return this.createSeriesComponent('IgcStepAreaSeriesComponent'); case DataSeriesType.StepLine: return this.createSeriesComponent('IgcStepLineSeriesComponent'); case DataSeriesType.Waterfall: return this.createSeriesComponent('IgcWaterfallSeriesComponent'); case DataSeriesType.ItemToolTipLayer: return this.createSeriesComponent('IgcItemToolTipLayerComponent'); case DataSeriesType.CategoryToolTipLayer: return this.createSeriesComponent('IgcCategoryToolTipLayerComponent'); case DataSeriesType.CrosshairLayer: return this.createSeriesComponent('IgcCrosshairLayerComponent'); case DataSeriesType.FinalValueLayer: return this.createSeriesComponent('IgcFinalValueLayerComponent'); case DataSeriesType.CalloutLayer: return this.createSeriesComponent('IgcCalloutLayerComponent'); case DataSeriesType.CategoryHighlightLayer: return this.createSeriesComponent('IgcCategoryHighlightLayerComponent'); case DataSeriesType.CategoryItemHighlightLayer: return this.createSeriesComponent('IgcCategoryItemHighlightLayerComponent'); case DataSeriesType.DataToolTipLayer: return this.createSeriesComponent('IgcDataToolTipLayerComponent'); case DataSeriesType.ValueLayer: return this.createSeriesComponent('IgcValueLayerComponent'); case DataSeriesType.TrendLineLayer: return this.createSeriesComponent('IgcTrendLineLayerComponent'); default: return this.createSeriesComponent('IgcColumnSeriesComponent'); } } set dataSource(value) { this._dataSource = value; this.bindData(); } get dataSource() { return this._dataSource; } bindData() { if (this._chart != null && this._chart !== undefined) { this._chart.itemsSource = this._dataSource; } } initializeContent() { if (TypeRegistrar.isRegistered("IgcDataChartDefaultTooltipsComponent")) { let d = TypeRegistrar.create("IgcDataChartDefaultTooltipsComponent"); this._defaultTooltips = d; this._onDefaultTooltipsReady(d); //this._container.appendChild(cr.location.nativeElement); } // supports angular themes or custom properties set in CSS this._styling(this, this); this._chart.notifyResized(); } createTooltip() { if (!TypeRegistrar.isRegistered("IgcTooltipContainerComponent")) { return null; } let cr = TypeRegistrar.create("IgcTooltipContainerComponent"); let ele = cr; let self = this; ele.updateToolTip = function (c, isSubContent) { if (c.externalObject) { c = c.externalObject; } else { let ext = new IgcDataContext(); ext._implementation = c; c = ext; } if (!isSubContent) { if (ele.parentElement != self._container.getNativeElement()) { if (ele.parentElement != null) { ele.parentElement.removeChild(ele); } self._container.getNativeElement().appendChild(ele); } } else { c.isSubContent = true; } cr.context = c; ele.style.display = "block"; return true; }; ele.hideToolTip = function () { ele.style.display = "none"; }; ele.style.display = "none"; return cr; } _ensureTooltipCreated(series) { series._ensureTooltipCreated(() => this.createTooltip(), (ele) => { let wrapper = new WebComponentWrapper(ele, this._renderer); wrapper.updateToolTip = ele.updateToolTip; wrapper.hideToolTip = ele.hideToolTip; return wrapper; }); } _createXAxis() { let x = new IgcCategoryXAxisComponent(); x._provideRenderer(this._wrapper); return x.i; } _createYAxis() { let y = new IgcNumericYAxisComponent(); y.provideRenderer(this._wrapper); return y.i; } _ensureDefaultTooltip(series) { if (this._defaultTooltips == null) { return; } this._defaultTooltips["ensureDefaultTooltip"](series); } _onDefaultTooltipsReady(cr) { if (this.i.dataChart) { var currSeries = this.i.dataChart.series; for (var i = 0; i < currSeries.count; i++) { if (currSeries.item(i).externalObject.showDefaultTooltip) { this._ensureDefaultTooltip(currSeries.item(i).externalObject); } } } } static get observedAttributes() { if (IgcCategoryChartComponent._observedAttributesIgcCategoryChartComponent == null) { let names = getAllPropertyNames(IgcCategoryChartComponent); for (let i = 0; i < names.length; i++) { names[i] = toSpinal(names[i]); } IgcCategoryChartComponent._observedAttributesIgcCategoryChartComponent = names; } return IgcCategoryChartComponent._observedAttributesIgcCategoryChartComponent; } static register() { if (!IgcCategoryChartComponent._isElementRegistered) { IgcCategoryChartComponent._isElementRegistered = true; RegisterElementHelper.registerElement(IgcCategoryChartComponent.htmlTagName, IgcCategoryChartComponent); } } /** * Gets or sets the duration used for animating series plots when the chart is loading into view * * `TransitionInDuration` controls the length of time taken by the transition-in animation. Try setting it to 2 seconds: */ get transitionInDuration() { return this.i.alg; } set transitionInDuration(v) { this.i.alg = +v; this._a("transitionInDuration", this.i.alg); } /** * Gets or sets the duration used for animating series plots when the series is leaving view */ get transitionOutDuration() { return this.i.alh; } set transitionOutDuration(v) { this.i.alh = +v; this._a("transitionOutDuration", this.i.alh); } /** * Gets or sets the easing function used for animating series plots when the chart is loading into view * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number. */ get transitionInEasingFunction() { return this.i.aji; } set transitionInEasingFunction(v) { this.i.aji = v; } /** * Gets or sets the easing function used for animating series plots when the chart is loading into view * This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number. */ get transitionOutEasingFunction() { return this.i.ajj; } set transitionOutEasingFunction(v) { this.i.ajj = v; } /** * Gets domain type of this chart */ get domainType() { return this.i.cd; } /** * Gets or sets the type of chart series to generate from the data. * * The `ChartType` property determines the type of data series to display. */ get chartType() { return this.i.ai1; } set chartType(v) { this.i.ai1 = ensureEnum(CategoryChartType_$type, v); this._a("chartType", enumToString(CategoryChartType_$type, this.i.ai1)); } /** * Gets or sets the behavior for markers in each series which are placed too close together for the current view, resulting in a collision. * * `MarkerCollisionAvoidance` controls the technique the chart uses to avoid overlapping markers. */ get markerCollisionAvoidance() { return this.i.ai3; } set markerCollisionAvoidance(v) { this.i.ai3 = ensureEnum(CategorySeriesMarkerCollisionAvoidance_$type, v); this._a("markerCollisionAvoidance", enumToString(CategorySeriesMarkerCollisionAvoidance_$type, this.i.ai3)); } /** * Gets or sets whether to include the spline shape in the axis range requested of the axis for spline type series. */ get isSplineShapePartOfRange() { return this.i.ajx; } set isSplineShapePartOfRange(v) { this.i.ajx = ensureBool(v); this._a("isSplineShapePartOfRange", this.i.ajx); } /** * Gets or sets whether animation of series plots is enabled when the chart is loading into view * * Set `IsTransitionInEnabled` to true if you want your chart series to animate into position when the chart is loading into view. */ get isTransitionInEnabled() { return this.i.ajy; } set isTransitionInEnabled(v) { this.i.ajy = ensureBool(v); this._a("isTransitionInEnabled", this.i.ajy); } /** * Gets or sets the method that determines how to animate series plots when the chart is loading into view * * `TransitionInMode` controls the direction of the transition-in animation. */ get transitionInMode() { return this.i.ai5; } set transitionInMode(v) { this.i.ai5 = ensureEnum(CategoryTransitionInMode_$type, v); this._a("transitionInMode", enumToString(CategoryTransitionInMode_$type, this.i.ai5)); } /** * Gets or sets the arrival speed used for animating series plots when the chart is loading into view * * `TransitionInSpeedType` controls the speed of the transition-in animation. */ get transitionInSpeedType() { return this.i.ajf; } set transitionInSpeedType(v) { this.i.ajf = ensureEnum(TransitionInSpeedType_$type, v); this._a("transitionInSpeedType", enumToString(TransitionInSpeedType_$type, this.i.ajf)); } /** * Gets or sets the frequency of displayed labels along the X-axis. * Gets or sets the set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label. * * `XAxisInterval` determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to _n_ to display a label every _nth_ item. */ get xAxisInterval() { return this.i.akx; } set xAxisInterval(v) { this.i.akx = +v; this._a("xAxisInterval", this.i.akx); } /** * Gets or sets the frequency of displayed minor lines along the X-axis. * Gets or sets the set value is a factor that determines how the minor lines will be displayed. * * `XAxisMinorInterval` determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series. * * `XAxisMinorInterval` is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set `XAxisMinorInterval` to 0.1. */ get xAxisMinorInterval() { return this.i.ak0; } set xAxisMinorInterval(v) { this.i.ak0 = +v; this._a("xAxisMinorInterval", this.i.ak0); } /** * Gets or sets the amount of space between adjacent categories for the X-axis. * The gap is silently clamped to the range [0, 1] when used. * * Use the `XAxisGap` property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series. * * An `XAxisGap` of 0 allocates no space between items. An `XAxisGap` 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 `XAxisGap` to 0.75, as in this code: */ get xAxisGap() { return this.i.akw; } set xAxisGap(v) { this.i.akw = +v; this._a("xAxisGap", this.i.akw); } /** * Gets or sets the minimum amount of pixels to use for the gap between categories, if possible. */ get xAxisMinimumGapSize() { return this.i.akz; } set xAxisMinimumGapSize(v) { this.i.akz = +v; this._a("xAxisMinimumGapSize", this.i.akz); } /** * Gets or sets the maximum gap value to allow. This defaults to 1.0. */ get xAxisMaximumGap() { return this.i.aky; } set xAxisMaximumGap(v) { this.i.aky = +v; this._a("xAxisMaximumGap", this.i.aky); } /** * Gets or sets the amount of overlap between adjacent categories for the X-axis. * Gets or sets the overlap is silently clamped to the range [-1, 1] when used. * * Use the `XAxisOverlap` property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series. * * An `XAxisOverlap` of 0 places grouped items adjacent to each other. An `XAxisOverlap` of 1 places grouped items in the same axis space, completely overlapping. An `XAxisOverlap` of -1 places a space between grouped items equal to the width of one item. * * To place grouped items with 75% overlap, set the `XAxisOverlap` to 0.75, as in this code: */ get xAxisOverlap() { return this.i.ak1; } set xAxisOverlap(v) { this.i.ak1 = +v; this._a("xAxisOverlap", this.i.ak1); } /** * Gets or sets the distance between each label and grid line along the Y-axis. * * `YAxisInterval` determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis. */ get yAxisInterval() { return this.i.ak9; } set yAxisInterval(v) { this.i.ak9 = +v; this._a("yAxisInterval", this.i.ak9); } /** * Gets or sets a whether the series viewer should auto expand margins to accommodate the initial horizontal axis labels. */ get autoMarginAndAngleUpdateMode() { return this.i.aix; } set autoMarginAndAngleUpdateMode(v) { this.i.aix = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v); this._a("autoMarginAndAngleUpdateMode", enumToString(AutoMarginsAndAngleUpdateMode_$type, this.i.aix)); } /** * Gets or sets a whether the series viewer should auto expand margins to accommodate the initial horizontal axis labels. */ get shouldAutoExpandMarginForInitialLabels() { return this.i.ajz; } set shouldAutoExpandMarginForInitialLabels(v) { this.i.ajz = ensureBool(v); this._a("shouldAutoExpandMarginForInitialLabels", this.i.ajz); } /** * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true. */ get shouldConsiderAutoRotationForInitialLabels() { return this.i.aj0; } set shouldConsiderAutoRotationForInitialLabels(v) { this.i.aj0 = ensureBool(v); this._a("shouldConsiderAutoRotationForInitialLabels", this.i.aj0); } /** * Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels. */ get autoExpandMarginExtraPadding() { return this.i.ako; } set autoExpandMarginExtraPadding(v) { this.i.ako = +v; this._a("autoExpandMarginExtraPadding", this.i.ako); } /** * Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels. */ get autoExpandMarginMaximumValue() { return this.i.akp; } set autoExpandMarginMaximumValue(v) { this.i.akp = +v; this._a("autoExpandMarginMaximumValue", this.i.akp); } /** * Gets or sets whether the axis should favor emitting a label at the end of the scale. */ get yAxisFavorLabellingScaleEnd() { return this.i.aj4; } set yAxisFavorLabellingScaleEnd(v) { this.i.aj4 = ensureBool(v); this._a("yAxisFavorLabellingScaleEnd", this.i.aj4); } /** * Gets or sets whether the x axis 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 xAxisEnhancedIntervalPreferMoreCategoryLabels() { return this.i.aj1; } set xAxisEnhancedIntervalPreferMoreCategoryLabels(v) { this.i.aj1 = ensureBool(v); this._a("xAxisEnhancedIntervalPreferMoreCategoryLabels", this.i.aj1); } /** * Gets or sets whether the y axis 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 yAxisEnhancedIntervalPreferMoreCategoryLabels() { return this.i.aj3; } set yAxisEnhancedIntervalPreferMoreCategoryLabels(v) { this.i.aj3 = ensureBool(v); this._a("yAxisEnhancedIntervalPreferMoreCategoryLabels", this.i.aj3); } /** * Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series. */ get yAxisAutoRangeBufferMode() { return this.i.aiz; } set yAxisAutoRangeBufferMode(v) { this.i.aiz = ensureEnum(AxisRangeBufferMode_$type, v); this._a("yAxisAutoRangeBufferMode", enumToString(AxisRangeBufferMode_$type, this.i.aiz)); } /** * Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one. * Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero. * * Set `YAxisIsLogarithmic` to true if you want the y-axis to be a logarithmic scale. */ get yAxisIsLogarithmic() { return this.i.aj5; } set yAxisIsLogarithmic(v) { this.i.aj5 = ensureBool(v); this._a("yAxisIsLogarithmic", this.i.aj5); } /** * Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis. * This property is effective only when YAxisIsLogarithmic is true. * * When `YAxisIsLogarithmic` is true, `YAxisLogarithmBase` sets the logarithm base of the y-axis scale. */ get yAxisLogarithmBase() { return this.i.ali; } set yAxisLogarithmBase(v) { this.i.ali = +v; this._a("yAxisLogarithmBase", this.i.ali); } /** * Gets or sets the data value corresponding to the minimum value of the Y-axis. * * `YAxisMaximumValue` determines the minimum of the y-axis. */ get yAxisMinimumValue() { return this.i.alb; } set yAxisMinimumValue(v) { this.i.alb = +v; this._a("yAxisMinimumValue", this.i.alb); } /** * Gets or sets the data value corresponding to the maximum value of the Y-axis. * * `YAxisMaximumValue` determines the maximum of the y-axis. */ get yAxisMaximumValue() { return this.i.ala; } set yAxisMaximumValue(v) { this.i.ala = +v; this._a("yAxisMaximumValue", this.i.ala); } /** * Gets or sets the frequency of displayed minor lines along the Y-axis. * * `YAxisMinorInterval` determines how often to show a minor gridline along the y-axis. Set this property to a number less than the y-axis interval. */ get yAxisMinorInterval() { return this.i.alc; } set yAxisMinorInterval(v) { this.i.alc = +v; this._a("yAxisMinorInterval", this.i.alc); } /** * Gets the current minimum value for the X-axis. */ get xAxisActualMinimum() { return this.i.akv; } /** * Gets the current maximum value for the X-axis. */ get xAxisActualMaximum() { return this.i.aku; } /** * Gets the current minimum value for the Y-axis. */ get yAxisActualMinimum() { return this.i.ak8; } /** * Gets the current maximum value for the Y-axis. */ get yAxisActualMaximum() { return this.i.ak7; } /** * Gets or sets the palette used for coloring negative items of Waterfall chart type. * * `NegativeBrushes` controls the brushes used by the chart for negative data, when the `ChartType` is one that supports negative brushes. */ get negativeBrushes() { return fromBrushCollection(this.i.aiu); } set negativeBrushes(v) { this.i.aiu = toBrushCollection(v); this._a("negativeBrushes", brushCollectionToString(this.i.aiu)); } /** * Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall. * * `NegativeOutlines` controls the outlines used by the chart for negative data, when the `ChartType` is one that supports negative brushes. */ get negativeOutlines() { return fromBrushCollection(this.i.aiv); } set negativeOutlines(v) { this.i.aiv = toBrushCollection(v); this._a("negativeOutlines", brushCollectionToString(this.i.aiv)); } /** * Gets or sets whether the large numbers on the Y-axis labels are abbreviated. * * To abbreviate on the y-axis using formats like "1K" or "1M," set `YAxisAbbreviateLargeNumbers` to true. */ get yAxisAbbreviateLargeNumbers() { return this.i.aj2; } set yAxisAbbreviateLargeNumbers(v) { this.i.aj2 = ensureBool(v); this._a("yAxisAbbreviateLargeNumbers", this.i.aj2); } /** * Gets or sets number of visible categories at maximum zooming level * This property is overridden by chart's WindowRectMinWidth property */ get xAxisZoomMaximumCategoryRange() { return this.i.ak2; } set xAxisZoomMaximumCategoryRange(v) { this.i.ak2 = +v; this._a("xAxisZoomMaximumCategoryRange", this.i.ak2); } /** * Gets or sets maximum pixel span of series item that will be visible at maximum zooming level * This property ensures that series item does not get stretch above specified value. * This property is overridden by chart's WindowRectMinWidth property */ get xAxisZoomMaximumItemSpan() { return this.i.ak3; } set xAxisZoomMaximumItemSpan(v) { this.i.ak3 = +v; this._a("xAxisZoomMaximumItemSpan", this.i.ak3); } /** * Gets or sets number of categories that the chart will zoom in and fill plot area * This property is overridden by chart's WindowRect or WindowScaleHorizontal properties */ get xAxisZoomToCategoryRange() { return this.i.ak4; } set xAxisZoomToCategoryRange(v) { this.i.ak4 = +v; this._a("xAxisZoomToCategoryRange", this.i.ak4); } /** * Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items * This property is overridden by chart's WindowRect or WindowScaleHorizontal properties */ get xAxisZoomToCategoryStart() { return this.i.ak5; } set xAxisZoomToCategoryStart(v) { this.i.ak5 = +v; this._a("xAxisZoomToCategoryStart", this.i.ak5); } /** * Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span * Chart will automatically zoom in until series item has specified pixel span. * This property is overridden by chart's WindowRect or WindowScaleHorizontal properties */ get xAxisZoomToItemSpan() { return this.i.ak6; } set xAxisZoomToItemSpan(v) { this.i.ak6 = +v; this._a("xAxisZoomToItemSpan", this.i.ak6); } /** * Gets or sets whether the category should be highlighted when hovered */ get isCategoryHighlightingEnabled() { return this.i.ajv; } set isCategoryHighlightingEnabled(v) { this.i.ajv = ensureBool(v); this._a("isCategoryHighlightingEnabled", this.i.ajv); } /** * Gets or sets whether the item should be highlighted when hovered */ get isItemHighlightingEnabled() { return this.i.ajw; } set isItemHighlightingEnabled(v) { this.i.ajw = ensureBool(v); this._a("isItemHighlightingEnabled", this.i.ajw); } /** * Export serialized visual data. */ exportSerializedVisualData() { let iv = this.i.aln(); return (iv); } recalculateMarginAutoExpansion() { this.i.amt(); } getCurrentXAxisActualMinimum() { let iv = this.i.akr(); return (iv); } getCurrentYAxisActualMinimum() { let iv = this.i.akt(); return (iv); } getCurrentXAxisActualMaximum() { let iv = this.i.akq(); return (iv); } getCurrentYAxisActualMaximum() { let iv = this.i.aks(); return (iv); } } IgcCategoryChartComponent._observedAttributesIgcCategoryChartComponent = null; IgcCategoryChartComponent.htmlTagName = "igc-category-chart"; IgcCategoryChartComponent._isElementRegistered = false; return IgcCategoryChartComponent; })(); export { IgcCategoryChartComponent };