@antv/gpt-vis 0.5.5 → 0.5.7

package/dist/cjs/ChartCodeRender/type.d.ts

@@ -1,73 +1,172 @@
 import type { FC } from 'react';
 import type { Components, ExtraProps } from 'react-markdown';
 /**
+ * Text labels type for internationalization
+ * 文本标签类型 - 用于国际化
+ */
+export type TextLabels = {
+    chartTab?: string;
+    codeTab?: string;
+    download?: string;
+    copy?: string;
+    copied?: string;
+    renderError?: string;
+    parseError?: string;
+    unsupportedChart?: string;
+};
+/**
+ * Chart enhancement options - contains all new feature configurations
+ * 图表增强选项 - 包含所有新增的功能配置
+ */
+export type ChartEnhancementOptions = {
+    /**
+     * Controls whether tabs are displayed (default: true)
+     * 控制是否显示标签页 (默认: true)
+     */
+    showTabs?: boolean;
+    /**
+     * Controls whether code tab is shown (default: true)
+     * 控制是否显示代码标签页 (默认: true)
+     */
+    showCodeTab?: boolean;
+    /**
+     * Controls whether chart tab is shown (default: true)
+     * 控制是否显示图表标签页 (默认: true)
+     */
+    showChartTab?: boolean;
+    /**
+     * Default active tab (default: 'chart')
+     * 默认激活的标签页 (默认: 'chart')
+     */
+    defaultTab?: 'chart' | 'code';
+    /**
+     * Custom text labels
+     * 自定义文本标签
+     */
+    textLabels?: TextLabels;
+    /**
+     * Locale setting for default text labels (default: 'zh-CN')
+     * Supports: 'zh-CN' | 'en-US' | 'pt-BR'
+     * 语言区域设置，用于默认文本标签 (默认: 'zh-CN')
+     * 支持: 'zh-CN' | 'en-US' | 'pt-BR'
+     */
+    locale?: string;
+};
+/**
+ * Error render function type
  * 错误渲染函数类型
  */
 export type ErrorRender = {
-    /** 错误对象 */
+    /** Error object | 错误对象 */
     error?: Error;
-    /** 原始内容 */
+    /** Original content | 原始内容 */
     content: string;
 };
+/**
+ * Component error render type
+ * 组件错误渲染类型
+ */
 export type ComponentErrorRender = {
-    /** 错误对象 */
+    /** Error object | 错误对象 */
     error?: Error;
-    /** 原始内容 */
+    /** Original content | 原始内容 */
     content: string;
 };
+/**
+ * Options for withChartCode HOC
+ * withChartCode 高阶组件选项
+ */
 export type WithChartCodeOptions = {
     /**
+     * Additional chart components to load
      * 要额外加载的图表组件
      */
     components: ChartComponents;
     /**
+     * Custom renderers for other language code blocks
      * 自定义其它语言代码块渲染器
      */
     languageRenderers?: LanguageRenderers;
     /**
+     * Default code renderer
      * 默认的代码渲染器
      */
     defaultRenderer?: CodeRenderer;
     /**
+     * Enable debug logging
      * 打开调试日志
      */
     debug?: boolean;
     /**
+     * Loading animation timeout, default 5s
      * 设置loading动画的超时时间，默认为 5s
      */
     loadingTimeout?: number;
     /**
+     * Chart styles, configure container styles
      * 图表样式，配置容器样式
      */
     style?: React.CSSProperties;
     /**
+     * Custom component error render function
      * 自定义组件错误渲染函数
      */
     componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
     /**
+     * Custom error render function
      * 自定义错误渲染函数
      */
     errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
-};
+} & ChartEnhancementOptions;
+/**
+ * RenderVisChart component props type
+ * RenderVisChart 组件属性类型
+ */
+export type RenderVisChartProps = {
+    /** Chart content string | 图表内容字符串 */
+    content: string;
+    /** Chart components dictionary | 图表组件字典 */
+    components: ChartComponents;
+    /** Enable debug mode | 启用调试模式 */
+    debug?: boolean;
+    /** Loading timeout in milliseconds | 加载超时时间（毫秒） */
+    loadingTimeout: number;
+    /** Container styles | 容器样式 */
+    style?: React.CSSProperties;
+    /** Custom component error renderer | 自定义组件错误渲染器 */
+    componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
+    /** Custom error renderer | 自定义错误渲染器 */
+    errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
+} & ChartEnhancementOptions;
 /**
+ * Chart render data interface, for future extension, this is just an example
  * 图表渲染数据接口，后续拓展，这里只是写个示例
  */
 export interface ChartJson {
+    /** Chart type | 图表类型 */
     type: string;
+    /** Chart data | 图表数据 */
     data: any;
 }
 /**
+ * Chart components dictionary
  * 图表组件字典
  */
 export interface ChartComponents {
     [key: string]: FC<any>;
 }
 /**
+ * Code block renderer interface
  * 代码块渲染器接口
  */
 export type CodeBlockComponent = Components['code'];
+/**
+ * Code renderer type
+ * 代码渲染器类型
+ */
 type CodeRenderer = FC<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & ExtraProps>;
 /**
+ * Custom renderers for other language code blocks
  * 自定义其它语言代码块渲染器
  */
 interface LanguageRenderers {

package/dist/cjs/Column/index.d.ts

@@ -1,11 +1,13 @@
-import type { ColumnConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Style, Theme } from '../types';
 export type ColumnDataItem = {
     category: string | number;
     value: number;
     [key: string]: string | number;
 };
-export type ColumnProps = BasePlotProps<ColumnDataItem> & Partial<ColumnConfig>;
+export type ColumnProps = BasePlotProps<ColumnDataItem> & Theme & Style & {
+    group?: boolean;
+    stack?: boolean;
+};
 declare const Column: (props: ColumnProps) => React.JSX.Element;
 export default Column;

package/dist/cjs/Column/index.js

@@ -36,14 +36,35 @@ var import_plots = require("@ant-design/plots");
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var defaultConfig = (props) => {
-  const { data, xField = "category", yField = "value" } = props;
+  const { data, xField = "category", yField = "value", style = {}, theme = {} } = props;
+  const { backgroundColor, palette } = style;
   const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
   const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
+  let paletteConfig = { color: void 0 };
+  let radiusStyle = {
+    radiusTopLeft: 4,
+    radiusTopRight: 4
+  };
+  if ((theme == null ? void 0 : theme.type) === "academy") {
+    radiusStyle = {
+      radiusTopLeft: 0,
+      radiusTopRight: 0
+    };
+  }
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     xField,
     yField,
-    colorField: hasGroupField ? "group" : void 0,
+    colorField: hasGroupField ? "group" : xField,
     tooltip: (d) => {
       const tooltipName = axisYTitle || d[xField];
       return {
@@ -52,14 +73,30 @@ var defaultConfig = (props) => {
       };
     },
     style: {
-      // 圆角样式
-      radiusTopLeft: 10,
-      radiusTopRight: 10
-    }
+      ...radiusStyle,
+      columnWidthRatio: 0.8
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 },
+    legend: hasGroupField ? {} : false,
+    group: hasGroupField
   };
 };
 var Column = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Column", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const { data, group = false, stack = false } = props;
+  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
+  const config = (0, import_hooks.usePlotConfig)("Column", defaultConfig, {
+    ...props,
+    theme: themeConfig,
+    group: hasGroupField && group,
+    stack: hasGroupField && stack
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Column, { ...config });
 };
 var Column_default = Column;

package/dist/cjs/ConfigProvider/hooks/useConfig.js

@@ -63,9 +63,10 @@ function usePlotConfig(name, defaultConfig, props) {
   const mergedProps = { ...globalConfig, ...props };
   const transformedProps = (0, import_plot.transform2ADCProps)(mergedProps);
   const _defaultConfig = typeof defaultConfig === "function" ? defaultConfig(transformedProps) : defaultConfig;
+  const { style, ...restTransformedProps } = transformedProps;
   const config = {
     ..._defaultConfig,
-    ...transformedProps
+    ...restTransformedProps
   };
   return config;
 }

package/dist/cjs/DualAxes/index.d.ts

@@ -4,7 +4,7 @@ export type DualAxesProps = Partial<DualAxesConfig> & {
     categories: string[];
     axisXTitle?: string;
     series: DualAxesSeriesItem[];
-    legendTypeList: string[];
+    legendTypeList?: string[];
 };
 export type DualAxesSeriesItem = {
     type: string;

package/dist/cjs/DualAxes/index.js

@@ -35,9 +35,20 @@ module.exports = __toCommonJS(DualAxes_exports);
 var import_plots = require("@ant-design/plots");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var import_util = require("./util");
 var defaultConfig = (props) => {
-  const { xField = "category", axisXTitle, legendTypeList } = props;
+  const { xField = "category", axisXTitle, legendTypeList, style = {} } = props;
+  const { palette, backgroundColor } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { color: void 0 };
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     xField,
     axis: {
@@ -48,23 +59,24 @@ var defaultConfig = (props) => {
     legend: {
       color: {
         itemMarker: (v, i) => {
-          return legendTypeList[i];
+          return legendTypeList == null ? void 0 : legendTypeList[i];
         }
       }
     },
     scale: {
-      color: {
-        palette: "category10"
-      }
-    }
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var DualAxes = (props) => {
-  const { categories, series, ...others } = props;
+  const { categories, series, theme = "default", ...others } = props;
+  const themeConfig = import_theme.THEME_MAP[theme];
   const transformData = (0, import_react.useMemo)(() => (0, import_util.transform)(series, categories), [props]);
   const config = (0, import_hooks.usePlotConfig)("DualAxes", defaultConfig, {
     ...others,
-    ...transformData
+    ...transformData,
+    theme: themeConfig
   });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.DualAxes, { ...config });
 };

package/dist/cjs/FishboneDiagram/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TreeGraphProps } from '../types';
 export interface FishboneDiagramProps extends TreeGraphProps {
+    theme?: 'default' | 'academy';
 }
 declare const FishboneDiagram: React.FC<FishboneDiagramProps>;
 export default FishboneDiagram;

package/dist/cjs/FishboneDiagram/index.js

@@ -35,18 +35,32 @@ module.exports = __toCommonJS(FishboneDiagram_exports);
 var import_graphs = require("@ant-design/graphs");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var import_graph = require("../utils/graph");
-var defaultConfig = {
-  autoFit: "view",
-  autoResize: true,
-  zoomRange: [0.1, 5],
-  zoom: 1,
-  behaviors: ["drag-canvas"]
+var getDefaultConfig = (props) => {
+  const { theme = "default" } = props;
+  return {
+    autoFit: "view",
+    autoResize: true,
+    zoomRange: [0.1, 5],
+    zoom: 1,
+    behaviors: ["drag-canvas"],
+    transforms: (prev) => [
+      {
+        ...prev.find((transform) => transform.key === "assign-color-by-branch") || {},
+        ...import_theme.G6THEME_MAP[theme]
+      }
+    ]
+  };
 };
 var FishboneDiagram = (props) => {
   const { data: propsData, ...restProps } = props;
   const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
-  const config = (0, import_hooks.useGraphConfig)("FishboneDiagram", defaultConfig, restProps);
+  const config = (0, import_hooks.useGraphConfig)(
+    "FishboneDiagram",
+    getDefaultConfig(props),
+    restProps
+  );
   return /* @__PURE__ */ import_react.default.createElement(import_graphs.Fishbone, { data, ...config });
 };
 var FishboneDiagram_default = FishboneDiagram;

package/dist/cjs/Funnel/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type FunnelDatum = {
+    category: string;
+    value: number;
+};
+export type FunnelProps = BasePlotProps<FunnelDatum> & Theme & Style & {
+    width?: number;
+    height?: number;
+};
+declare const Funnel: (props: FunnelProps) => React.JSX.Element;
+export default Funnel;

package/dist/cjs/Funnel/index.js

@@ -0,0 +1,173 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Funnel/index.tsx
+var Funnel_exports = {};
+__export(Funnel_exports, {
+  default: () => Funnel_default
+});
+module.exports = __toCommonJS(Funnel_exports);
+var import_g2 = require("@antv/g2");
+var import_react = __toESM(require("react"));
+var import_theme = require("../theme");
+var defaultConfig = (props) => {
+  const { data, title, theme = "default", style = {} } = props;
+  const { backgroundColor, palette = [] } = style;
+  const r = (start, end) => `${(end / start * 100).toFixed(2)} %`;
+  return {
+    type: "view",
+    data,
+    theme: import_theme.THEME_MAP[theme],
+    title,
+    padding: 40,
+    insetRight: 28,
+    children: [
+      {
+        type: "interval",
+        data,
+        encode: { x: "category", y: "value", color: "category", shape: "funnel" },
+        transform: [{ type: "symmetryY" }],
+        scale: {
+          x: { padding: 0 },
+          ...(palette == null ? void 0 : palette[0]) ? {
+            color: {
+              range: palette
+            }
+          } : {}
+        },
+        coordinate: { transform: [{ type: "transpose" }] },
+        legend: {
+          color: {
+            position: "top",
+            layout: {
+              justifyContent: "center"
+            }
+          }
+        },
+        labels: [
+          {
+            text: (d) => `${d.category}
+${d.value}`,
+            position: "inside",
+            transform: [{ type: "contrastReverse" }]
+          },
+          {
+            text: (d, i) => i !== 0 ? "———" : "",
+            style: {
+              "font-size": "1px",
+              color: "#666",
+              "letter-spacing": "0px"
+            },
+            position: "top-right",
+            fill: "#666",
+            dx: 35,
+            dy: -8
+          },
+          {
+            text: (d, i) => i !== 0 ? "转化率" : "",
+            position: "top-right",
+            textAlign: "left",
+            textBaseline: "middle",
+            fill: "#666",
+            dx: 40
+          },
+          {
+            text: (d, i, data2) => i !== 0 ? r(data2[i - 1].value, data2[i].value) : "",
+            position: "top-right",
+            textAlign: "left",
+            textBaseline: "middle",
+            dx: 80
+          }
+        ],
+        ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+      },
+      {
+        type: "connector",
+        data: [
+          {
+            startX: data[0].category,
+            startY: data[data.length - 1].category,
+            endX: 0,
+            endY: (data[0].value - data[data.length - 1].value) / 2
+          }
+        ],
+        encode: { x: "startX", x1: "startY", y: "endX", y1: "endY" },
+        style: {
+          stroke: "#666",
+          markerEnd: false,
+          connectLength1: -12,
+          offset2: -20,
+          connectorStroke: "#0649f2",
+          lineDash: [12, 2]
+        },
+        labels: [
+          {
+            text: "转化率",
+            position: "left",
+            textAlign: "start",
+            textBaseline: "middle",
+            fill: "#666",
+            dx: 10
+          },
+          {
+            text: r(data[0].value, data[data.length - 1].value),
+            position: "left",
+            textAlign: "start",
+            dx: 50,
+            fill: "#000"
+          }
+        ]
+      }
+    ],
+    axis: false,
+    animate: false
+  };
+};
+var Funnel = (props) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current)
+      return;
+    const chart = new import_g2.Chart({
+      container: containerRef.current,
+      autoFit: true,
+      padding: "auto"
+    });
+    const config = defaultConfig(props);
+    chart.options(config);
+    chart.render();
+    chartRef.current = chart;
+    return () => {
+      chart.destroy();
+      chartRef.current = null;
+    };
+  }, [props]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef });
+};
+var Funnel_default = Funnel;

package/dist/cjs/Histogram/index.d.ts

@@ -1,6 +1,7 @@
-import type { HistogramConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
-export type HistogramProps = BasePlotProps<number> & Partial<HistogramConfig>;
+import type { BasePlotProps, Style, Theme } from '../types';
+export type HistogramProps = BasePlotProps<number> & Theme & Style & {
+    binNumber: number;
+};
 declare const Histogram: (props: HistogramProps) => React.JSX.Element;
 export default Histogram;

package/dist/cjs/Histogram/index.js

@@ -35,16 +35,45 @@ module.exports = __toCommonJS(Histogram_exports);
 var import_plots = require("@ant-design/plots");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var defaultConfig = (props) => {
-  const { binField = (d) => d, binNumber } = props;
+  const { binField = (d) => d, binNumber, style = {} } = props;
+  const { backgroundColor, palette } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { color: void 0 };
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     binField,
     binNumber,
-    style: { inset: 0.5 }
+    style: { inset: 0.5, minHeight: 1, columnWidthRatio: 1 },
+    legend: false,
+    // @ts-ignore
+    encode: {
+      x: (d) => d,
+      y: "count",
+      color: () => "all"
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var Histogram = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Histogram", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Histogram", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Histogram, { ...config });
 };
 var Histogram_default = Histogram;

package/dist/cjs/IndentedTree/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TreeGraphProps } from '../types';
 export interface IndentedTreeProps extends TreeGraphProps {
+    theme?: 'default' | 'academy';
 }
 declare const IndentedTree: React.FC<IndentedTreeProps>;
 export default IndentedTree;