@hybridcore/ui 1.6.1 → 1.6.3

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

@@ -1,16 +1,16 @@
-import { k as N, l as M, R as B, A as I, T as G } from "../../../AnimatedTheme-jnasw6rT.js";
-import { useTheme as U, useThemeProps as Z } from "@mui/material";
-import q from "lodash";
-import { useRef as P, useLayoutEffect as J, useEffect as K } from "react";
-import { m as S, e as j, c as X, p as Q } from "../../../ColorSet-C7vpNXhM.js";
-import { X as $, V as H } from "../../../AxisRenderer-DTyLLA6c.js";
+import { k as N, l as M, R as B, A as U, T as G } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useTheme as Z, useThemeProps as q } from "@mui/material";
+import J from "lodash";
+import { useRef as C, useLayoutEffect as K, useEffect as S } from "react";
+import { m as j, e as H, c as m, p as Q } from "../../../ColorSet-C7vpNXhM.js";
+import { X as $, V as E } from "../../../AxisRenderer-DTyLLA6c.js";
 import { X as ee } from "../../../XYCursor-C8WktvKM.js";
 import { D as te } from "../../../DateAxis-YX3QNIB-.js";
-import { A as se, a as E } from "../../../AxisRendererY-C_ItLPNV.js";
+import { A as se, a as z } from "../../../AxisRendererY-C_ItLPNV.js";
 import { C as T } from "../../../ColumnSeries-CjgdJ2QL.js";
 import { R as W } from "../../../RoundedRectangle-CWLi2PXn.js";
-import { D as z } from "../../../DataProcessor-CHDO51q4.js";
-class C extends W {
+import { D as I } from "../../../DataProcessor-CHDO51q4.js";
+class A extends W {
   _beforeChanged() {
     super._beforeChanged(), (this.isDirty("lowX0") || this.isDirty("lowY0") || this.isDirty("lowX1") || this.isDirty("lowY1") || this.isDirty("highX0") || this.isDirty("highX1") || this.isDirty("highY0") || this.isDirty("highY1")) && (this._clear = !0);
   }
@@ -20,19 +20,19 @@ class C extends W {
     e.moveTo(this.get("lowX0", 0), this.get("lowY0", 0)), e.lineTo(this.get("lowX1", 0), this.get("lowY1", 0)), e.moveTo(this.get("highX0", 0), this.get("highY0", 0)), e.lineTo(this.get("highX1", 0), this.get("highY1", 0));
   }
 }
-Object.defineProperty(C, "className", {
+Object.defineProperty(A, "className", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
   value: "Candlestick"
 });
-Object.defineProperty(C, "classNames", {
+Object.defineProperty(A, "classNames", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
-  value: W.classNames.concat([C.className])
+  value: W.classNames.concat([A.className])
 });
-class k extends T {
+class F extends T {
   constructor() {
     super(...arguments), Object.defineProperty(this, "columns", {
       enumerable: !0,
@@ -40,8 +40,8 @@ class k extends T {
       writable: !0,
       value: this.addDisposer(new N(M.new({
         themeTags: ["autocolor"]
-      }), () => C._new(this._root, {
-        themeTags: S(this.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
+      }), () => A._new(this._root, {
+        themeTags: j(this.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
       }, [this.columns.template])))
     });
   }
@@ -54,105 +54,105 @@ class k extends T {
   }
   _updateGraphics(e, i, h) {
     super._updateGraphics(e, i, h);
-    const m = this.getRaw("xAxis"), w = this.getRaw("yAxis");
-    let Y = this.get("vcy", 1), f = this.get("vcx", 1), l, x, r, o, c, u, p, d, s = this.get("locationX", e.get("locationX", 0.5)), g = this.get("locationY", e.get("locationY", 0.5)), y = this.get("openLocationX", e.get("openLocationX", s)), n = this.get("openLocationY", e.get("openLocationY", g)), b;
+    const Y = this.getRaw("xAxis"), x = this.getRaw("yAxis");
+    let y = this.get("vcy", 1), X = this.get("vcx", 1), a, c, r, o, u, g, d, w, s = this.get("locationX", e.get("locationX", 0.5)), p = this.get("locationY", e.get("locationY", 0.5)), f = this.get("openLocationX", e.get("openLocationX", s)), n = this.get("openLocationY", e.get("openLocationY", p)), b;
     if (h == 0) {
-      let t = w.getDataItemPositionY(e, this._yOpenField, 1, Y), a = w.getDataItemPositionY(e, this._yField, 1, Y);
-      o = w.getDataItemPositionY(e, this._yLowField, 1, Y), d = w.getDataItemPositionY(e, this._yHighField, 1, Y), p = Math.max(t, a), r = Math.min(t, a);
-      let v = this._aLocationX0 + y - 0.5, D = this._aLocationX1 + s - 0.5;
-      l = m.getDataItemPositionX(e, this._xField, v + (D - v) / 2, f), x = l, c = l, u = l, b = "vertical";
+      let t = x.getDataItemPositionY(e, this._yOpenField, 1, y), l = x.getDataItemPositionY(e, this._yField, 1, y);
+      o = x.getDataItemPositionY(e, this._yLowField, 1, y), w = x.getDataItemPositionY(e, this._yHighField, 1, y), d = Math.max(t, l), r = Math.min(t, l);
+      let v = this._aLocationX0 + f - 0.5, D = this._aLocationX1 + s - 0.5;
+      a = Y.getDataItemPositionX(e, this._xField, v + (D - v) / 2, X), c = a, u = a, g = a, b = "vertical";
     } else {
-      let t = m.getDataItemPositionX(e, this._xOpenField, 1, f), a = m.getDataItemPositionX(e, this._xField, 1, f);
-      x = m.getDataItemPositionX(e, this._xLowField, 1, f), u = m.getDataItemPositionX(e, this._xHighField, 1, f), c = Math.max(t, a), l = Math.min(t, a);
-      let v = this._aLocationY0 + n - 0.5, D = this._aLocationY1 + g - 0.5;
-      r = w.getDataItemPositionY(e, this._yField, v + (D - v) / 2, Y), o = r, p = r, d = r, b = "horizontal";
+      let t = Y.getDataItemPositionX(e, this._xOpenField, 1, X), l = Y.getDataItemPositionX(e, this._xField, 1, X);
+      c = Y.getDataItemPositionX(e, this._xLowField, 1, X), g = Y.getDataItemPositionX(e, this._xHighField, 1, X), u = Math.max(t, l), a = Math.min(t, l);
+      let v = this._aLocationY0 + n - 0.5, D = this._aLocationY1 + p - 0.5;
+      r = x.getDataItemPositionY(e, this._yField, v + (D - v) / 2, y), o = r, d = r, w = r, b = "horizontal";
     }
-    this._updateCandleGraphics(e, l, x, r, o, c, u, p, d, b);
+    this._updateCandleGraphics(e, a, c, r, o, u, g, d, w, b);
   }
-  _updateCandleGraphics(e, i, h, m, w, Y, f, l, x, r) {
+  _updateCandleGraphics(e, i, h, Y, x, y, X, a, c, r) {
     let o = e.get("graphics");
     if (o) {
-      let c = this.getPoint(i, m), u = this.getPoint(h, w), p = this.getPoint(Y, l), d = this.getPoint(f, x);
+      let u = this.getPoint(i, Y), g = this.getPoint(h, x), d = this.getPoint(y, a), w = this.getPoint(X, c);
       if (this.get("turboMode")) {
         const s = this.allColumnsData[this.allColumnsData.length - 1];
-        s.lowX0 = c.x, s.lowY0 = c.y, s.lowX1 = u.x, s.lowY1 = u.y, s.highX0 = p.x, s.highY0 = p.y, s.highX1 = d.x, s.highY1 = d.y;
+        s.lowX0 = u.x, s.lowY0 = u.y, s.lowX1 = g.x, s.lowY1 = g.y, s.highX0 = d.x, s.highY0 = d.y, s.highX1 = w.x, s.highY1 = w.y;
       } else {
-        let s = o.x(), g = o.y();
-        o.set("lowX0", c.x - s), o.set("lowY0", c.y - g), o.set("lowX1", u.x - s), o.set("lowY1", u.y - g), o.set("highX0", p.x - s), o.set("highY0", p.y - g), o.set("highX1", d.x - s), o.set("highY1", d.y - g), o.set("orientation", r);
-        let y = e.get("rangeGraphics");
-        y && j(y, (n) => {
-          n.set("lowX0", c.x - s), n.set("lowY0", c.y - g), n.set("lowX1", u.x - s), n.set("lowY1", u.y - g), n.set("highX0", p.x - s), n.set("highY0", p.y - g), n.set("highX1", d.x - s), n.set("highY1", d.y - g), n.set("orientation", r);
+        let s = o.x(), p = o.y();
+        o.set("lowX0", u.x - s), o.set("lowY0", u.y - p), o.set("lowX1", g.x - s), o.set("lowY1", g.y - p), o.set("highX0", d.x - s), o.set("highY0", d.y - p), o.set("highX1", w.x - s), o.set("highY1", w.y - p), o.set("orientation", r);
+        let f = e.get("rangeGraphics");
+        f && H(f, (n) => {
+          n.set("lowX0", u.x - s), n.set("lowY0", u.y - p), n.set("lowX1", g.x - s), n.set("lowY1", g.y - p), n.set("highX0", d.x - s), n.set("highY0", d.y - p), n.set("highX1", w.x - s), n.set("highY1", w.y - p), n.set("orientation", r);
         });
       }
     }
   }
   _afterColumnsDraw() {
     this.get("turboMode") && this.allColumns.set("draw", (e) => {
-      e.clear(), j(this.allColumnsData, (i) => {
+      e.clear(), H(this.allColumnsData, (i) => {
         e.beginPath();
-        const h = i.width, m = i.height, w = i.x, Y = i.y, f = i.stroke, l = i.fill, x = i.strokeWidth, r = i.strokeOpacity, o = i.fillOpacity, c = i.lowX0, u = i.lowY0, p = i.lowX1, d = i.lowY1, s = i.highX0, g = i.highY0, y = i.highX1, n = i.highY1;
-        e.beginFill(l, o), e.beginPath(), e.lineStyle(x, f, r), e.drawRect(w, Y, h, m), e.moveTo(c, u), e.lineTo(p, d), e.moveTo(s, g), e.lineTo(y, n), e.endStroke(), e.endFill();
+        const h = i.width, Y = i.height, x = i.x, y = i.y, X = i.stroke, a = i.fill, c = i.strokeWidth, r = i.strokeOpacity, o = i.fillOpacity, u = i.lowX0, g = i.lowY0, d = i.lowX1, w = i.lowY1, s = i.highX0, p = i.highY0, f = i.highX1, n = i.highY1;
+        e.beginFill(a, o), e.beginPath(), e.lineStyle(c, X, r), e.drawRect(x, y, h, Y), e.moveTo(u, g), e.lineTo(d, w), e.moveTo(s, p), e.lineTo(f, n), e.endStroke(), e.endFill();
       });
     });
   }
   _processAxisRange(e) {
-    super._processAxisRange(e), e.columns = new N(M.new({}), () => C._new(this._root, {
-      themeTags: S(e.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
+    super._processAxisRange(e), e.columns = new N(M.new({}), () => A._new(this._root, {
+      themeTags: j(e.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
     }, [this.columns.template, e.columns.template]));
   }
 }
-Object.defineProperty(k, "className", {
+Object.defineProperty(F, "className", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
   value: "CandlestickSeries"
 });
-Object.defineProperty(k, "classNames", {
+Object.defineProperty(F, "classNames", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
-  value: T.classNames.concat([k.className])
+  value: T.classNames.concat([F.className])
 });
-const me = (F) => {
-  const e = U(), i = Z({
-    props: F,
+const de = (P) => {
+  const e = Z(), i = q({
+    props: P,
     name: "HCCandlestickChart"
   }), {
     data: h,
-    seriesName: m,
-    height: w = "100%",
-    width: Y = "100%",
-    chartId: f = "candlestick-chart",
-    showVolume: l = !1,
-    risingColor: x = e.palette.success.main,
+    seriesName: Y,
+    height: x = "100%",
+    width: y = "100%",
+    chartId: X = "candlestick-chart",
+    showVolume: a = !1,
+    risingColor: c = e.palette.success.main,
     fallingColor: r = e.palette.error.main,
     loading: o = !1,
-    emptyMessage: c = "No data available",
-    baseInterval: u,
-    sx: p,
-    ...d
-  } = i, s = q.orderBy(h, ["date"]), g = {
+    emptyMessage: u = "No data available",
+    baseInterval: g,
+    sx: d,
+    ...w
+  } = i, s = J.orderBy(h, ["date"]), p = {
     ...i,
-    height: w,
-    width: Y,
-    chartId: f,
-    showVolume: l,
-    risingColor: x,
+    height: x,
+    width: y,
+    chartId: X,
+    showVolume: a,
+    risingColor: c,
     fallingColor: r,
     loading: o,
-    emptyMessage: c,
-    baseInterval: u
-  }, y = P(null), n = P(null), b = P(null);
-  return J(() => {
+    emptyMessage: u,
+    baseInterval: g
+  }, f = C(null), n = C(null), b = C(null);
+  return K(() => {
     var O, R, V;
     if (!b.current) return;
     const t = B.new(b.current);
-    n.current = t, t.setThemes([I.new(t)]), t.interfaceColors.setAll({
-      text: X(e.palette.text.primary),
-      grid: X(e.palette.divider),
-      stroke: X(e.palette.divider)
+    n.current = t, t.setThemes([U.new(t)]), t.interfaceColors.setAll({
+      text: m(e.palette.text.primary),
+      grid: m(e.palette.divider),
+      stroke: m(e.palette.divider)
     });
-    const a = t.container.children.push(
+    const l = t.container.children.push(
       $.new(t, {
         panX: !0,
         panY: !0,
@@ -162,39 +162,39 @@ const me = (F) => {
         layout: t.verticalLayout
       })
     );
-    y.current = a, a.set(
+    f.current = l, l.set(
       "cursor",
       ee.new(t, {
         behavior: "zoomX"
       })
     ).lineY.set("visible", !1);
-    const v = a.xAxes.push(
+    const v = l.xAxes.push(
       te.new(t, {
         maxDeviation: 0.3,
         groupData: !0,
-        baseInterval: u || { timeUnit: "day", count: 1 },
+        baseInterval: g || { timeUnit: "day", count: 1 },
         renderer: se.new(t, {
           minorGridEnabled: !0
         }),
         tooltip: G.new(t, {})
       })
-    ), D = a.yAxes.push(
-      H.new(t, {
-        renderer: E.new(t, {})
+    ), D = l.yAxes.push(
+      E.new(t, {
+        renderer: z.new(t, {})
       })
     );
     (O = v.get("renderer")) == null || O.grid.template.setAll({
-      stroke: X(e.palette.divider),
+      stroke: m(e.palette.divider),
       strokeOpacity: 1
     }), (R = v.get("renderer")) == null || R.labels.template.setAll({
       paddingTop: 12
     }), (V = D.get("renderer")) == null || V.grid.template.setAll({
-      stroke: X(e.palette.divider),
+      stroke: m(e.palette.divider),
       strokeOpacity: 1
     });
-    const _ = a.series.push(
-      k.new(t, {
-        name: m || "Price",
+    const _ = l.series.push(
+      F.new(t, {
+        name: Y || "Price",
         xAxis: v,
         yAxis: D,
         valueXField: "date",
@@ -214,66 +214,76 @@ const me = (F) => {
       })
     );
     _.columns.template.states.create("riseFromPrevious", {
-      fill: X(x),
-      stroke: X(x)
+      fill: m(c),
+      stroke: m(c)
     }), _.columns.template.states.create("dropFromPrevious", {
-      fill: X(r),
-      stroke: X(r)
-    }), _.data.processor = z.new(t, {
+      fill: m(r),
+      stroke: m(r)
+    }), _.data.processor = I.new(t, {
       dateFormat: "i",
       dateFields: ["date"]
     });
-    let A = null, L = null;
-    return l && (L = a.yAxes.push(
-      H.new(t, {
-        renderer: E.new(t, {
+    let k = null, L = null;
+    return a && (L = l.yAxes.push(
+      E.new(t, {
+        renderer: z.new(t, {
           opposite: !0
         }),
         numberFormat: "#a"
       })
-    ), A = a.series.push(
+    ), k = l.series.push(
       T.new(t, {
         name: "Volume",
         xAxis: v,
         yAxis: L,
         valueYField: "volume",
         valueXField: "date",
-        fill: X("#2962ff"),
-        stroke: X("#2962ff"),
+        fill: m("#2962ff"),
+        stroke: m("#2962ff"),
         opacity: 0.6
       })
-    ), A.columns.template.setAll({
+    ), k.columns.template.setAll({
       width: Q(80)
-    }), A.data.processor = z.new(t, {
+    }), k.data.processor = I.new(t, {
       dateFormat: "i",
       dateFields: ["date"]
-    })), _.data.setAll(s), l && A && A.data.setAll(s), a.appear(1e3), _.appear(1e3), () => {
+    })), _.data.setAll(s), a && k && k.data.setAll(s), l.appear(1e3), _.appear(1e3), () => {
       t.dispose();
     };
-  }, [e.palette.mode]), K(() => {
-    if (y.current && n.current) {
-      const t = y.current.series.getIndex(
+  }, [e.palette.mode]), S(() => {
+    if (f.current && n.current) {
+      const t = f.current.series.getIndex(
         0
-      ), a = l ? y.current.series.getIndex(1) : null;
-      t == null || t.data.setAll(s), a == null || a.data.setAll(s);
+      ), l = a ? f.current.series.getIndex(1) : null;
+      t == null || t.data.setAll(s), l == null || l.data.setAll(s);
     }
-  }, [s, l]), {
+  }, [s, a]), S(() => {
+    if (!f.current) return;
+    const t = f.current.series.getIndex(0);
+    t && (t.columns.template.states.create("riseFromPrevious", {
+      fill: m(c),
+      stroke: m(c)
+    }), t.columns.template.states.create("dropFromPrevious", {
+      fill: m(r),
+      stroke: m(r)
+    }));
+  }, [c, r]), {
     chartDivRef: b,
     data: h,
-    seriesName: m,
-    height: w,
-    width: Y,
-    chartId: f,
-    showVolume: l,
-    risingColor: x,
+    seriesName: Y,
+    height: x,
+    width: y,
+    chartId: X,
+    showVolume: a,
+    risingColor: c,
     fallingColor: r,
     loading: o,
-    emptyMessage: c,
-    sx: p,
-    other: d,
-    ownerState: g
+    emptyMessage: u,
+    sx: d,
+    other: w,
+    ownerState: p
   };
 };
 export {
-  me as useCandlestickChartLogic
+  de as useCandlestickChartLogic
 };

package/dist/components/charts/chart-wrapper/index.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { Typography as n, Divider as l } from "@mui/material";
+import { Typography as l, Divider as n } from "@mui/material";
 import { CandlestickChart as C } from "../candlestick/index.js";
 import { ColumnLineMix as h } from "../column-line-mix/index.js";
 import { DrillDownTreemap as c } from "../drill-down-treemap/index.js";
@@ -16,11 +16,11 @@ import { StackedColumnChart as g } from "../stacked-column-chart/index.js";
 import { XYChart as P } from "../xy-chart/index.js";
 import { useChartWrapperLogic as w } from "./logic.js";
 import { ChartWrapperRoot as A, ChartWrapperHeader as T, ChartWrapperContent as W } from "./styled.js";
-function J(a) {
+const J = (a) => {
   const { title: m, type: e, chartProps: o, ownerState: t, sx: p } = w(a);
   return /* @__PURE__ */ i(A, { ownerState: t, sx: p, children: [
-    /* @__PURE__ */ r(T, { ownerState: t, children: /* @__PURE__ */ r(n, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
-    /* @__PURE__ */ r(l, {}),
+    /* @__PURE__ */ r(T, { ownerState: t, children: /* @__PURE__ */ r(l, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
+    /* @__PURE__ */ r(n, {}),
     /* @__PURE__ */ i(W, { ownerState: t, children: [
       e === "MultipleValueAxes" && /* @__PURE__ */ r(L, { ...o }),
       e === "XYChart" && /* @__PURE__ */ r(P, { ...o }),
@@ -38,7 +38,7 @@ function J(a) {
       e === "CandlestickChart" && /* @__PURE__ */ r(C, { ...o })
     ] })
   ] });
-}
+};
 export {
   J as ChartWrapper
 };

package/dist/components/charts/column-line-mix/index.js

@@ -1,10 +1,11 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useColumnLineMixLogic as m } from "./logic.js";
-import { ColumnLineMixRoot as h } from "./styled.js";
-function d(i) {
-  const { chartId: t, ownerState: r, sx: e, other: n } = m(i);
-  return /* @__PURE__ */ o(h, { ownerState: r, sx: e, ...n, children: /* @__PURE__ */ o("div", { id: t, style: { width: "100%", height: "100%" } }) });
-}
+import { jsx as r } from "react/jsx-runtime";
+import { ChartError as s } from "../_common/chart-error.js";
+import { useColumnLineMixLogic as h } from "./logic.js";
+import { ColumnLineMixRoot as x } from "./styled.js";
+const u = (t) => {
+  const { chartId: i, ownerState: e, sx: m, error: o, other: n } = h(t);
+  return /* @__PURE__ */ r(x, { ownerState: e, sx: m, ...n, children: o ? /* @__PURE__ */ r(s, { message: o }) : /* @__PURE__ */ r("div", { id: i, style: { width: "100%", height: "100%" } }) });
+};
 export {
-  d as ColumnLineMix
+  u as ColumnLineMix
 };