@antv/gpt-vis 0.6.0 → 1.0.0-beta.1

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

@@ -0,0 +1,173 @@
+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%;
+  }
+
+  .${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;
+  }
+`;
+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 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 } = config;
+    injectStyles();
+    if (tableWrapper) {
+      tableWrapper.remove();
+    }
+    tableWrapper = document.createElement("div");
+    tableWrapper.className = SCOPE_ID;
+    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,105 @@
+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 = style.palette || (0, import_theme.getThemeColors)(theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    chart = new import_g2.Chart({
+      container,
+      width,
+      height,
+      autoFit: true
+    });
+    const chartOptions = {
+      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,54 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * VennDataItem is the type for each data item in the venn chart.
+ */
+export type VennDataItem = {
+    sets: 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;

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

@@ -0,0 +1,100 @@
+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/venn/index.ts
+var venn_exports = {};
+__export(venn_exports, {
+  Venn: () => Venn
+});
+module.exports = __toCommonJS(venn_exports);
+var import_g2 = require("@antv/g2");
+var import_theme = require("../../util/theme");
+var Venn = (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 = style.palette || (0, import_theme.getThemeColors)(theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    chart = new import_g2.Chart({
+      container,
+      width,
+      height,
+      autoFit: true
+    });
+    const chartOptions = {
+      type: "path",
+      data: {
+        value: data,
+        transform: [
+          {
+            type: "venn",
+            padding: 8,
+            sets: "sets",
+            size: "value",
+            as: ["key", "path"]
+          }
+        ]
+      },
+      title: title ?? "",
+      encode: { d: "path", color: "key" },
+      scale: {
+        color: { range: colors }
+      },
+      style: {
+        // Set opacity: intersections (sets.length > 1) are nearly transparent, single sets are more opaque
+        opacity: (d) => d.sets.length > 1 ? 1e-3 : 0.65
+      },
+      labels: [
+        {
+          position: "inside",
+          text: (d) => d.label || "",
+          fill: "#000",
+          fillOpacity: 0.85,
+          fontSize: 10
+        }
+      ],
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: (0, import_theme.getThemeObject)(theme),
+      legend: false,
+      axis: false,
+      tooltip: false
+    };
+    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 = {
+  Venn
+});

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

@@ -0,0 +1,59 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * ViolinDataItem is the type for each data item in the violin chart.
+ */
+export type ViolinDataItem = {
+    category: string;
+    value: number;
+    group?: string;
+};
+/**
+ * ViolinConfig defines the configuration for rendering the violin chart.
+ */
+export interface ViolinConfig {
+    type?: 'violin';
+    data: ViolinDataItem[];
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+        startAtZero?: boolean;
+    };
+}
+/**
+ * ViolinInstance represents a violin chart instance with render and destroy.
+ */
+export interface ViolinInstance {
+    render: (config: ViolinConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Violin chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const violin = Violin({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * violin.render({
+ *   type: 'violin',
+ *   data: [
+ *     { category: '班级A', value: 15 },
+ *     { category: '班级A', value: 18 },
+ *     { category: '班级A', value: 22 },
+ *     { category: '班级A', value: 27 },
+ *     { category: '班级A', value: 35 },
+ *   ],
+ *   theme: 'academy'
+ * });
+ *
+ * violin.destroy();
+ * ```
+ */
+export declare const Violin: (options: VisualizationOptions) => ViolinInstance;