@antv/gpt-vis 0.5.11 → 0.5.13

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({
@@ -220,8 +225,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 +269,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 +302,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 +310,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/Waterfall/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BasePlotProps, Style, Theme } from '../types';
+import type { BasePlotProps, Theme } from '../types';
 type WaterfallDataItem = {
     category: string;
     value?: number;
@@ -7,14 +7,17 @@ type WaterfallDataItem = {
     isIntermediateTotal?: boolean;
     [key: string]: string | number | boolean | undefined;
 };
+type WaterfallPalette = {
+    positiveColor?: string;
+    negativeColor?: string;
+    totalColor?: string;
+};
 type WaterfallStyle = {
     backgroundColor?: string;
-} & Style;
+    palette?: WaterfallPalette;
+};
 export type WaterfallProps = BasePlotProps<WaterfallDataItem> & Theme & {
     style?: WaterfallStyle;
-    positiveColor?: string;
-    negativeColor?: string;
-    totalColor?: string;
     axisXTitle?: string;
     axisYTitle?: string;
 };

package/dist/cjs/Waterfall/index.js

@@ -80,21 +80,11 @@ function generateLinkData(data) {
   }, []);
 }
 var defaultConfig = (props) => {
-  const {
-    data = [],
-    title,
-    style = {},
-    positiveColor: customPositiveColor,
-    negativeColor: customNegativeColor,
-    totalColor: customTotalColor,
-    axisXTitle,
-    axisYTitle,
-    theme = "default"
-  } = props;
-  const { backgroundColor } = style;
-  const positiveColor = customPositiveColor || DEFAULT_POSITIVE_COLOR;
-  const negativeColor = customNegativeColor || DEFAULT_NEGATIVE_COLOR;
-  const totalColor = customTotalColor || DEFAULT_TOTAL_COLOR;
+  const { data = [], title, style = {}, axisXTitle, axisYTitle, theme = "default" } = props;
+  const { backgroundColor, palette = {} } = style;
+  const positiveColor = palette.positiveColor || DEFAULT_POSITIVE_COLOR;
+  const negativeColor = palette.negativeColor || DEFAULT_NEGATIVE_COLOR;
+  const totalColor = palette.totalColor || DEFAULT_TOTAL_COLOR;
   const transformedData = transformWaterfallData(data);
   const linkData = generateLinkData(transformedData);
   return {

package/dist/cjs/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.11";
+declare const _default: "0.5.13";
 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.11";
+var version_default = "0.5.13";

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
@@ -302,12 +309,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 +360,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       onReady: function onReady(chart) {
         chartRef.current = chart;
       }
-    })))));
+    }))))));
   }
 
   // Render with tabs
@@ -378,13 +417,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/Waterfall/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BasePlotProps, Style, Theme } from '../types';
+import type { BasePlotProps, Theme } from '../types';
 type WaterfallDataItem = {
     category: string;
     value?: number;
@@ -7,14 +7,17 @@ type WaterfallDataItem = {
     isIntermediateTotal?: boolean;
     [key: string]: string | number | boolean | undefined;
 };
+type WaterfallPalette = {
+    positiveColor?: string;
+    negativeColor?: string;
+    totalColor?: string;
+};
 type WaterfallStyle = {
     backgroundColor?: string;
-} & Style;
+    palette?: WaterfallPalette;
+};
 export type WaterfallProps = BasePlotProps<WaterfallDataItem> & Theme & {
     style?: WaterfallStyle;
-    positiveColor?: string;
-    negativeColor?: string;
-    totalColor?: string;
     axisXTitle?: string;
     axisYTitle?: string;
 };

package/dist/esm/Waterfall/index.js

@@ -71,17 +71,16 @@ var defaultConfig = function defaultConfig(props) {
     title = props.title,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
-    customPositiveColor = props.positiveColor,
-    customNegativeColor = props.negativeColor,
-    customTotalColor = props.totalColor,
     axisXTitle = props.axisXTitle,
     axisYTitle = props.axisYTitle,
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'default' : _props$theme;
-  var backgroundColor = style.backgroundColor;
-  var positiveColor = customPositiveColor || DEFAULT_POSITIVE_COLOR;
-  var negativeColor = customNegativeColor || DEFAULT_NEGATIVE_COLOR;
-  var totalColor = customTotalColor || DEFAULT_TOTAL_COLOR;
+  var backgroundColor = style.backgroundColor,
+    _style$palette = style.palette,
+    palette = _style$palette === void 0 ? {} : _style$palette;
+  var positiveColor = palette.positiveColor || DEFAULT_POSITIVE_COLOR;
+  var negativeColor = palette.negativeColor || DEFAULT_NEGATIVE_COLOR;
+  var totalColor = palette.totalColor || DEFAULT_TOTAL_COLOR;
   var transformedData = transformWaterfallData(data);
   var linkData = generateLinkData(transformedData);
   return _objectSpread({

package/dist/esm/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.11";
+declare const _default: "0.5.13";
 export default _default;

package/dist/esm/version.js

@@ -1 +1 @@
-export default '0.5.11';
+export default '0.5.13';