UNPKG

igniteui-react-charts

Version:

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

691 lines (690 loc) 26.7 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 { CanvasScalingHelpers } 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.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, function (a, b) { return _this.bz(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.o); } 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.bw = function () { this.an.x(); }; PointerTooltip.prototype.b1 = 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.bz = function (a, b, c, d) { switch (b) { case PointerTooltip.$$p[11]: this.an.z(); this.by(); break; case PointerTooltip.$$p[16]: this.by(); break; case PointerTooltip.$$p[17]: this.by(); break; } }; Object.defineProperty(PointerTooltip.prototype, "a5", { get: function () { return this.az; }, set: function (a) { this.az = a; }, enumerable: false, configurable: true }); Object.defineProperty(PointerTooltip.prototype, "a4", { get: function () { return this.ay; }, set: function (a) { this.ay = a; }, enumerable: false, configurable: true }); PointerTooltip.prototype.bu = function () { if (this.an.d(this.content)) { this.by(); } }; PointerTooltip.prototype.by = function () { this.av = true; }; PointerTooltip.prototype.au = function (a, b) { if (Math.abs(a - b) < 1E-05) { return true; } return false; }; PointerTooltip.prototype.c1 = function (a) { this.av = false; var b = 0; var c = 0; var d = this.an.ad(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); } 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.a7; var v = this.a8; var w = this.am; var x = this.cw; 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.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; var 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; } var 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); }; PointerTooltip.prototype.bv = function () { this.b3(); this.an.w(); }; PointerTooltip.prototype.bx = function () { this._visibility = 1; this.an.y(); }; PointerTooltip.prototype.b2 = function (a, b) { if (this.av) { this.c1(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)); } this.an.ab(a, b); }; PointerTooltip.prototype.b0 = function (a) { this.an.aa(a); }; PointerTooltip.prototype.bt = function () { if (!this.at) { if (this.ap != null && this.an.q != null) { this.at = true; this.ap.au(this.an.q, "pointerTooltip" + Base.getHashCodeStatic(this)); } } }; PointerTooltip.prototype.b3 = function () { if (this.at) { if (this.ap != null && this.an.q != null) { this.at = false; this.ap.bi(this.an.q, "pointerTooltip" + Base.getHashCodeStatic(this)); } this.ap = null; } }; PointerTooltip.prototype.a9 = function () { if (this._visibility == 1) { return null; } return this.an.v(); }; 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; }(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.s = null; _this.u = null; _this.t = null; _this.q = null; _this.p = null; _this.b = null; _this.r = null; _this.ac = null; _this.c = false; _this.i = 0; _this.h = 0; _this.k = 0; _this.j = 0; _this.g = -1; _this.e = -1; _this.l = 1; _this.f = 1; _this.o = null; _this.a = a; _this.a.cz = new Polygon(); _this.a.c0 = new Polyline(); _this.q = null; _this.z(); return _this; } PointerTooltipView.prototype.z = function () { var a = 0; if (!isNaN_(this.a.a6)) { a = this.a.a6; } this.l = this.o == null ? 1 : CanvasScalingHelpers.c(this.o.rootWrapper); this.f = CanvasScalingHelpers.a(a, a, this.l); }; PointerTooltipView.prototype.ad = 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.s == null) { this.s = this.o.createElement("div"); this.s.addClass("ui-chart-pointer-tooltip-container"); this.s.setStyleProperty("position", "absolute"); this.s.setStyleProperty("visibility", "hidden"); this.s.setStyleProperty("top", "0px"); this.s.setStyleProperty("left", "0px"); this.u = this.o.createElement("div"); this.u.setStyleProperty("position", "relative"); this.t = this.o.createElement("div"); this.t.addClass("ui-chart-pointer-tooltip-content-container"); this.t.setStyleProperty("position", "absolute"); this.t.setStyleProperty("top", "0px"); this.t.setStyleProperty("left", "0px"); this.s.append(this.u); this.u.append(this.t); } this.s.remove(); this.o.appendToBody(this.s); this.t.append(c); b = new Size(1, this.t.outerWidthWithMargin(), this.t.outerHeightWithMargin()); this.s.remove(); c.remove(); } else { if (this.a.ai != null) { b = this.a.ai.getDesiredSize(); } } return b; }; PointerTooltipView.prototype.ab = function (a, b) { if (this.q == null) { this.q = this.o.createElement("div"); this.q.addClass("ui-chart-pointer-tooltip-container"); this.q.setStyleProperty("position", "absolute"); this.q.setStyleProperty("pointer-events", "none"); this.q.setStyleProperty("top", "0px"); this.q.setStyleProperty("left", "0px"); var c = this.o.createElement("div"); c.setStyleProperty("position", "relative"); this.p = this.o.createElement("canvas"); this.p.setStyleProperty("position", "absolute"); this.p.setStyleProperty("top", "0px"); this.p.setStyleProperty("left", "0px"); this.r = this.o.createElement("div"); this.r.addClass("ui-chart-pointer-tooltip-content-container"); this.r.setAttribute("style", "position: absolute;top:0px;left:0px;--tooltip-container-background-color:transparent;"); c.append(this.p); c.append(this.r); this.q.append(c); this.b = new RenderingContext(new CanvasViewRenderer(), this.o.get2DCanvasContext(this.p)); this.q.hide(); this.o.appendToBody(this.q); } this.a.bt(); if (this.a._visibility == 1 && this.c) { this.q.hide(); this.c = false; return; } var d = null; if (this.a.content != null) { d = this.a.content; d.remove(); } this.r.removeChildren(); if (d != null) { var cont_ = this.r; var xPos_ = this.a.cr.x.toString() + "px"; var yPos_ = this.a.cr.y.toString() + "px"; cont_.setRawStyleProperty("left", xPos_); cont_.setRawStyleProperty("top", yPos_); this.r.append(d); } var e = this.a.aq; var f = 1; this.z(); if (e != null) { f = !isNaN_(e.b) ? e.b : 1; } var g = truncate(Math.ceil(this.a.a1 + (f * 2))); var h = truncate(Math.ceil(this.a.a0 + (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.p.setStyleProperty("width", g.toString() + "px"); this.p.setStyleProperty("height", h.toString() + "px"); this.p.setAttribute("width", i.toString()); this.p.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.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 : ((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.ac = k; var l = this.a.cz; var 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(); } var x_ = a + "px"; var y_ = b + "px"; var container_ = this.q; container_.setRawStyleProperty("left", x_); container_.setRawStyleProperty("top", y_); if (this.a._visibility == 0 && !this.c) { this.q.show(); this.c = true; } if (this.b.d && this.f != 1) { this.b.z(); } }; PointerTooltipView.prototype.v = function () { return this.a.ak.exportPointerTooltipData(this.a.cz, this.a.c0, this.ac, new Rect(0, 0, 0, this.a.a1, this.a.a0)); }; PointerTooltipView.prototype.m = function () { return this.f; }; PointerTooltipView.prototype.n = function () { return this.l; }; PointerTooltipView.prototype.d = function (a) { var b = this.g; var c = this.e; var d = this.ad(new Size(1, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)); if (d.width != b || d.height != c) { return true; } return false; }; PointerTooltipView.prototype.w = function () { this.o = null; this.q.hide(); this.q.remove(); this.q = null; this.s = null; this.u = null; this.t = null; this.q = null; this.p = null; this.r = null; }; PointerTooltipView.prototype.y = function () { this.q.hide(); }; PointerTooltipView.prototype.aa = function (a) { this.o = a; }; PointerTooltipView.prototype.x = function () { if (this.q != null) { this.q.hide(); this.q.remove(); this.q = null; } }; PointerTooltipView.$t = markType(PointerTooltipView, 'PointerTooltipView'); return PointerTooltipView; }(Base)); export { PointerTooltipView };