UNPKG

igniteui-angular-charts

Version:

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

755 lines (754 loc) 30.9 kB
import { EventEmitter, Output, Component, forwardRef, Input, ChangeDetectionStrategy } from '@angular/core'; import { delegateCombine } from "igniteui-angular-core"; import { ValueLayerValueMode_$type } from "./ValueLayerValueMode"; import { IgxSeriesComponent } from "./igx-series-component"; import { IgxAxisComponent } from "./igx-axis-component"; import { OverlayTextLocation_$type } from "./OverlayTextLocation"; import { AnnotationAppearanceMode_$type } from "./AnnotationAppearanceMode"; import { IgxOverlayTextUpdatingEventArgs } from "./igx-overlay-text-updating-event-args"; import { IgxAnnotationLayerComponent } from "./igx-annotation-layer-component"; import { ValueLayer } from "./ValueLayer"; import { ensureBool, ensureEnum, brushToString, stringToBrush, toPoint } from "igniteui-angular-core"; import { FontInfo } from "igniteui-angular-core"; import * as i0 from "@angular/core"; /** * Represents an annotation layer that displays crosshair lines that cross through the closest value of the target series under the cursor. */ export let IgxValueLayerComponent = /*@__PURE__*/ (() => { class IgxValueLayerComponent extends IgxAnnotationLayerComponent { constructor() { super(); this._stylingOverlayText = null; } createImplementation() { return new ValueLayer(); } /** * @hidden */ get i() { return this._implementation; } /** * Gets whether the series is an crosshair annotation layer. */ get isAnnotationValueLayer() { return this.i.ev; } /** * Gets or sets the value mode for the overlay. */ get valueMode() { return this.i.aan; } set valueMode(v) { this.i.aan = ensureEnum(ValueLayerValueMode_$type, v); } /** * Gets or sets the color to use for the horizontal line. Leave null for an automatic value. */ get horizontalLineStroke() { return brushToString(this.i.ae6); } set horizontalLineStroke(v) { this.i.ae6 = stringToBrush(v); } /** * Gets or sets the color to use for vertical line. Leave null for an automatic value. */ get verticalLineStroke() { return brushToString(this.i.afa); } set verticalLineStroke(v) { this.i.afa = stringToBrush(v); } /** * Gets or sets the name of the series to target this annotation to. If null, this annotation targets all series simultaneously. */ get targetSeriesName() { return this.i.acl; } set targetSeriesName(v) { this.i.acl = v; } /** * Gets or sets the series to target this annotation to. If null, this annotation targets all series simultaneously. */ get targetSeries() { const r = this.i.aal; if (r == null) { return null; } if (!r.externalObject) { let e = IgxSeriesComponent._createFromInternal(r); if (e) { e._implementation = r; } r.externalObject = e; } return r.externalObject; } set targetSeries(v) { if (v != null && this._stylingContainer && v._styling) v._styling(this._stylingContainer, this, this); v == null ? this.i.aal = null : this.i.aal = v.i; } /** * Gets or sets the name of the axis to target this annotation to. If null, this annotation targets all axis simultaneously. */ get targetAxisName() { return this.i.aci; } set targetAxisName(v) { this.i.aci = v; } /** * Gets or sets the axis to target this annotation to. If null, this annotation targets all value axis simultaneously. */ get targetAxis() { const r = this.i.aae; 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 targetAxis(v) { if (v != null && this._stylingContainer && v._styling) v._styling(this._stylingContainer, this, this); v == null ? this.i.aae = null : this.i.aae = v.i; } /** * Gets or sets whether to use value interpolation when drawing a line through the best value for the cursor position. */ get useInterpolation() { return this.i.aay; } set useInterpolation(v) { this.i.aay = ensureBool(v); } /** * Gets or sets whether to draw annotations over the axes where the crosshair meets with them. */ get isAxisAnnotationEnabled() { return this.i.aar; } set isAxisAnnotationEnabled(v) { this.i.aar = ensureBool(v); } /** * Sets or gets a function which takes an object that produces a formatted label for the x axis annotation. */ get xAxisAnnotationFormatLabel() { return this.i.aaf; } set xAxisAnnotationFormatLabel(v) { this.i.aaf = v; } /** * Sets or gets a function which takes an object that produces a formatted label for the y axis annotation. */ get yAxisAnnotationFormatLabel() { return this.i.aag; } set yAxisAnnotationFormatLabel(v) { this.i.aag = v; } /** * Gets or sets the color to use for the x axis annotation text. Leave unset for an automatic value. */ get xAxisAnnotationTextColor() { return brushToString(this.i.afd); } set xAxisAnnotationTextColor(v) { this.i.afd = stringToBrush(v); } /** * Gets or sets the color to use for the x axis annotation backing. Leave unset for an automatic value. */ get xAxisAnnotationBackground() { return brushToString(this.i.afb); } set xAxisAnnotationBackground(v) { this.i.afb = stringToBrush(v); } /** * Gets or sets the corner radius to use for the x axis annotation backing. Leave unset for an automatic value. */ get xAxisAnnotationBackgroundCornerRadius() { return this.i.abb; } set xAxisAnnotationBackgroundCornerRadius(v) { this.i.abb = +v; } /** * Gets or sets the precision to use displaying values for interpolated crosshair positions. */ get xAxisAnnotationInterpolatedValuePrecision() { return this.i.abn; } set xAxisAnnotationInterpolatedValuePrecision(v) { this.i.abn = +v; } /** * Gets or sets the color to use for the x axis annotation outline. Leave unset for an automatic value. */ get xAxisAnnotationOutline() { return brushToString(this.i.afc); } set xAxisAnnotationOutline(v) { this.i.afc = stringToBrush(v); } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get xAxisAnnotationPaddingLeft() { return this.i.abd; } set xAxisAnnotationPaddingLeft(v) { this.i.abd = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get xAxisAnnotationPaddingTop() { return this.i.abf; } set xAxisAnnotationPaddingTop(v) { this.i.abf = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get xAxisAnnotationPaddingRight() { return this.i.abe; } set xAxisAnnotationPaddingRight(v) { this.i.abe = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get xAxisAnnotationPaddingBottom() { return this.i.abc; } set xAxisAnnotationPaddingBottom(v) { this.i.abc = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get yAxisAnnotationPaddingLeft() { return this.i.abj; } set yAxisAnnotationPaddingLeft(v) { this.i.abj = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get yAxisAnnotationPaddingTop() { return this.i.abl; } set yAxisAnnotationPaddingTop(v) { this.i.abl = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get yAxisAnnotationPaddingRight() { return this.i.abk; } set yAxisAnnotationPaddingRight(v) { this.i.abk = +v; } /** * Gets or sets the padding to use withing the axis annotation callout. Leaving this NaN will use an automatic value related to the axis label margins. */ get yAxisAnnotationPaddingBottom() { return this.i.abi; } set yAxisAnnotationPaddingBottom(v) { this.i.abi = +v; } /** * Gets or sets the stroke thickness for the x axis annotation backing. Leave unset for an automatic value. */ get xAxisAnnotationStrokeThickness() { return this.i.abg; } set xAxisAnnotationStrokeThickness(v) { this.i.abg = +v; } /** * Gets or sets the color to use for the y axis annotation text. Leave unset for an automatic value. */ get yAxisAnnotationTextColor() { return brushToString(this.i.afg); } set yAxisAnnotationTextColor(v) { this.i.afg = stringToBrush(v); } /** * Gets or sets the color to use for the y axis annotation backing. Leave unset for an automatic value. */ get yAxisAnnotationBackground() { return brushToString(this.i.afe); } set yAxisAnnotationBackground(v) { this.i.afe = stringToBrush(v); } /** * Gets or sets the corner radius to use for the y axis annotation backing. Leave unset for an automatic value. */ get yAxisAnnotationBackgroundCornerRadius() { return this.i.abh; } set yAxisAnnotationBackgroundCornerRadius(v) { this.i.abh = +v; } /** * Gets or sets the precision to use displaying values for interpolated crosshair positions. */ get yAxisAnnotationInterpolatedValuePrecision() { return this.i.abo; } set yAxisAnnotationInterpolatedValuePrecision(v) { this.i.abo = +v; } /** * Gets or sets the color to use for the y axis annotation outline. Leave unset for an automatic value. */ get yAxisAnnotationOutline() { return brushToString(this.i.aff); } set yAxisAnnotationOutline(v) { this.i.aff = stringToBrush(v); } /** * Gets or sets the stroke thickness for the y axis annotation backing. Leave unset for an automatic value. */ get yAxisAnnotationStrokeThickness() { return this.i.abm; } set yAxisAnnotationStrokeThickness(v) { this.i.abm = +v; } /** * Gets or sets whether to skip unknown values when searching for series values. */ get skipUnknownValues() { return this.i.aax; } set skipUnknownValues(v) { this.i.aax = ensureBool(v); } /** * Gets or sets location of the overlay text in relation to shape of data annotation. */ get overlayTextLocation() { return this.i.aah; } set overlayTextLocation(v) { this.i.aah = ensureEnum(OverlayTextLocation_$type, v); } /** * Gets or sets the horizontal margin of the overlay text in relation to shape of data annotation. */ get overlayTextHorizontalMargin() { return this.i.aa7; } set overlayTextHorizontalMargin(v) { this.i.aa7 = +v; } /** * Gets or sets the vertical margin of the overlay text in relation to shape of data annotation. */ get overlayTextVerticalMargin() { return this.i.aa9; } set overlayTextVerticalMargin(v) { this.i.aa9 = +v; } /** * Gets or sets the horizontal padding of the overlay text in relation to shape of data annotation. */ get overlayTextHorizontalPadding() { return this.i.aa8; } set overlayTextHorizontalPadding(v) { this.i.aa8 = +v; } /** * Gets or sets the vertical padding of the overlay text in relation to shape of data annotation. */ get overlayTextVerticalPadding() { return this.i.aba; } set overlayTextVerticalPadding(v) { this.i.aba = +v; } /** * Gets or sets the angle rotation (in degrees) of the overlay text in relation to shape of data annotation. */ get overlayTextAngle() { return this.i.aa1; } set overlayTextAngle(v) { this.i.aa1 = +v; } /** * Gets or sets the color the overlay text. */ get overlayTextColor() { return brushToString(this.i.ae9); } set overlayTextColor(v) { this.i.ae9 = stringToBrush(v); } /** * Gets or sets the background the overlay text. */ get overlayTextBackground() { return brushToString(this.i.ae7); } set overlayTextBackground(v) { this.i.ae7 = stringToBrush(v); } /** * Gets or sets the border stroke of the overlay text. */ get overlayTextBorderColor() { return brushToString(this.i.ae8); } set overlayTextBorderColor(v) { this.i.ae8 = stringToBrush(v); } /** * Gets or sets the border corner of the overlay text. */ get overlayTextBorderRadius() { return this.i.aa3; } set overlayTextBorderRadius(v) { this.i.aa3 = +v; } /** * Gets or sets the border thickness of the overlay text. */ get overlayTextBorderThickness() { return this.i.aa5; } set overlayTextBorderThickness(v) { this.i.aa5 = +v; } /** * Gets or sets whether the overlay text is visible in shape of data annotation */ get overlayTextVisible() { return this.i.aaw; } set overlayTextVisible(v) { this.i.aaw = ensureBool(v); } /** * Gets or sets the text that will be displayed as the overlay annotation. */ get overlayText() { return this.i.abt; } set overlayText(v) { this.i.abt = v; } /** * Gets or sets the shift of the overlay text color based on OverlayTextColorMode. Value must range between -1.0 to 1.0, where 0 means no color shift. */ get overlayTextColorShift() { return this.i.aa6; } set overlayTextColorShift(v) { this.i.aa6 = +v; } /** * Gets or sets the mode used for shifting the background of overlay text based on the target series. */ get overlayTextColorMode() { return this.i.aad; } set overlayTextColorMode(v) { this.i.aad = ensureEnum(AnnotationAppearanceMode_$type, v); } /** * Gets or sets whether the overlay text color matches brush of the layer */ get overlayTextColorMatchLayer() { return this.i.aav; } set overlayTextColorMatchLayer(v) { this.i.aav = ensureBool(v); } /** * Gets or sets the shift of the overlay background based on OverlayTextBackgroundMode. Value must range between -1.0 to 1.0, where 0 means no color shift. */ get overlayTextBackgroundShift() { return this.i.aa2; } set overlayTextBackgroundShift(v) { this.i.aa2 = +v; } /** * Gets or sets the mode used for shifting the background of overlay text based on the target series. */ get overlayTextBackgroundMode() { return this.i.aab; } set overlayTextBackgroundMode(v) { this.i.aab = ensureEnum(AnnotationAppearanceMode_$type, v); } /** * Gets or sets whether the overlay text background matches brush of the layer */ get overlayTextBackgroundMatchLayer() { return this.i.aat; } set overlayTextBackgroundMatchLayer(v) { this.i.aat = ensureBool(v); } /** * Gets or sets the shift of the overlay border based on OverlayTextBorderMode. Value must range between -1.0 to 1.0, where 0 means no color shift. */ get overlayTextBorderShift() { return this.i.aa4; } set overlayTextBorderShift(v) { this.i.aa4 = +v; } /** * Gets or sets the mode used for shifting the border of overlay text based on the target series. */ get overlayTextBorderMode() { return this.i.aac; } set overlayTextBorderMode(v) { this.i.aac = ensureEnum(AnnotationAppearanceMode_$type, v); } /** * Gets or sets whether the overlay text border matches brush of the layer */ get overlayTextBorderMatchLayer() { return this.i.aau; } set overlayTextBorderMatchLayer(v) { this.i.aau = ensureBool(v); } /** * Gets or Sets the style to use for the display text. */ get overlayTextStyle() { if (this.i.aaq == null) { return null; } return this.i.aaq.fontString; } set overlayTextStyle(v) { let fi = new FontInfo(); fi.fontString = v; this.i.aaq = fi; } /** * Gets the effective brush for the current value layer. Can be null for value * modes that target multiple series. */ get actualValueLayerBrush() { return brushToString(this.i.ae5); } set actualValueLayerBrush(v) { this.i.ae5 = stringToBrush(v); } get isSummarizationSupported() { return this.i.isSummarizationSupported; } findByName(name) { var baseResult = super.findByName(name); if (baseResult) { return baseResult; } if (this.targetSeries && this.targetSeries.name && this.targetSeries.name == name) { return this.targetSeries; } if (this.targetAxis && this.targetAxis.name && this.targetAxis.name == name) { return this.targetAxis; } return null; } _styling(container, component, parent) { super._styling(container, component, parent); this._inStyling = true; if (this.targetSeries && this.targetSeries._styling) { this.targetSeries._styling(container, component, this); } if (this.targetAxis && this.targetAxis._styling) { this.targetAxis._styling(container, component, this); } this._inStyling = false; } getSeriesValue(world, useInterpolation, skipUnknowns) { let iv = this.i.i6(toPoint(world), useInterpolation, skipUnknowns); return (iv); } /** * Event raised when updating style of overlay text */ get stylingOverlayText() { if (this._stylingOverlayText == null) { this._stylingOverlayText = new EventEmitter(); this.i.stylingOverlayText = delegateCombine(this.i.stylingOverlayText, (o, e) => { this._runInZone(() => { let outerArgs = new IgxOverlayTextUpdatingEventArgs(); outerArgs._provideImplementation(e); if (this.beforeStylingOverlayText) { this.beforeStylingOverlayText(this, outerArgs); } this._stylingOverlayText.emit({ sender: this, args: outerArgs }); }); }); } return this._stylingOverlayText; } } IgxValueLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxValueLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); IgxValueLayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxValueLayerComponent, selector: "igx-value-layer", inputs: { valueMode: "valueMode", horizontalLineStroke: "horizontalLineStroke", verticalLineStroke: "verticalLineStroke", targetSeriesName: "targetSeriesName", targetSeries: "targetSeries", targetAxisName: "targetAxisName", targetAxis: "targetAxis", useInterpolation: "useInterpolation", isAxisAnnotationEnabled: "isAxisAnnotationEnabled", xAxisAnnotationFormatLabel: "xAxisAnnotationFormatLabel", yAxisAnnotationFormatLabel: "yAxisAnnotationFormatLabel", xAxisAnnotationTextColor: "xAxisAnnotationTextColor", xAxisAnnotationBackground: "xAxisAnnotationBackground", xAxisAnnotationBackgroundCornerRadius: "xAxisAnnotationBackgroundCornerRadius", xAxisAnnotationInterpolatedValuePrecision: "xAxisAnnotationInterpolatedValuePrecision", xAxisAnnotationOutline: "xAxisAnnotationOutline", xAxisAnnotationPaddingLeft: "xAxisAnnotationPaddingLeft", xAxisAnnotationPaddingTop: "xAxisAnnotationPaddingTop", xAxisAnnotationPaddingRight: "xAxisAnnotationPaddingRight", xAxisAnnotationPaddingBottom: "xAxisAnnotationPaddingBottom", yAxisAnnotationPaddingLeft: "yAxisAnnotationPaddingLeft", yAxisAnnotationPaddingTop: "yAxisAnnotationPaddingTop", yAxisAnnotationPaddingRight: "yAxisAnnotationPaddingRight", yAxisAnnotationPaddingBottom: "yAxisAnnotationPaddingBottom", xAxisAnnotationStrokeThickness: "xAxisAnnotationStrokeThickness", yAxisAnnotationTextColor: "yAxisAnnotationTextColor", yAxisAnnotationBackground: "yAxisAnnotationBackground", yAxisAnnotationBackgroundCornerRadius: "yAxisAnnotationBackgroundCornerRadius", yAxisAnnotationInterpolatedValuePrecision: "yAxisAnnotationInterpolatedValuePrecision", yAxisAnnotationOutline: "yAxisAnnotationOutline", yAxisAnnotationStrokeThickness: "yAxisAnnotationStrokeThickness", skipUnknownValues: "skipUnknownValues", overlayTextLocation: "overlayTextLocation", overlayTextHorizontalMargin: "overlayTextHorizontalMargin", overlayTextVerticalMargin: "overlayTextVerticalMargin", overlayTextHorizontalPadding: "overlayTextHorizontalPadding", overlayTextVerticalPadding: "overlayTextVerticalPadding", overlayTextAngle: "overlayTextAngle", overlayTextColor: "overlayTextColor", overlayTextBackground: "overlayTextBackground", overlayTextBorderColor: "overlayTextBorderColor", overlayTextBorderRadius: "overlayTextBorderRadius", overlayTextBorderThickness: "overlayTextBorderThickness", overlayTextVisible: "overlayTextVisible", overlayText: "overlayText", overlayTextColorShift: "overlayTextColorShift", overlayTextColorMode: "overlayTextColorMode", overlayTextColorMatchLayer: "overlayTextColorMatchLayer", overlayTextBackgroundShift: "overlayTextBackgroundShift", overlayTextBackgroundMode: "overlayTextBackgroundMode", overlayTextBackgroundMatchLayer: "overlayTextBackgroundMatchLayer", overlayTextBorderShift: "overlayTextBorderShift", overlayTextBorderMode: "overlayTextBorderMode", overlayTextBorderMatchLayer: "overlayTextBorderMatchLayer", overlayTextStyle: "overlayTextStyle", actualValueLayerBrush: "actualValueLayerBrush" }, outputs: { stylingOverlayText: "stylingOverlayText" }, providers: [{ provide: IgxAnnotationLayerComponent, useExisting: forwardRef(() => IgxValueLayerComponent) }, { provide: IgxSeriesComponent, useExisting: forwardRef(() => IgxValueLayerComponent) }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); return IgxValueLayerComponent; })(); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxValueLayerComponent, decorators: [{ type: Component, args: [{ selector: 'igx-value-layer', template: ``, providers: [{ provide: IgxAnnotationLayerComponent, useExisting: forwardRef(() => IgxValueLayerComponent) }, { provide: IgxSeriesComponent, useExisting: forwardRef(() => IgxValueLayerComponent) }], changeDetection: ChangeDetectionStrategy.OnPush }] }], ctorParameters: function () { return []; }, propDecorators: { valueMode: [{ type: Input }], horizontalLineStroke: [{ type: Input }], verticalLineStroke: [{ type: Input }], targetSeriesName: [{ type: Input }], targetSeries: [{ type: Input }], targetAxisName: [{ type: Input }], targetAxis: [{ type: Input }], useInterpolation: [{ type: Input }], isAxisAnnotationEnabled: [{ type: Input }], xAxisAnnotationFormatLabel: [{ type: Input }], yAxisAnnotationFormatLabel: [{ type: Input }], xAxisAnnotationTextColor: [{ type: Input }], xAxisAnnotationBackground: [{ type: Input }], xAxisAnnotationBackgroundCornerRadius: [{ type: Input }], xAxisAnnotationInterpolatedValuePrecision: [{ type: Input }], xAxisAnnotationOutline: [{ type: Input }], xAxisAnnotationPaddingLeft: [{ type: Input }], xAxisAnnotationPaddingTop: [{ type: Input }], xAxisAnnotationPaddingRight: [{ type: Input }], xAxisAnnotationPaddingBottom: [{ type: Input }], yAxisAnnotationPaddingLeft: [{ type: Input }], yAxisAnnotationPaddingTop: [{ type: Input }], yAxisAnnotationPaddingRight: [{ type: Input }], yAxisAnnotationPaddingBottom: [{ type: Input }], xAxisAnnotationStrokeThickness: [{ type: Input }], yAxisAnnotationTextColor: [{ type: Input }], yAxisAnnotationBackground: [{ type: Input }], yAxisAnnotationBackgroundCornerRadius: [{ type: Input }], yAxisAnnotationInterpolatedValuePrecision: [{ type: Input }], yAxisAnnotationOutline: [{ type: Input }], yAxisAnnotationStrokeThickness: [{ type: Input }], skipUnknownValues: [{ type: Input }], overlayTextLocation: [{ type: Input }], overlayTextHorizontalMargin: [{ type: Input }], overlayTextVerticalMargin: [{ type: Input }], overlayTextHorizontalPadding: [{ type: Input }], overlayTextVerticalPadding: [{ type: Input }], overlayTextAngle: [{ type: Input }], overlayTextColor: [{ type: Input }], overlayTextBackground: [{ type: Input }], overlayTextBorderColor: [{ type: Input }], overlayTextBorderRadius: [{ type: Input }], overlayTextBorderThickness: [{ type: Input }], overlayTextVisible: [{ type: Input }], overlayText: [{ type: Input }], overlayTextColorShift: [{ type: Input }], overlayTextColorMode: [{ type: Input }], overlayTextColorMatchLayer: [{ type: Input }], overlayTextBackgroundShift: [{ type: Input }], overlayTextBackgroundMode: [{ type: Input }], overlayTextBackgroundMatchLayer: [{ type: Input }], overlayTextBorderShift: [{ type: Input }], overlayTextBorderMode: [{ type: Input }], overlayTextBorderMatchLayer: [{ type: Input }], overlayTextStyle: [{ type: Input }], actualValueLayerBrush: [{ type: Input }], stylingOverlayText: [{ type: Output }] } });