@antv/gpt-vis 0.5.4 → 0.5.6

package/dist/esm/Bar/index.js

@@ -1,19 +1,53 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Bar as ADCBar } from '@ant-design/plots';
 import { get } from 'lodash';
 import React from 'react';
 import { usePlotConfig } from "../ConfigProvider/hooks";
+import { THEME_MAP } from "../theme";
 var defaultConfig = function defaultConfig(props) {
   var data = props.data,
     _props$xField = props.xField,
     xField = _props$xField === void 0 ? 'category' : _props$xField,
     _props$yField = props.yField,
-    yField = _props$yField === void 0 ? 'value' : _props$yField;
+    yField = _props$yField === void 0 ? 'value' : _props$yField,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? {} : _props$theme;
+  var backgroundColor = style.backgroundColor,
+    palette = style.palette;
   var hasGroupField = get(data, '[0].group') !== undefined;
   var axisYTitle = get(props, 'axis.y.title');
-  return {
+  var hasPalette = !!(palette !== null && palette !== void 0 && palette[0]);
+  var paletteConfig = {
+    color: undefined
+  };
+  var radiusStyle = {
+    radiusTopLeft: 4,
+    radiusTopRight: 4
+  };
+  if ((theme === null || theme === void 0 ? void 0 : theme.type) === 'academy') {
+    radiusStyle = {
+      radiusTopLeft: 0,
+      radiusTopRight: 0
+    };
+  }
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
+  return _objectSpread({
     xField: xField,
     yField: yField,
-    colorField: hasGroupField ? 'group' : undefined,
+    colorField: hasGroupField ? 'group' : xField,
     tooltip: function tooltip(d) {
       var tooltipName = axisYTitle || d[xField];
       return {
@@ -21,15 +55,28 @@ var defaultConfig = function defaultConfig(props) {
         value: d[yField]
       };
     },
-    style: {
-      // 圆角样式
-      radiusTopLeft: 5,
-      radiusTopRight: 5
+    style: _objectSpread(_objectSpread({}, radiusStyle), {}, {
+      columnWidthRatio: 0.8
+    }),
+    scale: _objectSpread({
+      y: {
+        nice: true
+      }
+    }, paletteConfig)
+  }, backgroundColor ? {
+    viewStyle: {
+      viewFill: backgroundColor
     }
-  };
+  } : {
+    viewStyle: undefined
+  });
 };
 var Bar = function Bar(props) {
-  var config = usePlotConfig('Bar', defaultConfig, props);
+  var _props$theme2;
+  var themeConfig = THEME_MAP[(_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 ? _props$theme2 : 'default'];
+  var config = usePlotConfig('Bar', defaultConfig, _objectSpread(_objectSpread({}, props), {}, {
+    theme: themeConfig
+  }));
   return /*#__PURE__*/React.createElement(ADCBar, config);
 };
 export default Bar;

package/dist/esm/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/esm/ChartCodeRender/VisChart.js

@@ -6,6 +6,11 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -23,42 +28,107 @@ import Loading from "./Loading";
 import { ChartWrapper, Divider, ErrorMessage, GlobalStyles, StyledGPTVis, StyledTabButton, TabContainer, TabContent, TabHeader, TabLeftGroup, TabRightGroup, TextButton } from "./styles";
 import { handleCopyCode } from "./utils";
 
-// 注册 JSON 语言支持
+// Register JSON language support for syntax highlighting
 SyntaxHighlighter.registerLanguage('json', json);
+
+// Chart types that support G6 zooming functionality
 var G6List = ['mind-map', 'fishbone-diagram', 'flow-diagram', 'organization-chart', 'network-graph', 'indented-tree'];
+
+// Default text labels by locale
+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'
+  }
+};
 export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
   var style = _ref.style,
     content = _ref.content,
     components = _ref.components,
-    debug = _ref.debug,
+    _ref$debug = _ref.debug,
+    debug = _ref$debug === void 0 ? false : _ref$debug,
     loadingTimeout = _ref.loadingTimeout,
     componentErrorRender = _ref.componentErrorRender,
-    errorRender = _ref.errorRender;
+    errorRender = _ref.errorRender,
+    _ref$showTabs = _ref.showTabs,
+    showTabs = _ref$showTabs === void 0 ? true : _ref$showTabs,
+    _ref$showCodeTab = _ref.showCodeTab,
+    showCodeTab = _ref$showCodeTab === void 0 ? true : _ref$showCodeTab,
+    _ref$showChartTab = _ref.showChartTab,
+    showChartTab = _ref$showChartTab === void 0 ? true : _ref$showChartTab,
+    _ref$defaultTab = _ref.defaultTab,
+    defaultTab = _ref$defaultTab === void 0 ? 'chart' : _ref$defaultTab,
+    _ref$textLabels = _ref.textLabels,
+    textLabels = _ref$textLabels === void 0 ? {} : _ref$textLabels,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'zh-CN' : _ref$locale;
   var timeoutRef = useRef();
   var copyTimeoutRef = useRef();
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
     setLoading = _useState2[1];
-  var _useState3 = useState('chart'),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeTab = _useState4[0],
-    setActiveTab = _useState4[1];
+    hasRenderError = _useState4[0],
+    setHasRenderError = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    hasRenderError = _useState6[0],
-    setHasRenderError = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    copied = _useState8[0],
-    setCopied = _useState8[1];
+    copied = _useState6[0],
+    setCopied = _useState6[1];
   var chartRef = useRef(null);
   var chartContainerRef = useRef(null);
+
+  // Merge default labels with custom labels
+  var labels = _objectSpread(_objectSpread({}, DEFAULT_LABELS[locale] || DEFAULT_LABELS['en-US']), textLabels);
+
+  // Determine valid default tab based on visibility settings
+  var getValidDefaultTab = function getValidDefaultTab() {
+    if (defaultTab === 'chart' && showChartTab) return 'chart';
+    if (defaultTab === 'code' && showCodeTab) return 'code';
+    if (showChartTab) return 'chart';
+    if (showCodeTab) return 'code';
+    return 'chart';
+  };
+  var _useState7 = useState(getValidDefaultTab()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeTab = _useState8[0],
+    setActiveTab = _useState8[1];
   var chartJson;
+
+  // Parse chart JSON with error handling
   try {
     chartJson = JSON.parse(content);
   } catch (e) {
     var parseError = e;
+
+    // Clear any existing timeout and set loading timeout
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       if (debug) {
@@ -68,6 +138,8 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     timeoutRef.current = setTimeout(function () {
       setLoading(false);
     }, loadingTimeout);
+
+    // Show loading state while timeout is active
     if (loading) {
       return /*#__PURE__*/React.createElement(StyledGPTVis, {
         className: "gpt-vis",
@@ -75,43 +147,49 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       }, /*#__PURE__*/React.createElement(Loading, null));
     }
 
-    // 使用自定义错误渲染函数
+    // Use custom error render function if provided
     if (errorRender) {
       return errorRender({
         error: parseError,
         content: content
       });
     }
-    return /*#__PURE__*/React.createElement("div", null, " GPT-Vis parse content error! ");
+
+    // Return default error message
+    return /*#__PURE__*/React.createElement("div", null, labels.parseError);
   }
   var _chartJson = chartJson,
     type = _chartJson.type,
     chartProps = _objectWithoutProperties(_chartJson, _excluded);
   var ChartComponent = components[type];
 
-  // debug mode print chartJson
+  // Debug mode: print chart JSON
   if (debug) {
     console.log('GPT-Vis withChartCode get chartJson parse from vis-chart code block', chartJson);
   }
 
-  // If the chart type is not supported, display an error message
+  // Handle unsupported chart types
   if (!ChartComponent) {
-    var message = "Chart type \"".concat(type, "\" is not supported.");
+    var message = "".concat(labels.unsupportedChart, ": \"").concat(type, "\"");
     if (errorRender) {
       return errorRender({
         error: new Error(message),
         content: content
       });
     }
-    return /*#__PURE__*/React.createElement("div", null, " ", message, " ");
+    return /*#__PURE__*/React.createElement("div", null, message);
   }
+
+  // Error fallback component for chart rendering errors
   var FallbackComponent = function FallbackComponent(fallbackProps) {
     var error = fallbackProps.error;
 
-    // 设置渲染错误状态并切换到代码 tab
+    // Set render error state and switch to code tab
     if (!hasRenderError) {
       setHasRenderError(true);
-      setActiveTab('code');
+      if (showCodeTab && showTabs) {
+        setActiveTab('code');
+      }
     }
     if (componentErrorRender) {
       return componentErrorRender({
@@ -120,9 +198,11 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       });
     }
 
-    // 返回一个简单的错误提示
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorMessage, null, "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"));
+    // Return simple error message
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorMessage, null, labels.renderError));
   };
+
+  // Handle copy functionality
   var handleCopy = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -134,12 +214,12 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
           case 3:
             setCopied(true);
 
-            // 清除之前的定时器
+            // Clear previous timeout
             if (copyTimeoutRef.current) {
               clearTimeout(copyTimeoutRef.current);
             }
 
-            // 3秒后恢复原状态
+            // Reset state after 1 second
             copyTimeoutRef.current = setTimeout(function () {
               setCopied(false);
             }, 1000);
@@ -148,7 +228,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
           case 8:
             _context.prev = 8;
             _context.t0 = _context["catch"](0);
-            console.error('复制失败:', _context.t0);
+            console.error('Copy failed:', _context.t0);
           case 11:
           case "end":
             return _context.stop();
@@ -159,6 +239,8 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+
+  // Handle download functionality
   var handleDownload = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var result;
@@ -187,7 +269,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
           case 9:
             _context2.prev = 9;
             _context2.t0 = _context2["catch"](0);
-            console.error('下载图片失败:', _context2.t0);
+            console.error('Download image failed:', _context2.t0);
           case 12:
           case "end":
             return _context2.stop();
@@ -198,9 +280,11 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+
+  // Check if chart supports G6 zoom functionality
   var isG6 = G6List.includes(type);
 
-  // 缩放功能函数
+  // Zoom out functionality
   var handleZoomOut = function handleZoomOut() {
     if (chartRef.current && typeof chartRef.current.zoomTo === 'function') {
       var currentZoom = chartRef.current.getZoom() || 1;
@@ -208,6 +292,8 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       chartRef.current.zoomTo(newZoom);
     }
   };
+
+  // Zoom in functionality
   var handleZoomIn = function handleZoomIn() {
     if (chartRef.current && typeof chartRef.current.zoomTo === 'function') {
       var currentZoom = chartRef.current.getZoom() || 1;
@@ -216,20 +302,42 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     }
   };
 
-  // Render the supported chart component with data
+  // Render without tabs if showTabs is false
+  if (!showTabs) {
+    return /*#__PURE__*/React.createElement(StyledGPTVis, {
+      className: "gpt-vis",
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ChartWrapper, {
+      ref: chartContainerRef
+    }, /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: FallbackComponent,
+      onError: function onError(error, errorInfo) {
+        console.error('GPT-Vis Render error:', error);
+        if (debug) {
+          console.error('GPT-Vis Render error info:', errorInfo);
+        }
+      }
+    }, /*#__PURE__*/React.createElement(ChartComponent, _extends({}, chartProps, {
+      onReady: function onReady(chart) {
+        chartRef.current = chart;
+      }
+    })))));
+  }
+
+  // Render with tabs
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: style
-  }, /*#__PURE__*/React.createElement(TabHeader, null, /*#__PURE__*/React.createElement(TabLeftGroup, null, /*#__PURE__*/React.createElement(StyledTabButton, {
+  }, /*#__PURE__*/React.createElement(TabHeader, null, /*#__PURE__*/React.createElement(TabLeftGroup, null, showChartTab && /*#__PURE__*/React.createElement(StyledTabButton, {
     active: activeTab === 'chart',
     onClick: function onClick() {
       return setActiveTab('chart');
     }
-  }, "\u56FE\u8868"), /*#__PURE__*/React.createElement(StyledTabButton, {
+  }, labels.chartTab), showCodeTab && /*#__PURE__*/React.createElement(StyledTabButton, {
     active: activeTab === 'code',
     onClick: function onClick() {
       return setActiveTab('code');
     }
-  }, "\u4EE3\u7801")), /*#__PURE__*/React.createElement(TabRightGroup, null, activeTab === 'chart' ? /*#__PURE__*/React.createElement(React.Fragment, null, isG6 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
+  }, labels.codeTab)), /*#__PURE__*/React.createElement(TabRightGroup, null, activeTab === 'chart' ? /*#__PURE__*/React.createElement(React.Fragment, null, isG6 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
     onClick: handleZoomIn,
     style: {
       width: '24px',
@@ -251,15 +359,17 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     onClick: handleDownload
   }, /*#__PURE__*/React.createElement(DownLoad, {
     size: 16
-  }), "\u4E0B\u8F7D")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
+  }), labels.download)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
     onClick: handleCopy
-  }, copied ? /*#__PURE__*/React.createElement(Check, null) : /*#__PURE__*/React.createElement(Copy, null), copied ? '完成' : '复制')))), /*#__PURE__*/React.createElement(TabContent, null, activeTab === 'chart' ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+  }, copied ? /*#__PURE__*/React.createElement(Check, null) : /*#__PURE__*/React.createElement(Copy, null), copied ? labels.copied : labels.copy)))), /*#__PURE__*/React.createElement(TabContent, null, activeTab === 'chart' ? /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: FallbackComponent,
     onError: function onError(error, errorInfo) {
       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/esm/ChartCodeRender/index.js

@@ -40,7 +40,13 @@ var withCodeBlock = function withCodeBlock(options) {
       loadingTimeout = _options$loadingTimeo === void 0 ? 5000 : _options$loadingTimeo,
       style = options.style,
       errorRender = options.errorRender,
-      componentErrorRender = options.componentErrorRender;
+      componentErrorRender = options.componentErrorRender,
+      showTabs = options.showTabs,
+      showCodeTab = options.showCodeTab,
+      showChartTab = options.showChartTab,
+      defaultTab = options.defaultTab,
+      textLabels = options.textLabels,
+      locale = options.locale;
 
     // If the code block is a VisChart, render the corresponding chart component
     if (isVisChart) {
@@ -52,6 +58,14 @@ var withCodeBlock = function withCodeBlock(options) {
         loadingTimeout: loadingTimeout,
         errorRender: errorRender,
         componentErrorRender: componentErrorRender
+        // Pass new props to RenderVisChart
+        ,
+        showTabs: showTabs,
+        showCodeTab: showCodeTab,
+        showChartTab: showChartTab,
+        defaultTab: defaultTab,
+        textLabels: textLabels,
+        locale: locale
       });
     }
 

package/dist/esm/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 {