@hybridcore/ui 1.5.89 → 1.6.0

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

@@ -1,209 +1,42 @@
-import { S as V, L as C, T, C as A, m as f, R as O, a as X, b as W, A as z, X as B, c as G, V as I, d as U, e as Z, f as q, g as J, p as M } from "../../../AxisRendererY-kADUad00.js";
-import { useThemeProps as K } from "@mui/material";
-import { useRef as R, useLayoutEffect as Q } from "react";
-import { X as $, D as ee } from "../../../DateAxis-CMum47iz.js";
-import { L as te } from "../../../LineSeries-CfcpoYla.js";
-class D extends V {
-  constructor() {
-    super(...arguments), Object.defineProperty(this, "itemContainers", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: this.addDisposer(new C(T.new({}), () => A._new(this._root, {
-        themeTags: f(this.itemContainers.template.get("themeTags", []), ["legend", "item"]),
-        themeTagsSelf: f(this.itemContainers.template.get("themeTagsSelf", []), ["itemcontainer"]),
-        background: O.new(this._root, {
-          themeTags: f(this.itemContainers.template.get("themeTags", []), ["legend", "item", "background"]),
-          themeTagsSelf: f(this.itemContainers.template.get("themeTagsSelf", []), ["itemcontainer"])
-        })
-      }, [this.itemContainers.template])))
-    }), Object.defineProperty(this, "markers", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: this.addDisposer(new C(T.new({}), () => A._new(this._root, {
-        themeTags: f(this.markers.template.get("themeTags", []), ["legend", "marker"])
-      }, [this.markers.template])))
-    }), Object.defineProperty(this, "labels", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: this.addDisposer(new C(T.new({}), () => X._new(this._root, {
-        themeTags: f(this.labels.template.get("themeTags", []), ["legend", "label"])
-      }, [this.labels.template])))
-    }), Object.defineProperty(this, "valueLabels", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: this.addDisposer(new C(T.new({}), () => X._new(this._root, {
-        themeTags: f(this.valueLabels.template.get("themeTags", []), ["legend", "label", "value"])
-      }, [this.valueLabels.template])))
-    }), Object.defineProperty(this, "markerRectangles", {
-      enumerable: !0,
-      configurable: !0,
-      writable: !0,
-      value: this.addDisposer(new C(T.new({}), () => O._new(this._root, {
-        themeTags: f(this.markerRectangles.template.get("themeTags", []), ["legend", "marker", "rectangle"])
-      }, [this.markerRectangles.template])))
-    });
-  }
-  _afterNew() {
-    this._settings.themeTags = f(this._settings.themeTags, ["legend"]), this.fields.push("name", "stroke", "fill"), super._afterNew();
-  }
-  /**
-   * @ignore
-   */
-  makeItemContainer(e) {
-    const t = this.children.push(this.itemContainers.make());
-    return t._setDataItem(e), this.itemContainers.push(t), t.states.create("disabled", {}), t;
-  }
-  /**
-   * @ignore
-   */
-  makeMarker() {
-    const e = this.markers.make();
-    return this.markers.push(e), e.states.create("disabled", {}), e;
-  }
-  /**
-   * @ignore
-   */
-  makeLabel() {
-    const e = this.labels.make();
-    return e.states.create("disabled", {}), e;
-  }
-  /**
-   * @ignore
-   */
-  makeValueLabel() {
-    const e = this.valueLabels.make();
-    return e.states.create("disabled", {}), e;
-  }
-  /**
-   * @ignore
-   */
-  makeMarkerRectangle() {
-    const e = this.markerRectangles.make();
-    return e.states.create("disabled", {}), e;
-  }
-  processDataItem(e) {
-    super.processDataItem(e);
-    const t = this.makeItemContainer(e), c = this.get("nameField"), r = this.get("fillField"), l = this.get("strokeField");
-    if (t) {
-      const o = this.get("clickTarget", "itemContainer"), s = e.dataContext;
-      s && s.set && s.set("legendDataItem", e), t._setDataItem(e), e.set("itemContainer", t);
-      const m = this.makeMarker();
-      if (m) {
-        t.children.push(m), m._setDataItem(e), e.set("marker", m);
-        const i = this.get("useDefaultMarker"), k = m.children.push(this.makeMarkerRectangle());
-        let g = e.get("fill"), n = e.get("stroke");
-        e.set("markerRectangle", k), s && s.get && (g = s.get(r, g), n = s.get(l, n)), n || (n = g), i ? s.on && (s.on(r, () => {
-          k.set("fill", s.get(r));
-        }), s.on(l, () => {
-          k.set("stroke", s.get(l));
-        })) : s && s.createLegendMarker && s.createLegendMarker(), k.setAll({ fill: g, stroke: n });
-        const a = s.component;
-        a && a.updateLegendMarker && a.updateLegendMarker(s);
-      }
-      const d = this.makeLabel();
-      if (d) {
-        t.children.push(d), d._setDataItem(e), e.set("label", d), d.text.on("text", () => {
-          t.setRaw("ariaLabel", d.text._getText() + (this.get("clickTarget") !== "none" ? "; " + this._t("Press ENTER to toggle") : "")), t.markDirtyAccessibility();
-        }), s && s.get && e.set("name", s.get(c));
-        let i = e.get("name");
-        i && d.set("text", i);
-      }
-      const v = this.makeValueLabel();
-      if (v && (t.children.push(v), v._setDataItem(e), e.set("valueLabel", v)), s && s.show && (s.on("visible", (i) => {
-        t.set("disabled", !i);
-      }), s.get("visible") || t.set("disabled", !0), o != "none")) {
-        let i = t;
-        o == "marker" && (i = m), this._addClickEvents(i, s, e);
-      }
-      this.children.values.sort((i, k) => {
-        const g = i.dataItem.dataContext, n = k.dataItem.dataContext;
-        if (g && n) {
-          const a = this.data.indexOf(g), h = this.data.indexOf(n);
-          if (a > h)
-            return 1;
-          if (a < h)
-            return -1;
-        }
-        return 0;
-      }), s && s.updateLegendValue && s.updateLegendValue();
-    }
-  }
-  _addClickEvents(e, t, c) {
-    e.set("cursorOverStyle", "pointer"), e.events.on("pointerover", () => {
-      const r = t.component;
-      r && r.hoverDataItem && r.hoverDataItem(t);
-    }), e.events.on("pointerout", () => {
-      const r = t.component;
-      r && r.hoverDataItem && r.unhoverDataItem(t);
-    }), e.events.on("click", () => {
-      const r = c.get("label").text._getText();
-      t.show && t.isHidden && (t.isHidden() || t.get("visible") === !1) ? (t.show(), e.set("disabled", !1), this._root.readerAlert(this._t("%1 shown", this._root.locale, r))) : t.hide && (t.hide(), e.set("disabled", !0), this._root.readerAlert(this._t("%1 hidden", this._root.locale, r)));
-    });
-  }
-  /**
-   * @ignore
-   */
-  disposeDataItem(e) {
-    super.disposeDataItem(e);
-    const t = e.dataContext;
-    t && t.get && t.get("legendDataItem") == e && t.set("legendDataItem", void 0);
-    let c = e.get("itemContainer");
-    c && (this.itemContainers.removeValue(c), c.dispose());
-    let r = e.get("marker");
-    r && (this.markers.removeValue(r), r.dispose());
-    let l = e.get("markerRectangle");
-    l && (this.markerRectangles.removeValue(l), l.dispose());
-    let o = e.get("label");
-    o && (this.labels.removeValue(o), o.dispose());
-    let s = e.get("valueLabel");
-    s && (this.valueLabels.removeValue(s), s.dispose());
-  }
-}
-Object.defineProperty(D, "className", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: "Legend"
-});
-Object.defineProperty(D, "classNames", {
-  enumerable: !0,
-  configurable: !0,
-  writable: !0,
-  value: V.classNames.concat([D.className])
-});
-const le = (y) => {
-  const e = K({
-    props: y,
+import { R as I, A as W, T as z } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as S } from "@mui/material";
+import { useRef as d, useLayoutEffect as F } from "react";
+import { X as V, V as G } from "../../../AxisRenderer-DTyLLA6c.js";
+import { X as M } from "../../../XYCursor-C8WktvKM.js";
+import { D as N } from "../../../DateAxis-YX3QNIB-.js";
+import { A as P, a as U } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as Z, c as j, p as w } from "../../../ColorSet-C7vpNXhM.js";
+import { L as q } from "../../../LineSeries-Uiv5o56b.js";
+import { L as B } from "../../../Legend-Dp_MKfS4.js";
+const ae = (v) => {
+  const u = S({
+    props: v,
     name: "HCHighlightLineChart"
   }), {
-    seriesData: t,
-    height: c = "500px",
-    width: r = "100%",
-    chartId: l = "highlight-line-chart",
-    showLegend: o = !0,
-    loading: s = !1,
-    emptyMessage: m = "No data available",
-    sx: d,
-    ...v
-  } = e, i = {
-    ...e,
-    height: c,
-    width: r,
-    chartId: l,
-    showLegend: o,
-    loading: s,
-    emptyMessage: m
-  }, k = R(null), g = R(null), n = R(null);
-  return Q(() => {
-    if (!n.current) return;
-    const a = W.new(n.current);
-    g.current = a, a.setThemes([z.new(a)]);
-    const h = a.container.children.push(
-      B.new(a, {
+    seriesData: m,
+    height: f = "500px",
+    width: k = "100%",
+    chartId: p = "highlight-line-chart",
+    showLegend: l = !0,
+    loading: g = !1,
+    emptyMessage: x = "No data available",
+    sx: A,
+    ...L
+  } = u, X = {
+    ...u,
+    height: f,
+    width: k,
+    chartId: p,
+    showLegend: l,
+    loading: g,
+    emptyMessage: x
+  }, y = d(null), C = d(null), h = d(null);
+  return F(() => {
+    if (!h.current) return;
+    const e = I.new(h.current);
+    C.current = e, e.setThemes([W.new(e)]);
+    const o = e.container.children.push(
+      V.new(e, {
         panX: !0,
         panY: !0,
         wheelX: "panX",
@@ -211,83 +44,83 @@ const le = (y) => {
         pinchZoomX: !0
       })
     );
-    k.current = h, h.set(
+    y.current = o, o.set(
       "cursor",
-      $.new(a, {
+      M.new(e, {
         behavior: "zoomX"
       })
     ).lineY.set("visible", !1);
-    const E = h.xAxes.push(
-      ee.new(a, {
+    const R = o.xAxes.push(
+      N.new(e, {
         maxDeviation: 0.3,
         baseInterval: { timeUnit: "day", count: 1 },
-        renderer: G.new(a, {
+        renderer: P.new(e, {
           minorGridEnabled: !0
         })
       })
-    ), S = h.yAxes.push(
-      I.new(a, {
-        renderer: U.new(a, {})
+    ), Y = o.yAxes.push(
+      G.new(e, {
+        renderer: U.new(e, {})
       })
-    ), _ = [], P = Z.new(a, {});
-    t.forEach((u, L) => {
-      const b = u.color ? q(u.color) : P.getIndex(L), p = h.series.push(
-        te.new(a, {
-          name: u.name,
-          xAxis: E,
-          yAxis: S,
+    ), c = [], b = Z.new(e, {});
+    m.forEach((t, i) => {
+      const s = t.color ? j(t.color) : b.getIndex(i), r = o.series.push(
+        q.new(e, {
+          name: t.name,
+          xAxis: R,
+          yAxis: Y,
           valueYField: "value",
           valueXField: "date",
-          stroke: b,
-          fill: b,
-          tooltip: J.new(a, {
+          stroke: s,
+          fill: s,
+          tooltip: z.new(e, {
             labelText: "{name}: {valueY}"
           })
         })
       );
-      p.strokes.template.setAll({
+      r.strokes.template.setAll({
         strokeWidth: 2
-      }), p.data.setAll(u.data), _.push(p);
+      }), r.data.setAll(t.data), c.push(r);
     });
-    let x = null;
-    o && (x = h.children.push(
-      D.new(a, {
-        centerX: M(50),
-        x: M(50),
-        layout: a.horizontalLayout
+    let n = null;
+    l && (n = o.children.push(
+      B.new(e, {
+        centerX: w(50),
+        x: w(50),
+        layout: e.horizontalLayout
       })
-    ), x.data.setAll(h.series.values));
-    const F = 1, N = 0.2, Y = 4, j = (u) => {
-      var p;
-      const b = (p = u.target.dataItem) == null ? void 0 : p.dataContext;
-      b && (b.strokes.template.set("strokeOpacity", 1), b.strokes.template.set("strokeWidth", Y), _.forEach((w) => {
-        w !== b && (w.strokes.template.set("strokeOpacity", N), w.strokes.template.set("strokeWidth", 1));
+    ), n.data.setAll(o.series.values));
+    const E = 1, O = 0.2, T = 4, D = (t) => {
+      var r;
+      const s = (r = t.target.dataItem) == null ? void 0 : r.dataContext;
+      s && (s.strokes.template.set("strokeOpacity", 1), s.strokes.template.set("strokeWidth", T), c.forEach((a) => {
+        a !== s && (a.strokes.template.set("strokeOpacity", O), a.strokes.template.set("strokeWidth", 1));
       }));
-    }, H = (u) => {
-      var p;
-      ((p = u.target.dataItem) == null ? void 0 : p.dataContext) && _.forEach((w) => {
-        w.strokes.template.set("strokeOpacity", F), w.strokes.template.set("strokeWidth", 2);
+    }, H = (t) => {
+      var r;
+      ((r = t.target.dataItem) == null ? void 0 : r.dataContext) && c.forEach((a) => {
+        a.strokes.template.set("strokeOpacity", E), a.strokes.template.set("strokeWidth", 2);
       });
     };
-    return x && (x.markers.template.events.on("pointerover", j), x.markers.template.events.on("pointerout", H)), h.appear(1e3, 100), _.forEach((u, L) => {
-      u.appear(1e3, 100 * (L + 1));
+    return n && (n.markers.template.events.on("pointerover", D), n.markers.template.events.on("pointerout", H)), o.appear(1e3, 100), c.forEach((t, i) => {
+      t.appear(1e3, 100 * (i + 1));
     }), () => {
-      a.dispose();
+      e.dispose();
     };
-  }, [l, t, o]), {
-    chartDivRef: n,
-    seriesData: t,
-    height: c,
-    width: r,
-    chartId: l,
-    showLegend: o,
-    loading: s,
-    emptyMessage: m,
-    sx: d,
-    other: v,
-    ownerState: i
+  }, [p, m, l]), {
+    chartDivRef: h,
+    seriesData: m,
+    height: f,
+    width: k,
+    chartId: p,
+    showLegend: l,
+    loading: g,
+    emptyMessage: x,
+    sx: A,
+    other: L,
+    ownerState: X
   };
 };
 export {
-  le as useHighlightLineChartLogic
+  ae as useHighlightLineChartLogic
 };

package/dist/components/charts/line/index.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useLineChartLogic as n } from "./logic.js";
+import { LineChartRoot as m } from "./styled.js";
+function s(r) {
+  const { chartId: o, ownerState: i, sx: e, other: h } = n(r);
+  return /* @__PURE__ */ t(m, { ownerState: i, sx: e, ...h, children: /* @__PURE__ */ t("div", { id: o, style: { width: "100%", height: "100%" } }) });
+}
+export {
+  s as LineChart
+};

package/dist/components/charts/line/logic.js

@@ -0,0 +1,148 @@
+import { R as B, a as E, A as M, T as f } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as V, useTheme as z } from "@mui/material";
+import X from "lodash";
+import { useId as H, useRef as N, useEffect as S } from "react";
+import { colorSetFromPalette as U } from "../_common/utils.js";
+import { c as i, p as A, b } from "../../../ColorSet-C7vpNXhM.js";
+import { X as Z, V as _ } from "../../../AxisRenderer-DTyLLA6c.js";
+import { D as $ } from "../../../DateAxis-YX3QNIB-.js";
+import { A as F, a as j } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as q } from "../../../CategoryAxis-CwnfaGc8.js";
+import { L as G } from "../../../LineSeries-Uiv5o56b.js";
+import { D as J } from "../../../DataProcessor-CHDO51q4.js";
+import { X as K } from "../../../XYCursor-C8WktvKM.js";
+import { L as Q } from "../../../Legend-Dp_MKfS4.js";
+const Ae = (D) => {
+  const g = V({ props: D, name: "HCLineChart" }), {
+    dimensions: t,
+    values: d,
+    data: p,
+    initDelay: L = 0,
+    baseInterval: Y,
+    colors: v,
+    sx: R,
+    ...I
+  } = g, a = z(), x = `hc-line-chart-${H().replace(/:/g, "")}`, c = N(null);
+  S(() => {
+    let u;
+    return u = setTimeout(() => {
+      var y, k, T;
+      const e = B.new(x);
+      c.current = e;
+      const P = E.new(e);
+      e.setThemes([M.new(e), P]), e.interfaceColors.setAll({
+        text: i(a.palette.text.primary),
+        grid: i(a.palette.divider),
+        stroke: i(a.palette.divider)
+      });
+      const r = e.container.children.push(
+        Z.new(e, {
+          panX: !0,
+          panY: !0,
+          wheelX: "none",
+          wheelY: "none",
+          maxTooltipDistance: 0,
+          pinchZoomX: !0
+        })
+      );
+      if (r.set("colors", U(e, v)), t.length < 1) {
+        console.error("Missing dimensions config!");
+        return;
+      }
+      if (d.length < 1) {
+        console.error("Missing values config!");
+        return;
+      }
+      let n, m = p;
+      t[0].type === "date" ? (n = r.xAxes.push(
+        $.new(e, {
+          maxDeviation: 0.1,
+          groupData: !1,
+          baseInterval: Y || { timeUnit: "day", count: 1 },
+          renderer: F.new(e, {}),
+          tooltip: f.new(e, {})
+        })
+      ), m = X.orderBy(p, [t[0].value])) : (n = r.xAxes.push(
+        q.new(e, {
+          categoryField: t[0].value,
+          renderer: F.new(e, {}),
+          tooltip: f.new(e, {})
+        })
+      ), e.numberFormatter.setAll({
+        numberFormat: "#",
+        numericFields: ["valueX"]
+      }), m = X.orderBy(p, [t[0].value]), n.data.setAll(m));
+      const w = r.yAxes.push(
+        _.new(e, {
+          renderer: j.new(e, {})
+        })
+      );
+      (y = n.get("renderer")) == null || y.grid.template.setAll({
+        stroke: i(a.palette.divider),
+        strokeOpacity: 1
+      }), (k = n.get("renderer")) == null || k.labels.template.setAll({ paddingTop: 12 }), (T = w.get("renderer")) == null || T.grid.template.setAll({
+        stroke: i(a.palette.divider),
+        strokeOpacity: 1
+      }), d.forEach((s) => {
+        const o = r.series.push(
+          G.new(e, {
+            name: s.name,
+            xAxis: n,
+            yAxis: w,
+            valueYField: s.dataFieldName,
+            ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
+            tooltip: f.new(e, {
+              pointerOrientation: "horizontal",
+              labelText: "{name}: {valueY}"
+            })
+          })
+        );
+        t[0].type === "date" && (o.data.processor = J.new(e, {
+          dateFormat: "i",
+          dateFields: [t[0].value]
+        })), o.data.setAll(m), o.strokes.template.setAll({ strokeWidth: 2 }), o.appear();
+      }), r.set(
+        "cursor",
+        K.new(e, { behavior: "none" })
+      ).lineY.set("visible", !1);
+      const l = r.bottomAxesContainer.children.push(
+        Q.new(e, {
+          width: A(100),
+          paddingTop: 10,
+          centerX: A(50),
+          x: A(50),
+          layout: e.gridLayout
+        })
+      );
+      l.itemContainers.template.events.on("pointerover", function(s) {
+        var C;
+        const o = s.target, W = (C = o == null ? void 0 : o.dataItem) == null ? void 0 : C.dataContext;
+        r.series.each(function(h) {
+          h !== W ? h.strokes.template.setAll({
+            strokeOpacity: 0.15,
+            stroke: i(0)
+          }) : h.strokes.template.setAll({ strokeWidth: 3 });
+        });
+      }), l.itemContainers.template.events.on("pointerout", function() {
+        r.series.each(function(s) {
+          s.strokes.template.setAll({
+            strokeOpacity: 1,
+            strokeWidth: 2,
+            stroke: s.get("fill")
+          });
+        });
+      }), l.itemContainers.template.set("width", b), l.valueLabels.template.setAll({
+        width: b,
+        textAlign: "right"
+      }), l.data.setAll(r.series.values), r.appear(1e3, 100);
+    }, L), () => {
+      var e;
+      u && clearTimeout(u), (e = c.current) == null || e.dispose(), c.current = null;
+    };
+  }, [p, t, d, a.palette.mode, v]);
+  const O = { ...g };
+  return { chartId: x, ownerState: O, sx: R, other: I };
+};
+export {
+  Ae as useLineChartLogic
+};

package/dist/components/charts/line/styled.js

@@ -0,0 +1,12 @@
+import { styled as t, Box as r } from "@mui/material";
+const h = t(r, {
+  name: "HCLineChart",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  width: "100%",
+  height: "100%"
+}));
+export {
+  h as LineChartRoot
+};

package/dist/components/charts/logaritmic-scale/index.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useLogaritmicScaleLogic as m } from "./logic.js";
+import { LogaritmicScaleRoot as a } from "./styled.js";
+function g(o) {
+  const { chartId: i, ownerState: r, sx: e, other: c } = m(o);
+  return /* @__PURE__ */ t(a, { ownerState: r, sx: e, ...c, children: /* @__PURE__ */ t("div", { id: i, style: { width: "100%", height: "100%" } }) });
+}
+export {
+  g as LogaritmicScale
+};