@hybridcore/ui 1.5.73 → 1.5.77

package/dist/components/charts/highlighting-line-data/index.js

@@ -1,6 +1,6 @@
 import { jsxs as we, jsx as W } from "react/jsx-runtime";
-import { S as oe, L as $, T as F, C as te, m as P, R as ie, k as se, X as ue, G as S, e as N, i as ne, l as Te, j as he, n as Pe, a as le, b as Fe, A as Le, c as Ae, d as De, D as Ce, f as Oe, V as Xe, h as $e, o as Ye, g as Se, p as re } from "../../../AxisRendererY-CFo972D5.js";
-import { useRef as ae, useLayoutEffect as Me, useEffect as je } from "react";
+import { S as oe, L as $, T as F, C as te, m as P, R as ie, k as se, X as ue, G as S, e as N, i as ne, l as Te, j as he, n as Pe, a as le, b as Fe, A as Le, c as De, d as Ae, D as Ce, f as Oe, V as Xe, h as $e, o as Ye, g as Se, p as re } from "../../../AxisRendererY-CFo972D5.js";
+import { useRef as ae, useLayoutEffect as Me } from "react";
 class V extends oe {
   constructor() {
     super(...arguments), Object.defineProperty(this, "itemContainers", {
@@ -87,35 +87,35 @@ class V extends oe {
     super.processDataItem(e);
     const t = this.makeItemContainer(e), i = this.get("nameField"), r = this.get("fillField"), h = this.get("strokeField");
     if (t) {
-      const d = this.get("clickTarget", "itemContainer"), n = e.dataContext;
-      n && n.set && n.set("legendDataItem", e), t._setDataItem(e), e.set("itemContainer", t);
+      const d = this.get("clickTarget", "itemContainer"), l = e.dataContext;
+      l && l.set && l.set("legendDataItem", e), t._setDataItem(e), e.set("itemContainer", t);
       const c = this.makeMarker();
       if (c) {
         t.children.push(c), c._setDataItem(e), e.set("marker", c);
         const s = this.get("useDefaultMarker"), o = c.children.push(this.makeMarkerRectangle());
         let f = e.get("fill"), p = e.get("stroke");
-        e.set("markerRectangle", o), n && n.get && (f = n.get(r, f), p = n.get(h, p)), p || (p = f), s ? n.on && (n.on(r, () => {
-          o.set("fill", n.get(r));
-        }), n.on(h, () => {
-          o.set("stroke", n.get(h));
-        })) : n && n.createLegendMarker && n.createLegendMarker(), o.setAll({ fill: f, stroke: p });
-        const m = n.component;
-        m && m.updateLegendMarker && m.updateLegendMarker(n);
+        e.set("markerRectangle", o), l && l.get && (f = l.get(r, f), p = l.get(h, p)), p || (p = f), s ? l.on && (l.on(r, () => {
+          o.set("fill", l.get(r));
+        }), l.on(h, () => {
+          o.set("stroke", l.get(h));
+        })) : l && l.createLegendMarker && l.createLegendMarker(), o.setAll({ fill: f, stroke: p });
+        const m = l.component;
+        m && m.updateLegendMarker && m.updateLegendMarker(l);
       }
-      const l = this.makeLabel();
-      if (l) {
-        t.children.push(l), l._setDataItem(e), e.set("label", l), l.text.on("text", () => {
-          t.setRaw("ariaLabel", l.text._getText() + (this.get("clickTarget") !== "none" ? "; " + this._t("Press ENTER to toggle") : "")), t.markDirtyAccessibility();
-        }), n && n.get && e.set("name", n.get(i));
+      const n = this.makeLabel();
+      if (n) {
+        t.children.push(n), n._setDataItem(e), e.set("label", n), n.text.on("text", () => {
+          t.setRaw("ariaLabel", n.text._getText() + (this.get("clickTarget") !== "none" ? "; " + this._t("Press ENTER to toggle") : "")), t.markDirtyAccessibility();
+        }), l && l.get && e.set("name", l.get(i));
         let s = e.get("name");
-        s && l.set("text", s);
+        s && n.set("text", s);
       }
       const a = this.makeValueLabel();
-      if (a && (t.children.push(a), a._setDataItem(e), e.set("valueLabel", a)), n && n.show && (n.on("visible", (s) => {
+      if (a && (t.children.push(a), a._setDataItem(e), e.set("valueLabel", a)), l && l.show && (l.on("visible", (s) => {
         t.set("disabled", !s);
-      }), n.get("visible") || t.set("disabled", !0), d != "none")) {
+      }), l.get("visible") || t.set("disabled", !0), d != "none")) {
         let s = t;
-        d == "marker" && (s = c), this._addClickEvents(s, n, e);
+        d == "marker" && (s = c), this._addClickEvents(s, l, e);
       }
       this.children.values.sort((s, o) => {
         const f = s.dataItem.dataContext, p = o.dataItem.dataContext;
@@ -127,7 +127,7 @@ class V extends oe {
             return -1;
         }
         return 0;
-      }), n && n.updateLegendValue && n.updateLegendValue();
+      }), l && l.updateLegendValue && l.updateLegendValue();
     }
   }
   _addClickEvents(e, t, i) {
@@ -157,8 +157,8 @@ class V extends oe {
     h && (this.markerRectangles.removeValue(h), h.dispose());
     let d = e.get("label");
     d && (this.labels.removeValue(d), d.dispose());
-    let n = e.get("valueLabel");
-    n && (this.valueLabels.removeValue(n), n.dispose());
+    let l = e.get("valueLabel");
+    l && (this.valueLabels.removeValue(l), l.dispose());
   }
 }
 Object.defineProperty(V, "className", {
@@ -178,13 +178,13 @@ function v(u) {
     return u;
   };
 }
-const q = Math.PI, Z = 2 * q, M = 1e-6, Re = Z - M;
+const q = Math.PI, Z = 2 * q, M = 1e-6, je = Z - M;
 function ce(u) {
   this._ += u[0];
   for (let e = 1, t = u.length; e < t; ++e)
     this._ += arguments[e] + u[e];
 }
-function Ee(u) {
+function Re(u) {
   let e = Math.floor(u);
   if (!(e >= 0)) throw new Error(`invalid digits: ${u}`);
   if (e > 15) return ce;
@@ -195,10 +195,10 @@ function Ee(u) {
       this._ += Math.round(arguments[r] * t) / t + i[r];
   };
 }
-class Ge {
+class Ee {
   constructor(e) {
     this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null, this._ = "", this._append = e == null ? ce : Ee(e);
+    this._x1 = this._y1 = null, this._ = "", this._append = e == null ? ce : Re(e);
   }
   moveTo(e, t) {
     this._append`M${this._x0 = this._x1 = +e},${this._y0 = this._y1 = +t}`;
@@ -217,20 +217,20 @@ class Ge {
   }
   arcTo(e, t, i, r, h) {
     if (e = +e, t = +t, i = +i, r = +r, h = +h, h < 0) throw new Error(`negative radius: ${h}`);
-    let d = this._x1, n = this._y1, c = i - e, l = r - t, a = d - e, s = n - t, o = a * a + s * s;
+    let d = this._x1, l = this._y1, c = i - e, n = r - t, a = d - e, s = l - t, o = a * a + s * s;
     if (this._x1 === null)
       this._append`M${this._x1 = e},${this._y1 = t}`;
-    else if (o > M) if (!(Math.abs(s * c - l * a) > M) || !h)
+    else if (o > M) if (!(Math.abs(s * c - n * a) > M) || !h)
       this._append`L${this._x1 = e},${this._y1 = t}`;
     else {
-      let f = i - d, p = r - n, m = c * c + l * l, b = f * f + p * p, k = Math.sqrt(m), x = Math.sqrt(o), y = h * Math.tan((q - Math.acos((m + o - b) / (2 * k * x))) / 2), _ = y / x, w = y / k;
-      Math.abs(_ - 1) > M && this._append`L${e + _ * a},${t + _ * s}`, this._append`A${h},${h},0,0,${+(s * f > a * p)},${this._x1 = e + w * c},${this._y1 = t + w * l}`;
+      let f = i - d, p = r - l, m = c * c + n * n, b = f * f + p * p, k = Math.sqrt(m), x = Math.sqrt(o), y = h * Math.tan((q - Math.acos((m + o - b) / (2 * k * x))) / 2), _ = y / x, w = y / k;
+      Math.abs(_ - 1) > M && this._append`L${e + _ * a},${t + _ * s}`, this._append`A${h},${h},0,0,${+(s * f > a * p)},${this._x1 = e + w * c},${this._y1 = t + w * n}`;
     }
   }
   arc(e, t, i, r, h, d) {
     if (e = +e, t = +t, i = +i, d = !!d, i < 0) throw new Error(`negative radius: ${i}`);
-    let n = i * Math.cos(r), c = i * Math.sin(r), l = e + n, a = t + c, s = 1 ^ d, o = d ? r - h : h - r;
-    this._x1 === null ? this._append`M${l},${a}` : (Math.abs(this._x1 - l) > M || Math.abs(this._y1 - a) > M) && this._append`L${l},${a}`, i && (o < 0 && (o = o % Z + Z), o > Re ? this._append`A${i},${i},0,1,${s},${e - n},${t - c}A${i},${i},0,1,${s},${this._x1 = l},${this._y1 = a}` : o > M && this._append`A${i},${i},0,${+(o >= q)},${s},${this._x1 = e + i * Math.cos(h)},${this._y1 = t + i * Math.sin(h)}`);
+    let l = i * Math.cos(r), c = i * Math.sin(r), n = e + l, a = t + c, s = 1 ^ d, o = d ? r - h : h - r;
+    this._x1 === null ? this._append`M${n},${a}` : (Math.abs(this._x1 - n) > M || Math.abs(this._y1 - a) > M) && this._append`L${n},${a}`, i && (o < 0 && (o = o % Z + Z), o > je ? this._append`A${i},${i},0,1,${s},${e - l},${t - c}A${i},${i},0,1,${s},${this._x1 = n},${this._y1 = a}` : o > M && this._append`A${i},${i},0,${+(o >= q)},${s},${this._x1 = e + i * Math.cos(h)},${this._y1 = t + i * Math.sin(h)}`);
   }
   rect(e, t, i, r) {
     this._append`M${this._x0 = this._x1 = +e},${this._y0 = this._y1 = +t}h${i = +i}v${+r}h${-i}Z`;
@@ -251,7 +251,7 @@ function fe(u) {
       e = i;
     }
     return u;
-  }, () => new Ge(e);
+  }, () => new Ee(e);
 }
 function de(u) {
   return typeof u == "object" && "length" in u ? u : Array.from(u);
@@ -295,72 +295,72 @@ function be(u) {
   return u[1];
 }
 function ke(u, e) {
-  var t = v(!0), i = null, r = me, h = null, d = fe(n);
+  var t = v(!0), i = null, r = me, h = null, d = fe(l);
   u = typeof u == "function" ? u : u === void 0 ? ge : v(u), e = typeof e == "function" ? e : e === void 0 ? be : v(e);
-  function n(c) {
-    var l, a = (c = de(c)).length, s, o = !1, f;
-    for (i == null && (h = r(f = d())), l = 0; l <= a; ++l)
-      !(l < a && t(s = c[l], l, c)) === o && ((o = !o) ? h.lineStart() : h.lineEnd()), o && h.point(+u(s, l, c), +e(s, l, c));
+  function l(c) {
+    var n, a = (c = de(c)).length, s, o = !1, f;
+    for (i == null && (h = r(f = d())), n = 0; n <= a; ++n)
+      !(n < a && t(s = c[n], n, c)) === o && ((o = !o) ? h.lineStart() : h.lineEnd()), o && h.point(+u(s, n, c), +e(s, n, c));
     if (f) return h = null, f + "" || null;
   }
-  return n.x = function(c) {
-    return arguments.length ? (u = typeof c == "function" ? c : v(+c), n) : u;
-  }, n.y = function(c) {
-    return arguments.length ? (e = typeof c == "function" ? c : v(+c), n) : e;
-  }, n.defined = function(c) {
-    return arguments.length ? (t = typeof c == "function" ? c : v(!!c), n) : t;
-  }, n.curve = function(c) {
-    return arguments.length ? (r = c, i != null && (h = r(i)), n) : r;
-  }, n.context = function(c) {
-    return arguments.length ? (c == null ? i = h = null : h = r(i = c), n) : i;
-  }, n;
+  return l.x = function(c) {
+    return arguments.length ? (u = typeof c == "function" ? c : v(+c), l) : u;
+  }, l.y = function(c) {
+    return arguments.length ? (e = typeof c == "function" ? c : v(+c), l) : e;
+  }, l.defined = function(c) {
+    return arguments.length ? (t = typeof c == "function" ? c : v(!!c), l) : t;
+  }, l.curve = function(c) {
+    return arguments.length ? (r = c, i != null && (h = r(i)), l) : r;
+  }, l.context = function(c) {
+    return arguments.length ? (c == null ? i = h = null : h = r(i = c), l) : i;
+  }, l;
 }
-function Ne(u, e, t) {
-  var i = null, r = v(!0), h = null, d = me, n = null, c = fe(l);
+function Ge(u, e, t) {
+  var i = null, r = v(!0), h = null, d = me, l = null, c = fe(n);
   u = typeof u == "function" ? u : u === void 0 ? ge : v(+u), e = typeof e == "function" ? e : v(e === void 0 ? 0 : +e), t = typeof t == "function" ? t : t === void 0 ? be : v(+t);
-  function l(s) {
+  function n(s) {
     var o, f, p, m = (s = de(s)).length, b, k = !1, x, y = new Array(m), _ = new Array(m);
-    for (h == null && (n = d(x = c())), o = 0; o <= m; ++o) {
+    for (h == null && (l = d(x = c())), o = 0; o <= m; ++o) {
       if (!(o < m && r(b = s[o], o, s)) === k)
         if (k = !k)
-          f = o, n.areaStart(), n.lineStart();
+          f = o, l.areaStart(), l.lineStart();
         else {
-          for (n.lineEnd(), n.lineStart(), p = o - 1; p >= f; --p)
-            n.point(y[p], _[p]);
-          n.lineEnd(), n.areaEnd();
+          for (l.lineEnd(), l.lineStart(), p = o - 1; p >= f; --p)
+            l.point(y[p], _[p]);
+          l.lineEnd(), l.areaEnd();
         }
-      k && (y[o] = +u(b, o, s), _[o] = +e(b, o, s), n.point(i ? +i(b, o, s) : y[o], t ? +t(b, o, s) : _[o]));
+      k && (y[o] = +u(b, o, s), _[o] = +e(b, o, s), l.point(i ? +i(b, o, s) : y[o], t ? +t(b, o, s) : _[o]));
     }
-    if (x) return n = null, x + "" || null;
+    if (x) return l = null, x + "" || null;
   }
   function a() {
     return ke().defined(r).curve(d).context(h);
   }
-  return l.x = function(s) {
-    return arguments.length ? (u = typeof s == "function" ? s : v(+s), i = null, l) : u;
-  }, l.x0 = function(s) {
-    return arguments.length ? (u = typeof s == "function" ? s : v(+s), l) : u;
-  }, l.x1 = function(s) {
-    return arguments.length ? (i = s == null ? null : typeof s == "function" ? s : v(+s), l) : i;
-  }, l.y = function(s) {
-    return arguments.length ? (e = typeof s == "function" ? s : v(+s), t = null, l) : e;
-  }, l.y0 = function(s) {
-    return arguments.length ? (e = typeof s == "function" ? s : v(+s), l) : e;
-  }, l.y1 = function(s) {
-    return arguments.length ? (t = s == null ? null : typeof s == "function" ? s : v(+s), l) : t;
-  }, l.lineX0 = l.lineY0 = function() {
+  return n.x = function(s) {
+    return arguments.length ? (u = typeof s == "function" ? s : v(+s), i = null, n) : u;
+  }, n.x0 = function(s) {
+    return arguments.length ? (u = typeof s == "function" ? s : v(+s), n) : u;
+  }, n.x1 = function(s) {
+    return arguments.length ? (i = s == null ? null : typeof s == "function" ? s : v(+s), n) : i;
+  }, n.y = function(s) {
+    return arguments.length ? (e = typeof s == "function" ? s : v(+s), t = null, n) : e;
+  }, n.y0 = function(s) {
+    return arguments.length ? (e = typeof s == "function" ? s : v(+s), n) : e;
+  }, n.y1 = function(s) {
+    return arguments.length ? (t = s == null ? null : typeof s == "function" ? s : v(+s), n) : t;
+  }, n.lineX0 = n.lineY0 = function() {
     return a().x(u).y(e);
-  }, l.lineY1 = function() {
+  }, n.lineY1 = function() {
     return a().x(u).y(t);
-  }, l.lineX1 = function() {
+  }, n.lineX1 = function() {
     return a().x(i).y(e);
-  }, l.defined = function(s) {
-    return arguments.length ? (r = typeof s == "function" ? s : v(!!s), l) : r;
-  }, l.curve = function(s) {
-    return arguments.length ? (d = s, h != null && (n = d(h)), l) : d;
-  }, l.context = function(s) {
-    return arguments.length ? (s == null ? h = n = null : n = d(h = s), l) : h;
-  }, l;
+  }, n.defined = function(s) {
+    return arguments.length ? (r = typeof s == "function" ? s : v(!!s), n) : r;
+  }, n.curve = function(s) {
+    return arguments.length ? (d = s, h != null && (l = d(h)), n) : d;
+  }, n.context = function(s) {
+    return arguments.length ? (s == null ? h = l = null : l = d(h = s), n) : h;
+  }, n;
 }
 class I extends ue {
   constructor() {
@@ -378,7 +378,7 @@ class I extends ue {
       enumerable: !0,
       configurable: !0,
       writable: !0,
-      value: Ne()
+      value: Ge()
     }), Object.defineProperty(this, "_legendStroke", {
       enumerable: !0,
       configurable: !0,
@@ -496,34 +496,34 @@ class I extends ue {
             f.setPrivate("visible", !1);
           });
         });
-        let i = this.startIndex(), r = this.strokes.template.get("templateField"), h = this.fills.template.get("templateField"), d = !0, n = !0;
-        r && (d = !1), h && (n = !1);
+        let i = this.startIndex(), r = this.strokes.template.get("templateField"), h = this.fills.template.get("templateField"), d = !0, l = !0;
+        r && (d = !1), h && (l = !1);
         for (let a = i - 1; a >= 0; a--) {
           let s = this.dataItems[a], o = !0, f = s.dataContext;
-          if (r && f[r] && (d = !0), h && f[h] && (n = !0), N(this._valueFields, (p) => {
+          if (r && f[r] && (d = !0), h && f[h] && (l = !0), N(this._valueFields, (p) => {
             le(s.get(p)) || (o = !1);
-          }), o && d && n) {
+          }), o && d && l) {
             i = a;
             break;
           }
         }
-        let c = this.dataItems.length, l = this.endIndex();
-        if (l < c) {
-          l++;
-          for (let a = l; a < c; a++) {
+        let c = this.dataItems.length, n = this.endIndex();
+        if (n < c) {
+          n++;
+          for (let a = n; a < c; a++) {
             let s = this.dataItems[a], o = !0;
             if (N(this._valueFields, (f) => {
               le(s.get(f)) || (o = !1);
             }), o) {
-              l = a + 1;
+              n = a + 1;
               break;
             }
           }
         }
-        if (i > 0 && i--, this._endIndex = l, this._clearGraphics(), this._sindex = 0, this._dindex = i, this.dataItems.length == 1)
+        if (i > 0 && i--, this._endIndex = n, this._clearGraphics(), this._sindex = 0, this._dindex = i, this.dataItems.length == 1)
           this._startSegment(0);
         else
-          for (; this._dindex < l - 1; )
+          for (; this._dindex < n - 1; )
             this._startSegment(this._dindex), this._sindex++;
       }
     } else
@@ -537,16 +537,16 @@ class I extends ue {
   }
   _startSegment(e) {
     let t = this._endIndex, i = t;
-    const r = this.get("autoGapCount"), h = this.get("connect"), d = this.makeFill(this.fills), n = this._fillTemplate, c = this.fills.template;
-    n && n != c && (d.template = n), d.setPrivate("visible", !0);
-    const l = this.makeStroke(this.strokes), a = this._strokeTemplate;
-    a && a != this.strokes.template && (l.template = a), l.setPrivate("visible", !0);
+    const r = this.get("autoGapCount"), h = this.get("connect"), d = this.makeFill(this.fills), l = this._fillTemplate, c = this.fills.template;
+    l && l != c && (d.template = l), d.setPrivate("visible", !0);
+    const n = this.makeStroke(this.strokes), a = this._strokeTemplate;
+    a && a != this.strokes.template && (n.template = a), n.setPrivate("visible", !0);
     let s = this.get("xAxis"), o = this.get("yAxis"), f = this.get("baseAxis"), p = this.get("vcx", 1), m = this.get("vcy", 1), b = this._xField, k = this._yField, x = this._xOpenField, y = this._yOpenField;
     const _ = this.get("openValueXField"), w = this.get("openValueYField");
     _ || (x = this._xField), w || (y = this._yField);
-    const Y = this.get("stacked"), A = s.basePosition(), L = o.basePosition();
-    let D;
-    f === o ? D = this._yField : D = this._xField;
+    const Y = this.get("stacked"), D = s.basePosition(), L = o.basePosition();
+    let A;
+    f === o ? A = this._yField : A = this._xField;
     const O = [];
     let X = [];
     O.push(X);
@@ -562,7 +562,7 @@ class I extends ue {
       segments: O,
       stacked: Y,
       getOpen: ee,
-      basePosX: A,
+      basePosX: D,
       basePosY: L,
       fillVisible: K,
       xField: b,
@@ -592,7 +592,7 @@ class I extends ue {
             i = T;
             break;
           } else
-            E = g, l.template = g;
+            E = g, n.template = g;
       }
       if (Q) {
         let g = C.dataContext[Q];
@@ -605,10 +605,10 @@ class I extends ue {
       }
       if (!h) {
         let g = this.dataItems[T + 1];
-        g && f.shouldGap(C, g, r, D) && (X = [], O.push(X), z.points = X);
+        g && f.shouldGap(C, g, r, A) && (X = [], O.push(X), z.points = X);
       }
     }
-    d.setRaw("userData", [e, T]), l.setRaw("userData", [e, T]), T === t && this._endLine(X, O[0][0]), l && this._drawStroke(l, O), d && this._drawFill(d, O), this.axisRanges.each((C) => {
+    d.setRaw("userData", [e, T]), n.setRaw("userData", [e, T]), T === t && this._endLine(X, O[0][0]), n && this._drawStroke(n, O), d && this._drawFill(d, O), this.axisRanges.each((C) => {
       const j = C.container, H = C.fills, g = this.makeFill(H);
       j && j.children.push(g), g.setPrivate("visible", !0), this._drawFill(g, O);
       const ye = C.strokes, R = this.makeStroke(ye);
@@ -617,21 +617,21 @@ class I extends ue {
   }
   _getPoints(e, t) {
     let i = t.points, r = e.get("locationX", t.locationX), h = e.get("locationY", t.locationY);
-    const d = this.get("exactLocationX", !1), n = this.get("exactLocationY", !1);
-    let c = t.xAxis.getDataItemPositionX(e, t.xField, r, t.vcx, d), l = t.yAxis.getDataItemPositionY(e, t.yField, h, t.vcy, n);
+    const d = this.get("exactLocationX", !1), l = this.get("exactLocationY", !1);
+    let c = t.xAxis.getDataItemPositionX(e, t.xField, r, t.vcx, d), n = t.yAxis.getDataItemPositionY(e, t.yField, h, t.vcy, l);
     if (this._shouldInclude(c)) {
-      const a = this.getPoint(c, l), s = [a.x, a.y];
+      const a = this.getPoint(c, n), s = [a.x, a.y];
       if (a.x += this._x, a.y += this._y, e.set("point", a), t.fillVisible) {
-        let o = c, f = l;
+        let o = c, f = n;
         if (t.baseAxis === t.xAxis ? f = t.basePosY : t.baseAxis === t.yAxis && (o = t.basePosX), t.getOpen) {
           let m = e.get(t.xOpenField), b = e.get(t.yOpenField);
           if (m != null && b != null) {
             let k = e.get("openLocationX", t.openLocationX), x = e.get("openLocationY", t.openLocationY);
             if (t.stacked) {
               let y = e.get("stackToItemX"), _ = e.get("stackToItemY");
-              y ? (o = t.xAxis.getDataItemPositionX(y, t.xField, k, y.component.get("vcx"), d), ne(o) && (o = t.basePosX)) : t.yAxis === t.baseAxis ? o = t.basePosX : o = t.xAxis.getDataItemPositionX(e, t.xOpenField, k, t.vcx, d), _ ? (f = t.yAxis.getDataItemPositionY(_, t.yField, x, _.component.get("vcy"), n), ne(f) && (f = t.basePosY)) : t.xAxis === t.baseAxis ? f = t.basePosY : f = t.yAxis.getDataItemPositionY(e, t.yOpenField, x, t.vcy, n);
+              y ? (o = t.xAxis.getDataItemPositionX(y, t.xField, k, y.component.get("vcx"), d), ne(o) && (o = t.basePosX)) : t.yAxis === t.baseAxis ? o = t.basePosX : o = t.xAxis.getDataItemPositionX(e, t.xOpenField, k, t.vcx, d), _ ? (f = t.yAxis.getDataItemPositionY(_, t.yField, x, _.component.get("vcy"), l), ne(f) && (f = t.basePosY)) : t.xAxis === t.baseAxis ? f = t.basePosY : f = t.yAxis.getDataItemPositionY(e, t.yOpenField, x, t.vcy, l);
             } else
-              o = t.xAxis.getDataItemPositionX(e, t.xOpenField, k, t.vcx, d), f = t.yAxis.getDataItemPositionY(e, t.yOpenField, x, t.vcy, n);
+              o = t.xAxis.getDataItemPositionX(e, t.xOpenField, k, t.vcx, d), f = t.yAxis.getDataItemPositionY(e, t.yOpenField, x, t.vcy, l);
           }
         }
         let p = this.getPoint(o, f);
@@ -684,14 +684,14 @@ class I extends ue {
         themeTags: ["line", "series", "legend", "marker", "fill"]
       }, [this.fills.template]));
       this._legendFill = d;
-      const n = this._root.interfaceColors.get("disabled");
-      if (h.states.create("disabled", { fill: n, stroke: n }), d.states.create("disabled", { fill: n, stroke: n }), this.bullets.length > 0) {
+      const l = this._root.interfaceColors.get("disabled");
+      if (h.states.create("disabled", { fill: l, stroke: l }), d.states.create("disabled", { fill: l, stroke: l }), this.bullets.length > 0) {
         const c = this.bullets.getIndex(0);
         if (c) {
-          const l = c(i._root, this, new Pe(this, { legend: !0 }, {}));
-          if (l) {
-            const a = l.get("sprite");
-            a instanceof S && a.states.create("disabled", { fill: n, stroke: n }), a && (a.setAll({
+          const n = c(i._root, this, new Pe(this, { legend: !0 }, {}));
+          if (n) {
+            const a = n.get("sprite");
+            a instanceof S && a.states.create("disabled", { fill: l, stroke: l }), a && (a.setAll({
               tooltipText: void 0,
               tooltipHTML: void 0,
               focusable: void 0,
@@ -718,7 +718,7 @@ Object.defineProperty(I, "classNames", {
   writable: !0,
   value: ue.classNames.concat([I.className])
 });
-function He({
+function ze({
   seriesData: u,
   height: e = "500px",
   width: t = "100%",
@@ -727,12 +727,12 @@ function He({
   loading: h = !1,
   emptyMessage: d = "No data available"
 }) {
-  const n = ae(null), c = ae(null);
+  const l = ae(null), c = ae(null);
   return Me(() => {
-    const l = Fe.new(i);
-    c.current = l, l.setThemes([Le.new(l)]);
-    const a = l.container.children.push(
-      Ae.new(l, {
+    const n = Fe.new(i);
+    c.current = n, n.setThemes([Le.new(n)]);
+    const a = n.container.children.push(
+      De.new(n, {
         panX: !0,
         panY: !0,
         wheelX: "panX",
@@ -740,37 +740,36 @@ function He({
         pinchZoomX: !0
       })
     );
-    n.current = a, a.set(
+    l.current = a, a.set(
       "cursor",
-      De.new(l, {
+      Ae.new(n, {
         behavior: "zoomX"
       })
     ).lineY.set("visible", !1);
     const s = a.xAxes.push(
-      Ce.new(l, {
+      Ce.new(n, {
         maxDeviation: 0.3,
         baseInterval: { timeUnit: "day", count: 1 },
-        renderer: Oe.new(l, {
+        renderer: Oe.new(n, {
           minorGridEnabled: !0
         })
       })
     ), o = a.yAxes.push(
-      Xe.new(l, {
-        renderer: $e.new(l, {})
+      Xe.new(n, {
+        renderer: $e.new(n, {})
       })
-    ), f = [], p = Ye.new(l, {});
+    ), f = [], p = Ye.new(n, {});
     u.forEach((w, Y) => {
-      const A = w.color ? he(w.color) : p.getIndex(Y), L = a.series.push(
-        I.new(l, {
+      const D = w.color ? he(w.color) : p.getIndex(Y), L = a.series.push(
+        I.new(n, {
           name: w.name,
           xAxis: s,
           yAxis: o,
           valueYField: "value",
           valueXField: "date",
-          categoryXField: "date",
-          stroke: A,
-          fill: A,
-          tooltip: Se.new(l, {
+          stroke: D,
+          fill: D,
+          tooltip: Se.new(n, {
             labelText: "{name}: {valueY}"
           })
         })
@@ -781,37 +780,30 @@ function He({
     });
     let m = null;
     r && (m = a.children.push(
-      V.new(l, {
+      V.new(n, {
         centerX: re(50),
         x: re(50),
-        layout: l.horizontalLayout
+        layout: n.horizontalLayout
       })
     ), m.data.setAll(a.series.values));
     const b = 1, k = 0.2, x = 4, y = (w) => {
       var L;
-      const A = (L = w.target.dataItem) == null ? void 0 : L.dataContext;
-      A && (A.strokes.template.set("strokeOpacity", 1), A.strokes.template.set("strokeWidth", x), f.forEach((D) => {
-        D !== A && (D.strokes.template.set("strokeOpacity", k), D.strokes.template.set("strokeWidth", 1));
+      const D = (L = w.target.dataItem) == null ? void 0 : L.dataContext;
+      D && (D.strokes.template.set("strokeOpacity", 1), D.strokes.template.set("strokeWidth", x), f.forEach((A) => {
+        A !== D && (A.strokes.template.set("strokeOpacity", k), A.strokes.template.set("strokeWidth", 1));
       }));
     }, _ = (w) => {
       var L;
-      ((L = w.target.dataItem) == null ? void 0 : L.dataContext) && f.forEach((D) => {
-        D.strokes.template.set("strokeOpacity", b), D.strokes.template.set("strokeWidth", 2);
+      ((L = w.target.dataItem) == null ? void 0 : L.dataContext) && f.forEach((A) => {
+        A.strokes.template.set("strokeOpacity", b), A.strokes.template.set("strokeWidth", 2);
       });
     };
     return m && (m.markers.template.events.on("pointerover", y), m.markers.template.events.on("pointerout", _)), a.appear(1e3, 100), f.forEach((w, Y) => {
       w.appear(1e3, 100 * (Y + 1));
     }), () => {
-      l.dispose();
+      n.dispose();
     };
-  }, []), je(() => {
-    n.current && c.current && (n.current.series.clear(), u.forEach((l, a) => {
-      const s = n.current.series.getIndex(
-        a
-      );
-      s && s.data.setAll(l.data);
-    }));
-  }, [u]), /* @__PURE__ */ we("div", { style: { position: "relative", width: t, height: e }, children: [
+  }, [i, u, r]), /* @__PURE__ */ we("div", { style: { position: "relative", width: t, height: e }, children: [
     /* @__PURE__ */ W("div", { id: i, style: { width: "100%", height: "100%" } }),
     h && /* @__PURE__ */ W(
       "div",
@@ -847,5 +839,5 @@ function He({
   ] });
 }
 export {
-  He as HighlightLineChart
+  ze as HighlightLineChart
 };

package/dist/components/metric-card/index.js

@@ -0,0 +1,170 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { TrendingUp as w, TrendingDown as v, Remove as S } from "@mui/icons-material";
+import { useTheme as C, Card as z, Box as o, Stack as m, Typography as c, alpha as t } from "@mui/material";
+const V = ({
+  label: g,
+  value: h,
+  change: d,
+  changeType: u = "percentage",
+  trend: l,
+  icon: n,
+  iconPosition: s = "right",
+  description: p,
+  variant: b = "default",
+  className: x
+}) => {
+  const e = C(), f = () => l === "up" ? /* @__PURE__ */ r(w, { sx: { fontSize: 16 } }) : l === "down" ? /* @__PURE__ */ r(v, { sx: { fontSize: 16 } }) : /* @__PURE__ */ r(S, { sx: { fontSize: 16 } }), y = () => l === "up" ? {
+    color: e.palette.success.main,
+    bgcolor: t(e.palette.success.main, 0.1)
+  } : l === "down" ? {
+    color: e.palette.error.main,
+    bgcolor: t(e.palette.error.main, 0.1)
+  } : {
+    color: e.palette.text.secondary,
+    bgcolor: e.palette.action.hover
+  };
+  return /* @__PURE__ */ i(
+    z,
+    {
+      sx: { ...(() => {
+        const a = {
+          p: 3,
+          borderRadius: 2,
+          boxShadow: 1,
+          transition: "all 0.3s",
+          "&:hover": { boxShadow: 3 },
+          border: 1
+        };
+        switch (b) {
+          case "primary":
+            return {
+              ...a,
+              bgcolor: t(e.palette.primary.main, 0.05),
+              borderColor: t(e.palette.primary.main, 0.2)
+            };
+          case "success":
+            return {
+              ...a,
+              bgcolor: t(e.palette.success.main, 0.05),
+              borderColor: t(e.palette.success.main, 0.2)
+            };
+          case "warning":
+            return {
+              ...a,
+              bgcolor: t(e.palette.warning.main, 0.05),
+              borderColor: t(e.palette.warning.main, 0.2)
+            };
+          case "danger":
+            return {
+              ...a,
+              bgcolor: t(e.palette.error.main, 0.05),
+              borderColor: t(e.palette.error.main, 0.2)
+            };
+          default:
+            return {
+              ...a,
+              bgcolor: "background.paper",
+              borderColor: "divider"
+            };
+        }
+      })(), position: "relative", overflow: "hidden" },
+      className: x,
+      children: [
+        n && s === "watermark" && /* @__PURE__ */ r(
+          o,
+          {
+            sx: {
+              position: "absolute",
+              right: -20,
+              bottom: -20,
+              opacity: 0.05,
+              transform: "rotate(-15deg)",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ r(n, { sx: { fontSize: 120, color: "text.primary" } })
+          }
+        ),
+        /* @__PURE__ */ i(
+          m,
+          {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            children: [
+              n && s === "left" && /* @__PURE__ */ r(o, { mr: 2, children: /* @__PURE__ */ r(
+                o,
+                {
+                  sx: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    bgcolor: "action.hover",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                }
+              ) }),
+              /* @__PURE__ */ i(o, { flex: 1, children: [
+                /* @__PURE__ */ r(c, { variant: "subtitle2", color: "text.secondary", mb: 0.5, children: g }),
+                /* @__PURE__ */ r(
+                  c,
+                  {
+                    variant: "h4",
+                    fontWeight: "bold",
+                    color: "text.primary",
+                    mb: 1,
+                    children: h
+                  }
+                ),
+                d !== void 0 && /* @__PURE__ */ i(m, { direction: "row", alignItems: "center", spacing: 1, children: [
+                  /* @__PURE__ */ i(
+                    o,
+                    {
+                      sx: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 0.5,
+                        px: 1,
+                        py: 0.5,
+                        borderRadius: 10,
+                        typography: "caption",
+                        fontWeight: "medium",
+                        ...y()
+                      },
+                      children: [
+                        f(),
+                        d,
+                        u === "percentage" ? "%" : ""
+                      ]
+                    }
+                  ),
+                  p && /* @__PURE__ */ r(c, { variant: "caption", color: "text.secondary", children: p })
+                ] })
+              ] }),
+              n && s === "right" && /* @__PURE__ */ r(o, { ml: 2, children: /* @__PURE__ */ r(
+                o,
+                {
+                  sx: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    bgcolor: "action.hover",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ r(n, { sx: { fontSize: 24, color: "text.secondary" } })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as MetricCard
+};

package/dist/main.d.ts

@@ -663,6 +663,32 @@ export declare namespace Map_2 {
     }
 }
 
+export declare const MetricCard: ({ label, value, change, changeType, trend, icon: Icon, iconPosition, description, variant, className, }: MetricCardProps) => JSX_2.Element;
+
+export declare interface MetricCardProps {
+    label: string;
+    value: string | number;
+    change?: number;
+    changeType?: MetricChangeType;
+    trend?: MetricTrend;
+    icon?: React.ElementType;
+    iconPosition?: "left" | "right" | "watermark";
+    description?: string;
+    variant?: MetricVariant;
+    className?: string;
+}
+
+export declare type MetricChangeType = "percentage" | "absolute";
+
+export declare type MetricTrend = "up" | "down" | "neutral";
+
+export declare type MetricVariant =
+| "default"
+| "primary"
+| "success"
+| "warning"
+| "danger";
+
 declare type MousePosition = {
     top: number;
     left: number;

package/dist/main.js

@@ -26,17 +26,18 @@ import { S as Oe } from "./utils-Bq0ye5vf.js";
 import { LinearIndicator as Se } from "./components/linear-indicator/index.js";
 import { Loading as He } from "./components/loading/index.js";
 import { i as Be } from "./index-JrtqxUdI.js";
-import { PaginatedList as Ie } from "./components/paginated-list/index.js";
-import { PhoneInput as je } from "./components/phone-input/index.js";
-import { SearchInput as We } from "./components/search-input/index.js";
-import { Tabs as Ue } from "./components/tabs/index.js";
-import { TemplateFilters as Ze } from "./components/template-filters/index.js";
-import { TemplateForm as Je } from "./components/template-form/index.js";
-import { TemplatePropertyFilters as _e } from "./components/template-property-filters/index.js";
-import { Property as Ge } from "./components/template-property-filters/property.js";
-import { TreeSelect as Qe } from "./components/tree-select/index.js";
-import { TreeViewFilter as Xe } from "./components/treeview-filter/index.js";
-import { Uploader as er } from "./components/uploader/index.js";
+import { MetricCard as Ie } from "./components/metric-card/index.js";
+import { PaginatedList as je } from "./components/paginated-list/index.js";
+import { PhoneInput as We } from "./components/phone-input/index.js";
+import { SearchInput as Ue } from "./components/search-input/index.js";
+import { Tabs as Ze } from "./components/tabs/index.js";
+import { TemplateFilters as Je } from "./components/template-filters/index.js";
+import { TemplateForm as _e } from "./components/template-form/index.js";
+import { TemplatePropertyFilters as Ge } from "./components/template-property-filters/index.js";
+import { Property as Qe } from "./components/template-property-filters/property.js";
+import { TreeSelect as Xe } from "./components/tree-select/index.js";
+import { TreeViewFilter as er } from "./components/treeview-filter/index.js";
+import { Uploader as sr } from "./components/uploader/index.js";
 import { a as dt } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
 import C from "dayjs";
 import { h as U, j as z } from "./createTheme-DrgvKMA_.js";
@@ -418,19 +419,20 @@ export {
   He as Loading,
   Ct as LocalizationProvider,
   Be as Map,
-  Ie as PaginatedList,
-  je as PhoneInput,
-  Ge as PropertyFilterInput,
-  We as SearchInput,
+  Ie as MetricCard,
+  je as PaginatedList,
+  We as PhoneInput,
+  Qe as PropertyFilterInput,
+  Ue as SearchInput,
   ie as SecurityLevel,
-  Ue as Tabs,
-  Ze as TemplateFilters,
-  Je as TemplateForm,
-  _e as TemplatePropertyFilters,
+  Ze as Tabs,
+  Je as TemplateFilters,
+  _e as TemplateForm,
+  Ge as TemplatePropertyFilters,
   Ht as ThemeProvider,
-  Qe as TreeSelect,
-  Xe as TreeViewFilter,
-  er as Uploader,
+  Xe as TreeSelect,
+  er as TreeViewFilter,
+  sr as Uploader,
   Rt as alert,
   Xt as confirm,
   Ft as createTheme

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.73",
+  "version": "1.5.77",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",