@hybridcore/ui 1.5.90 → 1.6.1

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

@@ -0,0 +1,44 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Typography as n, Divider as l } 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";
+import { DrillDownVoronoiTreemap as d } from "../drill-down-voronoi-treemap/index.js";
+import { Heatmap as f } from "../heatmap/index.js";
+import { LineChart as s } from "../line/index.js";
+import { LogaritmicScale as u } from "../logaritmic-scale/index.js";
+import { MultipleValueAxes as L } from "../multiple-value-axes/index.js";
+import { NestedPie as x } from "../nested-pie/index.js";
+import { PackedCircles as D } from "../packed-circles/index.js";
+import { PieChart as k } from "../pie-chart/index.js";
+import { StackedAreaRadar as S } from "../stacked-area-radar/index.js";
+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 { 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__ */ i(W, { ownerState: t, children: [
+      e === "MultipleValueAxes" && /* @__PURE__ */ r(L, { ...o }),
+      e === "XYChart" && /* @__PURE__ */ r(P, { ...o }),
+      e === "HeatLegend" && /* @__PURE__ */ r(f, { ...o }),
+      e === "PieChart" && /* @__PURE__ */ r(k, { ...o }),
+      e === "StackedColumnChart" && /* @__PURE__ */ r(g, { ...o }),
+      e === "StackedAreaRadar" && /* @__PURE__ */ r(S, { ...o }),
+      e === "LineChart" && /* @__PURE__ */ r(s, { ...o }),
+      e === "NestedPie" && /* @__PURE__ */ r(x, { ...o }),
+      e === "SingleLevelPackedCircles" && /* @__PURE__ */ r(D, { ...o }),
+      e === "LogarithmicScale" && /* @__PURE__ */ r(u, { ...o }),
+      e === "ColumnAndLineMix" && /* @__PURE__ */ r(h, { ...o }),
+      e === "DrillDownTreemap" && /* @__PURE__ */ r(c, { ...o }),
+      e === "DrillDownVoronoiTreemap" && /* @__PURE__ */ r(d, { ...o }),
+      e === "CandlestickChart" && /* @__PURE__ */ r(C, { ...o })
+    ] })
+  ] });
+}
+export {
+  J as ChartWrapper
+};

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

@@ -0,0 +1,47 @@
+import { useThemeProps as v } from "@mui/material";
+import { useMemo as P } from "react";
+import { adaptTemporalData as g } from "./helpers.js";
+const x = (l) => {
+  const n = v({ props: l, name: "HCChartWrapper" }), {
+    title: m,
+    description: d,
+    type: c,
+    interval: i,
+    data: a = [],
+    dimensions: s = [],
+    values: p = [],
+    series: r = [],
+    sx: f,
+    ...u
+  } = n, h = {
+    ...P(() => {
+      let t = { data: a, dimensions: s, values: p };
+      if (s.length > 0) {
+        const o = s.find((e) => e.type === "date");
+        if (o) {
+          let e = o.value.split("/")[1] || i || "day";
+          e === "1M" ? e = "month" : e === "1W" ? e = "week" : e === "1D" ? e = "day" : e === "1Y" && (e = "year"), t = {
+            ...t,
+            baseInterval: { timeUnit: e, count: 1 }
+          };
+        }
+      } else if (r.length > 0) {
+        const o = g(r);
+        t = { ...t, ...o };
+      }
+      return t;
+    }, [i, a, s, p, r]),
+    ...u
+  }, y = { ...n };
+  return {
+    title: m,
+    description: d,
+    type: c,
+    chartProps: h,
+    ownerState: y,
+    sx: f
+  };
+};
+export {
+  x as useChartWrapperLogic
+};

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

@@ -0,0 +1,44 @@
+import { styled as t, Paper as e, Box as r } from "@mui/material";
+const p = t(e, {
+  name: "HCChartWrapper",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column"
+})), n = t(r, {
+  name: "HCChartWrapper",
+  slot: "Header",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  flex: "0 0 auto",
+  padding: o.spacing(1.25, 2)
+})), d = t(r, {
+  name: "HCChartWrapper",
+  slot: "Content",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  minHeight: 0,
+  paddingBottom: 0,
+  // hide amcharts logo
+  "&:after": {
+    content: '""',
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: 70,
+    height: 20,
+    background: o.palette.background.paper,
+    borderRadius: o.shape.borderRadius
+  }
+}));
+export {
+  d as ChartWrapperContent,
+  n as ChartWrapperHeader,
+  p as ChartWrapperRoot
+};

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

@@ -0,0 +1,10 @@
+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%" } }) });
+}
+export {
+  d as ColumnLineMix
+};

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

@@ -0,0 +1,162 @@
+import { R as O, A as R, T as p } from "../../../AnimatedTheme-jnasw6rT.js";
+import { useThemeProps as B, useTheme as I } from "@mui/material";
+import A from "lodash";
+import { useId as M, useRef as z, useEffect as P } from "react";
+import { colorSetFromPalette as E } from "../_common/utils.js";
+import { c as i, p as N, a as F } from "../../../ColorSet-C7vpNXhM.js";
+import { X as V, V as W } from "../../../AxisRenderer-DTyLLA6c.js";
+import { S as q } from "../../../Scrollbar-D86MJyr2.js";
+import { D as H } from "../../../DateAxis-YX3QNIB-.js";
+import { A as X, a as U } from "../../../AxisRendererY-C_ItLPNV.js";
+import { C as _ } from "../../../CategoryAxis-CwnfaGc8.js";
+import { C as $ } from "../../../ColumnSeries-CjgdJ2QL.js";
+import { D as k } from "../../../DataProcessor-CHDO51q4.js";
+import { L as j } from "../../../LineSeries-Uiv5o56b.js";
+import { B as G } from "../../../Bullet-DVczI2TD.js";
+import { C as J } from "../../../Circle-Cy5s-pVc.js";
+import { X as K } from "../../../XYCursor-C8WktvKM.js";
+import { L as Q } from "../../../Legend-Dp_MKfS4.js";
+const ve = (C) => {
+  const f = B({ props: C, name: "HCColumnLineMix" }), {
+    dimensions: t,
+    values: h,
+    data: n,
+    initDelay: b = 0,
+    baseInterval: L,
+    colors: g,
+    sx: T,
+    ...Y
+  } = f, a = I(), x = `hc-column-line-mix-${M().replace(/:/g, "")}`, d = z(null);
+  P(() => {
+    let c;
+    return c = setTimeout(() => {
+      var w, v, y;
+      if (t.length < 1) {
+        console.error("ColumnLineMix requires at least 1 dimension");
+        return;
+      }
+      const e = O.new(x);
+      d.current = e, e.setThemes([R.new(e)]), 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(
+        V.new(e, {
+          panX: !1,
+          panY: !1,
+          wheelX: "none",
+          wheelY: "none",
+          paddingLeft: 0,
+          layout: e.verticalLayout
+        })
+      );
+      r.set("colors", E(e, g)), r.get("colors", {}).set("step", 3), r.set(
+        "scrollbarX",
+        q.new(e, { orientation: "horizontal" })
+      );
+      let s, l = n;
+      t[0].type === "date" ? (l = A.orderBy(n, [t[0].value]), s = r.xAxes.push(
+        H.new(e, {
+          maxDeviation: 0.1,
+          groupData: !1,
+          baseInterval: L || { timeUnit: "day", count: 1 },
+          renderer: X.new(e, {}),
+          tooltip: p.new(e, {})
+        })
+      ), (w = s.get("renderer")) == null || w.grid.template.setAll({
+        stroke: i(a.palette.divider),
+        strokeOpacity: 1
+      })) : (s = r.xAxes.push(
+        _.new(e, {
+          categoryField: t[0].value,
+          renderer: X.new(e, {}),
+          tooltip: p.new(e, {})
+        })
+      ), (v = s.get("renderer")) == null || v.grid.template.setAll({
+        stroke: i(a.palette.divider),
+        strokeOpacity: 1
+      }), e.numberFormatter.setAll({
+        numberFormat: "#",
+        numericFields: ["valueX"]
+      }), l = A.orderBy(n, [t[0].value]), s.data.setAll(l));
+      const u = r.yAxes.push(
+        W.new(e, {
+          min: 0,
+          extraMax: 0.1,
+          renderer: U.new(e, { strokeOpacity: 0.1 })
+        })
+      );
+      (y = u.get("renderer")) == null || y.grid.template.setAll({
+        stroke: i(a.palette.divider),
+        strokeOpacity: 1
+      }), h.forEach((m, S) => {
+        if (S === 0) {
+          const o = r.series.push(
+            $.new(e, {
+              name: m.name,
+              xAxis: s,
+              yAxis: u,
+              valueYField: m.dataFieldName,
+              ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
+              tooltip: p.new(e, {
+                pointerOrientation: "horizontal",
+                labelText: "{name} in {categoryX}: {valueY} {info}"
+              })
+            })
+          );
+          o.columns.template.setAll({
+            tooltipY: N(10),
+            templateField: "columnSettings"
+          }), t[0].type === "date" && (o.data.processor = k.new(e, {
+            dateFormat: "i",
+            dateFields: [t[0].value]
+          })), o.data.setAll(l), o.appear();
+        } else {
+          const o = r.series.push(
+            j.new(e, {
+              name: m.name,
+              xAxis: s,
+              yAxis: u,
+              valueYField: m.dataFieldName,
+              ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value },
+              tooltip: p.new(e, {
+                pointerOrientation: "horizontal",
+                labelText: "{name} in {categoryX}: {valueY} {info}"
+              })
+            })
+          );
+          o.strokes.template.setAll({
+            strokeWidth: 3,
+            templateField: "strokeSettings"
+          }), t[0].type === "date" && (o.data.processor = k.new(e, {
+            dateFormat: "i",
+            dateFields: [t[0].value]
+          })), o.data.setAll(l), o.bullets.push(function() {
+            return G.new(e, {
+              sprite: J.new(e, {
+                strokeWidth: 3,
+                stroke: o.get("stroke"),
+                radius: 5,
+                fill: e.interfaceColors.get("background")
+              })
+            });
+          });
+        }
+      }), r.set("cursor", K.new(e, {})), r.children.push(
+        Q.new(e, {
+          centerX: F,
+          x: F
+        })
+      ).data.setAll(r.series.values), r.appear(1e3, 100);
+    }, b), () => {
+      var e;
+      c && clearTimeout(c), (e = d.current) == null || e.dispose(), d.current = null;
+    };
+  }, [n, t, h, a.palette.mode, g]);
+  const D = { ...f };
+  return { chartId: x, ownerState: D, sx: T, other: Y };
+};
+export {
+  ve as useColumnLineMixLogic
+};

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

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

package/dist/components/charts/drill-down-treemap/index.js

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