@antv/gpt-vis 0.5.5 → 0.5.7

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

@@ -1,11 +1,10 @@
-import type { AreaConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Style, Theme } from '../types';
 type AreaDataItem = {
     time: string | number;
     value: number;
     [key: string]: string | number;
 };
-export type AreaProps = BasePlotProps<AreaDataItem> & Partial<AreaConfig>;
+export type AreaProps = BasePlotProps<AreaDataItem> & Theme & Style;
 declare const Area: (props: AreaProps) => React.JSX.Element;
 export default Area;

package/dist/cjs/Area/index.js

@@ -36,27 +36,70 @@ 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 getLinearGradientColor = (color) => `linear-gradient(-90deg, white 0%, ${color} 100%)`;
+var DEFAULT_COLOR = "#3A95FF";
 var defaultConfig = (props) => {
-  const { data, xField = "time", yField = "value" } = props;
+  const { data, xField = "time", yField = "value", style = {} } = props;
+  const { backgroundColor, palette, lineWidth = 2 } = style;
   const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
   const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
-  const defalutStyle = hasGroupField ? {} : { opacity: 0.6 };
+  const fillColor = getLinearGradientColor((palette == null ? void 0 : palette[0]) || DEFAULT_COLOR);
+  const defaultStyle = hasGroupField ? { opacity: 0.6 } : { opacity: 0.6, fill: fillColor };
+  let paletteConfig = { color: void 0 };
+  let encode = {};
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
+  if (hasGroupField) {
+    encode = { x: xField, y: yField, color: "group" };
+  } else {
+    encode = { x: xField, y: yField, color: () => "all" };
+  }
   return {
     xField,
     yField,
-    style: defalutStyle,
+    style: defaultStyle,
     colorField: hasGroupField ? "group" : void 0,
+    stack: hasGroupField,
+    // @ts-ignore
+    encode,
+    legend: hasGroupField ? {} : false,
     tooltip: (d) => {
       const tooltipName = axisYTitle || d[xField];
       return {
         name: tooltipName,
         value: d[yField]
       };
-    }
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    line: {
+      encode,
+      style: {
+        lineWidth,
+        strokeOpacity: 0.6
+      },
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var Area = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Area", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Area", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Area, { ...config });
 };
 var Area_default = Area;

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

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

package/dist/cjs/Bar/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 axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  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,29 @@ var defaultConfig = (props) => {
       };
     },
     style: {
-      // 圆角样式
-      radiusTopLeft: 5,
-      radiusTopRight: 5
-    }
+      ...radiusStyle,
+      columnWidthRatio: 0.8
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 },
+    legend: hasGroupField ? {} : false
   };
 };
 var Bar = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Bar", 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)("Bar", defaultConfig, {
+    ...props,
+    theme: themeConfig,
+    group: hasGroupField && group,
+    stack: hasGroupField && stack
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Bar, { ...config });
 };
 var Bar_default = Bar;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type BoxplotDatum = {
+    category: string;
+    value: number;
+    group?: string;
+};
+export type BoxplotProps = BasePlotProps<BoxplotDatum> & Theme & Style & {
+    xField?: string;
+    yField?: string;
+};
+declare const Boxplot: (props: BoxplotProps) => React.JSX.Element;
+export default Boxplot;

package/dist/cjs/Boxplot/index.js

@@ -0,0 +1,88 @@
+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/Boxplot/index.tsx
+var Boxplot_exports = {};
+__export(Boxplot_exports, {
+  default: () => Boxplot_default
+});
+module.exports = __toCommonJS(Boxplot_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) => {
+  var _a;
+  const { data, style = {}, axisYTitle, axisXTitle, xField = "category", yField = "value" } = props;
+  const { backgroundColor, palette } = style;
+  const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
+  let paletteConfig = { color: void 0 };
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  const colorField = hasGroupField ? "group" : "category";
+  const seriesField = hasGroupField ? "group" : "category";
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
+  return {
+    data,
+    boxType: "boxplot",
+    xField,
+    yField,
+    colorField,
+    seriesField,
+    axis: {
+      y: {
+        title: axisYTitle || false
+      },
+      x: {
+        title: axisXTitle || false
+      }
+    },
+    scale: {
+      x: { paddingInner: 0.6, paddingOuter: 0.3 },
+      series: { paddingInner: 0.3, paddingOuter: 0.1 },
+      y: { nice: true },
+      ...paletteConfig
+    },
+    style: { stroke: "black" },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+  };
+};
+var Boxplot = (props) => {
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Boxplot", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Box, { ...config });
+};
+var Boxplot_default = Boxplot;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChartComponents, ComponentErrorRender, ErrorRender } from './type';
+import type { ChartComponents, ComponentErrorRender, ErrorRender, TextLabels } from './type';
 type RenderVisChartProps = {
     content: string;
     components: ChartComponents;
@@ -8,6 +8,12 @@ type RenderVisChartProps = {
     style?: React.CSSProperties;
     componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
     errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
+    showTabs?: boolean;
+    showCodeTab?: boolean;
+    showChartTab?: boolean;
+    defaultTab?: 'chart' | 'code';
+    textLabels?: TextLabels;
+    locale?: string;
 };
 export declare const RenderVisChart: React.FC<RenderVisChartProps>;
 export {};

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -51,16 +51,77 @@ var G6List = [
   "network-graph",
   "indented-tree"
 ];
+var DEFAULT_LABELS = {
+  "zh-CN": {
+    chartTab: "图表",
+    codeTab: "代码",
+    download: "下载",
+    copy: "复制",
+    copied: "完成",
+    renderError: "图表渲染失败",
+    parseError: "GPT-Vis parse content error!",
+    unsupportedChart: "Chart type not supported"
+  },
+  "en-US": {
+    chartTab: "Chart",
+    codeTab: "Code",
+    download: "Download",
+    copy: "Copy",
+    copied: "Copied",
+    renderError: "Chart render failed",
+    parseError: "Parse content error!",
+    unsupportedChart: "Chart type not supported"
+  },
+  "pt-BR": {
+    chartTab: "Gráfico",
+    codeTab: "Código",
+    download: "Baixar",
+    copy: "Copiar",
+    copied: "Copiado",
+    renderError: "Erro ao renderizar gráfico",
+    parseError: "Erro ao analisar conteúdo!",
+    unsupportedChart: "Tipo de gráfico não suportado"
+  }
+};
 var RenderVisChart = (0, import_react.memo)(
-  ({ style, content, components, debug, loadingTimeout, componentErrorRender, errorRender }) => {
+  ({
+    style,
+    content,
+    components,
+    debug = false,
+    loadingTimeout,
+    componentErrorRender,
+    errorRender,
+    showTabs = true,
+    showCodeTab = true,
+    showChartTab = true,
+    defaultTab = "chart",
+    textLabels = {},
+    locale = "zh-CN"
+  }) => {
     const timeoutRef = (0, import_react.useRef)();
     const copyTimeoutRef = (0, import_react.useRef)();
     const [loading, setLoading] = (0, import_react.useState)(true);
-    const [activeTab, setActiveTab] = (0, import_react.useState)("chart");
     const [hasRenderError, setHasRenderError] = (0, import_react.useState)(false);
     const [copied, setCopied] = (0, import_react.useState)(false);
     const chartRef = (0, import_react.useRef)(null);
     const chartContainerRef = (0, import_react.useRef)(null);
+    const labels = {
+      ...DEFAULT_LABELS[locale] || DEFAULT_LABELS["en-US"],
+      ...textLabels
+    };
+    const getValidDefaultTab = () => {
+      if (defaultTab === "chart" && showChartTab)
+        return "chart";
+      if (defaultTab === "code" && showCodeTab)
+        return "code";
+      if (showChartTab)
+        return "chart";
+      if (showCodeTab)
+        return "code";
+      return "chart";
+    };
+    const [activeTab, setActiveTab] = (0, import_react.useState)(getValidDefaultTab());
     let chartJson;
     try {
       chartJson = JSON.parse(content);
@@ -84,7 +145,7 @@ var RenderVisChart = (0, import_react.memo)(
           content
         });
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", null, " GPT-Vis parse content error! ");
+      return /* @__PURE__ */ import_react.default.createElement("div", null, labels.parseError);
     }
     const { type, ...chartProps } = chartJson;
     const ChartComponent = components[type];
@@ -92,20 +153,22 @@ var RenderVisChart = (0, import_react.memo)(
       console.log("GPT-Vis withChartCode get chartJson parse from vis-chart code block", chartJson);
     }
     if (!ChartComponent) {
-      const message = `Chart type "${type}" is not supported.`;
+      const message = `${labels.unsupportedChart}: "${type}"`;
       if (errorRender) {
         return errorRender({
           error: new Error(message),
           content
         });
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", null, " ", message, " ");
+      return /* @__PURE__ */ import_react.default.createElement("div", null, message);
     }
     const FallbackComponent = (fallbackProps) => {
       const { error } = fallbackProps;
       if (!hasRenderError) {
         setHasRenderError(true);
-        setActiveTab("code");
+        if (showCodeTab && showTabs) {
+          setActiveTab("code");
+        }
       }
       if (componentErrorRender) {
         return componentErrorRender({
@@ -113,7 +176,7 @@ var RenderVisChart = (0, import_react.memo)(
           content
         });
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.ErrorMessage, null, "图表渲染失败"));
+      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.ErrorMessage, null, labels.renderError));
     };
     const handleCopy = async () => {
       try {
@@ -126,7 +189,7 @@ var RenderVisChart = (0, import_react.memo)(
           setCopied(false);
         }, 1e3);
       } catch (error) {
-        console.error("复制失败:", error);
+        console.error("Copy failed:", error);
       }
     };
     const handleDownload = async () => {
@@ -139,7 +202,7 @@ var RenderVisChart = (0, import_react.memo)(
           });
         }
       } catch (error) {
-        console.error("下载图片失败:", error);
+        console.error("Download image failed:", error);
       }
     };
     const isG6 = G6List.includes(type);
@@ -157,7 +220,30 @@ var RenderVisChart = (0, import_react.memo)(
         chartRef.current.zoomTo(newZoom);
       }
     };
-    return /* @__PURE__ */ import_react.default.createElement(import_styles.TabContainer, { style }, /* @__PURE__ */ import_react.default.createElement(import_styles.TabHeader, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TabLeftGroup, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "chart", onClick: () => setActiveTab("chart") }, "图表"), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "code", onClick: () => setActiveTab("code") }, "代码")), /* @__PURE__ */ import_react.default.createElement(import_styles.TabRightGroup, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isG6 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    if (!showTabs) {
+      return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
+        import_react_error_boundary.ErrorBoundary,
+        {
+          FallbackComponent,
+          onError: (error, errorInfo) => {
+            console.error("GPT-Vis Render error:", error);
+            if (debug) {
+              console.error("GPT-Vis Render error info:", errorInfo);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          ChartComponent,
+          {
+            ...chartProps,
+            onReady: (chart) => {
+              chartRef.current = chart;
+            }
+          }
+        )
+      )));
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_styles.TabContainer, { style }, /* @__PURE__ */ import_react.default.createElement(import_styles.TabHeader, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TabLeftGroup, null, showChartTab && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "chart", onClick: () => setActiveTab("chart") }, labels.chartTab), showCodeTab && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "code", onClick: () => setActiveTab("code") }, labels.codeTab)), /* @__PURE__ */ import_react.default.createElement(import_styles.TabRightGroup, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, isG6 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_styles.TextButton,
       {
         onClick: handleZoomIn,
@@ -171,7 +257,7 @@ var RenderVisChart = (0, import_react.memo)(
         style: { width: "24px", height: "24px", padding: 0 }
       },
       /* @__PURE__ */ import_react.default.createElement(import_icon.ZoomOut, { size: 18 })
-    ), /* @__PURE__ */ import_react.default.createElement(import_styles.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleDownload }, /* @__PURE__ */ import_react.default.createElement(import_icon.DownLoad, { size: 16 }), "下载")) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleCopy }, copied ? /* @__PURE__ */ import_react.default.createElement(import_icon.Check, null) : /* @__PURE__ */ import_react.default.createElement(import_icon.Copy, null), copied ? "完成" : "复制")))), /* @__PURE__ */ import_react.default.createElement(import_styles.TabContent, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(import_styles.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleDownload }, /* @__PURE__ */ import_react.default.createElement(import_icon.DownLoad, { size: 16 }), labels.download)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleCopy }, copied ? /* @__PURE__ */ import_react.default.createElement(import_icon.Check, null) : /* @__PURE__ */ import_react.default.createElement(import_icon.Copy, null), copied ? labels.copied : labels.copy)))), /* @__PURE__ */ import_react.default.createElement(import_styles.TabContent, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(
       import_react_error_boundary.ErrorBoundary,
       {
         FallbackComponent,
@@ -179,7 +265,9 @@ var RenderVisChart = (0, import_react.memo)(
           console.error("GPT-Vis Render error:", error);
           if (!hasRenderError) {
             setHasRenderError(true);
-            setActiveTab("code");
+            if (showCodeTab) {
+              setActiveTab("code");
+            }
           }
           if (debug) {
             console.error("GPT-Vis Render error info:", errorInfo);

package/dist/cjs/ChartCodeRender/index.js

@@ -55,7 +55,15 @@ var withCodeBlock = (options) => {
       loadingTimeout = 5e3,
       style,
       errorRender,
-      componentErrorRender
+      componentErrorRender,
+      // New options for tab control
+      showTabs,
+      showCodeTab,
+      showChartTab,
+      defaultTab,
+      // New options for text customization
+      textLabels,
+      locale
     } = options;
     if (isVisChart) {
       return /* @__PURE__ */ import_react.default.createElement(
@@ -67,7 +75,13 @@ var withCodeBlock = (options) => {
           debug,
           loadingTimeout,
           errorRender,
-          componentErrorRender
+          componentErrorRender,
+          showTabs,
+          showCodeTab,
+          showChartTab,
+          defaultTab,
+          textLabels,
+          locale
         }
       );
     }