@blazes/data-visualization 0.0.0-stage → 1.0.0-alpha.0

package/dist/vue/index.js

@@ -0,0 +1,1064 @@
+import { defineComponent as O, openBlock as p, createElementBlock as w, normalizeClass as q, createElementVNode as P, Fragment as H, renderList as K, normalizeStyle as ue, toDisplayString as L, createVNode as R, unref as u, mergeProps as Me, withCtx as k, createTextVNode as U, createBlock as A, createCommentVNode as I, ref as j, computed as $, onErrorCaptured as xe, watch as Ce, resolveDynamicComponent as pe, pushScopeId as Se, popScopeId as ke, shallowRef as Re, onMounted as fe, onBeforeUnmount as ve, onBeforeMount as Ie, markRaw as $e, toRaw as Pe, h as V } from "vue";
+import { FormatType as Z, ChartBar as De, Size as J, ChartLine as Ae, ChartPie as ze } from "@blazes/charts";
+import { a as ee, b as G, c as Q, S as te } from "../visual-theme-DH-k3L51.js";
+import { v as E } from "../value-formatter-D5QmLSMG.js";
+import { RedoOutlined as X, ExclamationCircleOutlined as Le, WarningOutlined as Te, CloudDownloadOutlined as Fe, QuestionCircleOutlined as Ee, RiseOutlined as me, FallOutlined as ge, MinusOutlined as he } from "@ant-design/icons-vue";
+import { RangePicker as Ve, RadioGroup as Oe, RadioButton as Be, Select as le, Tooltip as N, Button as Y, Card as Ue, Spin as de, Empty as Ne, Dropdown as je, Menu as Ye, MenuItem as ce, Progress as He, Tag as qe, Table as Ke } from "ant-design-vue";
+import { b as Ge, s as We, a as Ze, P as Qe } from "../csv-Dyrr2yMA.js";
+const Xe = { class: "dv-filter-bar__controls" }, Je = { class: "dv-filter-bar__label" }, et = {
+  key: 0,
+  class: "dv-filter-bar__date-range"
+}, tt = /* @__PURE__ */ O({
+  __name: "DashboardFilterBar",
+  props: {
+    config: {},
+    context: {},
+    loading: { type: Boolean }
+  },
+  emits: ["change", "refresh"],
+  setup(r, { emit: g }) {
+    const i = r, e = g;
+    function y(o) {
+      return {
+        "--dv-filter-xs": String(o.xs),
+        "--dv-filter-sm": String(o.sm ?? o.xs),
+        "--dv-filter-md": String(o.md ?? o.sm ?? o.xs),
+        "--dv-filter-lg": String(o.lg ?? o.md ?? o.sm ?? o.xs),
+        "--dv-filter-xl": String(o.xl ?? o.lg ?? o.md ?? o.sm ?? o.xs)
+      };
+    }
+    function x(o) {
+      return o;
+    }
+    function C(o) {
+      return o.map((a) => ({ ...a }));
+    }
+    function s(o) {
+      if (typeof o != "string" || !/^\d{4}-\d{2}-\d{2}$/.test(o)) return;
+      const a = /* @__PURE__ */ new Date(`${o}T12:00:00Z`);
+      return Number.isNaN(a.getTime()) ? void 0 : a;
+    }
+    function S(o) {
+      return o.toISOString().slice(0, 10);
+    }
+    function D() {
+      const o = new Intl.DateTimeFormat("en-CA", {
+        timeZone: i.context.timezone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }).formatToParts(/* @__PURE__ */ new Date()), a = Object.fromEntries(o.map((h) => [h.type, h.value])), t = /* @__PURE__ */ new Date(`${a.year}-${a.month}-${a.day}T12:00:00Z`);
+      return t.setUTCDate(t.getUTCDate() - 1), t;
+    }
+    function c(o) {
+      return i.context.variables[o];
+    }
+    function l(o) {
+      const a = c(o.startVariableId), t = c(o.endVariableId);
+      return typeof a != "string" || typeof t != "string" || !s(a) || !s(t) ? {} : { value: [a, t] };
+    }
+    function f(o, a) {
+      if (!Array.isArray(a) || a.length !== 2) return;
+      const [t, h] = a;
+      typeof t != "string" || typeof h != "string" || e("change", {
+        [o.startVariableId]: t,
+        [o.endVariableId]: h
+      });
+    }
+    function d(o) {
+      var _, z;
+      const a = s(c(o.startVariableId)), t = s(c(o.endVariableId));
+      if (!a || !t || t.getTime() !== D().getTime()) return;
+      const h = Math.round((t.getTime() - a.getTime()) / 864e5) + 1;
+      return (z = (_ = o.presets) == null ? void 0 : _.find((F) => F.days === h)) == null ? void 0 : z.id;
+    }
+    function n(o, a) {
+      var F;
+      const t = typeof a.target.value == "string" ? a.target.value : void 0, h = (F = o.presets) == null ? void 0 : F.find((W) => W.id === t);
+      if (!h) return;
+      const _ = D(), z = new Date(_);
+      z.setUTCDate(z.getUTCDate() - h.days + 1), e("change", {
+        [o.startVariableId]: S(z),
+        [o.endVariableId]: S(_)
+      });
+    }
+    function M(o, a) {
+      e("change", { [o]: a ?? null });
+    }
+    return (o, a) => o.config ? (p(), w("div", {
+      key: 0,
+      class: q(["dv-filter-bar", { "dv-filter-bar--flow": o.config.layout === "flow" }])
+    }, [
+      P("div", Xe, [
+        (p(!0), w(H, null, K(o.config.controls, (t) => {
+          var h;
+          return p(), w("div", {
+            key: t.id,
+            class: q(["dv-filter-bar__control", `dv-filter-bar__control--${t.type}`]),
+            style: ue(y(t.layout))
+          }, [
+            P("label", Je, L(t.label), 1),
+            t.type === "date-range" ? (p(), w("div", et, [
+              R(u(Ve), Me({
+                class: "dv-filter-bar__range-picker",
+                "allow-clear": !1,
+                disabled: t.disabled ?? !1,
+                "dropdown-class-name": "dv-filter-bar__date-popup",
+                format: t.format ?? "YYYY-MM-DD"
+              }, l(t), {
+                "value-format": "YYYY-MM-DD",
+                onChange: (_) => f(t, _)
+              }), {
+                separator: k(() => [
+                  U("至")
+                ]),
+                _: 2
+              }, 1040, ["disabled", "format", "onChange"]),
+              (h = t.presets) != null && h.length ? (p(), A(u(Oe), {
+                key: 0,
+                class: "dv-filter-bar__presets",
+                disabled: t.disabled ?? !1,
+                size: "small",
+                value: d(t),
+                onChange: (_) => n(t, _)
+              }, {
+                default: k(() => [
+                  (p(!0), w(H, null, K(t.presets, (_) => (p(), A(u(Be), {
+                    key: _.id,
+                    value: _.id
+                  }, {
+                    default: k(() => [
+                      U(L(_.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]))), 128))
+                ]),
+                _: 2
+              }, 1032, ["disabled", "value", "onChange"])) : I("", !0)
+            ])) : t.type === "multi-select" ? (p(), A(u(le), {
+              key: 1,
+              "allow-clear": t.allowClear ?? !1,
+              disabled: t.disabled ?? !1,
+              "max-tag-count": t.maxTagCount ?? "responsive",
+              mode: "multiple",
+              "option-filter-prop": "label",
+              options: C(t.options),
+              placeholder: t.placeholder ?? "",
+              "show-search": t.showSearch ?? !1,
+              value: o.context.variables[t.variableId],
+              onChange: (_) => M(t.variableId, _)
+            }, null, 8, ["allow-clear", "disabled", "max-tag-count", "options", "placeholder", "show-search", "value", "onChange"])) : (p(), A(u(le), {
+              key: 2,
+              "allow-clear": t.allowClear ?? !1,
+              disabled: t.disabled ?? !1,
+              "option-filter-prop": "label",
+              options: C(t.options),
+              placeholder: t.placeholder ?? "",
+              "show-search": t.showSearch ?? !1,
+              value: o.context.variables[t.variableId],
+              onChange: (_) => M(t.variableId, _)
+            }, null, 8, ["allow-clear", "disabled", "options", "placeholder", "show-search", "value", "onChange"]))
+          ], 6);
+        }), 128))
+      ]),
+      o.config.showRefresh !== !1 ? (p(), A(u(N), {
+        key: 0,
+        title: "刷新全部"
+      }, {
+        default: k(() => [
+          R(u(Y), {
+            type: "primary",
+            class: "dv-filter-bar__refresh",
+            loading: o.loading ?? !1,
+            onClick: a[0] || (a[0] = (t) => o.$emit("refresh"))
+          }, {
+            icon: k(() => [
+              R(u(X))
+            ]),
+            default: k(() => [
+              U(" 刷新 ")
+            ]),
+            _: 1
+          }, 8, ["loading"])
+        ]),
+        _: 1
+      })) : I("", !0)
+    ], 2)) : I("", !0);
+  }
+}), B = (r, g) => {
+  const i = r.__vccOpts || r;
+  for (const [e, y] of g)
+    i[e] = y;
+  return i;
+}, nt = /* @__PURE__ */ B(tt, [["__scopeId", "data-v-45855b0b"]]), at = (r) => (Se("data-v-912acf36"), r = r(), ke(), r), ot = { class: "dv-panel__heading" }, it = { class: "dv-panel__title-group" }, rt = { class: "dv-panel__title" }, st = {
+  key: 0,
+  class: "dv-panel__title-note"
+}, lt = { class: "dv-panel__actions" }, dt = {
+  key: 0,
+  class: "dv-panel__filters"
+}, ct = {
+  key: 1,
+  class: "dv-panel__state dv-panel__state--failure",
+  role: "status"
+}, ut = { class: "dv-panel__failure" }, pt = { class: "dv-panel__failure-copy" }, ft = { class: "dv-panel__failure-heading" }, vt = ["title"], mt = /* @__PURE__ */ at(() => /* @__PURE__ */ P("span", { class: "dv-panel__retry-label" }, "重新加载", -1)), gt = {
+  key: 2,
+  class: "dv-panel__state dv-panel__state--loading"
+}, ht = {
+  key: 0,
+  class: "dv-panel__state dv-panel__state--metric-empty"
+}, yt = {
+  key: 4,
+  class: "dv-panel__renderer"
+}, _t = {
+  key: 0,
+  class: "dv-panel__refreshing"
+}, bt = {
+  key: 5,
+  class: "dv-panel__state dv-panel__idle"
+}, wt = {
+  key: 6,
+  class: "dv-panel__updated"
+}, Mt = /* @__PURE__ */ O({
+  __name: "DashboardPanel",
+  props: {
+    panel: {},
+    state: {},
+    context: {},
+    definition: {},
+    renderer: {},
+    filterSummary: {},
+    refreshDisabled: { type: Boolean }
+  },
+  emits: ["refresh", "retry", "exportCsv", "exportPng", "action", "visualizationEvent"],
+  setup(r, { expose: g, emit: i }) {
+    const e = r, y = i, x = j(), C = j(), s = $(() => e.panel.rendererId === "metric"), S = $(() => {
+      var n;
+      if (C.value)
+        return { title: "图表暂时无法展示", detail: C.value.message };
+      if (e.state.status === "error" || e.state.status === "cancelled")
+        return { title: "数据暂时无法加载", detail: (n = e.state.error) == null ? void 0 : n.message };
+    }), D = $(
+      () => e.definition.capabilities.csv && !!e.state.dataset || e.definition.capabilities.png && !!e.state.viewModel
+    ), c = $(() => {
+      const n = e.panel.layout.minHeight ?? (s.value ? 119 : 401), M = s.value ? 40 : 50;
+      return { minHeight: `${Math.max(n - M - 2, s.value ? 77 : 190)}px` };
+    }), l = $(
+      () => e.state.lastSuccessfulAt ? new Intl.DateTimeFormat(e.context.locale, { timeStyle: "medium", timeZone: e.context.timezone }).format(
+        new Date(e.state.lastSuccessfulAt)
+      ) : ""
+    );
+    function f() {
+      var n, M;
+      return (M = (n = x.value) == null ? void 0 : n.exportPng) == null ? void 0 : M.call(n);
+    }
+    function d(n) {
+      n.key === "csv" && y("exportCsv"), n.key === "png" && y("exportPng");
+    }
+    return xe((n) => (C.value = n instanceof Error ? n : new Error(String(n)), !1)), Ce(
+      () => [e.state.generation, e.state.viewModel],
+      () => {
+        C.value = void 0;
+      }
+    ), g({ exportPng: f }), (n, M) => (p(), A(u(Ue), {
+      class: q(["dv-panel", { "dv-panel--metric": s.value }]),
+      "body-style": c.value
+    }, {
+      title: k(() => [
+        P("div", ot, [
+          P("span", it, [
+            P("span", rt, L(n.panel.title), 1),
+            n.panel.description ? (p(), A(u(N), {
+              key: 0,
+              title: n.panel.description
+            }, {
+              default: k(() => [
+                R(u(Ee))
+              ]),
+              _: 1
+            }, 8, ["title"])) : I("", !0)
+          ]),
+          n.panel.titleNote ? (p(), w("span", st, L(n.panel.titleNote), 1)) : I("", !0)
+        ])
+      ]),
+      extra: k(() => {
+        var o;
+        return [
+          P("div", lt, [
+            n.state.status === "stale" ? (p(), A(u(N), {
+              key: 0,
+              title: `刷新失败，当前展示上次成功数据${(o = n.state.error) != null && o.message ? `：${n.state.error.message}` : ""}`
+            }, {
+              default: k(() => [
+                R(u(Te), { class: "dv-panel__warning" })
+              ]),
+              _: 1
+            }, 8, ["title"])) : I("", !0),
+            R(u(N), {
+              title: n.refreshDisabled ? "正在刷新全部" : "刷新"
+            }, {
+              default: k(() => [
+                R(u(Y), {
+                  disabled: n.refreshDisabled ?? !1,
+                  type: "text",
+                  size: "small",
+                  onClick: M[0] || (M[0] = (a) => n.$emit("refresh"))
+                }, {
+                  icon: k(() => [
+                    R(u(X))
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            D.value ? (p(), A(u(je), {
+              key: 1,
+              placement: "bottomRight",
+              trigger: ["click"]
+            }, {
+              overlay: k(() => [
+                R(u(Ye), { onClick: d }, {
+                  default: k(() => [
+                    n.definition.capabilities.csv && n.state.dataset ? (p(), A(u(ce), { key: "csv" }, {
+                      default: k(() => [
+                        U("导出 CSV")
+                      ]),
+                      _: 1
+                    })) : I("", !0),
+                    n.definition.capabilities.png && n.state.viewModel ? (p(), A(u(ce), { key: "png" }, {
+                      default: k(() => [
+                        U("导出 PNG")
+                      ]),
+                      _: 1
+                    })) : I("", !0)
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: k(() => [
+                R(u(N), { title: "下载" }, {
+                  default: k(() => [
+                    R(u(Y), {
+                      type: "text",
+                      size: "small"
+                    }, {
+                      icon: k(() => [
+                        R(u(Fe))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : I("", !0),
+            (p(!0), w(H, null, K(n.panel.actions ?? [], (a) => (p(), A(u(Y), {
+              key: a.id,
+              type: "link",
+              size: "small",
+              onClick: (t) => n.$emit("action", a.id)
+            }, {
+              default: k(() => [
+                U(L(a.label ?? a.id), 1)
+              ]),
+              _: 2
+            }, 1032, ["onClick"]))), 128))
+          ])
+        ];
+      }),
+      default: k(() => [
+        n.filterSummary ? (p(), w("div", dt, L(n.filterSummary), 1)) : I("", !0),
+        S.value ? (p(), w("div", ct, [
+          P("div", ut, [
+            R(u(Le), { class: "dv-panel__failure-icon" }),
+            P("div", pt, [
+              P("div", ft, L(S.value.title), 1),
+              S.value.detail ? (p(), w("div", {
+                key: 0,
+                class: "dv-panel__failure-detail",
+                title: S.value.detail
+              }, L(S.value.detail), 9, vt)) : I("", !0)
+            ]),
+            R(u(N), { title: "重试" }, {
+              default: k(() => [
+                R(u(Y), {
+                  class: "dv-panel__retry",
+                  size: "small",
+                  "aria-label": "重试",
+                  onClick: M[1] || (M[1] = (o) => n.$emit("retry"))
+                }, {
+                  icon: k(() => [
+                    R(u(X))
+                  ]),
+                  default: k(() => [
+                    mt
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ])
+        ])) : n.state.status === "loading" && !n.state.viewModel ? (p(), w("div", gt, [
+          R(u(de))
+        ])) : n.state.status === "empty" ? (p(), w(H, { key: 3 }, [
+          s.value ? (p(), w("div", ht, "暂无数据")) : (p(), A(u(Ne), {
+            key: 1,
+            class: "dv-panel__state",
+            description: "暂无数据"
+          }))
+        ], 64)) : n.state.viewModel ? (p(), w("div", yt, [
+          (p(), A(pe(n.renderer), {
+            ref_key: "rendererRef",
+            ref: x,
+            context: n.context,
+            panel: n.panel,
+            "view-model": n.state.viewModel,
+            onVisualizationEvent: M[2] || (M[2] = (o) => n.$emit("visualizationEvent", o))
+          }, null, 40, ["context", "panel", "view-model"])),
+          n.state.isRefreshing ? (p(), w("div", _t, [
+            R(u(de))
+          ])) : I("", !0)
+        ])) : (p(), w("div", bt, "等待加载")),
+        n.state.lastSuccessfulAt ? (p(), w("div", wt, "更新于 " + L(l.value), 1)) : I("", !0)
+      ]),
+      _: 1
+    }, 8, ["class", "body-style"]));
+  }
+}), xt = /* @__PURE__ */ B(Mt, [["__scopeId", "data-v-912acf36"]]);
+function Ct(r, g = {}) {
+  const i = Re(r.snapshot);
+  let e;
+  return fe(() => {
+    e = r.subscribe((y) => {
+      i.value = y;
+    }), g.autoLoad !== !1 && r.load();
+  }), ve(() => e == null ? void 0 : e()), {
+    snapshot: i,
+    context: $(() => i.value.context),
+    panelStates: $(() => i.value.panelStates),
+    isLoading: $(() => i.value.isGlobalLoading),
+    loadPanels: (y) => r.loadPanels(y),
+    refreshAll: () => r.refreshAll(),
+    refreshPanels: (y, x) => r.refreshPanels(y, x),
+    refreshPanel: (y) => r.refreshPanel(y),
+    retryPanel: (y) => r.retryPanel(y),
+    setVariables: (y, x) => r.setVariables(y, x)
+  };
+}
+function St(r, g, i) {
+  const e = URL.createObjectURL(new Blob([r], { type: g }));
+  ye(e, i), window.setTimeout(() => URL.revokeObjectURL(e), 0);
+}
+function kt(r, g) {
+  ye(r, g);
+}
+function ye(r, g) {
+  const i = document.createElement("a");
+  i.href = r, i.download = g, i.hidden = !0, document.body.append(i), i.click(), i.remove();
+}
+const Rt = {
+  key: 0,
+  class: "dv-dashboard__header"
+}, It = { key: 0 }, $t = { class: "dv-dashboard__grid" }, Pt = ["data-panel-id"], Dt = /* @__PURE__ */ O({
+  __name: "DashboardRenderer",
+  props: {
+    runtime: {},
+    rendererRegistry: {},
+    panelComponents: {},
+    autoLoad: { type: Boolean, default: !0 },
+    lazyLoad: { type: Boolean, default: !0 },
+    lazyLoadRootMargin: { default: "600px 0px" },
+    syncUrl: { type: Boolean, default: !0 },
+    showHeader: { type: Boolean, default: !0 }
+  },
+  setup(r, { expose: g }) {
+    const i = r, e = /* @__PURE__ */ new Map(), y = j(), x = /* @__PURE__ */ new Set(), C = /* @__PURE__ */ new Set();
+    let s, S = !1, D = !1;
+    Ie(() => {
+      i.syncUrl && typeof window < "u" && i.runtime.restoreContext(window.location.search);
+    });
+    const {
+      context: c,
+      panelStates: l,
+      isLoading: f,
+      loadPanels: d,
+      refreshAll: n,
+      refreshPanels: M,
+      refreshPanel: o,
+      retryPanel: a,
+      setVariables: t
+    } = Ct(i.runtime, { autoLoad: i.autoLoad && !i.lazyLoad });
+    fe(() => {
+      var v;
+      if (!(!i.autoLoad || !i.lazyLoad)) {
+        if (typeof IntersectionObserver > "u") {
+          n();
+          return;
+        }
+        S = !0, s = new IntersectionObserver(_e, {
+          rootMargin: i.lazyLoadRootMargin
+        }), (v = y.value) == null || v.querySelectorAll(".dv-dashboard__cell").forEach((m) => s == null ? void 0 : s.observe(m));
+      }
+    }), ve(() => {
+      s == null || s.disconnect(), s = void 0, S = !1, x.clear(), C.clear();
+    });
+    const h = $(
+      () => (i.runtime.config.variables ?? []).map((v) => `${v.label}: ${_(c.value.variables[v.id])}`).join(" · ")
+    );
+    function _(v) {
+      return Array.isArray(v) ? v.join(", ") : String(v ?? "--");
+    }
+    function z(v) {
+      const m = v.layout.span;
+      return {
+        "--dv-panel-xs": String(m.xs),
+        "--dv-panel-sm": String(m.sm ?? m.xs),
+        "--dv-panel-md": String(m.md ?? m.sm ?? m.xs),
+        "--dv-panel-lg": String(m.lg ?? m.md ?? m.sm ?? m.xs),
+        "--dv-panel-xl": String(m.xl ?? m.lg ?? m.md ?? m.sm ?? m.xs)
+      };
+    }
+    function F(v) {
+      var b;
+      const m = ((b = i.panelComponents) == null ? void 0 : b[v.id]) ?? i.rendererRegistry.require(v.rendererId).component;
+      return $e(Pe(m));
+    }
+    function W(v, m) {
+      m ? e.set(v, m) : e.delete(v);
+    }
+    function _e(v) {
+      v.forEach((m) => {
+        const b = m.target.dataset.panelId;
+        b && (m.isIntersecting ? (x.add(b), C.add(b)) : (x.delete(b), C.delete(b)));
+      }), !(!C.size || D) && (D = !0, queueMicrotask(() => {
+        D = !1;
+        const m = Array.from(C);
+        C.clear(), d(m);
+      }));
+    }
+    function oe() {
+      return S ? M(x, { deferUnselected: !0 }) : n();
+    }
+    async function be(v) {
+      const m = t(v, S ? x : void 0);
+      if (i.syncUrl && typeof window < "u") {
+        const b = Ge(i.runtime.config, i.runtime.context, window.location.search);
+        window.history.replaceState(
+          window.history.state,
+          "",
+          `${window.location.pathname}${b}${window.location.hash}`
+        );
+      }
+      await m;
+    }
+    function ie(v) {
+      var se;
+      const m = i.runtime.config.panels.find((we) => we.id === v), b = (se = l.value[v]) == null ? void 0 : se.dataset;
+      if (!b) return;
+      const T = We(b, m, c.value);
+      St(T, "text/csv;charset=utf-8", Ze(i.runtime.config.id, m.id));
+    }
+    function re(v) {
+      var b;
+      const m = (b = e.get(v)) == null ? void 0 : b.exportPng();
+      m && kt(m, `${i.runtime.config.id}-${v}.png`);
+    }
+    return g({ refreshAll: oe, refreshPanel: o, exportCsv: ie, exportPng: re }), (v, m) => (p(), w("section", {
+      ref_key: "dashboardElement",
+      ref: y,
+      class: "dv-dashboard"
+    }, [
+      v.showHeader ? (p(), w("header", Rt, [
+        P("div", null, [
+          P("h1", null, L(v.runtime.config.title), 1),
+          v.runtime.config.description ? (p(), w("p", It, L(v.runtime.config.description), 1)) : I("", !0)
+        ])
+      ])) : I("", !0),
+      v.runtime.config.filterBar ? (p(), A(nt, {
+        key: 1,
+        config: v.runtime.config.filterBar,
+        context: u(c),
+        loading: u(f),
+        onChange: be,
+        onRefresh: oe
+      }, null, 8, ["config", "context", "loading"])) : I("", !0),
+      P("div", $t, [
+        (p(!0), w(H, null, K(v.runtime.config.panels, (b) => (p(), w("div", {
+          key: b.id,
+          class: "dv-dashboard__cell",
+          "data-panel-id": b.id,
+          style: ue(z(b))
+        }, [
+          R(xt, {
+            ref_for: !0,
+            ref: (T) => W(b.id, T),
+            context: u(c),
+            definition: v.runtime.dataRuntime.registries.rendererDefinitions.require(b.rendererId),
+            "filter-summary": h.value,
+            panel: b,
+            "refresh-disabled": u(f),
+            renderer: F(b),
+            state: u(l)[b.id],
+            onAction: (T) => v.runtime.executePanelAction(b.id, T),
+            onExportCsv: (T) => ie(b.id),
+            onExportPng: (T) => re(b.id),
+            onRefresh: (T) => u(o)(b.id),
+            onRetry: (T) => u(a)(b.id),
+            onVisualizationEvent: m[0] || (m[0] = (T) => v.runtime.dispatchEvent(T))
+          }, null, 8, ["context", "definition", "filter-summary", "panel", "refresh-disabled", "renderer", "state", "onAction", "onExportCsv", "onExportPng", "onRefresh", "onRetry"])
+        ], 12, Pt))), 128))
+      ])
+    ], 512));
+  }
+}), rn = /* @__PURE__ */ B(Dt, [["__scopeId", "data-v-6d4b5bdb"]]);
+function ne(r) {
+  return r.type === "percent" ? Z.PERCENT : r.type === "decimal" ? Z.DECIMAL : Z.COMMAS;
+}
+function ae(r) {
+  return typeof r == "object" && r !== null ? r : {};
+}
+const At = { class: "dv-chart-renderer dv-bar-renderer" }, zt = /* @__PURE__ */ O({
+  __name: "BarRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  emits: ["visualizationEvent"],
+  setup(r, { expose: g, emit: i }) {
+    const e = r, y = i, x = j();
+    function C(c, l, f = !1) {
+      const d = f ? E.formatAxis(c, l.format, e.context) : E.formatTooltip(c, l.format, e.context), n = l.format.type === "currency" || l.format.type === "percent" || l.format.unit;
+      return c != null && c !== "" && l.unit && !n ? `${d}${l.unit}` : d;
+    }
+    const s = $(() => ({
+      categories: [...e.viewModel.categories],
+      colors: [...te],
+      orientation: e.viewModel.orientation,
+      ...e.viewModel.visibleCount !== void 0 ? { visibleCount: e.viewModel.visibleCount } : {},
+      grid: {
+        top: 18,
+        right: e.viewModel.orientation === "horizontal" && e.viewModel.showLabels ? 78 : 18,
+        bottom: 10,
+        left: 16,
+        containLabel: !0
+      },
+      categoryAxis: {
+        ...Q,
+        ...e.viewModel.orientation === "horizontal" && e.viewModel.visibleCount !== void 0 ? { inverse: !0 } : {},
+        axisLabel: { ...Q.axisLabel, interval: 0 }
+      },
+      valueAxis: {
+        ...G,
+        splitNumber: 4,
+        axisLabel: {
+          ...G.axisLabel,
+          hideOverlap: !0,
+          ...e.viewModel.series[0] ? { formatter: (c) => C(c, e.viewModel.series[0], !0) } : {}
+        }
+      },
+      tooltip: {
+        ...ee,
+        axisPointer: { type: "shadow", shadowStyle: { color: "rgba(91, 114, 238, 0.055)" } }
+      },
+      ...e.viewModel.stacked ? { stack: "total" } : {},
+      series: e.viewModel.series.map((c) => ({
+        name: c.label,
+        data: [...c.values],
+        formatType: ne(c.format),
+        valueFormatter: (l) => C(l, c),
+        showLabel: e.viewModel.showLabels,
+        itemStyle: {
+          borderRadius: e.viewModel.orientation === "horizontal" ? [0, 5, 5, 0] : [5, 5, 0, 0]
+        }
+      }))
+    }));
+    function S(c) {
+      const l = ae(c), f = typeof l.seriesIndex == "number" ? l.seriesIndex : 0, d = e.panel.binding.type === "bar" ? e.panel.binding : void 0;
+      d && y("visualizationEvent", {
+        type: "dataPointClick",
+        panelId: e.panel.id,
+        datasetId: d.datasetId,
+        fields: Object.freeze({
+          [d.categoryField]: l.name,
+          ...d.seriesField ? { [d.seriesField]: l.seriesName } : {},
+          [d.valueFields[d.seriesField ? 0 : f] ?? d.valueFields[0]]: l.value
+        })
+      });
+    }
+    function D() {
+      var c;
+      return (c = x.value) == null ? void 0 : c.exportPng();
+    }
+    return g({ exportPng: D }), (c, l) => (p(), w("div", At, [
+      R(u(De), {
+        ref_key: "chartRef",
+        ref: x,
+        option: s.value,
+        size: u(J).SMALL,
+        onDataPointClick: S
+      }, null, 8, ["option", "size"])
+    ]));
+  }
+}), Lt = /* @__PURE__ */ B(zt, [["__scopeId", "data-v-4f111bdf"]]), Tt = { class: "dv-chart-renderer dv-line-renderer" }, Ft = /* @__PURE__ */ O({
+  __name: "LineRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  emits: ["visualizationEvent"],
+  setup(r, { expose: g, emit: i }) {
+    const e = r, y = i, x = j();
+    function C(l, f) {
+      const d = E.formatAxis(l, f.format, e.context);
+      return s(d, f);
+    }
+    function s(l, f) {
+      const d = f.format.type === "currency" || f.format.type === "percent" || f.format.unit;
+      return f.unit && !d ? `${l}${f.unit}` : l;
+    }
+    const S = $(() => {
+      const l = Array.from(
+        new Map(e.viewModel.series.map((d) => [d.axisKey, d])).values()
+      ), f = new Map(l.map((d, n) => [d.axisKey, n]));
+      return {
+        colors: [...te],
+        grid: { top: 18, right: l.length > 1 ? 24 : 16, bottom: 10, left: 16, containLabel: !0 },
+        tooltip: {
+          ...ee,
+          axisPointer: { type: "line", lineStyle: { color: "#b8c1d1", type: "dashed" } }
+        },
+        xAxis: {
+          data: e.viewModel.categories.map(String),
+          ...Q,
+          ...e.viewModel.categoryFormat ? {
+            valueFormatter: (d) => E.formatAxis(d, e.viewModel.categoryFormat, e.context)
+          } : {}
+        },
+        yAxis: l.map((d, n) => ({
+          ...G,
+          position: n === 0 ? "left" : "right",
+          show: n < 2,
+          axisLabel: {
+            ...G.axisLabel,
+            formatter: (M) => C(M, d)
+          },
+          splitLine: {
+            show: n === 0,
+            lineStyle: { color: "#edf0f5", type: "dashed" }
+          }
+        })),
+        series: e.viewModel.series.map((d, n) => ({
+          name: d.label,
+          data: d.values.map((M) => M ?? void 0),
+          formatType: ne(d.format),
+          valueFormatter: (M) => {
+            const o = E.formatTooltip(M, d.format, e.context);
+            return M == null || M === "" ? o : s(o, d);
+          },
+          showLabel: e.viewModel.showLabels,
+          smooth: e.viewModel.smooth,
+          yAxisIndex: f.get(d.axisKey) ?? 0,
+          showSymbol: !1,
+          symbol: "circle",
+          symbolSize: 7,
+          lineStyle: { width: n === 0 ? 3 : 2.25 },
+          ...n === 0 ? {
+            areaStyle: {
+              opacity: 1,
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "rgba(79, 107, 237, 0.22)" },
+                  { offset: 1, color: "rgba(79, 107, 237, 0.015)" }
+                ]
+              }
+            }
+          } : {}
+        })),
+        markLine: {
+          xAxis: e.viewModel.annotations.filter((d) => d.type === "category").map((d) => String(d.value)),
+          yAxis: e.viewModel.annotations.filter((d) => d.type === "value").map((d) => String(d.value))
+        }
+      };
+    });
+    function D(l) {
+      const f = ae(l), d = typeof f.seriesIndex == "number" ? f.seriesIndex : 0, n = e.panel.binding.type === "line" ? e.panel.binding : void 0;
+      n && y("visualizationEvent", {
+        type: "dataPointClick",
+        panelId: e.panel.id,
+        datasetId: n.datasetId,
+        fields: Object.freeze({
+          [n.xField]: f.name,
+          ...n.seriesField ? { [n.seriesField]: f.seriesName } : {},
+          [n.yFields[n.seriesField ? 0 : d] ?? n.yFields[0]]: f.value
+        })
+      });
+    }
+    function c() {
+      var l;
+      return (l = x.value) == null ? void 0 : l.exportPng();
+    }
+    return g({ exportPng: c }), (l, f) => (p(), w("div", Tt, [
+      R(u(Ae), {
+        ref_key: "chartRef",
+        ref: x,
+        option: S.value,
+        size: u(J).SMALL,
+        onDataPointClick: D
+      }, null, 8, ["option", "size"])
+    ]));
+  }
+}), Et = /* @__PURE__ */ B(Ft, [["__scopeId", "data-v-efc34766"]]), Vt = { class: "dv-metric" }, Ot = { class: "dv-metric__value" }, Bt = { class: "dv-metric__number" }, Ut = {
+  key: 0,
+  class: "dv-metric__unit"
+}, Nt = {
+  key: 0,
+  class: "dv-metric__comparison"
+}, jt = /* @__PURE__ */ O({
+  __name: "MetricRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  setup(r) {
+    const g = r, i = $(
+      () => E.formatDisplay(g.viewModel.value, g.viewModel.format, g.context)
+    ), e = $(
+      () => g.viewModel.format.type === "currency" || g.viewModel.format.type === "percent" ? void 0 : g.viewModel.unit
+    ), y = $(() => {
+      const s = g.viewModel.comparison;
+      return s ? E.formatDisplay(s.value, s.format, g.context) : "";
+    }), x = $(() => {
+      var s, S;
+      return ((s = g.viewModel.comparison) == null ? void 0 : s.direction) === "up" ? me : ((S = g.viewModel.comparison) == null ? void 0 : S.direction) === "down" ? ge : he;
+    }), C = $(() => {
+      const s = g.viewModel.comparison;
+      return !s || s.direction === "flat" ? "neutral" : s.colorMode === "direction" ? s.direction === "up" ? "unfavorable" : "favorable" : s.meaning === "neutral" ? "neutral" : s.meaning === "positive" && s.direction === "up" || s.meaning === "negative" && s.direction === "down" ? "favorable" : "unfavorable";
+    });
+    return (s, S) => (p(), w("div", Vt, [
+      P("div", Ot, [
+        P("span", Bt, L(i.value), 1),
+        e.value ? (p(), w("span", Ut, L(e.value), 1)) : I("", !0)
+      ]),
+      s.viewModel.comparison ? (p(), w("div", Nt, [
+        P("span", null, L(s.viewModel.comparison.label), 1),
+        P("strong", {
+          class: q(`dv-metric__comparison--${C.value}`)
+        }, [
+          (p(), A(pe(x.value))),
+          U(" " + L(y.value), 1)
+        ], 2)
+      ])) : I("", !0)
+    ]));
+  }
+}), Yt = /* @__PURE__ */ B(jt, [["__scopeId", "data-v-efa26253"]]), Ht = { class: "dv-chart-renderer dv-pie-renderer" }, qt = /* @__PURE__ */ O({
+  __name: "PieRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  emits: ["visualizationEvent"],
+  setup(r, { expose: g, emit: i }) {
+    const e = r, y = i, x = j();
+    function C(c) {
+      const l = E.formatTooltip(c, e.viewModel.valueFormat, e.context), f = e.viewModel.valueFormat.type === "currency" || e.viewModel.valueFormat.type === "percent" || e.viewModel.valueFormat.unit;
+      return e.viewModel.unit && !f ? `${l}${e.viewModel.unit}` : l;
+    }
+    const s = $(() => ({
+      colors: [...te],
+      donut: e.viewModel.donut,
+      showLegend: e.viewModel.showLegend,
+      showLabels: !1,
+      center: ["50%", "43%"],
+      radius: e.viewModel.donut ? ["50%", "70%"] : "70%",
+      itemStyle: { borderColor: "#fff", borderWidth: 3, borderRadius: 4 },
+      tooltip: { ...ee },
+      series: e.viewModel.items.map((c) => ({
+        name: c.label,
+        data: c.value,
+        formatType: ne(e.viewModel.valueFormat),
+        valueFormatter: C
+      })),
+      ...e.viewModel.donut ? {
+        aggregation: {
+          total: e.viewModel.items.reduce((c, l) => c + l.value, 0),
+          label: e.panel.title.replace(/占比$/, ""),
+          valueFormatter: C,
+          ...e.viewModel.unit ? { unit: e.viewModel.unit } : {}
+        }
+      } : {}
+    }));
+    function S(c) {
+      const l = ae(c), f = e.panel.binding.type === "pie" ? e.panel.binding : void 0;
+      f && y("visualizationEvent", {
+        type: "dataPointClick",
+        panelId: e.panel.id,
+        datasetId: f.datasetId,
+        fields: Object.freeze({ [f.nameField]: l.name, [f.valueField]: l.value })
+      });
+    }
+    function D() {
+      var c;
+      return (c = x.value) == null ? void 0 : c.exportPng();
+    }
+    return g({ exportPng: D }), (c, l) => (p(), w("div", Ht, [
+      R(u(ze), {
+        ref_key: "chartRef",
+        ref: x,
+        option: s.value,
+        size: u(J).SMALL,
+        onDataPointClick: S
+      }, null, 8, ["option", "size"])
+    ]));
+  }
+}), Kt = /* @__PURE__ */ B(qt, [["__scopeId", "data-v-ccdee116"]]), Gt = { class: "dv-table-scroll" }, Wt = /* @__PURE__ */ O({
+  __name: "TableRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  emits: ["visualizationEvent"],
+  setup(r, { emit: g }) {
+    const i = r, e = g, y = $(
+      () => i.viewModel.columns.map((a) => ({
+        title: a.label,
+        dataIndex: a.field,
+        key: a.field,
+        ...a.width ? { width: a.width } : {},
+        sorter: a.sortable,
+        ...a.filterable ? {
+          filters: Array.from(new Set(i.viewModel.rows.map((t) => String(t[a.field] ?? "")))).slice(0, 50).map((t) => ({ text: t || "--", value: t })),
+          onFilter: (t, h) => String(h[a.field] ?? "") === String(t)
+        } : {},
+        customRender: ({ text: t }) => C(t, a)
+      }))
+    );
+    function x(a, t) {
+      return E.formatDisplay(
+        a,
+        t.format ?? {
+          type: t.dataType === "date" ? "date" : t.dataType === "datetime" ? "datetime" : "number"
+        },
+        i.context
+      );
+    }
+    function C(a, t) {
+      const h = x(a, t);
+      return t.display ? t.display.type === "progress" ? S(a, h, t.display) : t.display.type === "trend" ? D(a, h, t.display) : c(a, h, t.display) : h;
+    }
+    function s(a) {
+      return typeof a == "number" && Number.isFinite(a) ? a : void 0;
+    }
+    function S(a, t, h) {
+      const _ = s(a);
+      if (_ === void 0) return t;
+      const z = h.max ?? 1, F = Math.min(100, Math.max(0, _ / z * 100));
+      return V("div", { class: "dv-table__progress-cell" }, [
+        V(He, { percent: F, showInfo: !1, size: "small", strokeWidth: 6 }),
+        V("span", { class: "dv-table__cell-value" }, t)
+      ]);
+    }
+    function D(a, t, h) {
+      const _ = s(a);
+      if (_ === void 0) return t;
+      const z = _ > 0 ? h.positiveTone ?? "success" : _ < 0 ? h.negativeTone ?? "danger" : h.zeroTone ?? "neutral", F = _ > 0 ? me : _ < 0 ? ge : he;
+      return V("span", { class: ["dv-table__trend", `dv-table__trend--${z}`] }, [V(F), V("span", t)]);
+    }
+    function c(a, t, h) {
+      var z;
+      const _ = ((z = h.toneByValue) == null ? void 0 : z[String(a ?? "")]) ?? h.defaultTone ?? "neutral";
+      return l(t, _);
+    }
+    function l(a, t, h) {
+      return V(
+        qe,
+        { class: ["dv-table__tag", `dv-table__tag--${t}`] },
+        { default: () => [V("span", a)] }
+      );
+    }
+    const f = /* @__PURE__ */ new WeakMap();
+    let d = 0;
+    function n(a) {
+      const t = f.get(a);
+      if (t) return t;
+      const h = `row-${++d}`;
+      return f.set(a, h), h;
+    }
+    function M(a) {
+      return {
+        onClick: () => e("visualizationEvent", {
+          type: "rowClick",
+          panelId: i.panel.id,
+          datasetId: i.panel.binding.datasetId,
+          fields: a
+        })
+      };
+    }
+    function o() {
+    }
+    return (a, t) => (p(), w("div", Gt, [
+      R(u(Ke), {
+        class: "dv-table",
+        columns: y.value,
+        "data-source": [...a.viewModel.rows],
+        pagination: a.viewModel.showPagination ? { pageSize: a.viewModel.pageSize, showSizeChanger: !1 } : !1,
+        "row-key": n,
+        scroll: { x: "max-content" },
+        size: "small",
+        onChange: o,
+        "custom-row": M
+      }, null, 8, ["columns", "data-source", "pagination"])
+    ]));
+  }
+}), Zt = /* @__PURE__ */ B(Wt, [["__scopeId", "data-v-c8a717c4"]]);
+function sn(r) {
+  return r.registerMany([
+    { id: "metric", component: Yt },
+    { id: "line", component: Et },
+    { id: "bar", component: Lt },
+    { id: "pie", component: Kt },
+    { id: "table", component: Zt }
+  ]), r;
+}
+class Qt extends Qe {
+  constructor() {
+    super("VueVisualizationRenderer");
+  }
+}
+function ln() {
+  return new Qt();
+}
+export {
+  Lt as BarRenderer,
+  nt as DashboardFilterBar,
+  xt as DashboardPanel,
+  rn as DashboardRenderer,
+  Et as LineRenderer,
+  Yt as MetricRenderer,
+  Kt as PieRenderer,
+  Q as STANDARD_CATEGORY_AXIS,
+  te as STANDARD_CHART_COLORS,
+  ee as STANDARD_CHART_TOOLTIP,
+  G as STANDARD_VALUE_AXIS,
+  Zt as TableRenderer,
+  Qt as VueRendererRegistry,
+  ae as chartEventFields,
+  ln as createVueRendererRegistry,
+  St as downloadBlob,
+  kt as downloadDataUrl,
+  sn as registerStandardVueRenderers,
+  ne as toChartFormat,
+  Ct as useDashboardRuntime
+};
+//# sourceMappingURL=index.js.map