igniteui-angular-gauges
Version:
Ignite UI Angular gauge components.
1,292 lines • 51.1 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, ViewChild, ContentChildren, Input, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
import { AngularRenderer, AngularWrapper } from "igniteui-angular-core";
import { TypeRegistrar } from "igniteui-angular-core";
import { XamBulletGraph } from './XamBulletGraph';
import { CollectionAdapter, brushToString, stringToBrush, toPoint, fromBrushCollection, toBrushCollection, ensureBool, ensureEnum, toSpinal, initializePropertiesFromCss, NamePatcher, arrayFindByName } from "igniteui-angular-core";
import { IgxDataContext } from "igniteui-angular-core";
import { delegateCombine } from "igniteui-angular-core";
import { NotifyCollectionChangedAction } from "igniteui-angular-core";
import { BulletGraphStylingDefaults } from './BulletGraphStylingDefaults';
import { LinearScaleOrientation_$type } from './LinearScaleOrientation';
import { IgxFormatLinearGraphLabelEventArgs } from './igx-format-linear-graph-label-event-args';
import { IgxAlignLinearGraphLabelEventArgs } from './igx-align-linear-graph-label-event-args';
import { IgxLinearGraphRangeComponent } from './igx-linear-graph-range-component';
import { IgxLinearGraphRangeCollection } from './igx-linear-graph-range-collection';
import { HighlightedValueDisplayMode_$type } from "igniteui-angular-core";
import * as i0 from "@angular/core";
/**
* Represents a bullet graph.
*/
export let IgxBulletGraphComponent = /*@__PURE__*/ (() => {
class IgxBulletGraphComponent {
constructor(_renderer, _elRef, _ngZone, _componentFactoryResolver, _injector) {
//super();
this._renderer = _renderer;
this._elRef = _elRef;
this._ngZone = _ngZone;
this._componentFactoryResolver = _componentFactoryResolver;
this._injector = _injector;
/**
* The ranges actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing Angular to reproject the child content.
* Or adding and removing ranges from the manual ranges collection on the ranges property.
*/
this.actualRanges = [];
this._ranges = null;
this._rangesAdapter = null;
this._tooltipTemplate = null;
this._tooltipContent = null;
this._defaultTooltips = null;
this._zoneRunner = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._formatLabel = null;
this._alignLabel = null;
this._actualMinimumValueChange = null;
this._actualMaximumValueChange = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._zoneRunner = (act) => this._ngZone.run(act);
this._implementation = this.createImplementation();
this._container = _renderer.createElement("div");
_renderer.appendChild(_elRef.element.nativeElement, this._container);
_renderer.setStyle(this._container, "display", "block");
_renderer.setStyle(this._container, "width", "100%");
_renderer.setStyle(this._container, "height", "100%");
var root;
root = this._container;
if (this._container.nativeElement != null) {
root = this._container.nativeElement;
}
this._root = root;
var ren = new AngularRenderer(root, this._renderer, window.document, this._ngZone, true, BulletGraphStylingDefaults);
this._wrapper = ren;
var gauge = this.i;
this._rangesAdapter = new CollectionAdapter([], this.i.ranges, this.actualRanges, (c) => c.i, (i) => {
i._provideRenderer(this._wrapper);
if (this._root && this._root.parentElement) {
i._styling(this._root, this, this);
}
}, (i) => { i._provideRenderer(null); });
this._gauge = gauge;
gauge.provideContainer(ren);
ren.addSizeWatcher(() => {
this._gauge.containerResized();
});
}
set height(value) {
this._height = value;
this._renderer.setStyle(this._elRef.element.nativeElement, "height", value);
this._gauge.containerResized();
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
this._renderer.setStyle(this._elRef.element.nativeElement, "width", value);
this._gauge.containerResized();
}
get width() {
return this._width;
}
/**
* A collection or manually added axes for the chart.
*/
get ranges() {
if (this._ranges === null) {
let coll = new IgxLinearGraphRangeCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._rangesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._rangesAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._rangesAdapter.removeManualItemAt(e.oldStartingIndex);
this._rangesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._rangesAdapter.clearManualItems();
break;
}
});
this._ranges = coll;
}
return this._ranges;
}
ngOnDestroy() {
this._wrapper.rootWrapper.unlistenAll();
this._gauge.destroy();
this._wrapper.destroy();
}
createImplementation() {
return new XamBulletGraph();
}
ngAfterContentInit() {
if (TypeRegistrar.isRegistered("IgxSimpleDefaultTooltipComponent")) {
let c = TypeRegistrar.get("IgxSimpleDefaultTooltipComponent");
let cf = this._componentFactoryResolver.resolveComponentFactory(c);
let cr = this._dynamicContent.createComponent(cf);
this._defaultTooltips = cr;
cr.instance.onContentReady.subscribe(() => {
this._onDefaultTooltipsReady(cr);
});
this._ensureTooltipCreated();
}
this._rangesAdapter.updateQuery(this.contentRanges);
}
ngAfterViewInit() {
this.updateStyle();
this.i.containerResized();
}
updateStyle() {
this._styling(this._root, this);
if (this.actualRanges && this.actualRanges.length > 0) {
var currRange = this.actualRanges;
for (var i = 0; i < currRange.length; i++) {
currRange[i]._styling(this._root, this, this);
}
}
}
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 {
this._ensureTooltipCreated();
}
}
get tooltipTemplate() {
return this._tooltipTemplate;
}
_ensureTooltipCreated() {
if (this.i.toolTip == null) {
let tooltip = this.createTooltip();
if (tooltip == null) {
return;
}
this._tooltipContent = tooltip;
tooltip.instance.template = this._tooltipTemplate;
this.i.toolTip = this.createWrapper(tooltip.location.nativeElement);
}
}
createWrapper(ele) {
let wrapper = new AngularWrapper(ele, this._renderer, this._ngZone);
wrapper.updateToolTip = ele.updateToolTip;
wrapper.hideToolTip = ele.hideToolTip;
return wrapper;
}
_ensureDefaultTooltip() {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips.instance["ensureDefaultTooltip"](this);
}
_onDefaultTooltipsReady(cr) {
this._ensureDefaultTooltip();
}
createTooltip() {
if (!TypeRegistrar.isRegistered("IgxTooltipContainerComponent")) {
return null;
}
let t = TypeRegistrar.get("IgxTooltipContainerComponent");
let cf = this._componentFactoryResolver.resolveComponentFactory(t);
let cr = this._dynamicContent.createComponent(cf);
let ele = cr.location.nativeElement;
let self = this;
ele.updateToolTip = function (c) {
if (c.externalObject) {
c = c.externalObject;
}
else {
let ext = new IgxDataContext();
ext._implementation = c;
c = ext;
}
if (ele.parentElement != self._container) {
if (ele.parentElement != null) {
ele.parentElement.removeChild(ele);
}
self._container.appendChild(ele);
}
cr.instance.context = c;
ele.style.display = "block";
return true;
};
ele.hideToolTip = function () {
ele.style.display = "none";
};
ele.style.display = "none";
return cr;
}
_runInZone(act) {
if (this._zoneRunner != null) {
this._zoneRunner(act);
}
else {
act();
}
}
/**
* @hidden
*/
get i() {
return this._implementation;
} /**
* @hidden
*/
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 a value indicating whether the bullet graph is currently animating.
*/
get animating() {
return this.i.a7;
}
/**
* Gets the transition progress of the animation when the control is animating.
*/
get transitionProgress() {
return this.i.c0;
}
set transitionProgress(v) {
this.i.c0 = +v;
}
/**
* Gets or sets the orientation of the scale.
*/
get orientation() {
return this.i.as;
}
set orientation(v) {
this.i.as = ensureEnum(LinearScaleOrientation_$type, v);
}
/**
* Gets or sets the background brush for the scale.
*/
get scaleBackgroundBrush() {
return brushToString(this.i.h5);
}
set scaleBackgroundBrush(v) {
this.i.h5 = stringToBrush(v);
}
/**
* Gets or sets the background outline for the scale.
*/
get scaleBackgroundOutline() {
return brushToString(this.i.h6);
}
set scaleBackgroundOutline(v) {
this.i.h6 = stringToBrush(v);
}
/**
* Gets or sets the background outline thickness for the scale.
*/
get scaleBackgroundThickness() {
return this.i.ci;
}
set scaleBackgroundThickness(v) {
this.i.ci = +v;
}
/**
* Gets or sets a collection of brushes to be used as the palette for bullet graph ranges.
*/
get rangeBrushes() {
return fromBrushCollection(this.i.ah);
}
set rangeBrushes(v) {
this.i.ah = toBrushCollection(v);
}
/**
* Gets or sets a collection of brushes to be used as the palette for bullet graph outlines.
*/
get rangeOutlines() {
return fromBrushCollection(this.i.ai);
}
set rangeOutlines(v) {
this.i.ai = toBrushCollection(v);
}
/**
* Gets or sets the minimum value of the scale.
*/
get minimumValue() {
return this.i.b8;
}
set minimumValue(v) {
this.i.b8 = +v;
}
/**
* Gets the resolved minimum value of the scale.
*/
get actualMinimumValue() {
return this.i.bt;
}
set actualMinimumValue(v) {
this.i.bt = +v;
}
/**
* Gets or sets the maximum value of the scale.
*/
get maximumValue() {
return this.i.b7;
}
set maximumValue(v) {
this.i.b7 = +v;
}
/**
* Gets the resolved maximum value of the scale.
*/
get actualMaximumValue() {
return this.i.bs;
}
set actualMaximumValue(v) {
this.i.bs = +v;
}
/**
* Gets or sets the value indicated by the target value bar.
*/
get targetValue() {
return this.i.co;
}
set targetValue(v) {
this.i.co = +v;
}
/**
* Gets or sets the name used for the target value. The name is displayed in the default target value tooltip.
*/
get targetValueName() {
return this.i.en;
}
set targetValueName(v) {
this.i.en = v;
}
/**
* Gets or sets the value at which the bar ends.
*/
get value() {
return this.i.c1;
}
set value(v) {
this.i.c1 = +v;
}
/**
* Gets or sets the name used for actual value.
*/
get valueName() {
return this.i.e4;
}
set valueName(v) {
this.i.e4 = v;
}
/**
* Gets or sets the highlight value at which to point the secondary needle of the gauge.
*/
get highlightValue() {
return this.i.b0;
}
set highlightValue(v) {
this.i.b0 = +v;
}
/**
* Gets the actual opacity of the primary needle while highlighting
*/
get actualHighlightValueOpacity() {
return this.i.br;
}
set actualHighlightValueOpacity(v) {
this.i.br = +v;
}
/**
* Gets or sets the opacity of the primary needle while highlighting
*/
get highlightValueOpacity() {
return this.i.b1;
}
set highlightValueOpacity(v) {
this.i.b1 = +v;
}
/**
* Gets whether and how to display the highlighted value.
*/
get actualHighlightValueDisplayMode() {
return this.i.az;
}
set actualHighlightValueDisplayMode(v) {
this.i.az = ensureEnum(HighlightedValueDisplayMode_$type, v);
}
/**
* Gets or sets whether and how to display the highlighted value.
*/
get highlightValueDisplayMode() {
return this.i.a0;
}
set highlightValueDisplayMode(v) {
this.i.a0 = ensureEnum(HighlightedValueDisplayMode_$type, v);
}
/**
* Gets or sets the position at which to start rendering the ranges, measured from the front/bottom of the control as a value from 0 to 1.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get rangeInnerExtent() {
return this.i.cg;
}
set rangeInnerExtent(v) {
this.i.cg = +v;
}
/**
* Gets or sets the position at which to stop rendering the range as a value from 0 to 1 measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get rangeOuterExtent() {
return this.i.ch;
}
set rangeOuterExtent(v) {
this.i.ch = +v;
}
/**
* Gets or sets the position at which to start rendering the actual value geometries, measured from the front/bottom of the bullet graph as a value from 0 to 1.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get valueInnerExtent() {
return this.i.c2;
}
set valueInnerExtent(v) {
this.i.c2 = +v;
}
/**
* Gets or sets the position at which to stop rendering the actual value geometries as a value from 0 to 1 measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get valueOuterExtent() {
return this.i.c3;
}
set valueOuterExtent(v) {
this.i.c3 = +v;
}
/**
* Gets or sets the interval to use for the scale.
*/
get interval() {
return this.i.b2;
}
set interval(v) {
this.i.b2 = +v;
}
/**
* A value to start adding tickmarks, added to the scale's MinimumValue.
*/
get ticksPostInitial() {
return this.i.cv;
}
set ticksPostInitial(v) {
this.i.cv = +v;
}
/**
* A value to stop adding tickmarks, subtracted from the scale's MaximumValue.
*/
get ticksPreTerminal() {
return this.i.cw;
}
set ticksPreTerminal(v) {
this.i.cw = +v;
}
/**
* Gets or sets the interval to use for rendering labels. This defaults to be the same interval as the tickmarks on the scale.
*/
get labelInterval() {
return this.i.b4;
}
set labelInterval(v) {
this.i.b4 = +v;
}
/**
* Gets or sets the position at which to put the labels as a value from 0 to 1, measured from the bottom of the scale.
* Values further from zero than 1 can be used to hide the labels of the bullet graph.
*/
get labelExtent() {
return this.i.b3;
}
set labelExtent(v) {
this.i.b3 = +v;
}
/**
* A value to start adding labels, added to the scale's MinimumValue.
*/
get labelsPostInitial() {
return this.i.b5;
}
set labelsPostInitial(v) {
this.i.b5 = +v;
}
/**
* A value to stop adding labels, subtracted from the scale's MaximumValue.
*/
get labelsPreTerminal() {
return this.i.b6;
}
set labelsPreTerminal(v) {
this.i.b6 = +v;
}
/**
* Gets or sets the number of minor tickmarks to place between major tickmarks.
*/
get minorTickCount() {
return this.i.b9;
}
set minorTickCount(v) {
this.i.b9 = +v;
}
/**
* Gets or sets the position at which to start rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get tickStartExtent() {
return this.i.cx;
}
set tickStartExtent(v) {
this.i.cx = +v;
}
/**
* Gets or sets the position at which to stop rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get tickEndExtent() {
return this.i.ct;
}
set tickEndExtent(v) {
this.i.ct = +v;
}
/**
* Gets or sets the stroke thickness to use when rendering ticks.
*/
get tickStrokeThickness() {
return this.i.cz;
}
set tickStrokeThickness(v) {
this.i.cz = +v;
}
/**
* Gets or sets the brush to use for the major tickmarks.
*/
get tickBrush() {
return brushToString(this.i.h9);
}
set tickBrush(v) {
this.i.h9 = stringToBrush(v);
}
/**
* Gets or sets the brush to use for the label font.
*/
get fontBrush() {
return brushToString(this.i.h2);
}
set fontBrush(v) {
this.i.h2 = stringToBrush(v);
}
/**
* Gets or sets the brush to use for the actual value element.
*/
get valueBrush() {
return brushToString(this.i.ia);
}
set valueBrush(v) {
this.i.ia = stringToBrush(v);
}
/**
* Gets or sets the brush to use for the outline of actual value element.
*/
get valueOutline() {
return brushToString(this.i.ib);
}
set valueOutline(v) {
this.i.ib = stringToBrush(v);
}
/**
* Gets or sets the stroke thickness to use when rendering single actual value element.
*/
get valueStrokeThickness() {
return this.i.c4;
}
set valueStrokeThickness(v) {
this.i.c4 = +v;
}
/**
* Gets or sets the position at which to start rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get minorTickStartExtent() {
return this.i.cc;
}
set minorTickStartExtent(v) {
this.i.cc = +v;
}
/**
* Gets or sets the position at which to stop rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get minorTickEndExtent() {
return this.i.ca;
}
set minorTickEndExtent(v) {
this.i.ca = +v;
}
/**
* Gets or sets the stroke thickness to use when rendering minor ticks.
*/
get minorTickStrokeThickness() {
return this.i.ce;
}
set minorTickStrokeThickness(v) {
this.i.ce = +v;
}
/**
* Gets or sets the brush to use for the minor tickmarks.
*/
get minorTickBrush() {
return brushToString(this.i.h4);
}
set minorTickBrush(v) {
this.i.h4 = stringToBrush(v);
}
/**
* Gets or sets a value indicating whether the scale is inverted.
* When the scale is inverted the direction in which the scale values increase is right to left.
*/
get isScaleInverted() {
return this.i.a9;
}
set isScaleInverted(v) {
this.i.a9 = ensureBool(v);
}
/**
* Gets or sets the brush to use to fill the backing of the bullet graph.
*/
get backingBrush() {
return brushToString(this.i.h0);
}
set backingBrush(v) {
this.i.h0 = stringToBrush(v);
}
/**
* Gets or sets the brush to use for the outline of the backing.
*/
get backingOutline() {
return brushToString(this.i.h1);
}
set backingOutline(v) {
this.i.h1 = stringToBrush(v);
}
/**
* Gets or sets the stroke thickness of the backing outline.
*/
get backingStrokeThickness() {
return this.i.bx;
}
set backingStrokeThickness(v) {
this.i.bx = +v;
}
/**
* Gets or sets the inner extent of the bullet graph backing.
*/
get backingInnerExtent() {
return this.i.bv;
}
set backingInnerExtent(v) {
this.i.bv = +v;
}
/**
* Gets or sets the outer extent of the bullet graph backing.
*/
get backingOuterExtent() {
return this.i.bw;
}
set backingOuterExtent(v) {
this.i.bw = +v;
}
/**
* Gets or sets the position at which to start rendering the scale, measured from the front/bottom of the bullet graph as a value from 0 to 1.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get scaleStartExtent() {
return this.i.cn;
}
set scaleStartExtent(v) {
this.i.cn = +v;
}
/**
* Gets or sets the position at which to stop rendering the scale as a value from 0 to 1, measured from the front/bottom of the bullet graph.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get scaleEndExtent() {
return this.i.ck;
}
set scaleEndExtent(v) {
this.i.ck = +v;
}
/**
* Gets or sets the brush to use when rendering the fill of the comparative marker.
*/
get targetValueBrush() {
return brushToString(this.i.h7);
}
set targetValueBrush(v) {
this.i.h7 = stringToBrush(v);
}
/**
* Get or sets the breadth of the target value element.
*/
get targetValueBreadth() {
return this.i.cp;
}
set targetValueBreadth(v) {
this.i.cp = +v;
}
/**
* Gets or sets the position at which to start rendering the target value, measured from the front/bottom of the control as a value from 0 to 1.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get targetValueInnerExtent() {
return this.i.cq;
}
set targetValueInnerExtent(v) {
this.i.cq = +v;
}
/**
* Gets or sets the position at which to start rendering the target value, measured from the front/bottom of the control as a value from 0 to 1.
* Values further from zero than 1 can be used to make this extend further than the normal size of the bullet graph.
*/
get targetValueOuterExtent() {
return this.i.cr;
}
set targetValueOuterExtent(v) {
this.i.cr = +v;
}
/**
* Gets or sets the brush to use when rendering the outline of the target value.
*/
get targetValueOutline() {
return brushToString(this.i.h8);
}
set targetValueOutline(v) {
this.i.h8 = stringToBrush(v);
}
/**
* Gets or sets the stroke thickness of the outline of the target value bar.
*/
get targetValueStrokeThickness() {
return this.i.cs;
}
set targetValueStrokeThickness(v) {
this.i.cs = +v;
}
/**
* Gets or sets whether the scale viewport will be merged with backing viewport.
*/
get mergeViewports() {
return this.i.bc;
}
set mergeViewports(v) {
this.i.bc = ensureBool(v);
}
/**
* Gets or sets whether the labels are visible in the gauge.
*/
get labelsVisible() {
return this.i.bb;
}
set labelsVisible(v) {
this.i.bb = ensureBool(v);
}
/**
* Gets or sets the label composite format used when creating label values.
*/
get labelFormat() {
return this.i.ds;
}
set labelFormat(v) {
this.i.ds = v;
}
/**
* Gets or sets the format specifiers to use with the LabelFormat string.
*/
get labelFormatSpecifiers() {
return this.i.ag;
}
set labelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ag = v;
}
/**
* Gets or sets the number of milliseconds over which changes to the bullet graph should be animated.
*/
get transitionDuration() {
return this.i.c8;
}
set transitionDuration(v) {
this.i.c8 = +v;
}
/**
* Gets or sets the time in milliseconds that tooltip appearance is delayed with.
*/
get showToolTipTimeout() {
return this.i.c7;
}
set showToolTipTimeout(v) {
this.i.c7 = +v;
}
/**
* Gets or sets a value indicating whether tooltips are enabled.
*/
get showToolTip() {
return this.i.be;
}
set showToolTip(v) {
this.i.be = ensureBool(v);
}
/**
* Gets or sets the font.
*/
get font() {
return this.i.di;
}
set font(v) {
this.i.di = v;
}
/**
* Gets or sets the scaling value used to affect the pixel density of the control.
* A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
* to appear blurry.
*/
get pixelScalingRatio() {
return this.i.cf;
}
set pixelScalingRatio(v) {
this.i.cf = +v;
}
/**
* Gets the actual pixel scaling ratio used to affect the pixel density of the control.
* A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
* to appear blurry.
*/
get actualPixelScalingRatio() {
return this.i.bu;
}
set actualPixelScalingRatio(v) {
this.i.bu = +v;
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.ranges != null && this.ranges.findByName && this.ranges.findByName(name)) {
return this.ranges.findByName(name);
}
if (this.labelFormatSpecifiers != null && arrayFindByName(this.labelFormatSpecifiers, name)) {
return arrayFindByName(this.labelFormatSpecifiers, name);
}
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;
this._stylingContainer = container;
this._stylingParent = component;
let genericPrefix = "";
let typeName = this.i.$type.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
genericPrefix = toSpinal("BulletGraphComponent");
let additionalPrefixes = [];
let prefix = toSpinal(typeName);
additionalPrefixes.push(prefix + "-");
let b = this.i.$type.baseType;
while (b && b.name != "Object" &&
b.name != "Base" &&
b.name != "Control" &&
b.Name != "DependencyObject" &&
b.Name != "FrameworkElement") {
typeName = b.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
let basePrefix = toSpinal(typeName);
additionalPrefixes.push(basePrefix + "-");
b = b.baseType;
}
if (parent) {
let parentTypeName = parent.i.$type.name;
if (parentTypeName.indexOf("Xam") === 0) {
parentTypeName = parentTypeName.substring(3);
}
let parentPrefix = toSpinal(parentTypeName);
additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
}
initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
if (this._otherStyling) {
this._otherStyling(container, component, parent);
}
this._inStyling = false;
}
/**
* Gets the value for the main scale of the bullet graph for a given point within the bounds of the bullet graph.
* @param point * The point for which to retrieve the associated value.
*/
getValueForPoint(point) {
let iv = this.i.bz(toPoint(point));
return (iv);
}
/**
* Returns visuals as a serialized string.
*/
exportSerializedVisualData() {
let iv = this.i.dh();
return (iv);
}
/**
* Provide a container for the bullet graph.
* @param container * The container.
*/
provideContainer(container) {
this.i.provideContainer(container);
}
/**
* Notify that the container has resized.
*/
containerResized() {
this.i.containerResized();
}
/**
* Notify that the bullet graph styling has updated.
*/
styleUpdated() {
this.i.f7();
}
/**
* Use to force the bullet graph to finish any deferred work before printing or evaluating its visual.
* This should only be called if the visual of the bullet graph needs to be synchronously saved or evaluated.
* Calling this method too often will hinder the performance of the bullet graph.
*/
flush() {
this.i.fe();
}
/**
* Event which is raised when a label of the bullet graph is formatted.
* Function takes first argument evt and second argument ui.
* Use ui.owner to obtain reference to the bullet graph widget.
* Use ui.actualMinimumValue to obtain the minimum value of the bullet graph scale.
* Use ui.actualMaximumValue to obtain the maximum value of the bullet graph scale.
* Use ui.value to obtain the value on the the bullet graph scale associated with the label.
* Use ui.label to obtain the string value of the label.
*/
get formatLabel() {
if (this._formatLabel == null) {
this._formatLabel = new EventEmitter();
this.i.formatLabel = delegateCombine(this.i.formatLabel, (o, e) => {
this._runInZone(() => {
let outerArgs = new IgxFormatLinearGraphLabelEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeFormatLabel) {
this.beforeFormatLabel(this, outerArgs);
}
this._formatLabel.emit({
sender: this,
args: outerArgs
});
});
});
}
return this._formatLabel;
}
/**
* Event which is raised when a label of the bullet graph is aligned along the scale.
* Function takes first argument evt and second argument ui.
* Use ui.owner to obtain reference to gauge widget.
* Use ui.actualMinimumValue to obtain the minimum value of the bullet graph scale.
* Use ui.actualMaximumValue to obtain the maximum value of the bullet graph scale.
* Use ui.value to obtain the value on the the bullet graph scale associated with the label.
* Use ui.label to obtain the string value of the label.
* Use ui.width to obtain the width of the label.
* Use ui.height to obtain the height of the label.
* Use ui.offsetX to obtain the X offset of the label on the bullet graph scale.
* Use ui.offsetY to obtain the Y offset of the label on the bullet graph scale.
*/
get alignLabel() {
if (this._alignLabel == null) {
this._alignLabel = new EventEmitter();
this.i.alignLabel = delegateCombine(this.i.alignLabel, (o, e) => {
this._runInZone(() => {
let outerArgs = new IgxAlignLinearGraphLabelEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeAlignLabel) {
this.beforeAlignLabel(this, outerArgs);
}
this._alignLabel.emit({
sender: this,
args: outerArgs
});
});
});
}
return this._alignLabel;
}
get actualMinimumValueChange() {
if (this._actualMinimumValueChange == null) {
this._actualMinimumValueChange = new EventEmitter();
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, (o, e) => {
let iv = e;
let ext = this.actualMinimumValue;
if (this.beforeActualMinimumValueChange) {
this.beforeActualMinimumValueChange(this, ext);
}
this._actualMinimumValueChange.emit(ext);
});
}
return this._actualMinimumValueChange;
}
get actualMaximumValueChange() {
if (this._actualMaximumValueChange == null) {
this._actualMaximumValueChange = new EventEmitter();
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, (o, e) => {
let iv = e;
let ext = this.actualMaximumValue;
if (this.beforeActualMaximumValueChange) {
this.beforeActualMaximumValueChange(this, ext);
}
this._actualMaximumValueChange.emit(ext);
});
}
return this._actualMaximumValueChange;
}
}
IgxBulletGraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxBulletGraphComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
IgxBulletGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxBulletGraphComponent, selector: "igx-bullet-graph", inputs: { height: "height", width: "width", tooltipTemplate: "tooltipTemplate", transitionProgress: "transitionProgress", orientation: "orientation", scaleBackgroundBrush: "scaleBackgroundBrush", scaleBackgroundOutline: "scaleBackgroundOutline", scaleBackgroundThickness: "scaleBackgroundThickness", rangeBrushes: "rangeBrushes", rangeOutlines: "rangeOutlines", minimumValue: "minimumValue", actualMinimumValue: "actualMinimumValue", maximumValue: "maximumValue", actualMaximumValue: "actualMaximumValue", targetValue: "targetValue", targetValueName: "targetValueName", value: "value", valueName: "valueName", highlightValue: "highlightValue", actualHighlightValueOpacity: "actualHighlightValueOpacity", highlightValueOpacity: "highlightValueOpacity", actualHighlightValueDisplayMode: "actualHighlightValueDisplayMode", highlightValueDisplayMode: "highlightValueDisplayMode", rangeInnerExtent: "rangeInnerExtent", rangeOuterExtent: "rangeOuterExtent", valueInnerExtent: "valueInnerExtent", valueOuterExtent: "valueOuterExtent", interval: "interval", ticksPostInitial: "ticksPostInitial", ticksPreTerminal: "ticksPreTerminal", labelInterval: "labelInterval", labelExtent: "labelExtent", labelsPostInitial: "labelsPostInitial", labelsPreTerminal: "labelsPreTerminal", minorTickCount: "minorTickCount", tickStartExtent: "tickStartExtent", tickEndExtent: "tickEndExtent", tickStrokeThickness: "tickStrokeThickness", tickBrush: "tickBrush", fontBrush: "fontBrush", valueBrush: "valueBrush", valueOutline: "valueOutline", valueStrokeThickness: "valueStrokeThickness", minorTickStartExtent: "minorTickStartExtent", minorTickEndExtent: "minorTickEndExtent", minorTickStrokeThickness: "minorTickStrokeThickness", minorTickBrush: "minorTickBrush", isScaleInverted: "isScaleInverted", backingBrush: "backingBrush", backingOutline: "backingOutline", backingStrokeThickness: "backingStrokeThickness", backingInnerExtent: "backingInnerExtent", backingOuterExtent: "backingOuterExtent", scaleStartExtent: "scaleStartExtent", scaleEndExtent: "scaleEndExtent", targetValueBrush: "targetValueBrush", targetValueBreadth: "targetValueBreadth", targetValueInnerExtent: "targetValueInnerExtent", targetValueOuterExtent: "targetValueOuterExtent", targetValueOutline: "targetValueOutline", targetValueStrokeThickness: "targetValueStrokeThickness", mergeViewports: "mergeViewports", labelsVisible: "labelsVisible", labelFormat: "labelFormat", labelFormatSpecifiers: "labelFormatSpecifiers", transitionDuration: "transitionDuration", showToolTipTimeout: "showToolTipTimeout", showToolTip: "showToolTip", font: "font", pixelScalingRatio: "pixelScalingRatio", actualPixelScalingRatio: "actualPixelScalingRatio" }, outputs: { formatLabel: "formatLabel", alignLabel: "alignLabel", actualMinimumValueChange: "actualMinimumValueChange", actualMaximumValueChange: "actualMaximumValueChange" }, host: { classAttribute: "igx-bullet-graph ig-bullet-graph" }, providers: [], queries: [{ propertyName: "contentRanges", predicate: IgxLinearGraphRangeComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #dynamicContent></ng-container>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
return IgxBulletGraphComponent;
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxBulletGraphComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-bullet-graph',
template: `<ng-container #dynamicContent></ng-container>`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [],
host: { 'class': 'igx-bullet-graph ig-bullet-graph' },
styles: [`
:host {
display: block;
}
`]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { _dynamicContent: [{
type: ViewChild,
args: ["dynamicContent", { read: ViewContainerRef, static: true }]
}], height: [{
type: Input
}], width: [{
type: Input
}], contentRanges: [{
type: ContentChildren,
args: [IgxLinearGraphRangeComponent]
}], tooltipTemplate: [{
type: Input
}], transitionProgress: [{
type: Input
}], orientation: [{
type: Input
}], scaleBackgroundBrush: [{
type: Input
}], scaleBackgroundOutline: [{
type: Input
}], scaleBackgroundThickness: [{
type: Input
}], rangeBrushes: [{
type: Input
}], rangeOutlines: [{
type: Input
}], minimumValue: [{
type: Input
}], actualMinimumValue: [{
type: Input
}], maximumValue: [{
type: Input
}], actualMaximumValue: [{
type: Input
}], targetValue: [{
type: Input
}], targetValueName: [{
type: Input
}], value: [{
type: Input
}], valueName: [{
type: Input
}], highlightValue: [{
type: Input
}], actualHighlightValueOpacity: [{
type: Input
}], highlightValueOpacity: [{
type: Input
}], actualHighlightValueDisplayMode: [{
type: Input
}], highlightValueDisplayMode: [{
type: Input
}], rangeInnerExtent: [{
type: Input
}], rangeOuterExtent: [{
type: Input
}], valueInnerExtent: [{
type: Input
}], valueOuterExtent: [{
type: Input
}], interval: [{
type: Input
}], ticksPostInitial: [{
type: Input
}], ticksPreTerminal: [{
type: Input
}], labelInterval: [{
type: Input
}], labelExtent: [{
type: Input
}], labelsPostInitial: [{
type: Input
}], labelsPreTerminal: [{
type: Input
}], minorTickCount: [{
type: Input
}], tickStartExtent: [{
type: Input
}], tickEndExtent: [{
type: Input
}], tickStrokeThickness: [{
type: Input
}], tickBrush: [{
type: Input
}], fontBrush: [{
type: Input
}], valueBrush: [{
type: Input
}], valueOutline: [{
type: Input
}], valueStrokeThickness: [{
type: Input
}], minorTickStartExtent: [{
type: Input
}], minorTickEndExtent: [{
type: Input
}], minorTickStrokeThickness: [{
type: Input
}], minorTickBrush: [{
type: Input
}], isScaleInverted: [{
type: Input
}], backingBrush: [{
type: Input
}], backingOutline: [{
type: Input
}], backingStrokeThickness: [{
type: Input
}], backingInnerExtent: [{
type: Input
}], backingOuterExtent: [{
type: Input
}], scaleStartExtent: [{
type: Input
}], scaleEndExtent: [{
type: Input
}], targetValueBrush: [{
type: Input
}], targetValueBreadth: [{
type: Input
}], targetValueInnerExtent: [{
type: Input
}], targetValueOuterExtent: [{
type: Input
}], targetValueOutline: [{
type: Input
}], targetValueStrokeThickness: [{
type: Input
}], mergeViewports: [{
type: Input
}], labelsVisible: [{
type: Input
}], labelFormat: [{
type: Input
}], labelFormatSpecifiers: [{
type: Input
}], transitionDuration: [{
type: Input
}], showToolTipTimeout: [{
type: Input
}], showToolTip: [{
type: Input
}], font: [{
type: Input
}], pixelScalingRatio: [{
type: Input
}], actualPixelScalingRatio: [{
type: Input
}], formatLabel: [{
type: Output
}], alignLabel: [{
type: Output
}], actualMinimumValueChange: [{
type: Output
}], actualMaximumValueChange: [{
type: Output
}] } });