igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
667 lines (666 loc) • 27.7 kB
JavaScript
/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { ContentControl } from "igniteui-angular-core";
import { INotifyPropertyChanged_$type, Base, PropertyChangedEventArgs, delegateCombine, Point_$type, enumGetBox, markType, markDep } from "igniteui-angular-core";
import { SRProvider } from "igniteui-angular-core";
import { ISeriesVisualDataManager_$type } from "./ISeriesVisualDataManager";
import { DVContainer } from "igniteui-angular-core";
import { DependencyProperty } from "igniteui-angular-core";
import { Visibility_$type } from "igniteui-angular-core";
import { PointerTooltipPointerLocation_$type } from "./PointerTooltipPointerLocation";
import { PointCollection } from "igniteui-angular-core";
import { Polygon } from "igniteui-angular-core";
import { Polyline } from "igniteui-angular-core";
import { PropertyUpdatedEventArgs } from "igniteui-angular-core";
import { Size } from "igniteui-angular-core";
import { DeviceUtils } from "igniteui-angular-core";
import { PropertyMetadata } from "igniteui-angular-core";
import { RenderingContext } from "igniteui-angular-core";
import { Rectangle } from "igniteui-angular-core";
import { CanvasViewRenderer } from "igniteui-angular-core";
import { Brush } from "igniteui-angular-core";
import { Rect } from "igniteui-angular-core";
import { truncate, isNaN_ } from "igniteui-angular-core";
/**
* @hidden
*/
export let PointerTooltip = /*@__PURE__*/ (() => {
class PointerTooltip extends ContentControl {
constructor() {
super();
this.ar = null;
this.aj = null;
this.ai = null;
this.an = null;
this.propertyChanged = null;
this.propertyUpdated = null;
this.b4 = null;
this.cz = null;
this.c0 = null;
this.av = false;
this.az = 0;
this.ay = 1.7976931348623157E+308;
this.co = { $type: Point_$type, x: NaN, y: NaN };
this.al = 0;
this.ax = 0;
this.aw = 0;
this.ap = null;
this.at = false;
this.aq = null;
DVContainer.instance.registerIfLoaded("VisualDataFactoryManager");
this.ab = PointerTooltip.$;
this.propertyUpdated = delegateCombine(this.propertyUpdated, (a, b) => this.bz(a, b.propertyName, b.oldValue, b.newValue));
this.an = new PointerTooltipView(this);
}
get as() {
if (this.ar == null) {
this.ar = new SRProvider(this.an.m);
}
return this.ar;
}
get ak() {
if (this.aj == null) {
this.aj = DVContainer.instance.createInstance(ISeriesVisualDataManager_$type, () => this.as.q);
}
return this.aj;
}
bw() {
this.an.v();
}
b1(a, b, c) {
if (this.propertyChanged != null) {
this.propertyChanged(this, new PropertyChangedEventArgs(a));
}
if (this.propertyUpdated != null) {
this.propertyUpdated(this, new PropertyUpdatedEventArgs(a, b, c));
}
}
bz(a, b, c, d) {
switch (b) {
case PointerTooltip.$$p[11]:
this.an.x();
this.by();
break;
case PointerTooltip.$$p[16]:
this.by();
break;
case PointerTooltip.$$p[17]:
this.by();
break;
}
}
get a5() {
return this.az;
}
set a5(a) {
this.az = a;
}
get a4() {
return this.ay;
}
set a4(a) {
this.ay = a;
}
bu() {
if (this.an.d(this.content)) {
this.by();
}
}
by() {
this.av = true;
}
au(a, b) {
if (Math.abs(a - b) < 1E-05) {
return true;
}
return false;
}
c1(a) {
this.av = false;
let b = 0;
let c = 0;
let d = this.an.ab(a);
b = Math.max(d.width, this.a5);
c = Math.min(d.height, this.a4);
if (this.al == this.am && this.au(this.co.x, this.cw.x) && this.au(this.co.y, this.cw.y)) {
this.a3 = b;
this.a2 = c;
if (this.c2 == 0) {
b += this.ax;
c += this.aw;
this.a1 = this.a3 + this.ax;
this.a0 = this.a2 + this.aw;
}
else {
this.a1 = this.a3;
this.a0 = this.a2;
}
return new Size(1, b, c);
}
let e = { $type: Point_$type, x: 0, y: 0 };
let f = { $type: Point_$type, x: b * 0.5, y: 0 };
let g = { $type: Point_$type, x: b, y: 0 };
let h = { $type: Point_$type, x: b, y: c };
let i = { $type: Point_$type, x: b * 0.5, y: c };
let j = { $type: Point_$type, x: 0, y: c };
let k = { $type: Point_$type, x: 0, y: c * 0.5 };
let l = { $type: Point_$type, x: b, y: c * 0.5 };
let m = b;
let n = c;
let o = b;
let p = c;
let q = { $type: Point_$type, x: 0, y: 0 };
let r = { $type: Point_$type, x: 0, y: 0 };
let s = { $type: Point_$type, x: 0, y: 0 };
let t = { $type: Point_$type, x: 0, y: 0 };
let u = this.a7;
let v = this.a8;
let w = this.am;
let x = this.cw;
let y = 0;
let z = 0;
let aa = Math.pow(e.x - x.x, 2) + Math.pow(e.y - x.y, 2);
let ab = Math.pow(f.x - x.x, 2) + Math.pow(f.y - x.y, 2);
let ac = Math.pow(g.x - x.x, 2) + Math.pow(g.y - x.y, 2);
let ad = Math.pow(l.x - x.x, 2) + Math.pow(l.y - x.y, 2);
let ae = Math.pow(h.x - x.x, 2) + Math.pow(h.y - x.y, 2);
let af = Math.pow(i.x - x.x, 2) + Math.pow(i.y - x.y, 2);
let ag = Math.pow(j.x - x.x, 2) + Math.pow(j.y - x.y, 2);
let ah = Math.pow(k.x - x.x, 2) + Math.pow(k.y - x.y, 2);
let ai = 1.7976931348623157E+308;
ai = Math.min(ai, aa);
ai = Math.min(ai, ab);
ai = Math.min(ai, ac);
ai = Math.min(ai, ad);
ai = Math.min(ai, ae);
ai = Math.min(ai, af);
ai = Math.min(ai, ag);
ai = Math.min(ai, ah);
if (w == 0) {
if (ai == aa) {
w = 12;
if (x.x >= e.x) {
w = 1;
}
}
if (ai == ah) {
w = 11;
}
if (ai == ag) {
w = 10;
if (x.x >= j.x) {
w = 9;
}
}
if (ai == ac) {
w = 4;
if (x.x <= g.x) {
w = 3;
}
}
if (ai == ad) {
w = 5;
}
if (ai == ae) {
w = 6;
if (x.x <= h.x) {
w = 7;
}
}
if (ai == ab) {
w = 2;
}
if (ai == af) {
w = 8;
}
}
let aj = DeviceUtils.g(3);
switch (w) {
case 1:
q = { $type: Point_$type, x: e.x + u, y: e.y };
r = { $type: Point_$type, x: e.x + u + v, y: e.y };
s = { $type: Point_$type, x: e.x + u, y: e.y + aj };
t = { $type: Point_$type, x: e.x + u + v, y: e.y + aj };
break;
case 2:
q = { $type: Point_$type, x: ((e.x + g.x) / 2) - (v / 2), y: e.y };
r = { $type: Point_$type, x: ((e.x + g.x) / 2) + (v / 2), y: e.y };
s = { $type: Point_$type, x: ((e.x + g.x) / 2) - (v / 2), y: e.y + aj };
t = { $type: Point_$type, x: ((e.x + g.x) / 2) + (v / 2), y: e.y + aj };
break;
case 3:
q = { $type: Point_$type, x: g.x - u, y: e.y };
r = { $type: Point_$type, x: (g.x - u) - v, y: e.y };
s = { $type: Point_$type, x: g.x - u, y: e.y + aj };
t = { $type: Point_$type, x: (g.x - u) - v, y: e.y + aj };
break;
case 4:
q = { $type: Point_$type, x: g.x, y: g.y + u };
r = { $type: Point_$type, x: g.x, y: g.y + u + v };
s = { $type: Point_$type, x: g.x - aj, y: g.y + u };
t = { $type: Point_$type, x: g.x - aj, y: g.y + u + v };
break;
case 5:
q = { $type: Point_$type, x: g.x, y: ((g.y + h.y) / 2) - (v / 2) };
r = { $type: Point_$type, x: g.x, y: ((g.y + h.y) / 2) + (v / 2) };
s = { $type: Point_$type, x: g.x - aj, y: ((g.y + h.y) / 2) - (v / 2) };
t = { $type: Point_$type, x: g.x - aj, y: ((g.y + h.y) / 2) + (v / 2) };
break;
case 6:
q = { $type: Point_$type, x: h.x, y: h.y - u };
r = { $type: Point_$type, x: h.x, y: h.y - u - v };
s = { $type: Point_$type, x: h.x - aj, y: h.y - u };
t = { $type: Point_$type, x: h.x - aj, y: h.y - u - v };
break;
case 7:
q = { $type: Point_$type, x: h.x - u, y: h.y };
r = { $type: Point_$type, x: (h.x - u) - v, y: h.y };
s = { $type: Point_$type, x: h.x - u, y: h.y - aj };
t = { $type: Point_$type, x: (h.x - u) - v, y: h.y - aj };
break;
case 8:
q = { $type: Point_$type, x: ((j.x + h.x) / 2) - (v / 2), y: h.y };
r = { $type: Point_$type, x: ((j.x + h.x) / 2) + (v / 2), y: h.y };
s = { $type: Point_$type, x: ((j.x + h.x) / 2) - (v / 2), y: h.y - aj };
t = { $type: Point_$type, x: ((j.x + h.x) / 2) + (v / 2), y: h.y - aj };
break;
case 9:
q = { $type: Point_$type, x: j.x + u, y: j.y };
r = { $type: Point_$type, x: j.x + u + v, y: j.y };
s = { $type: Point_$type, x: j.x + u, y: j.y - aj };
t = { $type: Point_$type, x: j.x + u + v, y: j.y - aj };
break;
case 10:
q = { $type: Point_$type, x: e.x, y: j.y - u };
r = { $type: Point_$type, x: e.x, y: (j.y - u) - v };
s = { $type: Point_$type, x: e.x + aj, y: j.y - u };
t = { $type: Point_$type, x: e.x + aj, y: (j.y - u) - v };
break;
case 11:
q = { $type: Point_$type, x: e.x, y: ((e.y + j.y) / 2) - (v / 2) };
r = { $type: Point_$type, x: e.x, y: ((e.y + j.y) / 2) + (v / 2) };
s = { $type: Point_$type, x: e.x + aj, y: ((e.y + j.y) / 2) - (v / 2) };
t = { $type: Point_$type, x: e.x + aj, y: ((e.y + j.y) / 2) + (v / 2) };
break;
case 12:
q = { $type: Point_$type, x: e.x, y: e.y + u };
r = { $type: Point_$type, x: e.x, y: e.y + u + v };
s = { $type: Point_$type, x: e.x + aj, y: e.y + u };
t = { $type: Point_$type, x: e.x + aj, y: e.y + u + v };
break;
}
let ak = { $type: Point_$type, x: x.x, y: x.y };
if (ak.y < e.y) {
let al = e.y - ak.y;
ak = { $type: Point_$type, x: ak.x, y: 0 };
p += al;
e = { $type: Point_$type, x: e.x, y: e.y + al };
g = { $type: Point_$type, x: g.x, y: g.y + al };
j = { $type: Point_$type, x: j.x, y: j.y + al };
h = { $type: Point_$type, x: h.x, y: h.y + al };
q = { $type: Point_$type, x: q.x, y: q.y + al };
r = { $type: Point_$type, x: r.x, y: r.y + al };
s = { $type: Point_$type, x: s.x, y: s.y + al };
t = { $type: Point_$type, x: t.x, y: t.y + al };
}
else {
p = Math.max(ak.y, n);
}
if (ak.x < e.x) {
let am = e.x - ak.x;
ak = { $type: Point_$type, x: 0, y: ak.y };
o += am;
e = { $type: Point_$type, x: e.x + am, y: e.y };
g = { $type: Point_$type, x: g.x + am, y: g.y };
j = { $type: Point_$type, x: j.x + am, y: j.y };
h = { $type: Point_$type, x: h.x + am, y: h.y };
q = { $type: Point_$type, x: q.x + am, y: q.y };
r = { $type: Point_$type, x: r.x + am, y: r.y };
s = { $type: Point_$type, x: s.x + am, y: s.y };
t = { $type: Point_$type, x: t.x + am, y: t.y };
}
else {
o = Math.max(ak.x, m);
}
y = o - m;
z = p - n;
this.ax = y;
this.aw = z;
this.al = this.am;
this.co = this.cw;
this.cv = ak;
this.ct = q;
this.cu = r;
this.a3 = m;
this.a2 = n;
this.a1 = o;
this.a0 = p;
this.cr = e;
this.cs = g;
this.cq = h;
this.cp = j;
let an = new PointCollection(0);
an.add(t);
an.add(this.cu);
an.add(this.cv);
an.add(this.ct);
an.add(s);
this.cy = an;
if (this.cz != null) {
this.cz.an = an;
}
let ao = new PointCollection(0);
ao.add(this.cu);
ao.add(this.cv);
ao.add(this.ct);
this.cx = ao;
if (this.c0 != null) {
this.c0.an = ao;
}
if (this.c2 == 1) {
return new Size(1, b, c);
}
return new Size(1, o, p);
}
bv() {
this.b3();
this.an.u();
}
bx() {
this._visibility = 1;
this.an.w();
}
b2(a, b) {
if (this.av) {
this.c1(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
}
this.an.z(a, b);
}
b0(a) {
this.an.y(a);
}
bt() {
if (!this.at) {
if (this.ap != null && this.an.o != null) {
this.at = true;
this.ap.at(this.an.o, "pointerTooltip" + Base.getHashCodeStatic(this));
}
}
}
b3() {
if (this.at) {
if (this.ap != null && this.an.o != null) {
this.at = false;
this.ap.bh(this.an.o, "pointerTooltip" + Base.getHashCodeStatic(this));
}
this.ap = null;
}
}
a9() {
if (this._visibility == 1) {
return null;
}
return this.an.t();
}
}
PointerTooltip.$t = markType(PointerTooltip, 'PointerTooltip', ContentControl.$, [INotifyPropertyChanged_$type]);
PointerTooltip.$$p = markDep(DependencyProperty, PropertyMetadata, PointerTooltip, 'b1', ['ActualBoxBottomLeftPosition:cp:b5', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxBottomRightPosition:cq:b6', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxFullHeight:a0:b7', [1, 0], 'ActualBoxFullWidth:a1:b8', [1, 0], 'ActualBoxHeight:a2:b9', [1, 0], 'ActualBoxTopLeftPosition:cr:ca', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxTopRightPosition:cs:cb', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxWidth:a3:cc', [1, 0], 'ActualPointerFirstPosition:ct:cd', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualPointerSecondPosition:cu:ce', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualPointerStartPosition:cv:cf', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'PixelScalingRatio:a6:cg', [1, NaN], 'PointerInset:a7:ch', [1, DeviceUtils.g(7.5)], 'PointerLocation:am:ci', [PointerTooltipPointerLocation_$type, enumGetBox(PointerTooltipPointerLocation_$type, 0)], 'PointerOutlinePoints:cx:cj', [PointCollection.$, null], 'PointerPoints:cy:ck', [PointCollection.$, null], 'PointerPosition:cw:cl', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'PointerVisibility:c2:cm', [Visibility_$type, enumGetBox(Visibility_$type, 0)], 'PointerWidth:a8:cn', [1, DeviceUtils.g(5)]]);
return PointerTooltip;
})();
/**
* @hidden
*/
export let PointerTooltipView = /*@__PURE__*/ (() => {
class PointerTooltipView extends Base {
constructor(a) {
super();
this.a = null;
this.q = null;
this.s = null;
this.r = null;
this.o = null;
this.n = null;
this.b = null;
this.p = null;
this.aa = null;
this.c = false;
this.i = 0;
this.h = 0;
this.k = 0;
this.j = 0;
this.g = -1;
this.e = -1;
this.f = 1;
this.m = null;
this.a = a;
this.a.cz = new Polygon();
this.a.c0 = new Polyline();
this.o = null;
this.x();
}
x() {
if (!isNaN_(this.a.a6)) {
this.f = this.a.a6;
return;
}
if (window.devicePixelRatio != undefined && window.devicePixelRatio != this.f) {
this.f = window.devicePixelRatio;
}
}
ab(a) {
let b = new Size(1, 0, 0);
if (this.a.content != null) {
let c = this.a.content;
c = c.clone();
b = new Size(1, 0, 0);
if (this.q == null) {
this.q = this.m.createElement("div");
this.q.addClass("ui-chart-pointer-tooltip-container");
this.q.setStyleProperty("position", "absolute");
this.q.setStyleProperty("visibility", "hidden");
this.q.setStyleProperty("top", "0px");
this.q.setStyleProperty("left", "0px");
this.s = this.m.createElement("div");
this.s.setStyleProperty("position", "relative");
this.r = this.m.createElement("div");
this.r.addClass("ui-chart-pointer-tooltip-content-container");
this.r.setStyleProperty("position", "absolute");
this.r.setStyleProperty("top", "0px");
this.r.setStyleProperty("left", "0px");
this.q.append(this.s);
this.s.append(this.r);
}
this.q.remove();
this.m.appendToBody(this.q);
this.r.append(c);
b = new Size(1, this.r.outerWidthWithMargin(), this.r.outerHeightWithMargin());
this.q.remove();
c.remove();
}
else {
if (this.a.ai != null) {
b = this.a.ai.getDesiredSize();
}
}
return b;
}
z(a, b) {
if (this.o == null) {
this.o = this.m.createElement("div");
this.o.addClass("ui-chart-pointer-tooltip-container");
this.o.setStyleProperty("position", "absolute");
this.o.setStyleProperty("pointer-events", "none");
this.o.setStyleProperty("top", "0px");
this.o.setStyleProperty("left", "0px");
let c = this.m.createElement("div");
c.setStyleProperty("position", "relative");
this.n = this.m.createElement("canvas");
this.n.setStyleProperty("position", "absolute");
this.n.setStyleProperty("top", "0px");
this.n.setStyleProperty("left", "0px");
this.p = this.m.createElement("div");
this.p.addClass("ui-chart-pointer-tooltip-content-container");
this.p.setAttribute("style", "position: absolute;top:0px;left:0px;--tooltip-container-background-color:transparent;");
c.append(this.n);
c.append(this.p);
this.o.append(c);
this.b = new RenderingContext(new CanvasViewRenderer(), this.m.get2DCanvasContext(this.n));
this.o.hide();
this.m.appendToBody(this.o);
}
this.a.bt();
if (this.a._visibility == 1 && this.c) {
this.o.hide();
this.c = false;
return;
}
let d = null;
if (this.a.content != null) {
d = this.a.content;
d.remove();
}
this.p.removeChildren();
if (d != null) {
let cont_ = this.p;
let xPos_ = this.a.cr.x.toString() + "px";
let yPos_ = this.a.cr.y.toString() + "px";
cont_.setRawStyleProperty("left", xPos_);
cont_.setRawStyleProperty("top", yPos_);
this.p.append(d);
}
let e = this.a.aq;
let f = 1;
this.x();
if (e != null) {
f = !isNaN_(e.b) ? e.b : 1;
}
let g = truncate(Math.ceil(this.a.a1 + (f * 2)));
let h = truncate(Math.ceil(this.a.a0 + (f * 2)));
let i = truncate(Math.ceil(g * this.f));
let j = truncate(Math.ceil(h * this.f));
if (g != this.i || h != this.h || i != this.k || j != this.j) {
this.n.setStyleProperty("width", g.toString() + "px");
this.n.setStyleProperty("height", h.toString() + "px");
this.n.setAttribute("width", i.toString());
this.n.setAttribute("height", j.toString());
this.i = g;
this.h = h;
this.k = i;
this.j = j;
}
if (this.b.d && this.f != 1) {
this.b.aa();
this.b.ab(this.f, this.f);
}
this.b.l(0, 0, this.i, this.h);
let k = new Rectangle();
k.width = this.a.a3;
k.height = this.a.a2;
k.n = this.a.cr.x;
k.o = this.a.cr.y;
if (e != null) {
k._fill = e.c != null ? e.c : ((() => {
let $ret = new Brush();
$ret.fill = "white";
return $ret;
})());
k._stroke = e.d != null ? e.d : ((() => {
let $ret = new Brush();
$ret.fill = "black";
return $ret;
})());
k.ad = !isNaN_(e.b) ? e.b : 1;
k.ap = !isNaN_(e.a) ? e.a : 0;
k.aq = !isNaN_(e.a) ? e.a : 0;
}
else {
k._fill = ((() => {
let $ret = new Brush();
$ret.fill = "white";
return $ret;
})());
k._stroke = ((() => {
let $ret = new Brush();
$ret.fill = "black";
return $ret;
})());
k.ad = 1;
}
this.aa = k;
let l = this.a.cz;
let m = this.a.c0;
l._fill = k._fill;
m._stroke = k._stroke;
this.b.w(k);
if (this.a.c2 == 0) {
this.b.u(l);
this.b.v(m);
}
if (this.a.ai != null) {
this.b.aa();
this.b.ai(k.n, k.o);
this.a.ai.ensureUpdated();
this.a.ai.doRender(this.b, 1);
this.b.z();
}
let x_ = a + "px";
let y_ = b + "px";
let container_ = this.o;
container_.setRawStyleProperty("left", x_);
container_.setRawStyleProperty("top", y_);
if (this.a._visibility == 0 && !this.c) {
this.o.show();
this.c = true;
}
if (this.b.d && this.f != 1) {
this.b.z();
}
}
t() {
return this.a.ak.exportPointerTooltipData(this.a.cz, this.a.c0, this.aa, new Rect(0, 0, 0, this.a.a1, this.a.a0));
}
l() {
return this.f;
}
d(a) {
let b = this.g;
let c = this.e;
let d = this.ab(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
if (d.width != b || d.height != c) {
return true;
}
return false;
}
u() {
this.m = null;
this.o.hide();
this.o.remove();
this.o = null;
this.q = null;
this.s = null;
this.r = null;
this.o = null;
this.n = null;
this.p = null;
}
w() {
this.o.hide();
}
y(a) {
this.m = a;
}
v() {
if (this.o != null) {
this.o.hide();
this.o.remove();
this.o = null;
}
}
}
PointerTooltipView.$t = markType(PointerTooltipView, 'PointerTooltipView');
return PointerTooltipView;
})();