@hybridcore/ui 1.5.79 → 1.5.82

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

@@ -0,0 +1,249 @@
+import { R as M, L, T as k, m as T, i as V, b as G, A as S, X as j, c as z, g as O, V as R, d as N, f as _, p as E } from "../../../AxisRendererY-kADUad00.js";
+import { useThemeProps as H } from "@mui/material";
+import { useRef as A, useLayoutEffect as W, useEffect as U } from "react";
+import { X as Z, D as q } from "../../../DateAxis-CMum47iz.js";
+import { C as F } from "../../../ColumnSeries-BTcqshjB.js";
+class D extends M {
+  _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);
+  }
+  _draw() {
+    super._draw();
+    const e = this._display;
+    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(D, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "Candlestick"
+});
+Object.defineProperty(D, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: M.classNames.concat([D.className])
+});
+class C extends F {
+  constructor() {
+    super(...arguments), Object.defineProperty(this, "columns", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: this.addDisposer(new L(k.new({
+        themeTags: ["autocolor"]
+      }), () => D._new(this._root, {
+        themeTags: T(this.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
+      }, [this.columns.template])))
+    });
+  }
+  /**
+   * @ignore
+   */
+  makeColumn(e, t) {
+    const h = t.make();
+    return this.get("turboMode") ? h.virtualParent = this.chart : this.mainContainer.children.push(h), h._setDataItem(e), t.push(h), h;
+  }
+  _updateGraphics(e, t, h) {
+    super._updateGraphics(e, t, h);
+    const m = this.getRaw("xAxis"), d = this.getRaw("yAxis");
+    let Y = this.get("vcy", 1), n = this.get("vcx", 1), c, x, u, l, g, p, w, a, o = this.get("locationX", e.get("locationX", 0.5)), r = this.get("locationY", e.get("locationY", 0.5)), s = this.get("openLocationX", e.get("openLocationX", o)), i = this.get("openLocationY", e.get("openLocationY", r)), b;
+    if (h == 0) {
+      let y = d.getDataItemPositionY(e, this._yOpenField, 1, Y), f = d.getDataItemPositionY(e, this._yField, 1, Y);
+      l = d.getDataItemPositionY(e, this._yLowField, 1, Y), a = d.getDataItemPositionY(e, this._yHighField, 1, Y), w = Math.max(y, f), u = Math.min(y, f);
+      let X = this._aLocationX0 + s - 0.5, v = this._aLocationX1 + o - 0.5;
+      c = m.getDataItemPositionX(e, this._xField, X + (v - X) / 2, n), x = c, g = c, p = c, b = "vertical";
+    } else {
+      let y = m.getDataItemPositionX(e, this._xOpenField, 1, n), f = m.getDataItemPositionX(e, this._xField, 1, n);
+      x = m.getDataItemPositionX(e, this._xLowField, 1, n), p = m.getDataItemPositionX(e, this._xHighField, 1, n), g = Math.max(y, f), c = Math.min(y, f);
+      let X = this._aLocationY0 + i - 0.5, v = this._aLocationY1 + r - 0.5;
+      u = d.getDataItemPositionY(e, this._yField, X + (v - X) / 2, Y), l = u, w = u, a = u, b = "horizontal";
+    }
+    this._updateCandleGraphics(e, c, x, u, l, g, p, w, a, b);
+  }
+  _updateCandleGraphics(e, t, h, m, d, Y, n, c, x, u) {
+    let l = e.get("graphics");
+    if (l) {
+      let g = this.getPoint(t, m), p = this.getPoint(h, d), w = this.getPoint(Y, c), a = this.getPoint(n, x);
+      if (this.get("turboMode")) {
+        const o = this.allColumnsData[this.allColumnsData.length - 1];
+        o.lowX0 = g.x, o.lowY0 = g.y, o.lowX1 = p.x, o.lowY1 = p.y, o.highX0 = w.x, o.highY0 = w.y, o.highX1 = a.x, o.highY1 = a.y;
+      } else {
+        let o = l.x(), r = l.y();
+        l.set("lowX0", g.x - o), l.set("lowY0", g.y - r), l.set("lowX1", p.x - o), l.set("lowY1", p.y - r), l.set("highX0", w.x - o), l.set("highY0", w.y - r), l.set("highX1", a.x - o), l.set("highY1", a.y - r), l.set("orientation", u);
+        let s = e.get("rangeGraphics");
+        s && V(s, (i) => {
+          i.set("lowX0", g.x - o), i.set("lowY0", g.y - r), i.set("lowX1", p.x - o), i.set("lowY1", p.y - r), i.set("highX0", w.x - o), i.set("highY0", w.y - r), i.set("highX1", a.x - o), i.set("highY1", a.y - r), i.set("orientation", u);
+        });
+      }
+    }
+  }
+  _afterColumnsDraw() {
+    this.get("turboMode") && this.allColumns.set("draw", (e) => {
+      e.clear(), V(this.allColumnsData, (t) => {
+        e.beginPath();
+        const h = t.width, m = t.height, d = t.x, Y = t.y, n = t.stroke, c = t.fill, x = t.strokeWidth, u = t.strokeOpacity, l = t.fillOpacity, g = t.lowX0, p = t.lowY0, w = t.lowX1, a = t.lowY1, o = t.highX0, r = t.highY0, s = t.highX1, i = t.highY1;
+        e.beginFill(c, l), e.beginPath(), e.lineStyle(x, n, u), e.drawRect(d, Y, h, m), e.moveTo(g, p), e.lineTo(w, a), e.moveTo(o, r), e.lineTo(s, i), e.endStroke(), e.endFill();
+      });
+    });
+  }
+  _processAxisRange(e) {
+    super._processAxisRange(e), e.columns = new L(k.new({}), () => D._new(this._root, {
+      themeTags: T(e.columns.template.get("themeTags", []), ["candlestick", "series", "column"])
+    }, [this.columns.template, e.columns.template]));
+  }
+}
+Object.defineProperty(C, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "CandlestickSeries"
+});
+Object.defineProperty(C, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: F.classNames.concat([C.className])
+});
+const $ = (P) => {
+  const e = H({
+    props: P,
+    name: "MuiCandlestickChart"
+  }), {
+    data: t,
+    seriesName: h,
+    height: m = "500px",
+    width: d = "100%",
+    chartId: Y = "candlestick-chart",
+    showVolume: n = !1,
+    risingColor: c = "#00b050",
+    fallingColor: x = "#ff3b30",
+    loading: u = !1,
+    emptyMessage: l = "No data available",
+    sx: g,
+    ...p
+  } = e, w = {
+    ...e,
+    height: m,
+    width: d,
+    chartId: Y,
+    showVolume: n,
+    risingColor: c,
+    fallingColor: x,
+    loading: u,
+    emptyMessage: l
+  }, a = A(null), o = A(null), r = A(null);
+  return W(() => {
+    if (!r.current) return;
+    const s = G.new(r.current);
+    o.current = s, s.setThemes([S.new(s)]);
+    const i = s.container.children.push(
+      j.new(s, {
+        panX: !0,
+        panY: !0,
+        wheelX: "panX",
+        wheelY: "zoomX",
+        pinchZoomX: !0,
+        layout: s.verticalLayout
+      })
+    );
+    a.current = i, i.set(
+      "cursor",
+      Z.new(s, {
+        behavior: "zoomX"
+      })
+    ).lineY.set("visible", !1);
+    const b = i.xAxes.push(
+      q.new(s, {
+        maxDeviation: 0.3,
+        groupData: !0,
+        baseInterval: { timeUnit: "day", count: 1 },
+        renderer: z.new(s, {
+          minorGridEnabled: !0
+        }),
+        tooltip: O.new(s, {})
+      })
+    ), y = i.yAxes.push(
+      R.new(s, {
+        renderer: N.new(s, {})
+      })
+    ), f = i.series.push(
+      C.new(s, {
+        name: h || "Price",
+        xAxis: b,
+        yAxis: y,
+        valueXField: "date",
+        openValueYField: "open",
+        highValueYField: "high",
+        lowValueYField: "low",
+        valueYField: "close",
+        tooltip: O.new(s, {
+          labelText: `
+          Open: {openValueY}
+          High: {highValueY}
+          Low: {lowValueY}
+          Close: {valueY}
+          Change: {valueY - openValueY > 0 ? "+" : ""}{((valueY - openValueY)/openValueY*100).toFixed(2)}%
+          `
+        })
+      })
+    );
+    f.columns.template.states.create("riseFromPrevious", {
+      fill: _(c),
+      stroke: _(c)
+    }), f.columns.template.states.create("dropFromPrevious", {
+      fill: _(x),
+      stroke: _(x)
+    });
+    let X = null, v = null;
+    return n && (v = i.yAxes.push(
+      R.new(s, {
+        renderer: N.new(s, {
+          opposite: !0
+        }),
+        numberFormat: "#a"
+      })
+    ), X = i.series.push(
+      F.new(s, {
+        name: "Volume",
+        xAxis: b,
+        yAxis: v,
+        valueYField: "volume",
+        valueXField: "date",
+        fill: _("#2962ff"),
+        stroke: _("#2962ff"),
+        opacity: 0.6
+      })
+    ), X.columns.template.setAll({
+      width: E(80)
+    })), f.data.setAll(t), n && X && X.data.setAll(t), i.appear(1e3), f.appear(1e3), () => {
+      s.dispose();
+    };
+  }, []), U(() => {
+    if (a.current && o.current) {
+      const s = a.current.series.getIndex(
+        0
+      ), i = n ? a.current.series.getIndex(1) : null;
+      s == null || s.data.setAll(t), i == null || i.data.setAll(t);
+    }
+  }, [t, n]), {
+    chartDivRef: r,
+    data: t,
+    seriesName: h,
+    height: m,
+    width: d,
+    chartId: Y,
+    showVolume: n,
+    risingColor: c,
+    fallingColor: x,
+    loading: u,
+    emptyMessage: l,
+    sx: g,
+    other: p,
+    ownerState: w
+  };
+};
+export {
+  $ as useCandlestickChartLogic
+};

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

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