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

package/README.md

@@ -1,3 +1,239 @@
-# Temporary Holding Version
+# @blazes/data-visualization
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+面向 Blazes 应用的可复用数据标准化与数据看板运行时组件。
+
+本包提供可序列化的 DashboardConfig v1 Schema、引用校验、注册表、Provider 执行、看板变量与 URL 状态、
+Dataset 标准化、两级缓存、基于 generation 的调度、格式化、遥测以及相互隔离的 Panel 状态。Vue 入口包含
+看板外壳、筛选栏、面板状态 UI，以及 Metric、Line、Bar、Pie 和基础表格渲染器。WordCloud 与实验性 S2
+通过独立的异步入口提供。
+
+## 包入口
+
+| 入口                                              | 职责                                                   |
+| ------------------------------------------------- | ------------------------------------------------------ |
+| `@blazes/data-visualization`                      | 与框架无关的 Core 导出                                 |
+| `@blazes/data-visualization/core`                 | 配置、Provider、Dataset、Adapter、运行时、格式化与诊断 |
+| `@blazes/data-visualization/vue`                  | Vue 看板、面板与标准渲染器集成                         |
+| `@blazes/data-visualization/style.css`            | 看板与标准渲染器样式                                   |
+| `@blazes/data-visualization/renderers/word-cloud` | 可选的 WordCloud 渲染器                                |
+| `@blazes/data-visualization/experimental/s2`      | 可选的实验性 S2 渲染器                                 |
+
+Core 入口不得依赖 Vue、Ant Design Vue、ECharts、S2、Axios 或 `@blazes/charts`。
+
+图表集成要求 `@blazes/charts` 2.x（当前最低版本为 `2.0.0-alpha.0`）。标准 Vue Renderer 统一从 `@blazes/charts` 根入口
+导入 Line、Bar、Pie、Size 与 FormatType；该入口不包含 S2。直接使用透视表组件时，宿主从
+`@blazes/charts/sheet` 导入；看板的实验性 S2 Renderer 仍从本包的 `experimental/s2` 入口注册。
+
+## Core 用法
+
+```ts
+import {
+  createCoreRegistries,
+  createDashboardDataRuntime,
+  type DashboardConfig
+} from "@blazes/data-visualization/core";
+
+const registries = createCoreRegistries();
+registries.providers.register({
+  id: "statistics",
+  operations: {
+    trend: {
+      async execute(input, { signal }) {
+        return apiGetTrend(input, { signal });
+      }
+    }
+  }
+});
+
+const config = {
+  schemaVersion: "1.0",
+  id: "operations",
+  title: "运营看板",
+  variables: [{ id: "start", label: "开始日期", defaultValue: "2026-08-01" }],
+  requests: [
+    {
+      id: "trend-request",
+      providerId: "statistics",
+      operationId: "trend",
+      input: { start: { source: "variable", variableId: "start", codecId: "iso-date" } }
+    }
+  ],
+  datasets: [
+    {
+      id: "trend-dataset",
+      name: "趋势",
+      input: { type: "single", requestId: "trend-request", responsePath: "rows" },
+      fields: [
+        { key: "date", label: "日期", role: "time", dataType: "date", required: true },
+        { key: "value", label: "数值", role: "metric", dataType: "number", required: true }
+      ]
+    }
+  ],
+  panels: []
+} satisfies DashboardConfig;
+
+const runtime = createDashboardDataRuntime({
+  config,
+  registries,
+  timezone: "Asia/Shanghai",
+  locale: "zh-CN"
+});
+
+const context = runtime.createContext();
+const dataset = await runtime.runDataset("trend-dataset", context);
+```
+
+首次执行 Provider 之前，运行时会校验配置结构和 Registry 引用。多请求 Dataset 必须注册同步 Transformer。
+必填字段校验失败时会拒绝整个 Dataset；可选字段的无效值会转换为 `null`，并附带诊断信息。
+
+## Dashboard 用法
+
+每个独立看板运行时都需要注册一次标准 Core 与 Vue 插件：
+
+```ts
+import { createDashboardRuntime, createStandardCoreRegistries } from "@blazes/data-visualization/core";
+import { createVueRendererRegistry, registerStandardVueRenderers } from "@blazes/data-visualization/vue";
+import "@blazes/charts/style.css";
+import "@blazes/data-visualization/style.css";
+
+const registries = createStandardCoreRegistries();
+registries.providers.register(statisticsProvider);
+
+export const runtime = createDashboardRuntime({
+  config,
+  registries,
+  timezone: "Asia/Shanghai",
+  locale: "zh-CN"
+});
+export const rendererRegistry = registerStandardVueRenderers(createVueRendererRegistry());
+```
+
+```vue
+<DashboardRenderer :runtime="runtime" :renderer-registry="rendererRegistry" />
+```
+
+`DashboardRenderer` 默认懒加载 Panel。Panel 进入视口或默认的 `600px 0px` 预加载范围时开始加载。设置
+`:lazy-load="false"` 可恢复立即加载，也可以通过 `lazy-load-root-margin="300px 0px"` 调整预加载距离。
+不支持 `IntersectionObserver` 的浏览器会回退到立即加载。懒加载模式下，筛选变化和筛选栏刷新操作只刷新
+预加载范围内的 Panel；屏外 Panel 接近视口时，再使用最新变量加载。
+
+`refreshPanel()` 只为指定 Panel 执行相互隔离的请求与 Dataset 链路。`refreshDataset()` 和全局刷新仍会更新
+共享 Request 的所有下游消费者。变量快速变化时会取消上一个全局 generation；刷新失败时以 `stale` 状态
+保留最近一次成功的 ViewModel。所有标准渲染器都支持 CSV 导出，Line、Bar、Pie 和 WordCloud 还支持 PNG 导出。
+
+日期快捷范围按看板 `timezone` 的昨天作为结束日期，包含昨天、排除今天；其他结束日期的范围不会被识别为“近 N 天”。
+启用 URL 同步时，筛选值变化会立即更新链接参数，不等待数据请求完成。
+
+可在看板元素或其祖先设置 CSS 变量 `--dv-primary` 覆盖主色，默认使用 `#315fc4`。卡片 loading、筛选栏
+刷新按钮与普通表格分页的选中、hover、键盘聚焦颜色均使用该主色，分页的浅色背景由主色生成。
+
+### 卡片标题说明
+
+所有 Panel 可配置 `titleNote`，在标题旁常驻展示补充说明，使用浅灰色小号文字，空间不足时自动换行。
+`title` 是卡片名称，`description` 继续作为问号图标的悬浮提示；省略或传入空的 `titleNote` 时不展示补充文字。
+这些字段仅控制展示，统计范围由 Request 的输入绑定决定。
+
+```ts
+{
+  title: "进线量",
+  titleNote: "默认全部客服",
+  description: "用户进线客服系统的数量"
+}
+```
+
+### 柱状图滚动
+
+柱状图可通过 `enhancement.bar.visibleCount` 限制同屏展示的类别数（2 到 200），完整数据仍保留在 Dataset
+和图表中。超过限制时显示滑条，也可在图表内使用鼠标滚轮或拖动切换；未超过时不显示滑条。
+横向排行建议降序排列，首项显示在顶部：
+
+```ts
+enhancement: {
+  type: "bar",
+  bar: { orientation: "horizontal", sort: "descending", showLabels: true, visibleCount: 10 }
+}
+```
+
+## 可选渲染器
+
+WordCloud 的可序列化 binding、Adapter 和渲染器定义已包含在标准 Core 注册中。在挂载使用
+`rendererId: "wordCloud"` 的看板前，需要先加载其 Vue 实现：
+
+```ts
+import { registerWordCloudVueRenderer } from "@blazes/data-visualization/renderers/word-cloud";
+
+await registerWordCloudVueRenderer(rendererRegistry);
+```
+
+S2 仍处于实验阶段。Core 和 Vue 均需显式注册，并且必须在看板运行时校验配置前完成：
+
+```ts
+import { registerPivotTableS2 } from "@blazes/data-visualization/experimental/s2";
+
+await registerPivotTableS2(registries, rendererRegistry);
+```
+
+S2 面板使用固定的维度与指标配置，不直接暴露原始 S2 options：
+
+```ts
+{
+  rendererId: "pivotTableS2",
+  binding: {
+    type: "pivotTableS2",
+    datasetId: "sales",
+    rowFields: ["region"],
+    columnFields: ["month"],
+    valueFields: ["amount", "growth"]
+  }
+}
+```
+
+两个加载器都使用独立的动态 chunk。缺少可选依赖时只会导致对应的可选渲染器失败，不会影响根入口、Core
+或标准 Vue 入口。
+
+## 开发
+
+本仓库使用 Node 18 与 Yarn Classic。
+
+```sh
+yarn install
+yarn verify
+```
+
+常用命令：
+
+```sh
+yarn typecheck
+yarn test
+yarn build
+yarn performance:dataset
+yarn size
+```
+
+### 本地包同步
+
+默认使用 npm 已发布的 `@blazes/charts@2.0.0-alpha.0`。需要联调未发布的组件库改动时，可选择使用 Yalc：
+
+```sh
+# /Users/yh-110081m/dev/chart
+yarn yalc:publish
+
+# /Users/yh-110081m/dev/data-visualization
+yarn yalc:add:charts
+yarn yalc:publish
+
+# 消费项目
+yalc add @blazes/charts @blazes/data-visualization
+yarn install
+```
+
+首次添加后，在发生变更的组件库中执行 `yarn yalc:push`，即可把后续版本推送到所有已注册的消费项目。
+chart 脚本通过 Volta 选择所需的 Node 22 运行时。当 chart 类型变更会影响本包时，先在 chart 中执行
+`yarn yalc:push`，验证 data-visualization 后，再在本仓库执行 `yarn yalc:push`。本地包的依赖列表发生变化后，
+使用对应的 `yalc:update` 脚本更新。`.yalc/` 和 `yalc.lock` 是本地生成产物，不提交到 Git；发布消费项目的
+manifest 前，应恢复正常版本范围。
+
+`yarn build` 会生成 ESM 文件、类型声明和 `reports/bundle-stats.html`。`yarn size` 为根入口、Core 和 Vue
+运行时入口依赖图执行初始 50 KB gzip 体积预算；如需测试经过明确批准的其他预算，可设置
+`DV_SIZE_LIMIT_KB`。`yarn performance:dataset` 对 10,000 行数据执行初始 100ms P95 标准化性能预算；如需覆盖
+经过明确批准的阈值，可设置 `DV_DATASET_P95_LIMIT_MS`。

package/dist/.vite/manifest.json

@@ -0,0 +1,129 @@
+{
+  "_csv-Dyrr2yMA.js": {
+    "file": "csv-Dyrr2yMA.js",
+    "name": "csv",
+    "imports": [
+      "_serializable-DOOpLZyk.js",
+      "_value-formatter-D5QmLSMG.js"
+    ]
+  },
+  "_dashboard-runtime-8a-9P8Ku.js": {
+    "file": "dashboard-runtime-8a-9P8Ku.js",
+    "name": "dashboard-runtime",
+    "imports": [
+      "_csv-Dyrr2yMA.js",
+      "_serializable-DOOpLZyk.js",
+      "_standard-definitions-DHtaLAf1.js",
+      "_runtime-schema-BO2qLlvE.js"
+    ]
+  },
+  "_runtime-schema-BO2qLlvE.js": {
+    "file": "runtime-schema-BO2qLlvE.js",
+    "name": "runtime-schema"
+  },
+  "_serializable-DOOpLZyk.js": {
+    "file": "serializable-DOOpLZyk.js",
+    "name": "serializable"
+  },
+  "_standard-definitions-DHtaLAf1.js": {
+    "file": "standard-definitions-DHtaLAf1.js",
+    "name": "standard-definitions",
+    "imports": [
+      "_serializable-DOOpLZyk.js",
+      "_runtime-schema-BO2qLlvE.js"
+    ]
+  },
+  "_value-formatter-D5QmLSMG.js": {
+    "file": "value-formatter-D5QmLSMG.js",
+    "name": "value-formatter"
+  },
+  "_visual-theme-DH-k3L51.js": {
+    "file": "visual-theme-DH-k3L51.js",
+    "name": "visual-theme"
+  },
+  "src/core/index.ts": {
+    "file": "core/index.js",
+    "name": "core/index",
+    "src": "src/core/index.ts",
+    "isEntry": true,
+    "imports": [
+      "_dashboard-runtime-8a-9P8Ku.js",
+      "_runtime-schema-BO2qLlvE.js",
+      "_csv-Dyrr2yMA.js",
+      "_standard-definitions-DHtaLAf1.js",
+      "_value-formatter-D5QmLSMG.js",
+      "_serializable-DOOpLZyk.js"
+    ]
+  },
+  "src/experimental/s2/PivotTableS2Renderer.vue": {
+    "file": "PivotTableS2Renderer-C-Urwhuv.js",
+    "name": "PivotTableS2Renderer",
+    "src": "src/experimental/s2/PivotTableS2Renderer.vue",
+    "isDynamicEntry": true,
+    "imports": [
+      "_value-formatter-D5QmLSMG.js"
+    ]
+  },
+  "src/experimental/s2/index.ts": {
+    "file": "experimental/s2/index.js",
+    "name": "experimental/s2/index",
+    "src": "src/experimental/s2/index.ts",
+    "isEntry": true,
+    "imports": [
+      "_runtime-schema-BO2qLlvE.js"
+    ],
+    "dynamicImports": [
+      "src/experimental/s2/PivotTableS2Renderer.vue"
+    ]
+  },
+  "src/index.ts": {
+    "file": "index.js",
+    "name": "index",
+    "src": "src/index.ts",
+    "isEntry": true,
+    "imports": [
+      "_dashboard-runtime-8a-9P8Ku.js",
+      "_runtime-schema-BO2qLlvE.js",
+      "_csv-Dyrr2yMA.js",
+      "_standard-definitions-DHtaLAf1.js",
+      "_value-formatter-D5QmLSMG.js",
+      "_serializable-DOOpLZyk.js"
+    ]
+  },
+  "src/renderers/word-cloud/WordCloudRenderer.vue": {
+    "file": "WordCloudRenderer-7tzJz57a.js",
+    "name": "WordCloudRenderer",
+    "src": "src/renderers/word-cloud/WordCloudRenderer.vue",
+    "isDynamicEntry": true,
+    "imports": [
+      "_visual-theme-DH-k3L51.js",
+      "_value-formatter-D5QmLSMG.js"
+    ]
+  },
+  "src/renderers/word-cloud/index.ts": {
+    "file": "renderers/word-cloud/index.js",
+    "name": "renderers/word-cloud/index",
+    "src": "src/renderers/word-cloud/index.ts",
+    "isEntry": true,
+    "imports": [
+      "_standard-definitions-DHtaLAf1.js"
+    ],
+    "dynamicImports": [
+      "src/renderers/word-cloud/WordCloudRenderer.vue"
+    ]
+  },
+  "src/vue/index.ts": {
+    "file": "vue/index.js",
+    "name": "vue/index",
+    "src": "src/vue/index.ts",
+    "isEntry": true,
+    "imports": [
+      "_visual-theme-DH-k3L51.js",
+      "_value-formatter-D5QmLSMG.js",
+      "_csv-Dyrr2yMA.js"
+    ],
+    "css": [
+      "index.css"
+    ]
+  }
+}

package/dist/PivotTableS2Renderer-C-Urwhuv.js

@@ -0,0 +1,109 @@
+import { defineComponent as p, ref as x, onMounted as w, watch as C, onBeforeUnmount as b, openBlock as z, createElementBlock as S } from "vue";
+import { PivotSheet as M } from "@antv/s2";
+import { v as B } from "./value-formatter-D5QmLSMG.js";
+const A = /* @__PURE__ */ p({
+  name: "PivotTableS2Renderer",
+  __name: "PivotTableS2Renderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  setup(c) {
+    const o = c, r = x();
+    let t, n, i = !1;
+    const u = {
+      cornerCell: {
+        text: { fill: "#637083", fontSize: 12, textAlign: "left" },
+        bolderText: { fill: "#273244", fontSize: 12, fontWeight: 600, textAlign: "left" },
+        cell: { backgroundColor: "#f6f8fb", horizontalBorderColor: "#e4e9f0", verticalBorderColor: "#e4e9f0" }
+      },
+      rowCell: {
+        text: { fill: "#465267", fontSize: 12, textAlign: "left" },
+        bolderText: { fill: "#273244", fontSize: 12, fontWeight: 600, textAlign: "left" },
+        cell: { backgroundColor: "#fafbfd", horizontalBorderColor: "#e7ebf1", verticalBorderColor: "#e7ebf1" }
+      },
+      colCell: {
+        text: { fill: "#637083", fontSize: 12, textAlign: "left" },
+        bolderText: { fill: "#273244", fontSize: 12, fontWeight: 600, textAlign: "left" },
+        measureText: { fill: "#273244", fontSize: 12, fontWeight: 600, textAlign: "left" },
+        cell: { backgroundColor: "#f6f8fb", horizontalBorderColor: "#e4e9f0", verticalBorderColor: "#e4e9f0" }
+      },
+      dataCell: {
+        text: { fill: "#273244", fontSize: 12, textAlign: "right" },
+        bolderText: { fill: "#182230", fontSize: 12, fontWeight: 600, textAlign: "right" },
+        cell: {
+          backgroundColor: "#fff",
+          crossBackgroundColor: "#fbfcfe",
+          horizontalBorderColor: "#edf0f5",
+          verticalBorderColor: "#edf0f5"
+        }
+      }
+    };
+    function s() {
+      return [...o.viewModel.rowFields, ...o.viewModel.columnFields, ...o.viewModel.valueFields];
+    }
+    function h(e, l) {
+      if (!e.format) return l;
+      const v = B.formatDisplay(l, e.format, o.context), g = e.unit && !e.format.unit && e.format.type !== "percent" ? e.unit : "";
+      return `${v}${g}`;
+    }
+    function a() {
+      return {
+        fields: {
+          rows: o.viewModel.rowFields.map((e) => e.field),
+          columns: o.viewModel.columnFields.map((e) => e.field),
+          values: o.viewModel.valueFields.map((e) => e.field),
+          valueInCols: !0
+        },
+        meta: s().map((e) => ({
+          field: e.field,
+          name: e.label,
+          ...e.format ? { formatter: (l) => h(e, l) } : {}
+        })),
+        data: o.viewModel.rows.map((e) => ({ ...e }))
+      };
+    }
+    function m() {
+      var e, l;
+      return {
+        width: Math.max(((e = r.value) == null ? void 0 : e.clientWidth) ?? 0, 320),
+        height: Math.max(((l = r.value) == null ? void 0 : l.clientHeight) ?? 0, 320)
+      };
+    }
+    function f() {
+      return {
+        ...m(),
+        style: {
+          layoutWidthType: "adaptive",
+          colCell: { height: 34 },
+          rowCell: { height: 34 },
+          dataCell: { height: 34 }
+        },
+        interaction: { overscrollBehavior: "contain" }
+      };
+    }
+    async function d() {
+      r.value && (t ? (t.setDataCfg(a(), !0), t.setOptions(f(), !0)) : (t = new M(r.value, a(), f()), t.setTheme(u)), await t.render());
+    }
+    return w(async () => {
+      await d(), !i && typeof ResizeObserver < "u" && r.value && (n = new ResizeObserver(([e]) => {
+        !e || !t || t.changeSheetSize(Math.max(e.contentRect.width, 320), Math.max(e.contentRect.height, 320));
+      }), n.observe(r.value));
+    }), C(
+      () => [o.viewModel, o.context],
+      async () => d()
+    ), b(() => {
+      i = !0, n == null || n.disconnect(), t == null || t.destroy(), t = void 0;
+    }), (e, l) => (z(), S("div", {
+      ref_key: "containerRef",
+      ref: r,
+      class: "dv-pivot-table-s2-renderer",
+      style: { width: "100%", "min-width": "0", height: "320px", overflow: "hidden", background: "#fff" }
+    }, null, 512));
+  }
+});
+export {
+  A as default
+};
+//# sourceMappingURL=PivotTableS2Renderer-C-Urwhuv.js.map

package/dist/PivotTableS2Renderer-C-Urwhuv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotTableS2Renderer-C-Urwhuv.js","sources":["../src/experimental/s2/PivotTableS2Renderer.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"containerRef\"\n    class=\"dv-pivot-table-s2-renderer\"\n    style=\"width: 100%; min-width: 0; height: 320px; overflow: hidden; background: #fff\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { PivotSheet, type S2DataConfig, type S2Options, type S2Theme } from \"@antv/s2\";\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\n\nimport { valueFormatter, type DashboardContext, type PanelConfig } from \"../../core\";\nimport type { PivotTableS2FieldViewModel, PivotTableS2ViewModel } from \"./pivot-table-s2\";\n\ndefineOptions({ name: \"PivotTableS2Renderer\" });\n\nconst props = defineProps<{ viewModel: PivotTableS2ViewModel; panel: PanelConfig; context: DashboardContext }>();\nconst containerRef = ref<HTMLDivElement>();\nlet sheet: PivotSheet | undefined;\nlet resizeObserver: ResizeObserver | undefined;\nlet disposed = false;\n\nconst S2_THEME: S2Theme = {\n  cornerCell: {\n    text: { fill: \"#637083\", fontSize: 12, textAlign: \"left\" },\n    bolderText: { fill: \"#273244\", fontSize: 12, fontWeight: 600, textAlign: \"left\" },\n    cell: { backgroundColor: \"#f6f8fb\", horizontalBorderColor: \"#e4e9f0\", verticalBorderColor: \"#e4e9f0\" }\n  },\n  rowCell: {\n    text: { fill: \"#465267\", fontSize: 12, textAlign: \"left\" },\n    bolderText: { fill: \"#273244\", fontSize: 12, fontWeight: 600, textAlign: \"left\" },\n    cell: { backgroundColor: \"#fafbfd\", horizontalBorderColor: \"#e7ebf1\", verticalBorderColor: \"#e7ebf1\" }\n  },\n  colCell: {\n    text: { fill: \"#637083\", fontSize: 12, textAlign: \"left\" },\n    bolderText: { fill: \"#273244\", fontSize: 12, fontWeight: 600, textAlign: \"left\" },\n    measureText: { fill: \"#273244\", fontSize: 12, fontWeight: 600, textAlign: \"left\" },\n    cell: { backgroundColor: \"#f6f8fb\", horizontalBorderColor: \"#e4e9f0\", verticalBorderColor: \"#e4e9f0\" }\n  },\n  dataCell: {\n    text: { fill: \"#273244\", fontSize: 12, textAlign: \"right\" },\n    bolderText: { fill: \"#182230\", fontSize: 12, fontWeight: 600, textAlign: \"right\" },\n    cell: {\n      backgroundColor: \"#fff\",\n      crossBackgroundColor: \"#fbfcfe\",\n      horizontalBorderColor: \"#edf0f5\",\n      verticalBorderColor: \"#edf0f5\"\n    }\n  }\n};\n\nfunction allFields(): PivotTableS2FieldViewModel[] {\n  return [...props.viewModel.rowFields, ...props.viewModel.columnFields, ...props.viewModel.valueFields];\n}\n\nfunction formatFieldValue(field: PivotTableS2FieldViewModel, value: unknown): string | number | null | undefined {\n  if (!field.format) return value as string | number | null | undefined;\n  const formatted = valueFormatter.formatDisplay(value, field.format, props.context);\n  const unit = field.unit && !field.format.unit && field.format.type !== \"percent\" ? field.unit : \"\";\n  return `${formatted}${unit}`;\n}\n\nfunction buildDataConfig(): S2DataConfig {\n  return {\n    fields: {\n      rows: props.viewModel.rowFields.map((field) => field.field),\n      columns: props.viewModel.columnFields.map((field) => field.field),\n      values: props.viewModel.valueFields.map((field) => field.field),\n      valueInCols: true\n    },\n    meta: allFields().map((field) => ({\n      field: field.field,\n      name: field.label,\n      ...(field.format ? { formatter: (value: unknown) => formatFieldValue(field, value) } : {})\n    })),\n    data: props.viewModel.rows.map((row) => ({ ...row })) as S2DataConfig[\"data\"]\n  };\n}\n\nfunction sheetSize(): { width: number; height: number } {\n  return {\n    width: Math.max(containerRef.value?.clientWidth ?? 0, 320),\n    height: Math.max(containerRef.value?.clientHeight ?? 0, 320)\n  };\n}\n\nfunction buildOptions(): S2Options {\n  return {\n    ...sheetSize(),\n    style: {\n      layoutWidthType: \"adaptive\",\n      colCell: { height: 34 },\n      rowCell: { height: 34 },\n      dataCell: { height: 34 }\n    },\n    interaction: { overscrollBehavior: \"contain\" }\n  };\n}\n\nasync function render(): Promise<void> {\n  if (!containerRef.value) return;\n  if (!sheet) {\n    sheet = new PivotSheet(containerRef.value, buildDataConfig(), buildOptions());\n    sheet.setTheme(S2_THEME);\n  } else {\n    sheet.setDataCfg(buildDataConfig(), true);\n    sheet.setOptions(buildOptions(), true);\n  }\n  await sheet.render();\n}\n\nonMounted(async () => {\n  await render();\n  if (disposed) return;\n  if (typeof ResizeObserver !== \"undefined\" && containerRef.value) {\n    resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry || !sheet) return;\n      sheet.changeSheetSize(Math.max(entry.contentRect.width, 320), Math.max(entry.contentRect.height, 320));\n    });\n    resizeObserver.observe(containerRef.value);\n  }\n});\n\nwatch(\n  () => [props.viewModel, props.context] as const,\n  async () => render()\n);\n\nonBeforeUnmount(() => {\n  disposed = true;\n  resizeObserver?.disconnect();\n  sheet?.destroy();\n  sheet = undefined;\n});\n</script>\n"],"names":["props","__props","containerRef","ref","sheet","resizeObserver","disposed","S2_THEME","allFields","formatFieldValue","field","value","formatted","valueFormatter","unit","buildDataConfig","row","sheetSize","_a","_b","buildOptions","render","PivotSheet","onMounted","entry","watch","onBeforeUnmount"],"mappings":"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"}

package/dist/WordCloudRenderer-7tzJz57a.js

@@ -0,0 +1,96 @@
+import { defineComponent as M, ref as S, onMounted as _, watch as O, onBeforeUnmount as b, openBlock as h, createElementBlock as F } from "vue";
+import * as A from "echarts";
+import { S as u, a as C } from "./visual-theme-DH-k3L51.js";
+import { v as T } from "./value-formatter-D5QmLSMG.js";
+const D = /* @__PURE__ */ M({
+  name: "WordCloudRenderer",
+  __name: "WordCloudRenderer",
+  props: {
+    viewModel: {},
+    panel: {},
+    context: {}
+  },
+  setup(p, { expose: f }) {
+    const n = p, a = S();
+    let e, r, d = !1;
+    function c(o) {
+      return typeof o == "object" && o !== null ? o : {};
+    }
+    function l(o) {
+      return o.replace(/[&<>"']/g, (s) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[s]);
+    }
+    function v() {
+      const o = Array.from(
+        new Set(n.viewModel.words.map((t) => t.semantic).filter((t) => !!t))
+      ).sort(), s = n.viewModel.words.map((t, i) => ({
+        id: t.id,
+        name: t.label,
+        value: t.value,
+        semantic: t.semantic,
+        textStyle: {
+          color: u[t.semantic ? o.indexOf(t.semantic) % u.length : i % u.length]
+        }
+      }));
+      return {
+        animationDurationUpdate: 240,
+        tooltip: {
+          ...C,
+          trigger: "item",
+          formatter(t) {
+            const i = c(c(t).data), w = typeof i.name == "string" ? i.name : "", y = typeof i.value == "number" ? i.value : null, R = T.formatTooltip(y, n.viewModel.valueFormat, n.context), x = n.viewModel.unit && !n.viewModel.valueFormat.unit && n.viewModel.valueFormat.type !== "percent" ? n.viewModel.unit : "";
+            return `${l(w)}<br/><strong>${l(R)}${l(x)}</strong>`;
+          }
+        },
+        series: [
+          {
+            type: "wordCloud",
+            shape: "circle",
+            left: "center",
+            top: "center",
+            width: "96%",
+            height: "92%",
+            sizeRange: [n.viewModel.minFontSize, n.viewModel.maxFontSize],
+            rotationRange: [0, 0],
+            rotationStep: 1,
+            gridSize: 8,
+            drawOutOfBound: !1,
+            shrinkToFit: !0,
+            layoutAnimation: !0,
+            textStyle: {
+              fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+              fontWeight: 600
+            },
+            emphasis: {
+              focus: "self"
+            },
+            data: s
+          }
+        ]
+      };
+    }
+    function m() {
+      e == null || e.setOption(v(), !0);
+    }
+    _(async () => {
+      await import("echarts-wordcloud"), !(d || !a.value) && (e = A.init(a.value), m(), typeof ResizeObserver < "u" && (r = new ResizeObserver(() => e == null ? void 0 : e.resize()), r.observe(a.value)));
+    }), O(
+      () => [n.viewModel, n.context],
+      () => m()
+    ), b(() => {
+      d = !0, r == null || r.disconnect(), e == null || e.dispose(), e = void 0;
+    });
+    function g() {
+      return e == null ? void 0 : e.getDataURL({ type: "png", pixelRatio: 2, backgroundColor: "#fff" });
+    }
+    return f({ exportPng: g }), (o, s) => (h(), F("div", {
+      ref_key: "containerRef",
+      ref: a,
+      class: "dv-word-cloud-renderer",
+      style: { width: "100%", "min-width": "0", height: "320px" }
+    }, null, 512));
+  }
+});
+export {
+  D as default
+};
+//# sourceMappingURL=WordCloudRenderer-7tzJz57a.js.map

package/dist/WordCloudRenderer-7tzJz57a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WordCloudRenderer-7tzJz57a.js","sources":["../src/renderers/word-cloud/WordCloudRenderer.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" class=\"dv-word-cloud-renderer\" style=\"width: 100%; min-width: 0; height: 320px\" />\n</template>\n\n<script setup lang=\"ts\">\nimport * as echarts from \"echarts\";\nimport type { ECharts, EChartsOption } from \"echarts\";\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\n\nimport { valueFormatter, type DashboardContext, type PanelConfig, type WordCloudViewModel } from \"../../core\";\nimport { STANDARD_CHART_COLORS, STANDARD_CHART_TOOLTIP } from \"../../vue/theme\";\n\ndefineOptions({ name: \"WordCloudRenderer\" });\n\nconst props = defineProps<{ viewModel: WordCloudViewModel; panel: PanelConfig; context: DashboardContext }>();\nconst containerRef = ref<HTMLDivElement>();\nlet chart: ECharts | undefined;\nlet resizeObserver: ResizeObserver | undefined;\nlet disposed = false;\n\nfunction asRecord(value: unknown): Record<string, unknown> {\n  return typeof value === \"object\" && value !== null ? (value as Record<string, unknown>) : {};\n}\n\nfunction escapeHtml(value: string): string {\n  return value.replace(/[&<>\"']/g, (character) => {\n    const entities: Record<string, string> = { \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\" };\n    return entities[character]!;\n  });\n}\n\nfunction buildOption(): EChartsOption {\n  const semantics = Array.from(\n    new Set(props.viewModel.words.map((word) => word.semantic).filter((value): value is string => Boolean(value)))\n  ).sort();\n  const words = props.viewModel.words.map((word, index) => ({\n    id: word.id,\n    name: word.label,\n    value: word.value,\n    semantic: word.semantic,\n    textStyle: {\n      color:\n        STANDARD_CHART_COLORS[\n          word.semantic\n            ? semantics.indexOf(word.semantic) % STANDARD_CHART_COLORS.length\n            : index % STANDARD_CHART_COLORS.length\n        ]\n    }\n  }));\n\n  return {\n    animationDurationUpdate: 240,\n    tooltip: {\n      ...STANDARD_CHART_TOOLTIP,\n      trigger: \"item\",\n      formatter(raw: unknown) {\n        const data = asRecord(asRecord(raw).data);\n        const label = typeof data.name === \"string\" ? data.name : \"\";\n        const value = typeof data.value === \"number\" ? data.value : null;\n        const formatted = valueFormatter.formatTooltip(value, props.viewModel.valueFormat, props.context);\n        const unit =\n          props.viewModel.unit && !props.viewModel.valueFormat.unit && props.viewModel.valueFormat.type !== \"percent\"\n            ? props.viewModel.unit\n            : \"\";\n        return `${escapeHtml(label)}<br/><strong>${escapeHtml(formatted)}${escapeHtml(unit)}</strong>`;\n      }\n    },\n    series: [\n      {\n        type: \"wordCloud\",\n        shape: \"circle\",\n        left: \"center\",\n        top: \"center\",\n        width: \"96%\",\n        height: \"92%\",\n        sizeRange: [props.viewModel.minFontSize, props.viewModel.maxFontSize],\n        rotationRange: [0, 0],\n        rotationStep: 1,\n        gridSize: 8,\n        drawOutOfBound: false,\n        shrinkToFit: true,\n        layoutAnimation: true,\n        textStyle: {\n          fontFamily: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n          fontWeight: 600\n        },\n        emphasis: {\n          focus: \"self\"\n        },\n        data: words\n      }\n    ]\n  } as EChartsOption;\n}\n\nfunction render(): void {\n  chart?.setOption(buildOption(), true);\n}\n\nonMounted(async () => {\n  await import(\"echarts-wordcloud\");\n  if (disposed || !containerRef.value) return;\n  chart = echarts.init(containerRef.value);\n  render();\n  if (typeof ResizeObserver !== \"undefined\") {\n    resizeObserver = new ResizeObserver(() => chart?.resize());\n    resizeObserver.observe(containerRef.value);\n  }\n});\n\nwatch(\n  () => [props.viewModel, props.context] as const,\n  () => render()\n);\n\nonBeforeUnmount(() => {\n  disposed = true;\n  resizeObserver?.disconnect();\n  chart?.dispose();\n  chart = undefined;\n});\n\nfunction exportPng(): string | undefined {\n  return chart?.getDataURL({ type: \"png\", pixelRatio: 2, backgroundColor: \"#fff\" });\n}\n\ndefineExpose({ exportPng });\n</script>\n"],"names":["props","__props","containerRef","ref","chart","resizeObserver","disposed","asRecord","value","escapeHtml","character","buildOption","semantics","word","words","index","STANDARD_CHART_COLORS","STANDARD_CHART_TOOLTIP","raw","data","label","formatted","valueFormatter","unit","render","onMounted","echarts","watch","onBeforeUnmount","exportPng","__expose"],"mappings":"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"}

package/dist/core/adapter/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./standard-adapters";
+export * from "./standard-definitions";
+export * from "./types";
+export * from "./view-models";
+//# sourceMappingURL=index.d.ts.map

package/dist/core/adapter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/adapter/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}