@antv/gpt-vis 0.5.12 → 0.5.14

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

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const Loading: () => React.JSX.Element;
+type LoadingProps = {
+    text: string;
+};
+declare const Loading: React.FC<LoadingProps>;
 export default Loading;

package/dist/cjs/ChartCodeRender/Loading.js

@@ -48,7 +48,7 @@ var StyledLoading = import_styled_components.default.div`
     margin-bottom: 6px;
   }
 `;
-var Loading = () => {
-  return /* @__PURE__ */ import_react.default.createElement(StyledLoading, { className: "gpt-vis-loading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: "24px", color: "rgb(56, 177, 246)" } })), /* @__PURE__ */ import_react.default.createElement("p", null, "数据生成中"));
+var Loading = ({ text }) => {
+  return /* @__PURE__ */ import_react.default.createElement(StyledLoading, { className: "gpt-vis-loading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "gpt-vis-loading-icon" }, /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: "24px", color: "rgb(56, 177, 246)" } })), /* @__PURE__ */ import_react.default.createElement("p", null, text));
 };
 var Loading_default = Loading;

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -33,6 +33,8 @@ __export(VisChart_exports, {
 });
 module.exports = __toCommonJS(VisChart_exports);
 var import_snapdom = require("@zumer/snapdom");
+var import_lodash = require("lodash");
+var import_rc_resize_observer = __toESM(require("rc-resize-observer"));
 var import_react = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
@@ -60,7 +62,8 @@ var DEFAULT_LABELS = {
     copied: "完成",
     renderError: "图表渲染失败",
     parseError: "GPT-Vis parse content error!",
-    unsupportedChart: "Chart type not supported"
+    unsupportedChart: "Chart type not supported",
+    loading: "数据生成中"
   },
   "en-US": {
     chartTab: "Chart",
@@ -70,7 +73,8 @@ var DEFAULT_LABELS = {
     copied: "Copied",
     renderError: "Chart render failed",
     parseError: "Parse content error!",
-    unsupportedChart: "Chart type not supported"
+    unsupportedChart: "Chart type not supported",
+    loading: "Generating data"
   },
   "pt-BR": {
     chartTab: "Gráfico",
@@ -80,7 +84,8 @@ var DEFAULT_LABELS = {
     copied: "Copiado",
     renderError: "Erro ao renderizar gráfico",
     parseError: "Erro ao analisar conteúdo!",
-    unsupportedChart: "Tipo de gráfico não suportado"
+    unsupportedChart: "Tipo de gráfico não suportado",
+    loading: "Gerando dados"
   }
 };
 var RenderVisChart = (0, import_react.memo)(
@@ -137,7 +142,7 @@ var RenderVisChart = (0, import_react.memo)(
         setLoading(false);
       }, loadingTimeout);
       if (loading) {
-        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_Loading.default, null));
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_Loading.default, { text: labels.loading || "" }));
       }
       if (errorRender) {
         return errorRender({
@@ -162,8 +167,7 @@ var RenderVisChart = (0, import_react.memo)(
       }
       return /* @__PURE__ */ import_react.default.createElement("div", null, message);
     }
-    const FallbackComponent = (fallbackProps) => {
-      const { error } = fallbackProps;
+    const FallbackComponent = ({ error }) => {
       if (!hasRenderError) {
         setHasRenderError(true);
         if (showCodeTab && showTabs) {
@@ -220,8 +224,31 @@ var RenderVisChart = (0, import_react.memo)(
         chartRef.current.zoomTo(newZoom);
       }
     };
+    const handleResize = (0, import_react.useMemo)(() => {
+      var _a;
+      const debouncedFn = (0, import_lodash.debounce)(() => {
+        var _a2, _b, _c;
+        const chart = chartRef.current;
+        const container = chartContainerRef.current;
+        if (!chart || !container || !(container instanceof HTMLElement)) {
+          return;
+        }
+        try {
+          if (isG6) {
+            (_a2 = chart.resize) == null ? void 0 : _a2.call(chart);
+            (_b = chart.autoFit) == null ? void 0 : _b.call(chart);
+          } else {
+            (_c = chart.changeSize) == null ? void 0 : _c.call(chart);
+          }
+        } catch (error) {
+          console.error("Failed to resize chart:", error);
+        }
+      }, 150);
+      (_a = debouncedFn.cancel) == null ? void 0 : _a.call(debouncedFn);
+      return debouncedFn;
+    }, [isG6]);
     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(
+      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_rc_resize_observer.default, { onResize: handleResize }, /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
         import_react_error_boundary.ErrorBoundary,
         {
           FallbackComponent,
@@ -241,7 +268,7 @@ var RenderVisChart = (0, import_react.memo)(
             }
           }
         )
-      )));
+      ))));
     }
     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,
@@ -274,7 +301,7 @@ var RenderVisChart = (0, import_react.memo)(
           }
         }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", type }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", type }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_rc_resize_observer.default, { onResize: handleResize }, /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
         ChartComponent,
         {
           ...chartProps,
@@ -282,7 +309,7 @@ var RenderVisChart = (0, import_react.memo)(
             chartRef.current = chart;
           }
         }
-      )))
+      ))))
     ) : /* @__PURE__ */ import_react.default.createElement("div", { style: { maxHeight: 500, overflow: "auto" } }, /* @__PURE__ */ import_react.default.createElement(
       import_react_syntax_highlighter.Light,
       {

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

@@ -13,6 +13,7 @@ export type TextLabels = {
     renderError?: string;
     parseError?: string;
     unsupportedChart?: string;
+    loading?: string;
 };
 /**
  * Chart enhancement options - contains all new feature configurations

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

@@ -7,6 +7,8 @@ type SankeyDatum = {
 };
 export type SankeyProps = BasePlotProps<SankeyDatum> & Theme & Style & {
     nodeAlign?: 'left' | 'center' | 'right' | 'justify';
+    width?: number;
+    height?: number;
 };
 declare const Sankey: (props: SankeyProps) => React.JSX.Element;
 export default Sankey;

package/dist/cjs/Sankey/index.js

@@ -79,6 +79,7 @@ var defaultConfig = (props) => {
   };
 };
 var Sankey = (props) => {
+  const { width, height } = props;
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -86,7 +87,9 @@ var Sankey = (props) => {
       return;
     const chart = new import_g2.Chart({
       container: containerRef.current,
-      autoFit: true,
+      autoFit: !(width && height),
+      ...width ? { width } : {},
+      ...height ? { height } : {},
       padding: "auto"
     });
     const config = defaultConfig(props);
@@ -98,6 +101,10 @@ var Sankey = (props) => {
       chartRef.current = null;
     };
   }, [props]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef });
+  const containerStyle = {
+    ...width ? { width: `${width}px` } : {},
+    ...height ? { height: `${height}px` } : {}
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, style: containerStyle });
 };
 var Sankey_default = Sankey;

package/dist/cjs/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.12";
+declare const _default: "0.5.14";
 export default _default;

package/dist/cjs/version.js

@@ -22,4 +22,4 @@ __export(version_exports, {
   default: () => version_default
 });
 module.exports = __toCommonJS(version_exports);
-var version_default = "0.5.12";
+var version_default = "0.5.14";

package/dist/esm/ChartCodeRender/Loading.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const Loading: () => React.JSX.Element;
+type LoadingProps = {
+    text: string;
+};
+declare const Loading: React.FC<LoadingProps>;
 export default Loading;

package/dist/esm/ChartCodeRender/Loading.js

@@ -5,7 +5,8 @@ var StyledLoading = styled.div.withConfig({
   displayName: "StyledLoading",
   componentId: "gpt-vis-c7ef__sc-4x7w8p-0"
 })(["display:flex;align-items:center;justify-content:center;flex-direction:column;height:300px;background-image:linear-gradient(135deg,#e3f3ff 0%,#f1eeff 100%);color:rgba(0,0,0,88%);&-icon{margin-bottom:6px;}"]);
-var Loading = function Loading() {
+var Loading = function Loading(_ref) {
+  var text = _ref.text;
   return /*#__PURE__*/React.createElement(StyledLoading, {
     className: "gpt-vis-loading"
   }, /*#__PURE__*/React.createElement("div", {
@@ -15,6 +16,6 @@ var Loading = function Loading() {
       fontSize: '24px',
       color: 'rgb(56, 177, 246)'
     }
-  })), /*#__PURE__*/React.createElement("p", null, "\u6570\u636E\u751F\u6210\u4E2D"));
+  })), /*#__PURE__*/React.createElement("p", null, text));
 };
 export default Loading;

package/dist/esm/ChartCodeRender/VisChart.js

@@ -18,7 +18,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { snapdom } from '@zumer/snapdom';
-import React, { memo, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+import ResizeObserver from 'rc-resize-observer';
+import React, { memo, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
@@ -44,7 +46,8 @@ var DEFAULT_LABELS = {
     copied: '完成',
     renderError: '图表渲染失败',
     parseError: 'GPT-Vis parse content error!',
-    unsupportedChart: 'Chart type not supported'
+    unsupportedChart: 'Chart type not supported',
+    loading: '数据生成中'
   },
   'en-US': {
     chartTab: 'Chart',
@@ -54,7 +57,8 @@ var DEFAULT_LABELS = {
     copied: 'Copied',
     renderError: 'Chart render failed',
     parseError: 'Parse content error!',
-    unsupportedChart: 'Chart type not supported'
+    unsupportedChart: 'Chart type not supported',
+    loading: 'Generating data'
   },
   'pt-BR': {
     chartTab: 'Gráfico',
@@ -64,7 +68,8 @@ var DEFAULT_LABELS = {
     copied: 'Copiado',
     renderError: 'Erro ao renderizar gráfico',
     parseError: 'Erro ao analisar conteúdo!',
-    unsupportedChart: 'Tipo de gráfico não suportado'
+    unsupportedChart: 'Tipo de gráfico não suportado',
+    loading: 'Gerando dados'
   }
 };
 export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
@@ -144,7 +149,9 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       return /*#__PURE__*/React.createElement(StyledGPTVis, {
         className: "gpt-vis",
         style: style
-      }, /*#__PURE__*/React.createElement(Loading, null));
+      }, /*#__PURE__*/React.createElement(Loading, {
+        text: labels.loading || ''
+      }));
     }
 
     // Use custom error render function if provided
@@ -181,9 +188,8 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
   }
 
   // Error fallback component for chart rendering errors
-  var FallbackComponent = function FallbackComponent(fallbackProps) {
-    var error = fallbackProps.error;
-
+  var FallbackComponent = function FallbackComponent(_ref2) {
+    var error = _ref2.error;
     // Set render error state and switch to code tab
     if (!hasRenderError) {
       setHasRenderError(true);
@@ -204,7 +210,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
 
   // Handle copy functionality
   var handleCopy = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -236,13 +242,13 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       }, _callee, null, [[0, 8]]);
     }));
     return function handleCopy() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
   // Handle download functionality
   var handleDownload = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var result;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -277,7 +283,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       }, _callee2, null, [[0, 9]]);
     }));
     return function handleDownload() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
@@ -302,12 +308,44 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     }
   };
 
+  // Handle chart resizing on container size change
+  var handleResize = useMemo(function () {
+    var _debouncedFn$cancel;
+    var debouncedFn = debounce(function () {
+      var chart = chartRef.current;
+      var container = chartContainerRef.current;
+
+      // 增加 null 检查和类型守卫
+      if (!chart || !container || !(container instanceof HTMLElement)) {
+        return;
+      }
+      try {
+        if (isG6) {
+          var _chart$resize, _chart$autoFit;
+          // https://github.com/antvis/G6/blob/91c0ac85e4e636a05bd1a3c5e56a4928d1242a9b/packages/g6/src/runtime/graph.ts#L1334
+          (_chart$resize = chart.resize) === null || _chart$resize === void 0 || _chart$resize.call(chart);
+          (_chart$autoFit = chart.autoFit) === null || _chart$autoFit === void 0 || _chart$autoFit.call(chart);
+        } else {
+          var _chart$changeSize;
+          // https://github.com/antvis/G2/blob/c5b1887408f951f59f8263e7e1a306dbdae50660/src/api/runtime.ts#L236
+          (_chart$changeSize = chart.changeSize) === null || _chart$changeSize === void 0 || _chart$changeSize.call(chart);
+        }
+      } catch (error) {
+        console.error('Failed to resize chart:', error);
+      }
+    }, 150);
+    (_debouncedFn$cancel = debouncedFn.cancel) === null || _debouncedFn$cancel === void 0 || _debouncedFn$cancel.call(debouncedFn);
+    return debouncedFn;
+  }, [isG6]);
+
   // 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, {
+    }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ResizeObserver, {
+      onResize: handleResize
+    }, /*#__PURE__*/React.createElement(ChartWrapper, {
       ref: chartContainerRef
     }, /*#__PURE__*/React.createElement(ErrorBoundary, {
       FallbackComponent: FallbackComponent,
@@ -321,7 +359,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       onReady: function onReady(chart) {
         chartRef.current = chart;
       }
-    })))));
+    }))))));
   }
 
   // Render with tabs
@@ -378,13 +416,15 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
   }, /*#__PURE__*/React.createElement(StyledGPTVis, {
     className: "gpt-vis",
     type: type
-  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ChartWrapper, {
+  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: handleResize
+  }, /*#__PURE__*/React.createElement(ChartWrapper, {
     ref: chartContainerRef
   }, /*#__PURE__*/React.createElement(ChartComponent, _extends({}, chartProps, {
     onReady: function onReady(chart) {
       chartRef.current = chart;
     }
-  }))))) : /*#__PURE__*/React.createElement("div", {
+  })))))) : /*#__PURE__*/React.createElement("div", {
     style: {
       maxHeight: 500,
       overflow: 'auto'

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

@@ -13,6 +13,7 @@ export type TextLabels = {
     renderError?: string;
     parseError?: string;
     unsupportedChart?: string;
+    loading?: string;
 };
 /**
  * Chart enhancement options - contains all new feature configurations

package/dist/esm/Sankey/index.d.ts

@@ -7,6 +7,8 @@ type SankeyDatum = {
 };
 export type SankeyProps = BasePlotProps<SankeyDatum> & Theme & Style & {
     nodeAlign?: 'left' | 'center' | 'right' | 'justify';
+    width?: number;
+    height?: number;
 };
 declare const Sankey: (props: SankeyProps) => React.JSX.Element;
 export default Sankey;

package/dist/esm/Sankey/index.js

@@ -60,15 +60,22 @@ var defaultConfig = function defaultConfig(props) {
   } : {});
 };
 var Sankey = function Sankey(props) {
+  var width = props.width,
+    height = props.height;
   var containerRef = useRef(null);
   var chartRef = useRef(null);
   useEffect(function () {
     if (!containerRef.current) return;
-    var chart = new Chart({
+    var chart = new Chart(_objectSpread(_objectSpread(_objectSpread({
       container: containerRef.current,
-      autoFit: true,
+      autoFit: !(width && height)
+    }, width ? {
+      width: width
+    } : {}), height ? {
+      height: height
+    } : {}), {}, {
       padding: 'auto'
-    });
+    }));
     var config = defaultConfig(props);
     chart.options(config);
     chart.render();
@@ -78,8 +85,14 @@ var Sankey = function Sankey(props) {
       chartRef.current = null;
     };
   }, [props]);
+  var containerStyle = _objectSpread(_objectSpread({}, width ? {
+    width: "".concat(width, "px")
+  } : {}), height ? {
+    height: "".concat(height, "px")
+  } : {});
   return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
+    ref: containerRef,
+    style: containerStyle
   });
 };
 export default Sankey;

package/dist/esm/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.12";
+declare const _default: "0.5.14";
 export default _default;

package/dist/esm/version.js

@@ -1 +1 @@
-export default '0.5.12';
+export default '0.5.14';