@hybridcore/ui 1.5.80 → 1.5.82

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

@@ -0,0 +1,525 @@
+import { jsx as k } from "react/jsx-runtime";
+import { h as S, m as F, i as p, j as v, k as L, l as X, V as z, b as Y, A as j, X as E, c as G, g as O, d as Z, f as w } from "../../AxisRendererY-kADUad00.js";
+import { useRef as q, useLayoutEffect as V } from "react";
+import { C as B } from "../../ColumnSeries-BTcqshjB.js";
+import { L as W } from "../../LineSeries-CfcpoYla.js";
+class P extends S {
+  constructor() {
+    super(...arguments), Object.defineProperty(this, "_frequency", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 1
+    }), Object.defineProperty(this, "_itemMap", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: {}
+    });
+  }
+  _afterNew() {
+    this._settings.themeTags = F(this._settings.themeTags, ["axis"]), this.fields.push("category", "id", "cellSize"), this.setPrivateRaw("name", "category"), this.addTag("category"), super._afterNew();
+  }
+  _afterDataChange() {
+    super._afterDataChange();
+    const t = this.dataItems.length;
+    t > 0 && this.setPrivateRaw("maxZoomFactor", t), this.setPrivateRaw("startIndex", Math.min(this.getPrivate("startIndex", 0), t)), this.setPrivateRaw("endIndex", Math.min(this.getPrivate("endIndex", t), 1));
+  }
+  _prepareChildren() {
+    super._prepareChildren();
+    const t = this.dataItems.length;
+    let e = 0;
+    this._valuesDirty && (this._itemMap = {}, p(this.dataItems, (r) => {
+      r.setRaw("index", e), this._itemMap[r.get("category")] = r, e++;
+    }), this.setPrivateRaw("maxZoomFactor", t));
+    let a = this.get("start", 0), i = this.get("end", 1), s = this._getIndices(a, i);
+    this.setPrivateRaw("startIndex", s.startIndex), this.setPrivateRaw("endIndex", s.endIndex), (this._sizeDirty || this._valuesDirty || this.isDirty("start") || this.isDirty("end") || this.isPrivateDirty("endIndex") || this.isPrivateDirty("startIndex") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) && this.dataItems.length > 0 && (this._handleRangeChange(), this._prepareAxisItems(), this._updateAxisRanges());
+  }
+  /**
+   * @ignore
+   */
+  adjustZoom() {
+    const t = this.dataItems.length;
+    if (t > 1) {
+      let e = this.get("maxZoomCount", this.dataItems.length), a = this.get("minZoomCount", 1), i = 0, s = this.getPrivate("startIndex", 0), r = this.getPrivate("endIndex", 0);
+      const d = this._sAnimation, o = this._eAnimation;
+      let l = this.get("start", 0), n = !1;
+      d && !d.stopped && (l = Number(d.to), n = !0);
+      let m = this.get("end", 1);
+      if (o && !o.stopped && (m = Number(o.to), n = !0), n) {
+        const h = this._getIndices(l, m);
+        s = h.startIndex, r = h.endIndex;
+      }
+      for (let h = s; h < r; h++) {
+        const g = this.dataItems[h];
+        i += g.get("finalCellSize", 1);
+      }
+      if (i <= a) {
+        let h = 0;
+        for (let g = s; g < t; g++) {
+          const f = this.dataItems[g];
+          if (h += f.get("finalCellSize", 1), r = g + 1, h >= a)
+            break;
+        }
+        if (h < a)
+          for (let g = s - 1; g >= 0; g--) {
+            const f = this.dataItems[g];
+            if (h += f.get("finalCellSize", 1), s = g, h >= a)
+              break;
+          }
+        this.zoomToIndexes(s, r);
+      } else if (i >= e) {
+        let h = i;
+        for (let g = r - 1; g >= s; g--) {
+          const f = this.dataItems[g];
+          if (h -= f.get("finalCellSize", 1), h <= e) {
+            r = g + 1;
+            break;
+          }
+        }
+        this.zoomToIndexes(s, r);
+      }
+    }
+  }
+  _handleRangeChange() {
+    p(this.series, (t) => {
+      let e = this.dataItems[this.startIndex()].get("category"), a = this.dataItems[this.endIndex() - 1].get("category"), i = t.get("baseAxis"), s = t.get("xAxis"), r = t.get("yAxis");
+      if (s instanceof P && r instanceof P)
+        t._markDirtyAxes();
+      else if (i === this) {
+        let d, o, l = r;
+        if (s === i ? (t.get("categoryXField") && (d = "categoryX"), t.get("openCategoryXField") && (o = "openCategoryX")) : r === i && (t.get("categoryYField") && (d = "categoryY"), t.get("openCategoryYField") && (o = "openCategoryY"), l = s), l instanceof z && (d || o)) {
+          let h = function(u, y, c, _, N, R) {
+            let x, C = y.categoryToIndex(N);
+            for (; !x && C >= 0 && C < y.dataItems.length; ) {
+              let D = y.dataItems[C].get("category");
+              if (R == "previous")
+                for (let I = u.dataItems.length - 1; I >= 0; I--) {
+                  let b = u.dataItems[I];
+                  if (c && b.get(c) === D) {
+                    x = b;
+                    break;
+                  }
+                  if (_ && b.get(_) === D) {
+                    x = b;
+                    break;
+                  }
+                }
+              else
+                for (let I = 0, b = u.dataItems.length; I < b; I++) {
+                  let M = u.dataItems[I];
+                  if (c && M.get(c) === D) {
+                    x = M;
+                    break;
+                  }
+                  if (_ && M.get(_) === D) {
+                    x = M;
+                    break;
+                  }
+                }
+              x || (C += R === "previous" ? -1 : 1);
+            }
+            return x;
+          }, n, m;
+          n = h(t, this, d, o, e, "next"), m = h(t, this, d, o, a, "previous");
+          let g = 0, f = t.dataItems.length;
+          n && (g = t.dataItems.indexOf(n)), m && (f = t.dataItems.indexOf(m) + 1), t.setPrivate("startIndex", g), t.setPrivate("endIndex", f);
+          let T = !1;
+          for (let u = g; u < f; u++) {
+            const y = t.dataItems[u];
+            if (p(t.__valueXShowFields, (c) => {
+              y.get(c) != null && (T = !0);
+            }), p(t.__valueYShowFields, (c) => {
+              y.get(c) != null && (T = !0);
+            }), T)
+              break;
+          }
+          t.setPrivate("outOfSelection", !T);
+        }
+        t._markDirtyAxes();
+      }
+    });
+  }
+  _prepareAxisItems() {
+    var t;
+    const e = this.get("renderer"), a = this.dataItems.length;
+    let i = this.startIndex();
+    i > 0 && i--;
+    let s = this.endIndex();
+    s < a && s++;
+    const r = e.get("minorLabelsEnabled"), d = e.get("minorGridEnabled", r);
+    let o = e.axisLength() / Math.max(e.get("minGridDistance"), 1), l = Math.max(1, Math.min(a, Math.ceil((s - i) / o)));
+    i = Math.floor(i / l) * l, this._frequency = l;
+    for (let m = 0; m < a; m++)
+      this._toggleDataItem(this.dataItems[m], !1);
+    let n = this.dataItems[i].get("index", 0);
+    for (let m = i; m < s; m = m + l) {
+      let h = this.dataItems[m];
+      this._createAssets(h, []), this._toggleDataItem(h, !0);
+      let g = l;
+      d && (g = 1), this._prepareDataItem(h, n, g), n++;
+    }
+    if (e.get("minorGridEnabled"))
+      for (let m = i; m < s; m++) {
+        let h = this.dataItems[m];
+        m % l != 0 && (this._createAssets(h, ["minor"], !0), this._toggleDataItem(h, !0), this._prepareDataItem(h, 0, 1), r || (t = h.get("label")) === null || t === void 0 || t.setPrivate("visible", !1));
+      }
+    this._updateGhost();
+  }
+  _prepareDataItem(t, e, a) {
+    let i = this.get("renderer"), s = t.get("categoryLocation", 0), r = t.get("endCategoryLocation", 1), d = t.get("index");
+    v(d) || (d = this.categoryToIndex(t.get("category")));
+    let o = this.indexToPosition(d, s), l = t.get("endCategory"), n;
+    l ? (n = this.categoryToIndex(l), v(n) || (n = d)) : n = d;
+    let m = this.indexToPosition(n, r), h, g;
+    if (t.get("isRange")) {
+      if (h = n, !v(d)) {
+        this._toggleDataItem(t, !1);
+        return;
+      }
+    } else
+      h = d + this._frequency - 1;
+    g = this.indexToPosition(h, r), i.updateLabel(t.get("label"), o, m, a), i.updateGrid(t.get("grid"), o, m), i.updateTick(t.get("tick"), o, m, a), i.updateFill(t.get("axisFill"), o, g), this._processBullet(t), i.updateBullet(t.get("bullet"), o, m);
+    const f = this.get("fillRule");
+    f && f(t, e);
+  }
+  startIndex() {
+    let t = this.dataItems.length;
+    return Math.min(Math.max(this.getPrivate("startIndex", 0), 0), t - 1);
+  }
+  endIndex() {
+    let t = this.dataItems.length;
+    return Math.max(1, Math.min(this.getPrivate("endIndex", t), t));
+  }
+  /**
+   * @ignore
+   */
+  baseValue() {
+  }
+  /**
+   * @ignore
+   */
+  basePosition() {
+    return 0;
+  }
+  /**
+   * Returns X coordinate in pixels corresponding to specific category index.
+   *
+   * @param   value  Index
+   * @return         X coordinate
+   */
+  getX(t) {
+    let e = this._itemMap[t];
+    return e ? this._settings.renderer.positionToCoordinate(this.indexToPosition(e.get("index", 0))) : NaN;
+  }
+  /**
+   * Returns Y coordinate in pixels corresponding to specific category index.
+   *
+   * @param   value  Index
+   * @return         Y coordinate
+   */
+  getY(t) {
+    let e = this._itemMap[t];
+    return e ? this._settings.renderer.positionToCoordinate(this.indexToPosition(e.get("index", 0))) : NaN;
+  }
+  /**
+   * @ignore
+   */
+  getDataItemPositionX(t, e, a, i) {
+    const s = t.get(e), r = this._itemMap[s];
+    return r ? this.indexToPosition(r.get("index", 0), a) : NaN;
+  }
+  /**
+   * @ignore
+   */
+  getDataItemCoordinateX(t, e, a, i) {
+    return this._settings.renderer.positionToCoordinate(this.getDataItemPositionX(t, e, a, i));
+  }
+  /**
+   * @ignore
+   */
+  getDataItemPositionY(t, e, a, i) {
+    const s = t.get(e), r = this._itemMap[s];
+    return r ? this.indexToPosition(r.get("index", 0), a) : NaN;
+  }
+  /**
+   * @ignore
+   */
+  getDataItemCoordinateY(t, e, a, i) {
+    return this._settings.renderer.positionToCoordinate(this.getDataItemPositionY(t, e, a, i));
+  }
+  /**
+   * Converts category index to a relative position.
+   *
+   * `location` indicates relative position within category: 0 - start, 1 - end.
+   *
+   * If not set, will use middle (0.5) of the category.
+   *
+   * @param   index     Index
+   * @param   location  Location
+   * @return            Index
+   */
+  indexToPosition(t, e, a) {
+    let i = this.dataItems.length, s = 0;
+    if (i == 0 || (t >= i && (t = i - 1, e = 1), v(e) || (e = 0.5), !v(t)))
+      return 0;
+    let r = this.get("startLocation", 0), d = this.get("endLocation", 1);
+    if (!this.get("cellSizeField"))
+      i -= r, i -= 1 - d, s = (t + e - r) / i;
+    else {
+      let o = a ? "finalCellSize" : "cellSize";
+      const l = this.dataItems;
+      let n = 0;
+      p(this.dataItems, (g) => {
+        n += g.get(o, 1);
+      }), n -= r * l[0].get(o, 1), n -= (1 - d) * l[l.length - 1].get(o, 1);
+      let m = 0;
+      for (let g = 0; g < t; g++)
+        m += l[g].get(o, 1);
+      let h = l[t].get(o, 1);
+      s = (m + e * h - r * l[0].get(o, 1)) / n;
+    }
+    if (!a) {
+      let o = this.dataItems[t];
+      o && (s += o.get("deltaPosition", 0));
+    }
+    return s;
+  }
+  /**
+   * Returns a position of a category.
+   *
+   * @param   category  Category to look up
+   * @return            Position
+   */
+  categoryToPosition(t) {
+    let e = this._itemMap[t];
+    return e ? this.indexToPosition(e.get("index")) : NaN;
+  }
+  /**
+   * Returns an index of a category.
+   *
+   * @param   category  Category to look up
+   * @return            Index
+   */
+  categoryToIndex(t) {
+    let e = this._itemMap[t];
+    return e ? e.get("index") : NaN;
+  }
+  /**
+   * @ignore
+   */
+  dataItemToPosition(t) {
+    return this.indexToPosition(t.get("index"));
+  }
+  /**
+   * @ignore
+   */
+  roundAxisPosition(t, e) {
+    return t += (0.5 - e) / this.dataItems.length, this.indexToPosition(this.axisPositionToIndex(t), e);
+  }
+  /**
+   * Returns an index of the category that corresponds to specific pixel
+   * position within axis.
+   *
+   * @param position  Position (px)
+   * @return Category index
+   */
+  axisPositionToIndex(t) {
+    let e = this.dataItems.length;
+    if (e === 0)
+      return 0;
+    if (this.get("cellSizeField")) {
+      let a = 0, i = [];
+      p(this.dataItems, (l) => {
+        const n = l.get("cellSize", 1);
+        i.push(n), a += n;
+      });
+      let s = this.get("startLocation", 0), r = this.get("endLocation", 1);
+      a -= s, a -= 1 - r;
+      let d = t * a + s, o = 0;
+      for (let l = 0; l < e; l++) {
+        const n = i[l];
+        if (d < o + n)
+          return l;
+        o += n;
+      }
+      return e - 1;
+    } else
+      return L(Math.floor(t * e), 0, e - 1);
+  }
+  /**
+   * Returns text to be used in an axis tooltip for specific relative position.
+   *
+   * @param   position  Position
+   * @return            Tooltip text
+   */
+  getTooltipText(t, e) {
+    const a = this.dataItems[this.axisPositionToIndex(t)];
+    if (a) {
+      const i = a.get("label");
+      if (i)
+        return X(i, this.get("tooltipText", ""));
+    }
+  }
+  _updateTooltipText(t, e) {
+    t._setDataItem(this.dataItems[this.axisPositionToIndex(e)]), t.label.text.markDirtyText();
+  }
+  /**
+   * Returns a data item from series that is closest to the `position`.
+   *
+   * @param   series    Series
+   * @param   position  Relative position
+   * @return            Data item
+   */
+  getSeriesItem(t, e) {
+    if (this.dataItems.length > 0) {
+      let a = this.getPrivate("name") + this.get("renderer").getPrivate("letter"), i = this.axisPositionToIndex(e), s = t.dataItems[i], r = this.dataItems[i], d = r.get("category");
+      if (s && r && s.get(a) === d)
+        return s;
+      for (let o = 0, l = t.dataItems.length; o < l; o++) {
+        let n = t.dataItems[o];
+        if (n.get(a) === d)
+          return n;
+      }
+    }
+  }
+  _getIndices(t, e) {
+    let a = this.dataItems.length, i = 0, s = a, r = "cellSize";
+    if (this.get("cellSizeField")) {
+      let d = 0;
+      const o = this.dataItems;
+      if (o.length == 0)
+        return { startIndex: 0, endIndex: 0 };
+      p(o, (n) => {
+        d += n.get(r, 1);
+      }), d -= this.get("startLocation", 0) * o[0].get(r, 1), d -= (1 - this.get("endLocation", 1)) * o[o.length - 1].get(r, 1);
+      let l = 0;
+      for (let n = 0; n < a; n++)
+        if (l += this.dataItems[n].get(r, 1), Math.round(l) > Math.round(t * d)) {
+          i = n;
+          break;
+        }
+      for (let n = i + 1; n < a; n++)
+        if (l += this.dataItems[n].get(r, 1), Math.round(l) >= Math.round(e * d)) {
+          s = n + 1;
+          break;
+        }
+      i = Math.max(i, 0), s = Math.min(s, a);
+    } else
+      i = Math.max(Math.round(this.get("start", 0) * a), 0), s = Math.min(Math.round(this.get("end", 1) * a), a);
+    return { startIndex: i, endIndex: s };
+  }
+  /**
+   * Zooms the axis to specific `start` and `end` indexes.
+   *
+   * Optional `duration` specifies duration of zoom animation in milliseconds.
+   *
+   * @param  start     Start index
+   * @param  end       End index
+   * @param  duration  Duration in milliseconds
+   */
+  zoomToIndexes(t, e, a) {
+    let i = this.dataItems.length;
+    this.get("cellSizeField") ? (t = Math.min(Math.max(t, 0), i), e = Math.max(Math.min(e, i), 1), this.setPrivateRaw("startIndex", t), this.setPrivateRaw("endIndex", e), this.zoom(this.indexToPosition(t, 0, !0), this.indexToPosition(e, 0, !0), a)) : this.zoom(t / i, e / i, a);
+  }
+  zoomToCategories(t, e, a) {
+    this.zoomToIndexes(this.categoryToIndex(t), this.categoryToIndex(e) + 1, a);
+  }
+  /**
+   * Returns position span between start and end of a single cell in axis.
+   *
+   * @since 5.2.30
+   * @return Position
+   */
+  getCellWidthPosition() {
+    return this._frequency / this.dataItems.length / (this.get("end", 1) - this.get("start", 0));
+  }
+  /**
+   * @ignore
+   */
+  nextPosition(t) {
+    t == null && (t = 1), this.get("renderer").getPrivate("letter") == "Y" && (t *= -1);
+    const e = this.getPrivate("tooltipPosition", 0), a = L(this.axisPositionToIndex(e) + t, 0, this.dataItems.length - 1);
+    return this.toGlobalPosition(this.indexToPosition(a));
+  }
+}
+Object.defineProperty(P, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "CategoryAxis"
+});
+Object.defineProperty(P, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: S.classNames.concat([P.className])
+});
+const $ = ({ data: A, type: t, color: e }) => {
+  const a = q(null);
+  return V(() => {
+    if (!a.current) return;
+    const i = Y.new(a.current);
+    i.setThemes([j.new(i)]);
+    const s = i.container.children.push(
+      E.new(i, {
+        panX: !1,
+        panY: !1,
+        wheelX: "none",
+        wheelY: "none",
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0
+      })
+    ), r = s.xAxes.push(
+      P.new(i, {
+        categoryField: "t",
+        renderer: G.new(i, {
+          minGridDistance: 10
+        }),
+        tooltip: O.new(i, {})
+      })
+    ), d = r.get("renderer");
+    d.grid.template.set("visible", !1), d.labels.template.set("visible", !1), r.data.setAll(A);
+    const o = s.yAxes.push(
+      z.new(i, {
+        renderer: Z.new(i, {})
+      })
+    ), l = o.get("renderer");
+    l.grid.template.set("visible", !1), l.labels.template.set("visible", !1);
+    let n;
+    return t === "column" ? (n = s.series.push(
+      B.new(i, {
+        name: "Series",
+        xAxis: r,
+        yAxis: o,
+        valueYField: "v",
+        categoryXField: "t",
+        fill: w(e),
+        stroke: w(e)
+      })
+    ), n.columns.template.setAll({
+      cornerRadiusTL: 2,
+      cornerRadiusTR: 2,
+      strokeOpacity: 0
+    })) : (n = s.series.push(
+      W.new(i, {
+        name: "Series",
+        xAxis: r,
+        yAxis: o,
+        valueYField: "v",
+        categoryXField: "t",
+        fill: w(e),
+        stroke: w(e)
+      })
+    ), n.strokes.template.setAll({
+      strokeWidth: 2
+    })), n.data.setAll(A), n.appear(1e3), s.appear(1e3, 100), () => {
+      i.dispose();
+    };
+  }, [A, t, e]), /* @__PURE__ */ k("div", { ref: a, style: { width: "100%", height: "100%" } });
+};
+export {
+  $ as MetricChart
+};

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

@@ -1,54 +1,97 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { Stack as a } from "@mui/material";
-import * as g from "react";
-import { useMetricCardLogic as I } from "./logic.js";
-import { MetricCardRoot as u, MetricCardCornerIconContainer as w, MetricCardIconContainer as d, MetricCardContent as S, MetricCardLabel as v, MetricCardValue as y, MetricCardTrendContainer as b, MetricCardDescription as z } from "./styled.js";
-const k = g.forwardRef(
-  (s, l) => {
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useTheme as R, Stack as o, Skeleton as l } from "@mui/material";
+import * as k from "react";
+import { useMetricCardLogic as L } from "./logic.js";
+import { MetricChart as V } from "./MetricChart.js";
+import { MetricCardRoot as v, MetricCardCornerIconContainer as A, MetricCardIconContainer as I, MetricCardContent as D, MetricCardLabel as P, MetricCardValue as W, MetricCardTrendContainer as q, MetricCardDescription as B, MetricCardChartContainer as E } from "./styled.js";
+const N = k.forwardRef(
+  (S, s) => {
     const {
-      label: h,
-      value: C,
-      change: i,
-      changeType: f,
-      Icon: t,
-      iconPosition: o,
-      description: c,
-      sx: p,
-      other: m,
-      ownerState: e,
-      TrendIcon: x,
-      showCornerIcon: M
-    } = I(s);
-    return /* @__PURE__ */ n(u, { ref: l, ownerState: e, sx: p, ...m, children: [
-      M && t && /* @__PURE__ */ r(w, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) }),
-      /* @__PURE__ */ n(
-        a,
+      label: y,
+      value: d,
+      calculatedValue: b,
+      calculatedChange: h,
+      description: m,
+      variant: c,
+      loading: T,
+      showChange: p,
+      showTrend: C,
+      Icon: i,
+      iconPosition: f,
+      showChart: x,
+      chartType: g,
+      sx: w,
+      other: u,
+      ownerState: r,
+      TrendIcon: z,
+      showCornerIcon: j,
+      showSideIcon: M
+    } = L(S), n = R();
+    let a = n.palette.text.secondary;
+    return c === "primary" && (a = n.palette.primary.main), c === "success" && (a = n.palette.success.main), c === "warning" && (a = n.palette.warning.main), c === "danger" && (a = n.palette.error.main), T ? /* @__PURE__ */ e(v, { ref: s, ownerState: r, sx: w, ...u, children: /* @__PURE__ */ t(o, { spacing: 1, children: [
+      /* @__PURE__ */ e(l, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ e(l, { variant: "rectangular", height: 40, width: "40%" }),
+      /* @__PURE__ */ e(l, { variant: "text", width: "80%" }),
+      x && /* @__PURE__ */ e(
+        l,
+        {
+          variant: "rectangular",
+          height: 40,
+          width: "100%",
+          sx: { mt: 2 }
+        }
+      )
+    ] }) }) : /* @__PURE__ */ t(v, { ref: s, ownerState: r, sx: w, ...u, children: [
+      j && i && /* @__PURE__ */ e(A, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
+      /* @__PURE__ */ t(
+        o,
         {
           direction: "row",
           justifyContent: "space-between",
           alignItems: "flex-start",
+          sx: { flex: 1 },
           children: [
-            t && o === "left" && /* @__PURE__ */ r(d, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) }),
-            /* @__PURE__ */ n(S, { ownerState: e, children: [
-              /* @__PURE__ */ r(v, { variant: "subtitle2", ownerState: e, children: h }),
-              /* @__PURE__ */ r(y, { variant: "h4", ownerState: e, children: C }),
-              i !== void 0 && /* @__PURE__ */ n(a, { direction: "row", alignItems: "center", spacing: 1, children: [
-                /* @__PURE__ */ n(b, { ownerState: e, children: [
-                  /* @__PURE__ */ r(x, { sx: { fontSize: 16 } }),
-                  i,
-                  f === "percentage" ? "%" : ""
-                ] }),
-                c && /* @__PURE__ */ r(
-                  z,
-                  {
-                    variant: "caption",
-                    ownerState: e,
-                    children: c
-                  }
-                )
-              ] })
+            M && i && f === "left" && /* @__PURE__ */ e(I, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
+            /* @__PURE__ */ t(D, { ownerState: r, children: [
+              /* @__PURE__ */ e(P, { variant: "subtitle2", ownerState: r, children: y }),
+              /* @__PURE__ */ t(
+                o,
+                {
+                  direction: "row",
+                  alignItems: "baseline",
+                  spacing: 1,
+                  flexWrap: "wrap",
+                  children: [
+                    /* @__PURE__ */ e(W, { variant: "h4", ownerState: r, children: b }),
+                    (p || C) && h !== "—" && /* @__PURE__ */ t(q, { ownerState: r, children: [
+                      C && /* @__PURE__ */ e(z, { sx: { fontSize: 16 } }),
+                      p && h
+                    ] })
+                  ]
+                }
+              )
             ] }),
-            t && o === "right" && /* @__PURE__ */ r(d, { ownerState: e, children: /* @__PURE__ */ r(t, { sx: { fontSize: 24, color: "text.secondary" } }) })
+            M && i && f === "right" && /* @__PURE__ */ e(I, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        o,
+        {
+          direction: { xs: "column-reverse", sm: "column" },
+          spacing: 1,
+          sx: { width: "100%", mt: 2 },
+          children: [
+            m && /* @__PURE__ */ e(
+              B,
+              {
+                variant: "caption",
+                ownerState: r,
+                sx: { textAlign: { xs: "center", sm: "left" } },
+                children: m
+              }
+            ),
+            x && g && d.length >= 2 && /* @__PURE__ */ e(E, { ownerState: r, children: /* @__PURE__ */ e(V, { type: g, data: d, color: a }) })
           ]
         }
       )
@@ -56,5 +99,5 @@ const k = g.forwardRef(
   }
 );
 export {
-  k as MetricCard
+  N as MetricCard
 };