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

package/dist/cjs/vis/indented-tree/index.js

@@ -0,0 +1,375 @@
+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/indented-tree/index.ts
+var indented_tree_exports = {};
+__export(indented_tree_exports, {
+  IndentedTree: () => IndentedTree
+});
+module.exports = __toCommonJS(indented_tree_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var TreeEvent = {
+  COLLAPSE_EXPAND: "collapse-expand",
+  ADD_CHILD: "add-child"
+};
+var _iconfontInjected = false;
+function ensureIconfontInjected() {
+  if (_iconfontInjected)
+    return;
+  if (typeof document === "undefined")
+    return;
+  const style = document.createElement("style");
+  style.innerHTML = `@import url('${import_g6.iconfont.css}');`;
+  document.head.appendChild(style);
+  _iconfontInjected = true;
+}
+var _measureCanvas = null;
+var _measureCtx = null;
+function measureTextWidth(text, fontSize = 12) {
+  if (!text)
+    return 0;
+  if (typeof document === "undefined" || typeof HTMLCanvasElement === "undefined") {
+    let w = 0;
+    for (const ch of text)
+      w += ch.charCodeAt(0) > 19968 ? fontSize : fontSize * 0.6;
+    return w;
+  }
+  if (!_measureCanvas) {
+    _measureCanvas = document.createElement("canvas");
+    _measureCtx = _measureCanvas.getContext("2d");
+  }
+  if (!_measureCtx)
+    return text.length * fontSize * 0.6;
+  _measureCtx.font = `${fontSize}px system-ui,-apple-system,BlinkMacSystemFont,sans-serif`;
+  return _measureCtx.measureText(text).width;
+}
+var _IndentedNode = class extends import_g6.BaseNode {
+  constructor(options) {
+    Object.assign(options.style, _IndentedNode.defaultStyleProps);
+    super(options);
+  }
+  get childrenData() {
+    return this.context.model.getChildrenData(this.id);
+  }
+  getKeyStyle(attributes) {
+    const [width, height] = this.getSize(attributes);
+    const keyStyle = super.getKeyStyle(attributes);
+    return { width, height, ...keyStyle, fill: "transparent" };
+  }
+  drawKeyShape(attributes, container) {
+    const keyStyle = this.getKeyStyle(attributes);
+    return this.upsert("key", "rect", keyStyle, container);
+  }
+  getLabelStyle(attributes) {
+    if (attributes.label === false || !attributes.labelText)
+      return false;
+    return (0, import_g6.subStyleProps)(this.getGraphicStyle(attributes), "label");
+  }
+  drawIconArea(attributes, container) {
+    const [, h] = this.getSize(attributes);
+    const iconAreaStyle = { fill: "transparent", height: 30, width: 12, x: -6, y: h, zIndex: -1 };
+    this.upsert("icon-area", "rect", iconAreaStyle, container);
+  }
+  forwardEvent(target, type, listener) {
+    if (target && !Reflect.has(target, "__bind__")) {
+      Reflect.set(target, "__bind__", true);
+      target.addEventListener(type, listener);
+    }
+  }
+  getCountStyle(attributes) {
+    const { collapsed, color } = attributes;
+    if (collapsed) {
+      const [, height] = this.getSize(attributes);
+      return {
+        backgroundFill: color,
+        cursor: "pointer",
+        fill: "#fff",
+        fontSize: 8,
+        padding: [0, 10],
+        text: `${this.childrenData.length}`,
+        textAlign: "center",
+        y: height + 8
+      };
+    }
+    return false;
+  }
+  drawCountShape(attributes, container) {
+    const countStyle = this.getCountStyle(attributes);
+    const btn = this.upsert("count", import_g6.Badge, countStyle, container);
+    this.forwardEvent(btn, import_g6.CommonEvent.CLICK, (event) => {
+      event.stopPropagation();
+      this.context.graph.emit(TreeEvent.COLLAPSE_EXPAND, { id: this.id, collapsed: false });
+    });
+  }
+  isShowCollapse(attributes) {
+    return !attributes.collapsed && this.childrenData.length > 0;
+  }
+  getCollapseStyle(attributes) {
+    const { showIcon, color } = attributes;
+    if (!this.isShowCollapse(attributes))
+      return false;
+    const [, height] = this.getSize(attributes);
+    return {
+      visibility: showIcon ? "visible" : "hidden",
+      backgroundFill: color,
+      backgroundHeight: 12,
+      backgroundWidth: 12,
+      cursor: "pointer",
+      fill: "#fff",
+      fontFamily: "iconfont",
+      fontSize: 8,
+      text: "",
+      textAlign: "center",
+      x: -1,
+      y: height + 8
+    };
+  }
+  drawCollapseShape(attributes, container) {
+    const iconStyle = this.getCollapseStyle(attributes);
+    const btn = this.upsert("collapse-expand", import_g6.Badge, iconStyle, container);
+    this.forwardEvent(btn, import_g6.CommonEvent.CLICK, (event) => {
+      event.stopPropagation();
+      this.context.graph.emit(TreeEvent.COLLAPSE_EXPAND, {
+        id: this.id,
+        collapsed: !attributes.collapsed
+      });
+    });
+  }
+  render(attributes = this.parsedAttributes, container = this) {
+    super.render(attributes, container);
+    this.drawCountShape(attributes, container);
+    this.drawIconArea(attributes, container);
+    this.drawCollapseShape(attributes, container);
+  }
+};
+var IndentedNode = _IndentedNode;
+IndentedNode.defaultStyleProps = {
+  ports: [
+    { key: "in", placement: "right-bottom" },
+    { key: "out", placement: "left-bottom" }
+  ]
+};
+var IndentedEdge = class extends import_g6.Polyline {
+  getControlPoints(attributes) {
+    const [sourcePoint, targetPoint] = this.getEndpoints(attributes, false);
+    const [sx] = sourcePoint;
+    const [, ty] = targetPoint;
+    return [[sx, ty]];
+  }
+};
+var CollapseExpandTree = class extends import_g6.BaseBehavior {
+  constructor(context, options) {
+    super(context, options);
+    this.status = "idle";
+    this.showIcon = (event) => {
+      this.setIcon(event, true);
+    };
+    this.hideIcon = (event) => {
+      this.setIcon(event, false);
+    };
+    this.setIcon = (event, show) => {
+      var _a;
+      if (this.status !== "idle")
+        return;
+      const { target } = event;
+      const id = target.id;
+      const { graph, element } = this.context;
+      graph.updateNodeData([{ id, style: { showIcon: show } }]);
+      (_a = element == null ? void 0 : element.draw) == null ? void 0 : _a.call(element, { animation: false, silence: true });
+    };
+    this.onCollapseExpand = async (event) => {
+      this.status = "busy";
+      const { id, collapsed } = event;
+      const { graph } = this.context;
+      if (collapsed)
+        await graph.collapseElement(id);
+      else
+        await graph.expandElement(id);
+      this.status = "idle";
+    };
+    // GPT-Vis 版本只保留官方的折叠/展开交互；新增子节点会引入额外数据模型管理，暂不启用。
+    this.addChild = () => {
+    };
+    this.bindEvents();
+  }
+  update(options) {
+    this.unbindEvents();
+    super.update(options);
+    this.bindEvents();
+  }
+  bindEvents() {
+    const { graph } = this.context;
+    graph.on(import_g6.NodeEvent.POINTER_ENTER, this.showIcon);
+    graph.on(import_g6.NodeEvent.POINTER_LEAVE, this.hideIcon);
+    graph.on(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
+    graph.on(TreeEvent.ADD_CHILD, this.addChild);
+  }
+  unbindEvents() {
+    const { graph } = this.context;
+    graph.off(import_g6.NodeEvent.POINTER_ENTER, this.showIcon);
+    graph.off(import_g6.NodeEvent.POINTER_LEAVE, this.hideIcon);
+    graph.off(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
+    graph.off(TreeEvent.ADD_CHILD, this.addChild);
+  }
+};
+var GPT_VIS_INDENTED_NODE = "gpt-vis-indented";
+var GPT_VIS_INDENTED_EDGE = "gpt-vis-indented-edge";
+var GPT_VIS_COLLAPSE_BEHAVIOR = "gpt-vis-collapse-expand-tree";
+var _extensionsRegistered = false;
+function ensureExtensionsRegistered() {
+  if (_extensionsRegistered)
+    return;
+  (0, import_g6.register)(import_g6.ExtensionCategory.NODE, GPT_VIS_INDENTED_NODE, IndentedNode);
+  (0, import_g6.register)(import_g6.ExtensionCategory.EDGE, GPT_VIS_INDENTED_EDGE, IndentedEdge);
+  (0, import_g6.register)(import_g6.ExtensionCategory.BEHAVIOR, GPT_VIS_COLLAPSE_BEHAVIOR, CollapseExpandTree);
+  _extensionsRegistered = true;
+}
+var NODE_HEIGHT = 20;
+function toG6TreeData(node) {
+  return {
+    id: node.name,
+    children: (node.children || []).map(toG6TreeData)
+  };
+}
+var IndentedTree = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, theme = chartTheme, title, style = {}, direction = "LR" } = config;
+    if (!(data == null ? void 0 : data.name)) {
+      throw new Error("IndentedTree: data with a name field is required");
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!containerEl)
+      throw new Error("IndentedTree: container element not found");
+    containerEl.innerHTML = "";
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const isDark = theme === "dark";
+    const palette = (0, import_theme.normalizePalette)(style.palette, theme);
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = "4px";
+    containerEl.style.overflow = "hidden";
+    ensureIconfontInjected();
+    ensureExtensionsRegistered();
+    const rootId = data.name;
+    const graphData = (0, import_g6.treeToGraphData)(toG6TreeData(data));
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      x: 60,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 20,
+      data: graphData,
+      node: {
+        type: GPT_VIS_INDENTED_NODE,
+        style: {
+          size: (d) => [measureTextWidth(String(d.id ?? ""), 12) + 6, NODE_HEIGHT],
+          labelBackground: (datum) => datum.id === rootId,
+          labelBackgroundRadius: 0,
+          labelBackgroundFill: palette[0] ?? "#1783FF",
+          labelFill: (datum) => datum.id === rootId ? "#fff" : isDark ? "#d0d0d0" : "#666",
+          labelText: (d) => {
+            var _a;
+            return ((_a = d.style) == null ? void 0 : _a.labelText) || d.id;
+          },
+          labelTextAlign: (datum) => datum.id === rootId ? "center" : "left",
+          labelTextBaseline: "top",
+          color: (datum) => {
+            try {
+              const depth = graph.getAncestorsData(datum.id, "tree").length - 1;
+              return palette[depth % palette.length] ?? palette[0] ?? "#1783FF";
+            } catch {
+              return palette[0] ?? "#1783FF";
+            }
+          }
+        },
+        state: {
+          selected: {
+            lineWidth: 0,
+            labelFill: "#40A8FF",
+            labelBackground: true,
+            labelFontWeight: "normal",
+            labelBackgroundFill: "#e8f7ff",
+            labelBackgroundRadius: 10
+          }
+        }
+      },
+      edge: {
+        type: GPT_VIS_INDENTED_EDGE,
+        style: {
+          radius: 16,
+          lineWidth: 2,
+          sourcePort: "out",
+          targetPort: "in",
+          stroke: (datum) => {
+            try {
+              if ((datum == null ? void 0 : datum.source) == null)
+                return palette[0] ?? "#1783FF";
+              const depth = graph.getAncestorsData(datum.source, "tree").length;
+              return palette[depth % palette.length] ?? palette[0] ?? "#1783FF";
+            } catch {
+              return palette[0] ?? "#1783FF";
+            }
+          }
+        }
+      },
+      layout: {
+        type: "indented",
+        direction,
+        isHorizontal: true,
+        indent: 40,
+        getHeight: () => NODE_HEIGHT,
+        getVGap: () => 10
+      },
+      behaviors: [
+        "drag-canvas",
+        GPT_VIS_COLLAPSE_BEHAVIOR,
+        {
+          type: "click-select",
+          enable: (event) => event.targetType === "node" && event.target.id !== rootId
+        }
+      ],
+      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+    });
+    graph.render();
+  };
+  const destroy = () => {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render,
+    destroy,
+    zoomTo: (zoom) => graph == null ? void 0 : graph.zoomTo(zoom),
+    getZoom: () => graph == null ? void 0 : graph.getZoom()
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IndentedTree
+});

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

@@ -0,0 +1,59 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * LineDataItem is the type for each data item in the line chart.
+ */
+export type LineDataItem = {
+    time: string | number;
+    value: number;
+    group?: string;
+};
+/**
+ * LineConfig defines the configuration for rendering the line chart.
+ */
+export interface LineConfig {
+    type?: 'line';
+    data: LineDataItem[];
+    title?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
+    theme?: 'default' | 'academy' | 'dark';
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+        lineWidth?: number;
+    };
+}
+/**
+ * LineInstance represents a line chart instance with render and destroy methods.
+ */
+export interface LineInstance {
+    render: (config: LineConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Line chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const line = Line({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * line.render({
+ *   type: 'line',
+ *   data: [
+ *     { time: '2015 年', value: 1700 },
+ *     { time: '2016 年', value: 1500 },
+ *     { time: '2017 年', value: 1200 },
+ *   ],
+ *   title: '出生人口变化',
+ *   axisXTitle: '年份',
+ *   axisYTitle: '出生人口（万人）',
+ * });
+ *
+ * line.destroy();
+ * ```
+ */
+export declare const Line: (options: VisualizationOptions) => LineInstance;

package/dist/cjs/vis/line/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/line/index.ts
+var line_exports = {};
+__export(line_exports, {
+  Line: () => Line
+});
+module.exports = __toCommonJS(line_exports);
+var import_g2 = require("@antv/g2");
+var import_theme = require("../../util/theme");
+var Line = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let chart = null;
+  const render = (config) => {
+    var _a;
+    const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
+    if (chart) {
+      chart.destroy();
+    }
+    const { lineWidth = 2 } = style;
+    const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
+    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
+    });
+    let encode = {};
+    const scaleConfig = { y: { nice: true } };
+    if (hasGroupField) {
+      encode = { x: "time", y: "value", color: "group" };
+      scaleConfig.color = { range: colors };
+    } else {
+      encode = { x: "time", y: "value" };
+    }
+    const chartOptions = {
+      animate: false,
+      type: "view",
+      data,
+      title: title ?? "",
+      encode,
+      children: [
+        {
+          type: "line",
+          style: {
+            lineWidth,
+            ...!hasGroupField && style.palette ? { stroke: colors[0] } : {}
+          }
+        }
+      ],
+      scale: scaleConfig,
+      axis: {
+        x: { title: axisXTitle || false },
+        y: { title: axisYTitle || false }
+      },
+      legend: hasGroupField ? { color: { position: "top" } } : false,
+      tooltip: {
+        items: [
+          (d) => ({
+            name: axisYTitle || d.time,
+            value: d.value
+          })
+        ]
+      },
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: (0, import_theme.getThemeObject)(theme)
+    };
+    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 = {
+  Line
+});

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

@@ -0,0 +1,44 @@
+import type { VisualizationOptions } from '../../types';
+/**
+ * LiquidConfig defines the configuration for rendering the liquid chart.
+ */
+export interface LiquidConfig {
+    type?: 'liquid';
+    percent: number;
+    shape?: 'rect' | 'circle' | 'pin' | 'triangle';
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * LiquidInstance represents a liquid chart instance with render and destroy methods.
+ */
+export interface LiquidInstance {
+    render: (config: LiquidConfig) => void;
+    destroy: () => void;
+}
+/**
+ * Liquid chart component using G2 5.0.
+ *
+ * @example
+ * ```ts
+ * const liquid = Liquid({
+ *   container: '#container',
+ *   width: 600,
+ *   height: 400,
+ * });
+ *
+ * liquid.render({
+ *   type: 'liquid',
+ *   percent: 0.75,
+ *   shape: 'circle',
+ *   theme: 'academy'
+ * });
+ *
+ * liquid.destroy();
+ * ```
+ */
+export declare const Liquid: (options: VisualizationOptions) => LiquidInstance;

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

@@ -0,0 +1,88 @@
+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/liquid/index.ts
+var liquid_exports = {};
+__export(liquid_exports, {
+  Liquid: () => Liquid
+});
+module.exports = __toCommonJS(liquid_exports);
+var import_g2 = require("@antv/g2");
+var import_theme = require("../../util/theme");
+var DEFAULT_WIDTH = 640;
+var DEFAULT_HEIGHT = 480;
+var Liquid = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let chart = null;
+  const render = (config) => {
+    const { percent, shape = "circle", 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);
+    const inferFontSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT) / 10;
+    const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
+    chart = new import_g2.Chart({
+      container,
+      width,
+      height,
+      autoFit: true
+    });
+    const chartOptions = {
+      animate: false,
+      type: "liquid",
+      data: percent,
+      title: title ?? "",
+      style: {
+        shape,
+        contentFontSize: fontSize,
+        contentFill: "#000",
+        contentStroke: "#fff",
+        contentLineWidth: 2,
+        outlineBorder: 4,
+        outlineDistance: 4,
+        waveLength: 128,
+        contentPointerEvents: "none",
+        // Use palette color if provided
+        ...colors[0] ? { fill: colors[0], outlineStroke: colors[0] } : {}
+      },
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: (0, import_theme.getThemeObject)(theme),
+      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 = {
+  Liquid
+});

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

@@ -0,0 +1,32 @@
+import type { TreeGraphData, VisualizationOptions } from '../../types';
+export type MindmapData = TreeGraphData;
+/**
+ * MindmapConfig defines the configuration for rendering the mindmap.
+ */
+export interface MindmapConfig {
+    type?: 'mindmap';
+    data: MindmapData;
+    direction?: 'H' | 'LR' | 'RL';
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * MindmapInstance represents a mindmap instance with render and destroy methods.
+ */
+export interface MindmapInstance {
+    render: (config: MindmapConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/** Props type for SSR package to import */
+export type MindMapProps = Pick<MindmapConfig, 'data' | 'direction'>;
+/**
+ * Mindmap component using G6 5.0 with mindmap layout.
+ * Follows the "boxed" type style from 0.x @ant-design/graphs MindMap.
+ */
+export declare const Mindmap: (options: VisualizationOptions) => MindmapInstance;