@liujitcn/kratos-admin-bi 0.0.0-stage → 0.1.6

package/dist/package/src/components/BiWorkbenchPreview.vue

@@ -0,0 +1,131 @@
+<template>
+  <div ref="host" class="bi-workbench-preview" :aria-busy="loading">
+    <el-skeleton v-if="loading" :rows="2" animated />
+    <div v-else-if="error" class="bi-workbench-preview__empty" role="alert">
+      <span>{{ error }}</span>
+      <el-button link type="primary" @click="load">{{ t("bi.card.retry") }}</el-button>
+    </div>
+    <template v-else>
+      <div v-for="item in layout.cards.slice(0, 2)" :key="item.id" class="bi-workbench-preview__card">
+        <h4 :title="item.name">{{ item.name }}</h4>
+        <div class="bi-workbench-preview__chart">
+          <BiCardVisualization
+            v-if="results.get(item.id)"
+            :card="dashboardSnapshotCard(item)"
+            :result="results.get(item.id)!"
+            compact
+          />
+          <span v-else class="bi-workbench-preview__empty">{{ t("common.message.no_data") }}</span>
+        </div>
+      </div>
+      <span v-if="!layout.cards.length" class="bi-workbench-preview__empty">{{ t("bi.dashboard.empty") }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { t } from "@liujitcn/kratos-admin-core";
+import type { BiDashboard } from "../rpc/bi/admin/v1/bi_dashboard";
+import type { BiQueryResult } from "../rpc/bi/admin/v1/bi_query";
+import type { DashboardLayout } from "../bi-dashboard-schema";
+import { dashboardResults, dashboardSnapshotCard, parseDashboardLayout } from "../bi-dashboard-schema";
+import { defBiDashboardService } from "../api/bi/admin/v1/bi_dashboard";
+import BiCardVisualization from "./BiCardVisualization.vue";
+
+const props = defineProps<{ dashboard: BiDashboard }>();
+const host = ref<HTMLElement>();
+const layout = ref<DashboardLayout>({ schemaVersion: 3, name: "", cards: [] });
+const results = ref(new Map<string, BiQueryResult | undefined>());
+const loading = ref(true);
+const error = ref("");
+let active = true;
+const { stop } = useIntersectionObserver(host, ([entry]) => {
+  if (entry?.isIntersecting) {
+    stop();
+    void load();
+  }
+});
+
+/** 入口可见时按发布版本取真实数据，缩略图复用卡片渲染器。 */
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const data = await defBiDashboardService.GetBiDashboardData({
+      id: props.dashboard.id,
+      version: props.dashboard.published_version
+    });
+    if (!active) return;
+    layout.value = parseDashboardLayout(data.schema_json);
+    results.value = dashboardResults(data);
+  } catch (cause) {
+    if (active) error.value = cause instanceof Error ? cause.message : t("bi.query.error");
+  } finally {
+    if (active) loading.value = false;
+  }
+}
+
+onBeforeUnmount(() => {
+  active = false;
+});
+</script>
+
+<style scoped>
+.bi-workbench-preview {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 8px;
+  box-sizing: border-box;
+  height: 144px;
+  padding: 16px;
+  background: var(--admin-page-card-bg-soft);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  pointer-events: none;
+}
+.bi-workbench-preview__card {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  overflow: hidden;
+  background: var(--admin-page-card-bg);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--admin-page-radius);
+}
+.bi-workbench-preview h4 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bi-workbench-preview__chart {
+  flex: 1;
+  min-height: 0;
+}
+.bi-workbench-preview__empty,
+.bi-workbench-preview > .el-skeleton {
+  grid-column: 1 / -1;
+}
+.bi-workbench-preview__empty {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  overflow: auto;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+}
+</style>

package/dist/package/src/components/source-model-layout.ts

@@ -0,0 +1,62 @@
+import type { BiSourceModel } from "../rpc/bi/admin/v1/bi_source";
+
+/** 将事实表置于中央，关联子树分布两侧并为连线保留间距。 */
+export function formatSourceModelLayout(model: BiSourceModel): void {
+  const tables = new Map(model.tables.map(table => [table.key, table]));
+  const children = new Map<string, string[]>();
+  const targets = new Set<string>();
+  for (const relation of model.relations) {
+    if (!tables.has(relation.left_table) || !tables.has(relation.right_table)) continue;
+    const branch = children.get(relation.left_table) ?? [];
+    branch.push(relation.right_table);
+    children.set(relation.left_table, branch);
+    targets.add(relation.right_table);
+  }
+
+  if (tables.has(model.base_table)) {
+    const branches = children.get(model.base_table) ?? [];
+    for (const table of model.tables) {
+      if (table.key !== model.base_table && !targets.has(table.key)) branches.push(table.key);
+    }
+    children.set(model.base_table, branches);
+  }
+
+  const visited = new Set<string>();
+  let row = 0;
+
+  /** 为子树分配独立行，避免同层节点和不同分支相互遮挡。 */
+  function placeTable(key: string, depth: number, direction: number): number | undefined {
+    const table = tables.get(key);
+    if (!table || visited.has(key)) return;
+    visited.add(key);
+    const childRows = (children.get(key) ?? [])
+      .map(child => placeTable(child, depth + 1, direction))
+      .filter((value): value is number => value !== undefined);
+    const center = childRows.length ? (childRows[0] + childRows[childRows.length - 1]) / 2 : row++;
+    table.x = direction * depth * 520;
+    table.y = 40 + center * 280;
+    return center;
+  }
+
+  const base = tables.get(model.base_table);
+  if (base) {
+    visited.add(base.key);
+    const branches = children.get(base.key) ?? [];
+    const middle = Math.ceil(branches.length / 2);
+    for (const key of branches.slice(0, middle)) placeTable(key, 1, 1);
+    const rightRows = row;
+    const rightTables = model.tables.filter(table => visited.has(table.key) && table !== base);
+    row = 0;
+    for (const key of branches.slice(middle)) placeTable(key, 1, -1);
+    const leftRows = row;
+    row = Math.max(1, leftRows, rightRows);
+    for (const table of rightTables) table.y += (row - rightRows) * 140;
+    for (const table of model.tables.filter(table => visited.has(table.key) && table.x < 0)) table.y += (row - leftRows) * 140;
+    base.x = 0;
+    base.y = 40 + (row - 1) * 140;
+  }
+  for (const table of model.tables.filter(table => !targets.has(table.key))) placeTable(table.key, 0, 1);
+  for (const table of model.tables) placeTable(table.key, 0, 1);
+  const minX = Math.min(0, ...model.tables.map(table => table.x));
+  for (const table of model.tables) table.x += 40 - minX;
+}

package/dist/package/src/dataset/index.ts

@@ -0,0 +1,28 @@
+import type { BiRow } from "../schema/types";
+
+/** 从行集合推导列名（所有行键的并集，保持首次出现顺序） */
+export function getColumns(rows: BiRow[] | undefined): string[] {
+  if (!rows?.length) return [];
+  const cols: string[] = [];
+  const seen = new Set<string>();
+  for (const row of rows) {
+    for (const key of Object.keys(row ?? {})) {
+      if (!seen.has(key)) {
+        seen.add(key);
+        cols.push(key);
+      }
+    }
+  }
+  return cols;
+}
+
+/** 数值化：非有限数归 0（图表轴不允许 NaN/undefined） */
+export function toNumber(value: unknown): number {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+/** 去重保序 */
+export function unique<T>(list: T[]): T[] {
+  return [...new Set(list)];
+}

package/dist/package/src/dataset/labels.ts

@@ -0,0 +1,19 @@
+/** 按日期分组值生成短标签，只改变显示文本，保留原始分类和提示数据。 */
+export function createDimensionLabelFormatter(values: unknown[], field = ""): (value: unknown) => string {
+  const pattern = /^(\d{4})-(\d{2})(?:-(\d{2})(?:[ T](\d{2})(?::(\d{2}))?(?::(\d{2})(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?)?$/;
+  const dates = values.map(value => pattern.exec(String(value ?? ""))).filter(value => value !== null);
+  const month = /(?:^|_)(?:month|monthly|ym)(?:_|$)|月/i.test(field);
+  const hour =
+    /(?:^|_)(?:hour|hourly)(?:_|$)|小时/i.test(field) ||
+    (dates.length > 0 &&
+      dates.every(date => date[3] && date[0].slice(0, 10) === dates[0]![0].slice(0, 10)) &&
+      dates.some(date => Number(date[4]) || Number(date[5]) || Number(date[6])));
+  return value => {
+    const text = String(value ?? "");
+    const date = pattern.exec(text);
+    if (!date) return text;
+    if (month || !date[3]) return `${date[2]}月`;
+    if (hour && date[4]) return `${date[4]}时`;
+    return `${date[2]}/${date[3]}`;
+  };
+}

package/dist/package/src/dataset/transform.ts

@@ -0,0 +1,189 @@
+/**
+ * 图表级数据变换管线：过滤 → 聚合 → 排序 → TopN。
+ * 渲染器在 compile 前调用 transformRows，设计器画布与渲染器共用同一管线。
+ * 聚合语义 = 主流 BI：按 dimension 分组，对 measure（或宽表 measures 全部列）施加 agg。
+ */
+
+import type {
+  BiAggFn,
+  BiChartFilter,
+  BiChartSchema,
+  BiChartSort,
+  BiRow,
+} from "../schema/types";
+import { NON_AGG_TYPES } from "../engine/chart-types";
+import { toNumber } from "./index";
+
+/** 单过滤器行判定；值解析：数字串转数，in 接数组 */
+function matchFilter(row: BiRow, f: BiChartFilter): boolean {
+  const cell = row[f.field];
+  switch (f.op) {
+    case "eq":
+      return String(cell) === String(f.value);
+    case "ne":
+      return String(cell) !== String(f.value);
+    case "gt":
+      return toNumber(cell) > toNumber(f.value);
+    case "gte":
+      return toNumber(cell) >= toNumber(f.value);
+    case "lt":
+      return toNumber(cell) < toNumber(f.value);
+    case "lte":
+      return toNumber(cell) <= toNumber(f.value);
+    case "contains":
+      return String(cell ?? "").includes(String(f.value ?? ""));
+    case "in": {
+      const list = Array.isArray(f.value) ? f.value : [f.value];
+      return list.map(String).includes(String(cell));
+    }
+    default:
+      return true;
+  }
+}
+
+export function applyFilters(rows: BiRow[], filters: BiChartFilter[] | undefined): BiRow[] {
+  if (!filters?.length) return rows;
+  return rows.filter((row) => filters.every((f) => matchFilter(row, f)));
+}
+
+const AGG_FNS: Record<Exclude<BiAggFn, "none">, (nums: number[]) => number> = {
+  sum: (nums) => nums.reduce((a, b) => a + b, 0),
+  avg: (nums) => (nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : 0),
+  max: (nums) => (nums.length ? Math.max(...nums) : 0),
+  min: (nums) => (nums.length ? Math.min(...nums) : 0),
+  // count 不依赖数值：调用方传入占位 1 数组
+  count: (nums) => nums.length,
+};
+
+/** 是否应执行聚合：给了 dimension + 显式 agg（非 none）；
+ *  边列表/矩阵型（sankey/graph/heatmap）天然按行消费，不做维度聚合 */
+function shouldAggregate(chart: BiChartSchema): boolean {
+  if (NON_AGG_TYPES.has(chart.type)) return false;
+  const agg = chart.aggregation ?? "sum";
+  const dim = chart.encoding?.dimension;
+  if (!dim || agg === "none") return false;
+  // 至少要有一个度量对象（count 允许无 measure）
+  return !!(chart.encoding?.measure || chart.encoding?.measures?.length || agg === "count");
+}
+
+/** 分组键字段：维度 + （pivot 图的列维度也要保留，供 S2 交叉表用） */
+function groupFieldsOf(chart: BiChartSchema): string[] {
+  const fields = [chart.encoding?.dimension ?? ""];
+  if (chart.type === "pivot" && chart.encoding?.series) fields.push(chart.encoding.series);
+  return fields.filter(Boolean);
+}
+
+/** 分组聚合：输出每（维度组）一行的宽表（保留维度列 + 各度量列） */
+export function aggregateRows(
+  rows: BiRow[],
+  chart: BiChartSchema
+): BiRow[] {
+  const groupFields = groupFieldsOf(chart);
+  const agg: BiAggFn = chart.aggregation ?? "sum";
+  const measure = chart.encoding?.measure;
+  const measures = chart.encoding?.measures ?? (measure ? [measure] : []);
+
+  const keyOf = (row: BiRow) => groupFields.map((f) => String(row[f] ?? "")).join("\u0001");
+  const groups = new Map<string, BiRow[]>();
+  for (const row of rows) {
+    const key = keyOf(row);
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(row);
+    else groups.set(key, [row]);
+  }
+
+  const apply = (nums: number[]): number => {
+    switch (agg) {
+      case "count":
+        return nums.length;
+      case "none":
+        return 0;
+      case "avg":
+        return AGG_FNS.avg(nums);
+      case "max":
+        return AGG_FNS.max(nums);
+      case "min":
+        return AGG_FNS.min(nums);
+      default:
+        return AGG_FNS.sum(nums);
+    }
+  };
+
+  const out: BiRow[] = [];
+  for (const bucket of groups.values()) {
+    const row: BiRow = {};
+    for (const f of groupFields) row[f] = bucket[0]?.[f];
+    if (agg === "count" && measures.length === 0) {
+      // 纯计数：值列名用 measure 占位或固定 count
+      row[measure ?? "count"] = bucket.length;
+    }
+    for (const m of measures) {
+      row[m] = apply(bucket.map((r) => (agg === "count" ? 1 : toNumber(r[m]))));
+    }
+    // 非分组字段的长表 series 值在聚合后无意义（pivot 的列维度已保留），丢弃
+    out.push(row);
+  }
+  return out;
+}
+
+export function sortRows(rows: BiRow[], chart: BiChartSchema): BiRow[] {
+  const sort: BiChartSort | undefined = chart.sort;
+  if (!sort) return rows;
+  const dim = chart.encoding?.dimension ?? "";
+  const measure = chart.encoding?.measures?.[0] ?? chart.encoding?.measure ?? "";
+  const dir = sort.order === "desc" ? -1 : 1;
+  const sorted = [...rows].sort((a, b) => {
+    if (sort.by === "measure" && measure) {
+      return (toNumber(a[measure]) - toNumber(b[measure])) * dir;
+    }
+    return String(a[dim] ?? "").localeCompare(String(b[dim] ?? ""), "zh-CN") * dir;
+  });
+  return sort.topN && sort.topN > 0 ? sorted.slice(0, sort.topN) : sorted;
+}
+
+/** 渲染管线：过滤 → 聚合 → 排序/TopN，返回供 compile 消费的行 */
+export function transformRows(chart: BiChartSchema, inputRows: BiRow[]): BiRow[] {
+  let rows = applyFilters(inputRows, chart.filters);
+  if (shouldAggregate(chart)) {
+    rows = aggregateRows(rows, chart);
+  }
+  rows = sortRows(rows, chart);
+  return rows;
+}
+
+// ============ 字段类型推断（设计器字段选择器提示用） ============
+
+export type BiFieldType = "number" | "date" | "string";
+
+export function inferFieldType(rows: BiRow[] | undefined, field: string): BiFieldType {
+  if (!rows?.length) return "string";
+  let sawValue = false;
+  let allNumber = true;
+  let allDate = true;
+  for (const row of rows.slice(0, 100)) {
+    const v = row?.[field];
+    if (v === null || v === undefined || v === "") continue;
+    sawValue = true;
+    if (allNumber && !Number.isFinite(Number(v))) allNumber = false;
+    if (allDate && !(typeof v === "string" && /^[\d-]{8,}$/.test(v) && !Number.isNaN(Date.parse(v)))) {
+      allDate = false;
+    }
+  }
+  if (!sawValue) return "string";
+  if (allNumber) return "number";
+  if (allDate) return "date";
+  return "string";
+}
+
+// ============ 数值格式化（轴标签/标签/提示共用） ============
+
+export function formatNumber(
+  value: number,
+  format?: { decimals?: number; thousand?: boolean; prefix?: string; suffix?: string }
+): string {
+  let n = Number.isFinite(value) ? value : 0;
+  if (format?.decimals !== undefined) n = Number(n.toFixed(format.decimals));
+  let str = String(n);
+  if (format?.thousand) str = str.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return (format?.prefix ?? "") + str + (format?.suffix ?? "");
+}

package/dist/package/src/engine/chart-types.ts

@@ -0,0 +1,44 @@
+/**
+ * 图型注册表：type → engine 映射。
+ * 内置 8 种 echarts 图型；引擎适配器包（bi-engine-s2 等）经
+ * registerChartType("pivot", "s2") 扩展设计器的图型选择与引擎解析。
+ */
+
+import type { BiChartType } from "../schema/types";
+
+const BUILTIN_CHART_TYPES: BiChartType[] = [
+  "bar",
+  "line",
+  "area",
+  "pie",
+  "donut",
+  "scatter",
+  "radar",
+  "gauge",
+  "funnel",
+  "treemap",
+  "sunburst",
+  "sankey",
+  "heatmap",
+];
+
+/** 边列表 / 矩阵型图：数据是边或三元组，默认不做维度聚合 */
+export const NON_AGG_TYPES = new Set(["sankey", "graph", "heatmap"]);
+
+const typeToEngine = new Map<string, string>();
+for (const t of BUILTIN_CHART_TYPES) typeToEngine.set(t, "echarts");
+
+/** 注册新图型（设计器图型网格与 addChart 的引擎解析随之扩展）；重复注册覆盖 */
+export function registerChartType(type: string, engine: string): void {
+  typeToEngine.set(type, engine);
+}
+
+/** 已注册的全部图型（内置 + 扩展，按注册顺序） */
+export function getChartTypes(): BiChartType[] {
+  return [...typeToEngine.keys()] as BiChartType[];
+}
+
+/** 图型对应的引擎名（未注册图型回落 echarts） */
+export function getEngineForType(type: string | undefined): string {
+  return typeToEngine.get(type ?? "") ?? "echarts";
+}