igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
648 lines (647 loc) • 26.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-react-core";
import { INotifyPropertyChanged_$type, Base, PropertyChangedEventArgs, delegateCombine, Point_$type, enumGetBox, markType, markDep } from "igniteui-react-core";
import { SRProvider } from "igniteui-react-core";
import { ISeriesVisualDataManager_$type } from "./ISeriesVisualDataManager";
import { DVContainer } from "igniteui-react-core";
import { DependencyProperty } from "igniteui-react-core";
import { Visibility_$type } from "igniteui-react-core";
import { PointerTooltipPointerLocation_$type } from "./PointerTooltipPointerLocation";
import { PointCollection } from "igniteui-react-core";
import { Polygon } from "igniteui-react-core";
import { Polyline } from "igniteui-react-core";
import { PropertyUpdatedEventArgs } from "igniteui-react-core";
import { Size } from "igniteui-react-core";
import { DeviceUtils } from "igniteui-react-core";
import { PropertyMetadata } from "igniteui-react-core";
import { RenderingContext } from "igniteui-react-core";
import { Rectangle } from "igniteui-react-core";
import { CanvasViewRenderer } from "igniteui-react-core";
import { Brush } from "igniteui-react-core";
import { Rect } from "igniteui-react-core";
import { truncate, isNaN_ } from "igniteui-react-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.b0 = null;
this.cv = null;
this.cw = null;
this.av = false;
this.ck = { $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.bv(a, b.propertyName, b.oldValue, b.newValue));
this.an = new PointerTooltipView(this);
}
get as() {
if (this.ar == null) {
this.ar = new SRProvider(this.an.l);
}
return this.ar;
}
get ak() {
if (this.aj == null) {
this.aj = DVContainer.instance.createInstance(ISeriesVisualDataManager_$type, () => this.as.q);
}
return this.aj;
}
bs() {
this.an.u();
}
bx(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));
}
}
bv(a, b, c, d) {
switch (b) {
case PointerTooltip.$$p[11]:
this.an.w();
this.bu();
break;
case PointerTooltip.$$p[16]:
this.bu();
break;
case PointerTooltip.$$p[17]:
this.bu();
break;
}
}
bq() {
if (this.an.d(this.content)) {
this.bu();
}
}
bu() {
this.av = true;
}
au(a, b) {
if (Math.abs(a - b) < 1E-05) {
return true;
}
return false;
}
cx(a) {
this.av = false;
let b = 0;
let c = 0;
let d = this.an.aa(a);
b = d.width;
c = d.height;
if (this.al == this.am && this.au(this.ck.x, this.cs.x) && this.au(this.ck.y, this.cs.y)) {
this.a1 = b;
this.a0 = c;
if (this.cy == 0) {
b += this.ax;
c += this.aw;
this.az = this.a1 + this.ax;
this.ay = this.a0 + this.aw;
}
else {
this.az = this.a1;
this.ay = this.a0;
}
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.a3;
let v = this.a4;
let w = this.am;
let x = this.cs;
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.ck = this.cs;
this.cr = ak;
this.cp = q;
this.cq = r;
this.a1 = m;
this.a0 = n;
this.az = o;
this.ay = p;
this.cn = e;
this.co = g;
this.cm = h;
this.cl = j;
let an = new PointCollection(0);
an.add(t);
an.add(this.cq);
an.add(this.cr);
an.add(this.cp);
an.add(s);
this.cu = an;
if (this.cv != null) {
this.cv.an = an;
}
let ao = new PointCollection(0);
ao.add(this.cq);
ao.add(this.cr);
ao.add(this.cp);
this.ct = ao;
if (this.cw != null) {
this.cw.an = ao;
}
if (this.cy == 1) {
return new Size(1, b, c);
}
return new Size(1, o, p);
}
br() {
this.bz();
this.an.t();
}
bt() {
this._visibility = 1;
this.an.v();
}
by(a, b) {
if (this.av) {
this.cx(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
}
this.an.y(a, b);
}
bw(a) {
this.an.x(a);
}
bp() {
if (!this.at) {
if (this.ap != null && this.an.n != null) {
this.at = true;
this.ap.at(this.an.n, "pointerTooltip" + Base.getHashCodeStatic(this));
}
}
}
bz() {
if (this.at) {
if (this.ap != null && this.an.n != null) {
this.at = false;
this.ap.bh(this.an.n, "pointerTooltip" + Base.getHashCodeStatic(this));
}
this.ap = null;
}
}
a5() {
if (this._visibility == 1) {
return null;
}
return this.an.s();
}
}
PointerTooltip.$t = /*@__PURE__*/ markType(PointerTooltip, 'PointerTooltip', ContentControl.$, [INotifyPropertyChanged_$type]);
PointerTooltip.$$p = /*@__PURE__*/ markDep(DependencyProperty, PropertyMetadata, PointerTooltip, 'bx', ['ActualBoxBottomLeftPosition:cl:b1', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxBottomRightPosition:cm:b2', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxFullHeight:ay:b3', [1, 0], 'ActualBoxFullWidth:az:b4', [1, 0], 'ActualBoxHeight:a0:b5', [1, 0], 'ActualBoxTopLeftPosition:cn:b6', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxTopRightPosition:co:b7', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualBoxWidth:a1:b8', [1, 0], 'ActualPointerFirstPosition:cp:b9', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualPointerSecondPosition:cq:ca', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'ActualPointerStartPosition:cr:cb', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'PixelScalingRatio:a2:cc', [1, NaN], 'PointerInset:a3:cd', [1, /*@__PURE__*/ DeviceUtils.g(7.5)], 'PointerLocation:am:ce', [PointerTooltipPointerLocation_$type, /*@__PURE__*/ enumGetBox(PointerTooltipPointerLocation_$type, 0)], 'PointerOutlinePoints:ct:cf', [PointCollection.$, null], 'PointerPoints:cu:cg', [PointCollection.$, null], 'PointerPosition:cs:ch', [Point_$type, { $type: Point_$type, x: 0, y: 0 }], 'PointerVisibility:cy:ci', [Visibility_$type, /*@__PURE__*/ enumGetBox(Visibility_$type, 0)], 'PointerWidth:a4:cj', [1, /*@__PURE__*/ DeviceUtils.g(5)]]);
return PointerTooltip;
})();
/**
* @hidden
*/
export let PointerTooltipView = /*@__PURE__*/ (() => {
class PointerTooltipView extends Base {
constructor(a) {
super();
this.a = null;
this.p = null;
this.r = null;
this.q = null;
this.n = null;
this.m = null;
this.b = null;
this.o = null;
this.z = 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.l = null;
this.a = a;
this.a.cv = new Polygon();
this.a.cw = new Polyline();
this.n = null;
this.w();
}
w() {
if (!isNaN_(this.a.a2)) {
this.f = this.a.a2;
return;
}
if (window.devicePixelRatio != undefined && window.devicePixelRatio != this.f) {
this.f = window.devicePixelRatio;
}
}
aa(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.p == null) {
this.p = this.l.createElement("div");
this.p.addClass("ui-chart-pointer-tooltip-container");
this.p.setStyleProperty("position", "absolute");
this.p.setStyleProperty("visibility", "hidden");
this.p.setStyleProperty("top", "0px");
this.p.setStyleProperty("left", "0px");
this.r = this.l.createElement("div");
this.r.setStyleProperty("position", "relative");
this.q = this.l.createElement("div");
this.q.addClass("ui-chart-pointer-tooltip-content-container");
this.q.setStyleProperty("position", "absolute");
this.q.setStyleProperty("top", "0px");
this.q.setStyleProperty("left", "0px");
this.p.append(this.r);
this.r.append(this.q);
}
this.p.remove();
this.l.appendToBody(this.p);
this.q.append(c);
b = new Size(1, this.q.outerWidthWithMargin(), this.q.outerHeightWithMargin());
this.p.remove();
c.remove();
}
else {
if (this.a.ai != null) {
b = this.a.ai.getDesiredSize();
}
}
return b;
}
y(a, b) {
if (this.n == null) {
this.n = this.l.createElement("div");
this.n.addClass("ui-chart-pointer-tooltip-container");
this.n.setStyleProperty("position", "absolute");
this.n.setStyleProperty("pointer-events", "none");
this.n.setStyleProperty("top", "0px");
this.n.setStyleProperty("left", "0px");
let c = this.l.createElement("div");
c.setStyleProperty("position", "relative");
this.m = this.l.createElement("canvas");
this.m.setStyleProperty("position", "absolute");
this.m.setStyleProperty("top", "0px");
this.m.setStyleProperty("left", "0px");
this.o = this.l.createElement("div");
this.o.addClass("ui-chart-pointer-tooltip-content-container");
this.o.setAttribute("style", "position: absolute;top:0px;left:0px;--tooltip-container-background-color:transparent;");
c.append(this.m);
c.append(this.o);
this.n.append(c);
this.b = new RenderingContext(new CanvasViewRenderer(), this.l.get2DCanvasContext(this.m));
this.n.hide();
this.l.appendToBody(this.n);
}
this.a.bp();
if (this.a._visibility == 1 && this.c) {
this.n.hide();
this.c = false;
return;
}
let d = null;
if (this.a.content != null) {
d = this.a.content;
d.remove();
}
this.o.removeChildren();
if (d != null) {
let cont_ = this.o;
let xPos_ = this.a.cn.x.toString() + "px";
let yPos_ = this.a.cn.y.toString() + "px";
cont_.setRawStyleProperty("left", xPos_);
cont_.setRawStyleProperty("top", yPos_);
this.o.append(d);
}
let e = this.a.aq;
let f = 1;
this.w();
if (e != null) {
f = !isNaN_(e.b) ? e.b : 1;
}
let g = truncate(Math.ceil(this.a.az + (f * 2)));
let h = truncate(Math.ceil(this.a.ay + (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.m.setStyleProperty("width", g.toString() + "px");
this.m.setStyleProperty("height", h.toString() + "px");
this.m.setAttribute("width", i.toString());
this.m.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.a1;
k.height = this.a.a0;
k.n = this.a.cn.x;
k.o = this.a.cn.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.z = k;
let l = this.a.cv;
let m = this.a.cw;
l._fill = k._fill;
m._stroke = k._stroke;
this.b.w(k);
this.b.u(l);
this.b.v(m);
if (this.a.ai != null) {
this.b.aa();
this.b.ag(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.n;
container_.setRawStyleProperty("left", x_);
container_.setRawStyleProperty("top", y_);
if (this.a._visibility == 0 && !this.c) {
this.n.show();
this.c = true;
}
if (this.b.d && this.f != 1) {
this.b.z();
}
}
s() {
return this.a.ak.exportPointerTooltipData(this.a.cv, this.a.cw, this.z, new Rect(0, 0, 0, this.a.az, this.a.ay));
}
d(a) {
let b = this.g;
let c = this.e;
let d = this.aa(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
if (d.width != b || d.height != c) {
return true;
}
return false;
}
t() {
this.l = null;
this.n.hide();
this.n.remove();
this.n = null;
this.p = null;
this.r = null;
this.q = null;
this.n = null;
this.m = null;
this.o = null;
}
v() {
this.n.hide();
}
x(a) {
this.l = a;
}
u() {
if (this.n != null) {
this.n.hide();
this.n.remove();
this.n = null;
}
}
}
PointerTooltipView.$t = /*@__PURE__*/ markType(PointerTooltipView, 'PointerTooltipView');
return PointerTooltipView;
})();