@antv/gpt-vis 0.6.1 → 1.0.0-beta.2

package/dist/cjs/vis/summary/index.d.ts

@@ -0,0 +1,41 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * SummaryConfig is a T8 Syntax string for narrative text visualization.
+ * Supports markdown-like syntax with special annotations for metrics.
+ * @example
+ * ```
+ * # Sales Report
+ * Total sales reached [¥1,234,567](metric_value, origin=1234567).
+ * ```
+ */
+export type SummaryConfig = string;
+/**
+ * SummaryInstance represents a summary instance with render and destroy methods.
+ */
+export interface SummaryInstance {
+    render: (syntax: SummaryConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Summary component using @antv/t8 for narrative text visualization.
+ *
+ * This component provides a way to render data summaries with rich text formatting
+ * and inline data visualization using T8 syntax (markdown-like syntax).
+ *
+ * @example
+ * ```ts
+ * const summary = Summary({
+ *   container: '#container',
+ *   theme: 'light',
+ * });
+ *
+ * summary.render(`
+ *   # Sales Report
+ *   Total sales reached [¥1,234,567](metric_value, origin=1234567).
+ *   This represents a [15%](delta_value, status=increase) increase compared to last quarter.
+ * `);
+ *
+ * summary.destroy();
+ * ```
+ */
+export declare const Summary: (options: VisualizationOptions) => SummaryInstance;

package/dist/cjs/vis/summary/index.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/summary/index.ts
+var summary_exports = {};
+__export(summary_exports, {
+  Summary: () => Summary
+});
+module.exports = __toCommonJS(summary_exports);
+var import_t8 = require("@antv/t8");
+var import_theme = require("../../util/theme");
+var Summary = (options) => {
+  let { theme = "light" } = options;
+  if (theme === "academy" || theme === "default")
+    theme = "light";
+  const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
+  if (!container) {
+    throw new Error("Container not found");
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = "gpt-vis-summary";
+  container.appendChild(wrapper);
+  let text = null;
+  const render = (syntax) => {
+    if (text) {
+      text.unmount();
+    }
+    let activeTheme = theme;
+    const cleanedSyntax = syntax.replace(/^theme\s+(light|dark)\s*$/im, (_, t) => {
+      activeTheme = t;
+      return "";
+    });
+    text = new import_t8.Text(wrapper);
+    wrapper.style.backgroundColor = activeTheme === "dark" ? (0, import_theme.getBackgroundColor)("dark") : "";
+    wrapper.style.padding = "16px";
+    text.theme(activeTheme);
+    text.render(cleanedSyntax.trim());
+  };
+  const destroy = () => {
+    if (text) {
+      text.unmount();
+      text = null;
+    }
+    if (wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+  };
+  return {
+    render,
+    destroy
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Summary
+});

package/dist/cjs/vis/table/index.d.ts

@@ -0,0 +1,50 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * TableConfig defines the configuration for rendering the table.
+ */
+export interface TableConfig {
+    type?: 'table';
+    data: Record<string, any>[];
+    title?: string;
+    theme?: 'default' | 'dark';
+}
+/**
+ * TableInstance represents a table instance with render and destroy methods.
+ */
+export interface TableInstance {
+    render: (config: TableConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Calculate the minimum width needed for a table based on its data.
+ * This is a pure function that measures text width and returns the calculated min-width.
+ *
+ * @param data - Table data array
+ * @param columns - Column names array
+ * @returns Calculated minimum width in pixels
+ */
+export declare const calculateTableMinWidth: (data: Record<string, any>[], columns: string[]) => number;
+/**
+ * Table component using pure JavaScript.
+ *
+ * @example
+ * ```ts
+ * const table = Table({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * table.render({
+ *   type: 'table',
+ *   data: [
+ *     { "Indicator": "经度(°)", "Mean": "104.15°", "Std": "±0.64°" },
+ *     { "Indicator": "纬度(°)", "Mean": "31.60°", "Std": "±0.48°" },
+ *   ],
+ *   title: '一个文本标题',
+ * });
+ *
+ * table.destroy();
+ * ```
+ */
+export declare const Table: (options: VisualizationOptions) => TableInstance;

package/dist/cjs/vis/table/index.js

@@ -0,0 +1,209 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/table/index.ts
+var table_exports = {};
+__export(table_exports, {
+  Table: () => Table,
+  calculateTableMinWidth: () => calculateTableMinWidth
+});
+module.exports = __toCommonJS(table_exports);
+var import_measury = require("measury");
+var SCOPE_ID = "__gpt-vis-table__";
+var FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+var CELL_PADDING = 16;
+var MIN_WIDTH_MULTIPLIER = 1.1;
+var TABLE_STYLES = `
+  .${SCOPE_ID} {
+    font-family: ${FONT_FAMILY};
+    overflow: auto;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .${SCOPE_ID} .table-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    color: #1d2129;
+  }
+
+  .${SCOPE_ID} table {
+    border-collapse: separate;
+    border-spacing: 0;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .${SCOPE_ID} th,
+  .${SCOPE_ID} td {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 8px;
+    text-align: left;
+    font-size: 14px;
+    color: #333;
+    white-space: nowrap;
+  }
+
+  .${SCOPE_ID} th {
+    background: #f5f5f5;
+    font-weight: 600;
+    color: #000000e0;
+    position: relative;
+  }
+
+  .${SCOPE_ID} th:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 25%;
+    right: 0;
+    width: 1px;
+    height: 50%;
+    background: #e0e0e0;
+  }
+
+  .${SCOPE_ID} tr {
+    transition: background 0.2s;
+  }
+
+  .${SCOPE_ID} tbody tr:hover {
+    background: #f5f5f5;
+    cursor: pointer;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] {
+    background: #000;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] .table-title {
+    color: #ffffffd9;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] table {
+    background: #141414;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th,
+  .${SCOPE_ID}[data-theme="dark"] td {
+    border-bottom: 1px solid #303030;
+    color: #ffffffd9;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th {
+    background: #1f1f1f;
+    color: #ffffffa6;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] th:not(:last-child)::after {
+    background: #303030;
+  }
+
+  .${SCOPE_ID}[data-theme="dark"] tbody tr:hover {
+    background: #1f1f1f;
+  }
+`;
+var calculateTableMinWidth = (data, columns) => {
+  let maxRowWidth = 0;
+  const headerWidth = columns.reduce((total, col) => {
+    const metrics = (0, import_measury.measureText)(String(col), {
+      fontFamily: FONT_FAMILY,
+      fontSize: 14,
+      fontWeight: "600"
+    });
+    return total + metrics.width + CELL_PADDING;
+  }, 0);
+  maxRowWidth = Math.max(maxRowWidth, headerWidth);
+  data.forEach((row) => {
+    const rowText = columns.map((col) => String(row[col] != null ? row[col] : "")).join("");
+    const metrics = (0, import_measury.measureText)(rowText, {
+      fontFamily: FONT_FAMILY,
+      fontSize: 14
+    });
+    const rowWidth = metrics.width + columns.length * CELL_PADDING;
+    maxRowWidth = Math.max(maxRowWidth, rowWidth);
+  });
+  return maxRowWidth * MIN_WIDTH_MULTIPLIER;
+};
+var injectStyles = () => {
+  if (document.querySelector(`style[data-scope="${SCOPE_ID}"]`)) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute("data-scope", SCOPE_ID);
+  styleElement.textContent = TABLE_STYLES;
+  document.head.appendChild(styleElement);
+};
+var Table = (options) => {
+  const { theme: chartTheme = "default" } = options;
+  const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
+  if (!container) {
+    throw new Error("Container not found");
+  }
+  let tableWrapper = null;
+  const render = (config) => {
+    const { data = [], title, theme = chartTheme } = config;
+    injectStyles();
+    if (tableWrapper) {
+      tableWrapper.remove();
+    }
+    tableWrapper = document.createElement("div");
+    tableWrapper.className = SCOPE_ID;
+    if (theme === "dark") {
+      tableWrapper.setAttribute("data-theme", "dark");
+    }
+    if (data.length === 0) {
+      tableWrapper.innerHTML = `
+        ${title ? `<div class="table-title">${title}</div>` : ""}
+        <div style="padding: 20px; text-align: center; color: #999;">No data available</div>
+      `;
+      container.appendChild(tableWrapper);
+      return;
+    }
+    const columns = Object.keys(data[0]);
+    let minWidth = calculateTableMinWidth(data, columns);
+    minWidth = Math.max(minWidth, columns.length * 100);
+    const headerHTML = columns.map((col) => `<th>${col}</th>`).join("");
+    const bodyHTML = data.map(
+      (row) => `<tr>${columns.map((col) => `<td>${row[col] != null ? row[col] : ""}</td>`).join("")}</tr>`
+    ).join("");
+    tableWrapper.innerHTML = `
+      ${title ? `<div class="table-title">${title}</div>` : ""}
+      <table style="min-width: ${minWidth}px;">
+        <thead><tr>${headerHTML}</tr></thead>
+        <tbody>${bodyHTML}</tbody>
+      </table>
+    `;
+    container.appendChild(tableWrapper);
+  };
+  const destroy = () => {
+    if (tableWrapper) {
+      tableWrapper.remove();
+      tableWrapper = null;
+    }
+  };
+  return {
+    render,
+    destroy
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table,
+  calculateTableMinWidth
+});

package/dist/cjs/vis/treemap/index.d.ts

@@ -0,0 +1,68 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * TreemapDataItem is the type for each data item in the treemap chart.
+ */
+export type TreemapDataItem = {
+    name: string;
+    value: number;
+    children?: TreemapDataItem[];
+};
+/**
+ * TreemapConfig defines the configuration for rendering the treemap chart.
+ */
+export interface TreemapConfig {
+    type?: 'treemap';
+    data: TreemapDataItem[];
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * TreemapInstance represents a treemap chart instance with render and destroy methods.
+ */
+export interface TreemapInstance {
+    render: (config: TreemapConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Treemap chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const treemap = Treemap({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * treemap.render({
+ *   type: 'treemap',
+ *   data: [
+ *     {
+ *       name: 'A',
+ *       value: 100,
+ *       children: [
+ *         { name: 'A1', value: 40 },
+ *         { name: 'A2', value: 30 },
+ *         { name: 'A3', value: 30 },
+ *       ],
+ *     },
+ *     {
+ *       name: 'B',
+ *       value: 80,
+ *       children: [
+ *         { name: 'B1', value: 50 },
+ *         { name: 'B2', value: 30 },
+ *       ],
+ *     },
+ *   ],
+ *   theme: 'academy'
+ * });
+ *
+ * treemap.destroy();
+ * ```
+ */
+export declare const Treemap: (options: VisualizationOptions) => TreemapInstance;

package/dist/cjs/vis/treemap/index.js

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/treemap/index.ts
+var treemap_exports = {};
+__export(treemap_exports, {
+  Treemap: () => Treemap
+});
+module.exports = __toCommonJS(treemap_exports);
+var import_g2 = require("@antv/g2");
+var import_theme = require("../../util/theme");
+var Treemap = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let chart = null;
+  const render = (config) => {
+    const { data = [], theme = chartTheme, title, style = {} } = config;
+    if (chart) {
+      chart.destroy();
+    }
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    chart = new import_g2.Chart({
+      container,
+      width,
+      height,
+      autoFit: true
+    });
+    const chartOptions = {
+      animate: false,
+      type: "treemap",
+      data: {
+        type: "inline",
+        value: {
+          name: "root",
+          children: data
+        }
+      },
+      title: title ?? "",
+      layout: {
+        tile: "treemapBinary",
+        paddingInner: 2
+      },
+      encode: {
+        value: "value"
+      },
+      style: {
+        fillOpacity: 0.8,
+        labelFontSize: 10
+      },
+      legend: false,
+      tooltip: {
+        items: [
+          (d) => {
+            var _a, _b;
+            return {
+              name: ((_a = d.data) == null ? void 0 : _a.name) || d.name,
+              value: ((_b = d.data) == null ? void 0 : _b.value) || d.value
+            };
+          }
+        ]
+      },
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: (0, import_theme.getThemeObject)(theme),
+      scale: {
+        ...colors.length > 0 ? {
+          color: {
+            range: colors
+          }
+        } : {}
+      }
+    };
+    chart.options(chartOptions);
+    chart.render();
+  };
+  const destroy = () => {
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+  };
+  return {
+    render,
+    destroy
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Treemap
+});

package/dist/cjs/vis/venn/index.d.ts

@@ -0,0 +1,55 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * VennDataItem is the type for each data item in the venn chart.
+ */
+export type VennDataItem = {
+    /** Parser / DSL often yields a comma-separated string; G2 venn transform expects string[]. */
+    sets: string[] | string;
+    value: number;
+    label?: string;
+};
+/**
+ * VennConfig defines the configuration for rendering the venn chart.
+ */
+export interface VennConfig {
+    type?: 'venn';
+    data: VennDataItem[];
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * VennInstance represents a venn chart instance with render and destroy methods.
+ */
+export interface VennInstance {
+    render: (config: VennConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Venn chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const venn = Venn({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * venn.render({
+ *   type: 'venn',
+ *   data: [
+ *     { sets: ['A'], value: 20, label: '集合A' },
+ *     { sets: ['B'], value: 15, label: '集合B' },
+ *     { sets: ['A', 'B'], value: 5, label: '交集AB' },
+ *   ],
+ *   theme: 'academy'
+ * });
+ *
+ * venn.destroy();
+ * ```
+ */
+export declare const Venn: (options: VisualizationOptions) => VennInstance;