@orchidui/dashboard 0.0.1 → 0.2.0

package/dist/OcCodeBlock-chTpuRDc.js

@@ -0,0 +1,63 @@
+import { defineComponent as o, ref as i, onMounted as r, openBlock as s, createElementBlock as c } from "vue";
+import { getHighlighter as u } from "shikiji";
+import m from "./Dashboard/CodeBlock/customTheme.js";
+const d = Object.freeze({ displayName: "JSON", name: "json", patterns: [{ include: "#value" }], repository: { array: { begin: "\\[", beginCaptures: { 0: { name: "punctuation.definition.array.begin.json" } }, end: "\\]", endCaptures: { 0: { name: "punctuation.definition.array.end.json" } }, name: "meta.structure.array.json", patterns: [{ include: "#value" }, { match: ",", name: "punctuation.separator.array.json" }, { match: "[^\\s\\]]", name: "invalid.illegal.expected-array-separator.json" }] }, comments: { patterns: [{ begin: "/\\*\\*(?!/)", captures: { 0: { name: "punctuation.definition.comment.json" } }, end: "\\*/", name: "comment.block.documentation.json" }, { begin: "/\\*", captures: { 0: { name: "punctuation.definition.comment.json" } }, end: "\\*/", name: "comment.block.json" }, { captures: { 1: { name: "punctuation.definition.comment.json" } }, match: "(//).*$\\n?", name: "comment.line.double-slash.js" }] }, constant: { match: "\\b(?:true|false|null)\\b", name: "constant.language.json" }, number: { match: `(?x)        # turn on extended mode
+  -?        # an optional minus
+  (?:
+    0       # a zero
+    |       # ...or...
+    [1-9]   # a 1-9 character
+    \\d*     # followed by zero or more digits
+  )
+  (?:
+    (?:
+      \\.    # a period
+      \\d+   # followed by one or more digits
+    )?
+    (?:
+      [eE]  # an e character
+      [+-]? # followed by an option +/-
+      \\d+   # followed by one or more digits
+    )?      # make exponent optional
+  )?        # make decimal portion optional`, name: "constant.numeric.json" }, object: { begin: "\\{", beginCaptures: { 0: { name: "punctuation.definition.dictionary.begin.json" } }, end: "\\}", endCaptures: { 0: { name: "punctuation.definition.dictionary.end.json" } }, name: "meta.structure.dictionary.json", patterns: [{ comment: "the JSON object key", include: "#objectkey" }, { include: "#comments" }, { begin: ":", beginCaptures: { 0: { name: "punctuation.separator.dictionary.key-value.json" } }, end: "(,)|(?=\\})", endCaptures: { 1: { name: "punctuation.separator.dictionary.pair.json" } }, name: "meta.structure.dictionary.value.json", patterns: [{ comment: "the JSON object value", include: "#value" }, { match: "[^\\s,]", name: "invalid.illegal.expected-dictionary-separator.json" }] }, { match: "[^\\s\\}]", name: "invalid.illegal.expected-dictionary-separator.json" }] }, objectkey: { begin: '"', beginCaptures: { 0: { name: "punctuation.support.type.property-name.begin.json" } }, end: '"', endCaptures: { 0: { name: "punctuation.support.type.property-name.end.json" } }, name: "string.json support.type.property-name.json", patterns: [{ include: "#stringcontent" }] }, string: { begin: '"', beginCaptures: { 0: { name: "punctuation.definition.string.begin.json" } }, end: '"', endCaptures: { 0: { name: "punctuation.definition.string.end.json" } }, name: "string.quoted.double.json", patterns: [{ include: "#stringcontent" }] }, stringcontent: { patterns: [{ match: `(?x)                # turn on extended mode
+  \\\\                # a literal backslash
+  (?:               # ...followed by...
+    ["\\\\/bfnrt]     # one of these characters
+    |               # ...or...
+    u               # a u
+    [0-9a-fA-F]{4}) # and four hex digits`, name: "constant.character.escape.json" }, { match: "\\\\.", name: "invalid.illegal.unrecognized-string-escape.json" }] }, value: { patterns: [{ include: "#constant" }, { include: "#number" }, { include: "#string" }, { include: "#array" }, { include: "#object" }, { include: "#comments" }] } }, scopeName: "source.json" });
+var p = [
+  d
+];
+const l = ["innerHTML"], h = /* @__PURE__ */ o({
+  __name: "OcCodeBlock",
+  props: {
+    jsonObject: {
+      type: String,
+      required: !0
+    },
+    lang: {
+      type: String,
+      default: "json"
+    }
+  },
+  setup(a) {
+    const n = a, e = i();
+    return r(async () => {
+      const t = await u({
+        themes: [m],
+        langs: [p]
+      });
+      e.value = t.codeToHtml(n.jsonObject, {
+        theme: "Custom Theme",
+        lang: n.lang
+      });
+    }), (t, g) => (s(), c("div", {
+      class: "p-5 rounded bg-oc-gray-900 code-block",
+      innerHTML: e.value
+    }, null, 8, l));
+  }
+});
+export {
+  h as default
+};

package/dist/OcLineChart-dAL6sRiP.js

@@ -0,0 +1,161 @@
+import { ref as p, computed as f, onMounted as v, openBlock as b, createElementBlock as h } from "vue";
+import * as w from "echarts";
+import { useChart as g } from "./Dashboard/composables/useChart.js";
+const L = {
+  __name: "OcLineChart",
+  props: {
+    showTooltip: Boolean,
+    showLegend: Boolean,
+    showGrid: Boolean,
+    chartData: Array,
+    labelData: Array,
+    tooltipFormatter: Function,
+    tooltipValueFormatter: Function
+  },
+  setup(u) {
+    const t = u, o = p({
+      index: 0,
+      value: 0
+    }), l = f(() => ({
+      xAxis: {
+        type: "category",
+        data: t.labelData,
+        axisTick: {
+          show: !1
+        },
+        axisLabel: {
+          color: "#9295A5"
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#F2F2F4"
+          }
+        },
+        axisPointer: {
+          show: !0,
+          label: {
+            show: !1,
+            formatter: (r) => {
+              const e = l.value.xAxis.data.indexOf(r.value);
+              o.value.index = r.value;
+              const a = l.value.series[0].data[e];
+              o.value.value = (a == null ? void 0 : a.value) || a;
+            }
+          },
+          lineStyle: {
+            color: "rgba(0,0,0,0)",
+            type: "dashed"
+          }
+        }
+      },
+      yAxis: {
+        type: "value",
+        splitLine: {
+          show: !1
+        },
+        axisLabel: {
+          formatter: (r) => Intl.NumberFormat("en", { notation: "compact" }).format(r)
+        }
+      },
+      grid: {
+        show: t.showGrid,
+        right: 0,
+        left: 0,
+        top: "10px",
+        bottom: 0,
+        containLabel: !0
+      },
+      legend: {
+        show: t.showLegend
+      },
+      tooltip: {
+        show: t.showTooltip,
+        trigger: "axis",
+        padding: 0,
+        borderWidth: 0,
+        borderRadius: 8,
+        formatter: (r) => {
+          var n, i, c, d;
+          const e = r[0];
+          if (t.tooltipFormatter)
+            return t.tooltipFormatter(e);
+          let a = e.value;
+          t.tooltipValueFormatter && (a = t.tooltipValueFormatter(a));
+          let x = `<div class="text-oc-text-400 text-sm font-medium flex items-center gap-x-1">
+                 <div
+                  class="w-0 h-0 rounded-xs border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent ${((n = e.data) == null ? void 0 : n.percent) < 0 ? "border-t-[6px] border-t-oc-error" : "border-b-[6px] border-b-oc-success"}"
+                  ></div>
+                  <div>${((i = e.data) == null ? void 0 : i.percent) === 0 ? "-" : `${Math.abs((c = e.data) == null ? void 0 : c.percent)}%`}</div>
+                </div>`;
+          return `
+        <div class="py-3 px-4 leading-normal">
+            <div class="flex w-full justify-between items-center">
+                <span class="uppercase text-[10px] font-medium">
+                    ${e.name}
+                </span>
+            </div>
+            <div class="text-oc-text font-medium text-base flex items-center gap-x-3">
+                ${a}
+                ${isNaN((d = e.data) == null ? void 0 : d.percent) ? "" : x}
+            </div>
+        </div>
+
+      `;
+        }
+      },
+      series: [
+        {
+          data: t.chartData,
+          type: "line",
+          smooth: !0,
+          showSymbol: !1,
+          symbol: "circle",
+          areaStyle: {
+            color: new w.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(36, 101, 222, 0.15)"
+                // Start color
+              },
+              {
+                offset: 1,
+                color: "rgba(36, 101, 222, 0)"
+                // End color
+              }
+            ])
+          },
+          lineStyle: {
+            color: "#2465DE"
+          },
+          markLine: {
+            symbol: "none",
+            animation: !1,
+            data: [
+              [
+                {
+                  coord: [o.value.index, 0]
+                },
+                {
+                  coord: [o.value.index, o.value.value]
+                }
+              ]
+            ],
+            silent: !0
+          }
+        }
+      ]
+    })), s = p(), { chart: m } = g(s, l);
+    return v(() => {
+      m.value.getZr().on("globalout", () => {
+        o.value.index = 0, o.value.value = 0;
+      });
+    }), (r, e) => (b(), h("div", {
+      ref_key: "lineChart",
+      ref: s,
+      class: "w-full"
+    }, null, 512));
+  }
+};
+export {
+  L as default
+};

package/dist/OcPieChart-Kn-CkXip.js

@@ -0,0 +1,136 @@
+import { computed as _, ref as C, openBlock as t, createElementBlock as a, createElementVNode as r, Fragment as n, renderList as h, createBlock as f, unref as x, withCtx as y, normalizeClass as b, normalizeStyle as F, toDisplayString as i, createTextVNode as g, createCommentVNode as T } from "vue";
+import { Tooltip as B, Icon as V } from "@orchidui/core";
+import { useChart as L } from "./Dashboard/composables/useChart.js";
+const O = { class: "flex flex-col items-center" }, S = {
+  key: 0,
+  class: "flex gap-x-5"
+}, A = ["onClick"], N = {
+  key: 1,
+  class: "text-sm font-medium text-oc-text-500"
+}, $ = { class: "py-2 text-sm text-oc-text-400 font-medium px-3 w-max" }, E = {
+  __name: "OcPieChart",
+  props: {
+    showTooltip: Boolean,
+    showLegend: Boolean,
+    showGrid: Boolean,
+    chartData: Array,
+    tooltipFormatter: Function,
+    tooltipValueFormatter: Function,
+    additionalOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(c, { expose: w }) {
+    const l = c, d = _(() => ({
+      legend: {
+        show: !1
+      },
+      tooltip: {
+        show: l.showTooltip,
+        padding: 0,
+        formatter: (o) => {
+          if (l.tooltipFormatter)
+            return l.tooltipFormatter(o);
+          let s = o.value;
+          return l.tooltipValueFormatter && (s = l.tooltipValueFormatter(s)), `
+        <div class="py-3 px-4 leading-normal">
+            <div class="flex w-full justify-between items-center">
+                <span class="uppercase text-[10px] font-medium">
+                    ${o.name}
+                </span>
+            </div>
+            <div class="text-oc-text-500 font-medium text-base flex items-center gap-x-3">
+                ${s}
+                (${o.percent}%)
+            </div>
+        </div>
+
+      `;
+        }
+      },
+      series: [
+        {
+          name: "Payment by",
+          type: "pie",
+          radius: "80%",
+          data: l.chartData,
+          label: {
+            show: !1
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        }
+      ],
+      grid: {
+        show: l.showGrid,
+        right: 0,
+        left: 0,
+        top: "10px",
+        bottom: 0,
+        containLabel: !0
+      },
+      ...l.additionalOptions
+    })), p = C(), { chart: v } = L(p, d), u = (o) => {
+      v.value.dispatchAction({
+        type: "legendToggleSelect",
+        name: o.name
+      }), o.hide = !o.hide;
+    };
+    return w({
+      toggleLegendName: u
+    }), (o, s) => (t(), a("div", O, [
+      r("div", {
+        ref_key: "pieChart",
+        ref: p,
+        class: "h-full w-full"
+      }, null, 512),
+      c.showLegend ? (t(), a("div", S, [
+        (t(!0), a(n, null, h(d.value.series[0].data, (e) => (t(), f(x(B), {
+          key: e.name,
+          position: "top",
+          class: "flex items-center",
+          distance: 10
+        }, {
+          default: y(() => [
+            r("div", {
+              class: b(["flex items-center gap-x-2 cursor-pointer transition-opacity", { "opacity-30": e.hide }]),
+              onClick: (m) => u(e)
+            }, [
+              r("div", {
+                class: "w-3 h-3 rounded-full",
+                style: F({ background: e.itemStyle.color })
+              }, null, 4),
+              e.icon ? (t(), f(x(V), {
+                key: 0,
+                name: e.icon,
+                width: "32",
+                height: "32"
+              }, null, 8, ["name"])) : (t(), a("div", N, i(e.name), 1))
+            ], 10, A)
+          ]),
+          popper: y(() => [
+            r("div", $, [
+              e.legendTooltip ? (t(), a(n, { key: 0 }, [
+                Array.isArray(e.legendTooltip) ? (t(!0), a(n, { key: 0 }, h(e.legendTooltip, (m, k) => (t(), a("div", { key: k }, i(m), 1))), 128)) : (t(), a(n, { key: 1 }, [
+                  g(i(e.legendTooltip), 1)
+                ], 64))
+              ], 64)) : (t(), a(n, { key: 1 }, [
+                g(i(e.name), 1)
+              ], 64))
+            ])
+          ]),
+          _: 2
+        }, 1024))), 128))
+      ])) : T("", !0)
+    ]));
+  }
+};
+export {
+  E as default
+};