@orchidui/dashboard 1.23.1-8 → 1.23.2

package/dist/OcOverviewMonthlyBarChart-Du2jaTOy.js

@@ -0,0 +1,148 @@
+import { computed as s, ref as w, watch as F, createElementBlock as S, openBlock as k } from "vue";
+import { useChart as B } from "./Dashboard/composables/useChart.js";
+import { d as l } from "./dayjs.min-CTPVfFeV.js";
+const O = {
+  __name: "OcOverviewMonthlyBarChart",
+  props: {
+    variant: {
+      type: String,
+      validator: (d) => ["primary", "purple"].includes(d)
+    },
+    showTooltip: Boolean,
+    showLegend: Boolean,
+    showGrid: Boolean,
+    chartData: Array,
+    labelData: Array,
+    yAxisFormatter: Function,
+    xAxisFormatter: Function,
+    tooltipFormatter: Function,
+    tooltipValueFormatter: Function
+  },
+  setup(d) {
+    const a = d, i = s(() => a.labelData.length === 30), x = s(() => Math.max(...a.chartData));
+    s(() => a.chartData.indexOf(x.value));
+    const y = (t, e = "SGD") => (typeof t == "number" ? t : Number(t)).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }), g = (t, e = !1) => e ? l(t).format("DD MMM").toUpperCase() : l(t).format("ddd DD/MM").toUpperCase(), D = (t) => {
+      const e = [...a.chartData].sort((r, c) => c - r);
+      return t === e[0] ? "#4C8AFD" : t === e[1] ? "#80ACFE" : "#CCDEFE";
+    }, b = s(() => ({
+      xAxis: {
+        data: a.labelData.map((t) => g(t, i.value)),
+        splitLine: { show: !1 },
+        axisLine: { show: !1 },
+        axisTick: { show: !1 },
+        axisLabel: {
+          color: "#9295A5",
+          fontSize: 10,
+          margin: 4,
+          width: 70,
+          interval: i.value ? 3 : 0
+        }
+      },
+      tooltip: {
+        trigger: "axis",
+        borderWidth: 0,
+        padding: 0,
+        axisPointer: {
+          type: "line",
+          lineStyle: { color: "#2465DE" }
+        },
+        formatter: (t) => {
+          const e = a.labelData.find(
+            (u) => l(u).format("DD MMM") === t[0].name
+          ), r = l(e).format("DD MMM YYYY"), c = t[0].value;
+          return `
+        <div class="py-3 px-4">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-oc-text-300">${r}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="font-semibold text-oc-text font-reddit-mono">SGD ${y(c)}</span>
+          </div>
+        </div>
+      `;
+        }
+      },
+      legend: {},
+      yAxis: {
+        axisLabel: {
+          align: "center",
+          fontSize: 10,
+          color: "#9295A5",
+          margin: 20,
+          formatter: (t) => t && `${(t / 1e3).toFixed(1)}K`
+        },
+        splitLine: { show: !1 }
+      },
+      series: [{
+        id: "myBar",
+        data: a.chartData,
+        type: "bar",
+        barCategoryGap: 4,
+        itemStyle: {
+          borderRadius: i.value ? [100, 100, 0, 0] : [4, 4, 0, 0],
+          color: ({ value: t }) => D(t)
+        },
+        clip: !0
+      }]
+    })), f = s(() => a.labelData.map((t, e) => l(t).day() === 6 && e + 1 < a.labelData.length ? [e, e + 1] : null).filter(Boolean)), v = {
+      silent: !0,
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(53, 109, 255, 0.08)" },
+            { offset: 1, color: "rgba(36, 93, 239, 0.01)" }
+          ],
+          global: !1
+        },
+        borderColor: "rgba(53, 109, 255, 0.15)",
+        borderWidth: 1
+      }
+    }, h = w(), { chart: n } = B(h, b), C = (t, e, r = !1) => {
+      const u = t.getModel().getSeriesByType("bar").map((m) => m.getData())[0], A = u.count(), o = [];
+      return e.forEach((m) => {
+        if (m < A) {
+          const p = u.getItemLayout(m);
+          o.push([
+            { x: p.x - 2 },
+            { x: p.x + p.width + 2 }
+          ]);
+        }
+      }), r && o.length > 0 ? [[
+        { x: o[0][0].x },
+        { x: o[o.length - 1][1].x }
+      ]] : o;
+    }, M = () => {
+      if (!n.value || f.value.length === 0) return;
+      const t = f.value.map(
+        (r) => C(n.value, r, !0).flat()
+      ), e = {
+        series: {
+          id: "myBar",
+          markArea: {
+            ...v,
+            data: t
+          }
+        }
+      };
+      n.value.setOption(e);
+    };
+    return F([n, i], () => {
+      n.value && M();
+    }), (t, e) => (k(), S("div", {
+      ref_key: "barChart",
+      ref: h,
+      class: "w-full"
+    }, null, 512));
+  }
+};
+export {
+  O as default
+};

package/dist/OcOverviewPieChart-BIpg_ZOf.js

@@ -0,0 +1,94 @@
+import { ref as d, computed as x, watch as y, nextTick as C, createElementBlock as i, openBlock as c, createElementVNode as a, createCommentVNode as k, toDisplayString as h, Fragment as w, renderList as F, normalizeStyle as L } from "vue";
+import { useChart as S } from "./Dashboard/composables/useChart.js";
+import "./dayjs.min-CTPVfFeV.js";
+const V = { class: "flex flex-col items-center justify-center" }, T = { class: "relative w-[210px] h-[210px]" }, I = { class: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none" }, O = { class: "text-center" }, j = { class: "text-oc-text-400" }, A = { class: "text-lg font-semibold font-reddit-mono" }, E = {
+  key: 0,
+  class: "mt-4 flex flex-wrap gap-3 justify-center"
+}, N = ["onClick"], z = { class: "text-sm" }, R = {
+  __name: "OcOverviewPieChart",
+  props: {
+    chartData: Array
+  },
+  setup(r) {
+    const n = r, o = d(""), s = d(0), _ = (e, t = "SGD") => (typeof e == "number" ? e : Number(e)).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }), m = x(() => !n.chartData || n.chartData.length === 0 ? 0 : n.chartData.reduce((e, t) => e + (t.value || 0), 0)), v = () => {
+      o.value = "Total", s.value = m.value;
+    }, g = x(() => ({
+      series: [{
+        id: "overviewPieChart",
+        data: n.chartData || [],
+        type: "pie",
+        radius: ["80%", "100%"],
+        avoidLabelOverlap: !1,
+        itemStyle: {
+          borderRadius: 6,
+          borderColor: "#fff",
+          borderWidth: 2
+        },
+        label: {
+          show: !1
+          // Hide default labels
+        },
+        labelLine: {
+          show: !1
+        },
+        emphasis: {
+          disabled: !0,
+          label: {
+            show: !1
+          }
+        }
+      }]
+    })), f = d(), { chart: l } = S(f, g), D = (e) => {
+      const t = ["#356DFF", "#AEC5FF", "#86FFCC"];
+      return t[e % t.length];
+    }, b = (e) => {
+      o.value = e.name, s.value = e.value, l.value && l.value.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        dataIndex: n.chartData.findIndex((t) => t.name === e.name)
+      });
+    };
+    return y(l, async (e) => {
+      e && (await C(), v(), e.on("mouseover", "series", (t) => {
+        t.componentType === "series" && t.seriesType === "pie" && (o.value = t.name || "Unknown", s.value = t.value || 0);
+      }), e.on("mouseout", "series", () => {
+        o.value = "Total", s.value = m.value;
+      }));
+    }), y(() => n.chartData, () => {
+      l.value && v();
+    }, { deep: !0 }), (e, t) => (c(), i("div", V, [
+      a("div", T, [
+        a("div", {
+          ref_key: "pieChart",
+          ref: f,
+          class: "w-[210px] h-[210px]"
+        }, null, 512),
+        a("div", I, [
+          a("div", O, [
+            a("div", j, h(o.value), 1),
+            a("div", A, "SGD " + h(_(s.value)), 1)
+          ])
+        ])
+      ]),
+      r.chartData && r.chartData.length > 0 ? (c(), i("div", E, [
+        (c(!0), i(w, null, F(r.chartData, (u, p) => (c(), i("div", {
+          key: p,
+          class: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
+          onClick: (B) => b(u)
+        }, [
+          a("div", {
+            class: "w-3 h-3 rounded-full",
+            style: L({ backgroundColor: D(p) })
+          }, null, 4),
+          a("span", z, h(u.name), 1)
+        ], 8, N))), 128))
+      ])) : k("", !0)
+    ]));
+  }
+};
+export {
+  R as default
+};