@hybridcore/ui 1.5.79 → 1.5.82

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

@@ -0,0 +1,293 @@
+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,
+    name: "MuiHighlightLineChart"
+  }), {
+    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, {
+        panX: !0,
+        panY: !0,
+        wheelX: "panX",
+        wheelY: "zoomX",
+        pinchZoomX: !0
+      })
+    );
+    k.current = h, h.set(
+      "cursor",
+      $.new(a, {
+        behavior: "zoomX"
+      })
+    ).lineY.set("visible", !1);
+    const E = h.xAxes.push(
+      ee.new(a, {
+        maxDeviation: 0.3,
+        baseInterval: { timeUnit: "day", count: 1 },
+        renderer: G.new(a, {
+          minorGridEnabled: !0
+        })
+      })
+    ), S = h.yAxes.push(
+      I.new(a, {
+        renderer: U.new(a, {})
+      })
+    ), _ = [], 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,
+          valueYField: "value",
+          valueXField: "date",
+          stroke: b,
+          fill: b,
+          tooltip: J.new(a, {
+            labelText: "{name}: {valueY}"
+          })
+        })
+      );
+      p.strokes.template.setAll({
+        strokeWidth: 2
+      }), p.data.setAll(u.data), _.push(p);
+    });
+    let x = null;
+    o && (x = h.children.push(
+      D.new(a, {
+        centerX: M(50),
+        x: M(50),
+        layout: a.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));
+      }));
+    }, 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);
+      });
+    };
+    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));
+    }), () => {
+      a.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
+  };
+};
+export {
+  le as useHighlightLineChartLogic
+};

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

@@ -0,0 +1,12 @@
+import { styled as t } from "@mui/material";
+const o = t("div", {
+  name: "MuiHighlightLineChart",
+  slot: "Root"
+})(({ ownerState: i }) => ({
+  position: "relative",
+  width: i.width,
+  height: i.height
+}));
+export {
+  o as HighlightLineChartRoot
+};