UNPKG

igniteui-react-charts

Version:

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

660 lines (659 loc) 25.8 kB
/* THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE: https://www.infragistics.com/legal/license/igultimate-la https://www.infragistics.com/legal/license/igultimate-eula GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company. */ import { __extends } from "tslib"; 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 */ var PointerTooltip = /** @class */ /*@__PURE__*/ (function (_super) { __extends(PointerTooltip, _super); function PointerTooltip() { var _this = _super.call(this) || this; _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, function (a, b) { return _this.bv(a, b.propertyName, b.oldValue, b.newValue); }); _this.an = new PointerTooltipView(_this); return _this; } Object.defineProperty(PointerTooltip.prototype, "as", { get: function () { if (this.ar == null) { this.ar = new SRProvider(this.an.l); } return this.ar; }, enumerable: false, configurable: true }); Object.defineProperty(PointerTooltip.prototype, "ak", { get: function () { var _this = this; if (this.aj == null) { this.aj = DVContainer.instance.createInstance(ISeriesVisualDataManager_$type, function () { return _this.as.q; }); } return this.aj; }, enumerable: false, configurable: true }); PointerTooltip.prototype.bs = function () { this.an.u(); }; PointerTooltip.prototype.bx = function (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)); } }; PointerTooltip.prototype.bv = function (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; } }; PointerTooltip.prototype.bq = function () { if (this.an.d(this.content)) { this.bu(); } }; PointerTooltip.prototype.bu = function () { this.av = true; }; PointerTooltip.prototype.au = function (a, b) { if (Math.abs(a - b) < 1E-05) { return true; } return false; }; PointerTooltip.prototype.cx = function (a) { this.av = false; var b = 0; var c = 0; var 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); } var e = { $type: Point_$type, x: 0, y: 0 }; var f = { $type: Point_$type, x: b * 0.5, y: 0 }; var g = { $type: Point_$type, x: b, y: 0 }; var h = { $type: Point_$type, x: b, y: c }; var i = { $type: Point_$type, x: b * 0.5, y: c }; var j = { $type: Point_$type, x: 0, y: c }; var k = { $type: Point_$type, x: 0, y: c * 0.5 }; var l = { $type: Point_$type, x: b, y: c * 0.5 }; var m = b; var n = c; var o = b; var p = c; var q = { $type: Point_$type, x: 0, y: 0 }; var r = { $type: Point_$type, x: 0, y: 0 }; var s = { $type: Point_$type, x: 0, y: 0 }; var t = { $type: Point_$type, x: 0, y: 0 }; var u = this.a3; var v = this.a4; var w = this.am; var x = this.cs; var y = 0; var z = 0; var aa = Math.pow(e.x - x.x, 2) + Math.pow(e.y - x.y, 2); var ab = Math.pow(f.x - x.x, 2) + Math.pow(f.y - x.y, 2); var ac = Math.pow(g.x - x.x, 2) + Math.pow(g.y - x.y, 2); var ad = Math.pow(l.x - x.x, 2) + Math.pow(l.y - x.y, 2); var ae = Math.pow(h.x - x.x, 2) + Math.pow(h.y - x.y, 2); var af = Math.pow(i.x - x.x, 2) + Math.pow(i.y - x.y, 2); var ag = Math.pow(j.x - x.x, 2) + Math.pow(j.y - x.y, 2); var ah = Math.pow(k.x - x.x, 2) + Math.pow(k.y - x.y, 2); var 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; } } var 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; } var ak = { $type: Point_$type, x: x.x, y: x.y }; if (ak.y < e.y) { var 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) { var 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; var 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; } var 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); }; PointerTooltip.prototype.br = function () { this.bz(); this.an.t(); }; PointerTooltip.prototype.bt = function () { this._visibility = 1; this.an.v(); }; PointerTooltip.prototype.by = function (a, b) { if (this.av) { this.cx(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)); } this.an.y(a, b); }; PointerTooltip.prototype.bw = function (a) { this.an.x(a); }; PointerTooltip.prototype.bp = function () { if (!this.at) { if (this.ap != null && this.an.n != null) { this.at = true; this.ap.at(this.an.n, "pointerTooltip" + Base.getHashCodeStatic(this)); } } }; PointerTooltip.prototype.bz = function () { 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; } }; PointerTooltip.prototype.a5 = function () { if (this._visibility == 1) { return null; } return this.an.s(); }; PointerTooltip.$t = markType(PointerTooltip, 'PointerTooltip', ContentControl.$, [INotifyPropertyChanged_$type]); PointerTooltip.$$p = 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, DeviceUtils.g(7.5)], 'PointerLocation:am:ce', [PointerTooltipPointerLocation_$type, 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, enumGetBox(Visibility_$type, 0)], 'PointerWidth:a4:cj', [1, DeviceUtils.g(5)]]); return PointerTooltip; }(ContentControl)); export { PointerTooltip }; /** * @hidden */ var PointerTooltipView = /** @class */ /*@__PURE__*/ (function (_super) { __extends(PointerTooltipView, _super); function PointerTooltipView(a) { var _this = _super.call(this) || this; _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(); return _this; } PointerTooltipView.prototype.w = function () { if (!isNaN_(this.a.a2)) { this.f = this.a.a2; return; } if (window.devicePixelRatio != undefined && window.devicePixelRatio != this.f) { this.f = window.devicePixelRatio; } }; PointerTooltipView.prototype.aa = function (a) { var b = new Size(1, 0, 0); if (this.a.content != null) { var 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; }; PointerTooltipView.prototype.y = function (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"); var 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; } var d = null; if (this.a.content != null) { d = this.a.content; d.remove(); } this.o.removeChildren(); if (d != null) { var cont_ = this.o; var xPos_ = this.a.cn.x.toString() + "px"; var yPos_ = this.a.cn.y.toString() + "px"; cont_.setRawStyleProperty("left", xPos_); cont_.setRawStyleProperty("top", yPos_); this.o.append(d); } var e = this.a.aq; var f = 1; this.w(); if (e != null) { f = !isNaN_(e.b) ? e.b : 1; } var g = truncate(Math.ceil(this.a.az + (f * 2))); var h = truncate(Math.ceil(this.a.ay + (f * 2))); var i = truncate(Math.ceil(g * this.f)); var 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); var 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 : ((function () { var $ret = new Brush(); $ret.fill = "white"; return $ret; })()); k._stroke = e.d != null ? e.d : ((function () { var $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 = ((function () { var $ret = new Brush(); $ret.fill = "white"; return $ret; })()); k._stroke = ((function () { var $ret = new Brush(); $ret.fill = "black"; return $ret; })()); k.ad = 1; } this.z = k; var l = this.a.cv; var 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(); } var x_ = a + "px"; var y_ = b + "px"; var 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(); } }; PointerTooltipView.prototype.s = function () { return this.a.ak.exportPointerTooltipData(this.a.cv, this.a.cw, this.z, new Rect(0, 0, 0, this.a.az, this.a.ay)); }; PointerTooltipView.prototype.d = function (a) { var b = this.g; var c = this.e; var d = this.aa(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)); if (d.width != b || d.height != c) { return true; } return false; }; PointerTooltipView.prototype.t = function () { 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; }; PointerTooltipView.prototype.v = function () { this.n.hide(); }; PointerTooltipView.prototype.x = function (a) { this.l = a; }; PointerTooltipView.prototype.u = function () { if (this.n != null) { this.n.hide(); this.n.remove(); this.n = null; } }; PointerTooltipView.$t = markType(PointerTooltipView, 'PointerTooltipView'); return PointerTooltipView; }(Base)); export { PointerTooltipView };