@hybridcore/ui 1.6.3 → 1.6.4

package/dist/components/metric-card/MetricChart.js

@@ -1,20 +1,26 @@
-import { jsx as f } from "react/jsx-runtime";
-import { R as u, A as h, T as A } from "../../AnimatedTheme-jnasw6rT.js";
-import { useTheme as g, alpha as v } from "@mui/material";
-import { useRef as x, useLayoutEffect as w } from "react";
-import { X as R, V as y } from "../../AxisRenderer-DTyLLA6c.js";
-import { C as L } from "../../CategoryAxis-CwnfaGc8.js";
-import { A as T, a as b } from "../../AxisRendererY-C_ItLPNV.js";
-import { C as X } from "../../ColumnSeries-CjgdJ2QL.js";
-import { c as d } from "../../ColorSet-C7vpNXhM.js";
-import { L as C } from "../../LineSeries-Uiv5o56b.js";
-const G = ({ data: l, type: n, color: c }) => {
-  const a = x(null), r = g();
-  return w(() => {
-    if (!a.current) return;
-    const e = u.new(a.current);
-    e.setThemes([h.new(e)]);
-    const s = e.container.children.push(
+import { jsx as h } from "react/jsx-runtime";
+import { R as u, A, T as g } from "../../AnimatedTheme-jnasw6rT.js";
+import { useTheme as v, alpha as w } from "@mui/material";
+import { useRef as x, useLayoutEffect as y } from "react";
+import { X as R, V as L } from "../../AxisRenderer-DTyLLA6c.js";
+import { C as T } from "../../CategoryAxis-CwnfaGc8.js";
+import { A as b, a as X } from "../../AxisRendererY-C_ItLPNV.js";
+import { C } from "../../ColumnSeries-CjgdJ2QL.js";
+import { c as a } from "../../ColorSet-C7vpNXhM.js";
+import { L as Y } from "../../LineSeries-Uiv5o56b.js";
+import { L as F } from "../../LinearGradient-DiRq5YcI.js";
+const q = ({
+  data: l,
+  type: p,
+  inset: d = !1,
+  gradient: m = !1
+}) => {
+  const o = x(null), t = v();
+  return y(() => {
+    if (!o.current) return;
+    const e = u.new(o.current);
+    e.setThemes([A.new(e)]);
+    const i = e.container.children.push(
       R.new(e, {
         panX: !1,
         panY: !1,
@@ -25,63 +31,72 @@ const G = ({ data: l, type: n, color: c }) => {
         paddingTop: 0,
         paddingBottom: 0
       })
-    ), i = s.xAxes.push(
-      L.new(e, {
+    ), s = i.xAxes.push(
+      T.new(e, {
         categoryField: "t",
-        renderer: T.new(e, {
+        renderer: b.new(e, {
           minGridDistance: 10
         }),
-        tooltip: A.new(e, {})
+        tooltip: g.new(e, {})
       })
-    ), p = i.get("renderer");
-    p.grid.template.set("visible", !1), p.labels.template.set("visible", !1), i.setAll({
+    ), c = s.get("renderer");
+    c.grid.template.set("visible", !1), c.labels.template.set("visible", !1), s.setAll({
       startLocation: 0.5,
       endLocation: 0.5
-    }), i.data.setAll(l);
-    const o = s.yAxes.push(
-      y.new(e, {
-        renderer: b.new(e, {})
+    }), s.data.setAll(l);
+    const n = i.yAxes.push(
+      L.new(e, {
+        renderer: X.new(e, {})
       })
-    ), m = o.get("renderer");
-    m.grid.template.set("visible", !1), m.labels.template.set("visible", !1);
-    let t;
-    return n === "column" ? (t = s.series.push(
-      X.new(e, {
+    ), f = n.get("renderer");
+    f.grid.template.set("visible", !1), f.labels.template.set("visible", !1);
+    let r;
+    return p === "column" ? (r = i.series.push(
+      C.new(e, {
         name: "Series",
-        xAxis: i,
-        yAxis: o,
+        xAxis: s,
+        yAxis: n,
         valueYField: "v",
         categoryXField: "t",
-        fill: d(r.palette.divider)
+        fill: a(t.palette.divider)
       })
-    ), t.columns.template.setAll({
+    ), r.columns.template.setAll({
       cornerRadiusTL: 2,
       cornerRadiusTR: 2,
       strokeOpacity: 0
-    })) : (t = s.series.push(
-      C.new(e, {
+    })) : (r = i.series.push(
+      Y.new(e, {
         name: "Series",
-        xAxis: i,
-        yAxis: o,
+        xAxis: s,
+        yAxis: n,
         valueYField: "v",
         categoryXField: "t",
         // @ts-expect-error amcharts5 typing accepts string/Color; alpha returns rgba string
-        fill: v(r.palette.divider, 0.25),
-        stroke: d(r.palette.divider)
+        fill: w(t.palette.divider, 0.25),
+        stroke: a(t.palette.divider)
       })
-    ), t.strokes.template.setAll({
+    ), r.strokes.template.setAll({
       strokeWidth: 1
-    }), t.fills.template.setAll({
+    }), r.fills.template.setAll({
       fillOpacity: 1,
-      visible: !0
-    })), t.data.setAll(l), t.appear(1e3), s.appear(1e3, 100), () => {
+      visible: !0,
+      ...m && {
+        fillGradient: F.new(e, {
+          rotation: 90,
+          stops: [
+            { color: a(t.palette.divider), opacity: 0.6 },
+            { color: a(t.palette.divider), opacity: 0 }
+          ]
+        })
+      }
+    })), r.data.setAll(l), r.appear(1e3), i.appear(1e3, 100), () => {
       e.dispose();
     };
-  }, [l, n, c, r.palette.mode, r.palette.divider]), /* @__PURE__ */ f(
+  }, [l, p, d, m, t.palette.mode, t.palette.divider]), /* @__PURE__ */ h(
     "div",
     {
-      ref: a,
-      style: {
+      ref: o,
+      style: d ? { width: "100%", height: "100%" } : {
         width: "calc(100% + 10px)",
         height: "100%",
         marginBottom: -21,
@@ -91,5 +106,5 @@ const G = ({ data: l, type: n, color: c }) => {
   );
 };
 export {
-  G as MetricChart
+  q as MetricChart
 };

package/dist/components/metric-card/helpers.js

@@ -0,0 +1,18 @@
+const e = (r, a = "default") => {
+  switch (a) {
+    case "primary":
+      return r.palette.primary.main;
+    case "success":
+      return r.palette.success.main;
+    case "warning":
+      return r.palette.warning.main;
+    case "danger":
+      return r.palette.error.main;
+    default:
+      return;
+  }
+}, t = (r, a) => a === "up" ? r.palette.success.main : a === "down" ? r.palette.error.main : r.palette.text.secondary;
+export {
+  t as trendColor,
+  e as variantColor
+};

package/dist/components/metric-card/index.js

@@ -1,44 +1,77 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { jsx as t, jsxs as n, Fragment as x } from "react/jsx-runtime";
 import { Stack as a, Skeleton as c } from "@mui/material";
-import { Widget as l } from "../widget/styled.js";
-import { MetricChart as u } from "./MetricChart.js";
-import { useMetricCardLogic as M } from "./logic.js";
-import { MetricCardRoot as v, MetricCardCornerIconContainer as I, MetricCardIconContainer as s, MetricCardContent as y, MetricCardLabel as S, MetricCardValue as T, MetricCardTrendContainer as b, MetricCardDescription as z, MetricCardChartContainer as j } from "./styled.js";
-const A = (t) => {
-  const { state: C } = M(t), {
-    ownerState: r,
-    calculatedValue: x,
-    calculatedChange: o,
-    TrendIcon: m,
-    Icon: i,
-    showCornerIcon: g,
-    showSideIcon: d,
-    chartColor: w,
-    iconPosition: h,
-    snapshotPayload: f
-  } = C;
-  return t.loading ? /* @__PURE__ */ e(v, { ownerState: r, sx: t.sx, children: /* @__PURE__ */ n(a, { spacing: 1, children: [
-    /* @__PURE__ */ e(c, { variant: "text", width: "60%" }),
-    /* @__PURE__ */ e(c, { variant: "rectangular", height: 40, width: "40%" }),
-    /* @__PURE__ */ e(c, { variant: "text", width: "80%" }),
-    t.showChart && /* @__PURE__ */ e(
-      c,
-      {
-        variant: "rectangular",
-        height: 40,
-        width: "100%",
-        sx: { mt: 2 }
-      }
-    )
-  ] }) }) : /* @__PURE__ */ e(l.Root, { sx: t.sx, "data-snapshot": f, children: /* @__PURE__ */ n(
-    l.Content,
+import { MetricChart as g } from "./MetricChart.js";
+import { useMetricCardLogic as b } from "./logic.js";
+import { MetricCardRoot as u, MetricCardValue as j, MetricCardTrendContainer as z, MetricCardLabel as m, MetricCardPanel as k, MetricCardDescription as w, MetricCardSideChart as P, MetricCardCornerIconContainer as L, MetricCardIconContainer as f, MetricCardContent as V, MetricCardChartContainer as A } from "./styled.js";
+const B = (e) => {
+  const { state: v } = b(e), {
+    ownerState: i,
+    layout: d,
+    calculatedValue: M,
+    calculatedChange: h,
+    TrendIcon: y,
+    Icon: r,
+    showCornerIcon: I,
+    showSideIcon: l,
+    iconPosition: o,
+    snapshotPayload: S
+  } = v, s = !!e.showChart && !!e.chartType && (e.value ?? []).length >= 2, T = (e.showChange || e.showTrend) && h !== "—";
+  if (e.loading)
+    return /* @__PURE__ */ t(u, { ownerState: i, sx: e.sx, children: /* @__PURE__ */ n(a, { spacing: 1, children: [
+      /* @__PURE__ */ t(c, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ t(c, { variant: "rectangular", height: 40, width: "40%" }),
+      /* @__PURE__ */ t(c, { variant: "text", width: "80%" }),
+      e.showChart && /* @__PURE__ */ t(
+        c,
+        {
+          variant: "rectangular",
+          height: 40,
+          width: "100%",
+          sx: { mt: 2 }
+        }
+      )
+    ] }) });
+  const C = /* @__PURE__ */ n(
+    a,
     {
-      sx: {
-        py: { xs: 1, md: 1.5 },
-        px: { xs: 1, md: 2 }
-      },
+      direction: "row",
+      alignItems: "center",
+      spacing: 1,
+      flexWrap: d === "panel" ? "nowrap" : "wrap",
       children: [
-        g && i && /* @__PURE__ */ e(I, { ownerState: r, children: /* @__PURE__ */ e(i, { size: 24 }) }),
+        /* @__PURE__ */ t(j, { variant: "h4", ownerState: i, children: M }),
+        T && /* @__PURE__ */ n(z, { ownerState: i, children: [
+          d === "overlay" && e.showTrend && /* @__PURE__ */ t(y, { size: 16 }),
+          e.showChange && h
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(
+    u,
+    {
+      ownerState: i,
+      sx: e.sx,
+      "data-snapshot": S,
+      children: d === "panel" ? /* @__PURE__ */ n(x, { children: [
+        /* @__PURE__ */ t(m, { variant: "body2", children: e.label }),
+        /* @__PURE__ */ n(k, { children: [
+          /* @__PURE__ */ n(a, { justifyContent: "center", spacing: 0.5, sx: { flexShrink: 0 }, children: [
+            C,
+            e.description && /* @__PURE__ */ t(w, { variant: "caption", children: e.description })
+          ] }),
+          s && /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(
+            g,
+            {
+              type: e.chartType,
+              data: e.value,
+              inset: !0,
+              gradient: !0
+            }
+          ) })
+        ] })
+      ] }) : /* @__PURE__ */ n(x, { children: [
+        I && r && /* @__PURE__ */ t(L, { ownerState: i, children: /* @__PURE__ */ t(r, { size: 24 }) }),
         /* @__PURE__ */ n(
           a,
           {
@@ -47,27 +80,12 @@ const A = (t) => {
             alignItems: "flex-start",
             sx: { flex: 1 },
             children: [
-              d && i && h === "left" && /* @__PURE__ */ e(s, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
-              /* @__PURE__ */ n(y, { ownerState: r, children: [
-                /* @__PURE__ */ e(S, { variant: "body2", ownerState: r, children: t.label }),
-                /* @__PURE__ */ n(
-                  a,
-                  {
-                    direction: "row",
-                    alignItems: "baseline",
-                    spacing: 1,
-                    flexWrap: "wrap",
-                    children: [
-                      /* @__PURE__ */ e(T, { variant: "h4", ownerState: r, children: x }),
-                      (t.showChange || t.showTrend) && o !== "—" && /* @__PURE__ */ n(b, { ownerState: r, children: [
-                        t.showTrend && /* @__PURE__ */ e(m, { size: 16 }),
-                        t.showChange && o
-                      ] })
-                    ]
-                  }
-                )
+              l && r && o === "left" && /* @__PURE__ */ t(f, { ownerState: i, children: /* @__PURE__ */ t(r, { sx: { fontSize: 24 } }) }),
+              /* @__PURE__ */ n(V, { children: [
+                /* @__PURE__ */ t(m, { variant: "body2", children: e.label }),
+                C
               ] }),
-              d && i && h === "right" && /* @__PURE__ */ e(s, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) })
+              l && r && o === "right" && /* @__PURE__ */ t(f, { ownerState: i, children: /* @__PURE__ */ t(r, { sx: { fontSize: 24 } }) })
             ]
           }
         ),
@@ -78,30 +96,22 @@ const A = (t) => {
             spacing: 1,
             sx: { width: "100%", mt: 2 },
             children: [
-              t.description && /* @__PURE__ */ e(
-                z,
+              e.description && /* @__PURE__ */ t(
+                w,
                 {
                   variant: "caption",
-                  ownerState: r,
                   sx: { textAlign: { xs: "center", sm: "left" } },
-                  children: t.description
+                  children: e.description
                 }
               ),
-              t.showChart && t.chartType && (t.value ?? []).length >= 2 && /* @__PURE__ */ e(j, { ownerState: r, children: /* @__PURE__ */ e(
-                u,
-                {
-                  type: t.chartType,
-                  data: t.value,
-                  color: w
-                }
-              ) })
+              s && /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(g, { type: e.chartType, data: e.value }) })
             ]
           }
         )
-      ]
+      ] })
     }
-  ) });
+  );
 };
 export {
-  A as MetricCard
+  B as MetricCard
 };

package/dist/components/metric-card/logic.js

@@ -1,107 +1,95 @@
-import { useThemeProps as k, useTheme as _ } from "@mui/material";
-import { c as N } from "../../createReactComponent-C7L-DMHj.js";
+import { useThemeProps as U } from "@mui/material";
+import { c as p } from "../../createReactComponent-C7L-DMHj.js";
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const D = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], $ = N("outline", "arrow-right", "ArrowRight", D);
+const A = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], B = p("outline", "arrow-right", "ArrowRight", A);
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const x = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], S = N("outline", "trending-down", "TrendingDown", x);
+const O = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], V = p("outline", "trending-down", "TrendingDown", O);
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const F = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], P = N("outline", "trending-up", "TrendingUp", F), O = (w) => {
-  const p = k({ props: w, name: "HCMetricCard" }), {
-    value: e = [],
-    variant: s = "default",
-    showChange: y = !1,
-    changeType: i = "percentage",
-    showTrend: b = !1,
-    showIcon: v = !1,
-    icon: d,
-    iconPosition: g = "right"
-  } = p, r = _(), u = e.length > 0;
-  let h = "—", f = "";
-  if (u) {
-    const n = e[e.length - 1], t = Number(n.v);
-    isNaN(t) || (h = new Intl.NumberFormat("en-US", {
+const Z = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], H = p("outline", "trending-up", "TrendingUp", Z), j = (I) => {
+  const r = U({ props: I, name: "HCMetricCard" }), {
+    value: o = [],
+    variant: M = "default",
+    layout: u = "overlay",
+    valuePrefix: T,
+    valueSuffix: b,
+    showChange: C = !1,
+    changeType: s = "percentage",
+    showTrend: $ = !1,
+    showIcon: f = !1,
+    icon: i,
+    iconPosition: l = "right"
+  } = r, k = o.length > 0, d = o[o.length - 1], m = o[o.length - 2], e = d ? Number(d.v) : NaN, t = m ? Number(m.v) : NaN, v = !isNaN(e) && !isNaN(t);
+  let c = "—", N = "";
+  if (!isNaN(e)) {
+    const y = new Intl.NumberFormat("en-US", {
       maximumFractionDigits: 2
-    }).format(t), f = n.t);
+    }).format(e);
+    c = `${T ?? ""}${y}${b ?? ""}`, N = d.t;
   }
-  let o;
-  if (y)
-    if (e.length >= 2) {
-      const n = Number(e[e.length - 1].v), t = Number(e[e.length - 2].v);
-      if (isNaN(n) || isNaN(t))
-        o = "—";
-      else if (t === 0 && i === "percentage")
-        o = "—";
-      else {
-        let c = 0;
-        i === "absolute" ? c = n - t : c = (n - t) / t * 100, o = `${c > 0 ? "+" : c < 0 ? "−" : ""}${Math.abs(c).toFixed(
-          i === "percentage" ? 1 : 2
-        )}${i === "percentage" ? "%" : ""}`;
-      }
-    } else
-      o = "—";
   let a;
-  if (b && e.length >= 2) {
-    const n = Number(e[e.length - 1].v), t = Number(e[e.length - 2].v);
-    !isNaN(n) && !isNaN(t) && (n > t ? a = "up" : n < t ? a = "down" : a = "neutral");
-  }
-  let m = $;
-  a === "up" ? m = P : a === "down" && (m = S);
-  const M = v && !!d && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
-    g
-  ), T = v && !!d && ["left", "right"].includes(g);
-  let l = r.palette.text.secondary;
-  s === "primary" && (l = r.palette.primary.main), s === "success" && (l = r.palette.success.main), s === "warning" && (l = r.palette.warning.main), s === "danger" && (l = r.palette.error.main);
-  const I = JSON.stringify({
-    metric: p.label,
-    value: h,
-    change: o,
-    asOf: f
-  }), C = {
-    ...p,
-    calculatedValue: h,
-    calculatedChange: o,
-    calculatedTrend: a,
-    hasData: u,
-    changeType: i,
-    iconPosition: g,
-    variant: s
+  if (C)
+    if (v && !(t === 0 && s === "percentage")) {
+      const h = s === "absolute" ? e - t : (e - t) / t * 100, P = h > 0 ? "+" : h < 0 ? "−" : "", F = s === "percentage" ? 1 : 2, R = s === "percentage" ? "%" : "";
+      a = `${P}${Math.abs(h).toFixed(F)}${R}`;
+    } else
+      a = "—";
+  let n;
+  $ && v && (e > t ? n = "up" : e < t ? n = "down" : n = "neutral");
+  let g = B;
+  n === "up" ? g = H : n === "down" && (g = V);
+  const w = [
+    "top-left",
+    "top-right",
+    "bottom-left",
+    "bottom-right"
+  ].includes(l), _ = f && !!i && w, x = f && !!i && !w, D = JSON.stringify({
+    metric: r.label,
+    value: c,
+    change: a,
+    asOf: N
+  }), S = {
+    ...r,
+    variant: M,
+    layout: u,
+    changeType: s,
+    iconPosition: l,
+    calculatedValue: c,
+    calculatedChange: a,
+    calculatedTrend: n,
+    hasData: k
   };
   return {
     refs: {},
     state: {
-      ownerState: C,
-      calculatedValue: h,
-      calculatedChange: o,
-      calculatedTrend: a,
-      hasData: u,
-      asOf: f,
-      TrendIcon: m,
-      Icon: d,
-      showCornerIcon: M,
-      showSideIcon: T,
-      chartColor: l,
-      variant: s,
-      iconPosition: g,
-      snapshotPayload: I
+      ownerState: S,
+      layout: u,
+      calculatedValue: c,
+      calculatedChange: a,
+      TrendIcon: g,
+      Icon: i,
+      showCornerIcon: _,
+      showSideIcon: x,
+      iconPosition: l,
+      snapshotPayload: D
     },
     actions: {}
   };
 };
 export {
-  O as useMetricCardLogic
+  j as useMetricCardLogic
 };