@antv/gpt-vis 0.5.14 → 0.6.0

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -127,11 +127,38 @@ var RenderVisChart = (0, import_react.memo)(
       return "chart";
     };
     const [activeTab, setActiveTab] = (0, import_react.useState)(getValidDefaultTab());
-    let chartJson;
+    let chartJson = null;
+    let parseError = null;
+    let type;
     try {
       chartJson = JSON.parse(content);
+      type = chartJson == null ? void 0 : chartJson.type;
     } catch (e) {
-      const parseError = e;
+      parseError = e;
+    }
+    const isG6 = type ? G6List.includes(type) : false;
+    const handleResize = (0, import_react.useMemo)(() => {
+      const debouncedFn = (0, import_lodash.debounce)(() => {
+        var _a, _b, _c;
+        const chart = chartRef.current;
+        const container = chartContainerRef.current;
+        if (!chart || !container || !(container instanceof HTMLElement)) {
+          return;
+        }
+        try {
+          if (isG6) {
+            (_a = chart.resize) == null ? void 0 : _a.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);
+      return debouncedFn;
+    }, [isG6]);
+    if (parseError) {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         if (debug) {
@@ -152,13 +179,13 @@ var RenderVisChart = (0, import_react.memo)(
       }
       return /* @__PURE__ */ import_react.default.createElement("div", null, labels.parseError);
     }
-    const { type, ...chartProps } = chartJson;
-    const ChartComponent = components[type];
+    const { type: chartType, ...chartProps } = chartJson;
+    const ChartComponent = components[chartType];
     if (debug) {
       console.log("GPT-Vis withChartCode get chartJson parse from vis-chart code block", chartJson);
     }
     if (!ChartComponent) {
-      const message = `${labels.unsupportedChart}: "${type}"`;
+      const message = `${labels.unsupportedChart}: "${chartType}"`;
       if (errorRender) {
         return errorRender({
           error: new Error(message),
@@ -202,14 +229,13 @@ var RenderVisChart = (0, import_react.memo)(
           const result = await (0, import_snapdom.snapdom)(chartContainerRef.current, { scale: 2 });
           await result.download({
             format: "png",
-            filename: `chart-${type}-${Date.now()}`
+            filename: `chart-${chartType}-${Date.now()}`
           });
         }
       } catch (error) {
         console.error("Download image failed:", error);
       }
     };
-    const isG6 = G6List.includes(type);
     const handleZoomOut = () => {
       if (chartRef.current && typeof chartRef.current.zoomTo === "function") {
         const currentZoom = chartRef.current.getZoom() || 1;
@@ -224,29 +250,6 @@ 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_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,
@@ -301,7 +304,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_rc_resize_observer.default, { onResize: handleResize }, /* @__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: chartType }, /* @__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,

package/dist/cjs/ChartCodeRender/styles.js

@@ -47,7 +47,7 @@ var import_styled_components = __toESM(require("styled-components"));
 var StyledGPTVis = import_styled_components.default.div`
   min-width: 300px;
   max-width: 100%;
-  height: ${({ type }) => type === "table" ? "auto" : "300px"};
+  height: ${({ type }) => type === "table" || type === "spreadsheet" ? "auto" : "300px"};
   /* height: 300px; */
   overflow: hidden;
   position: relative;

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

@@ -0,0 +1,28 @@
+import '@antv/s2/dist/s2.min.css';
+import React from 'react';
+/**
+ * 主题名
+ */
+type ThemeName = 'default' | 'dark';
+/**
+ * 数据项
+ */
+type DataItem = Record<string, string | number | null | undefined>;
+export type SpreadsheetProps = {
+    /** 原始数据 */
+    data: DataItem[];
+    /** 行头字段（存在时为透视表） */
+    rows?: string[];
+    /** 列头字段/列顺序 */
+    columns?: string[];
+    /** 数值字段（存在时为透视表） */
+    values?: string[];
+    /** 主题名称 */
+    theme?: ThemeName;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+};
+declare const Spreadsheet: (props: SpreadsheetProps) => React.JSX.Element;
+export default Spreadsheet;

package/dist/cjs/Spreadsheet/index.js

@@ -0,0 +1,113 @@
+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/Spreadsheet/index.tsx
+var Spreadsheet_exports = {};
+__export(Spreadsheet_exports, {
+  default: () => Spreadsheet_default
+});
+module.exports = __toCommonJS(Spreadsheet_exports);
+var import_s2 = require("@antv/s2");
+var import_s2_min = require("@antv/s2/dist/s2.min.css");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var SpreadsheetWrapper = import_styled_components.default.div`
+  .spreadsheet-container {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var Spreadsheet = (props) => {
+  const { data, rows, columns, values, theme = "default", width = 600, height = 400 } = props;
+  const containerRef = (0, import_react.useRef)(null);
+  const s2Ref = (0, import_react.useRef)(null);
+  const isPivot = rows && rows.length > 0 || values && values.length > 0;
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current)
+      return;
+    const fields = {};
+    if (isPivot) {
+      if (rows && rows.length > 0) {
+        fields.rows = rows;
+      }
+      if (columns && columns.length > 0) {
+        fields.columns = columns;
+      }
+      if (values && values.length > 0) {
+        fields.values = values;
+      }
+    } else {
+      if (columns && columns.length > 0) {
+        fields.columns = columns;
+      } else if (data.length > 0) {
+        fields.columns = Object.keys(data[0]);
+      }
+    }
+    const dataCfg = {
+      data,
+      fields
+    };
+    const themeCfg = {
+      name: theme
+    };
+    const options = {
+      width,
+      height
+    };
+    if (s2Ref.current) {
+      s2Ref.current.destroy();
+    }
+    const SheetClass = isPivot ? import_s2.PivotSheet : import_s2.TableSheet;
+    const s2 = new SheetClass(containerRef.current, dataCfg, options);
+    s2.setThemeCfg(themeCfg);
+    s2Ref.current = s2;
+    (async () => {
+      await s2.render();
+      if (s2.facet) {
+        const { panelBBox } = s2.facet;
+        const PADDING = 10;
+        const actualWidth = Math.ceil(panelBBox.maxX) + PADDING;
+        const actualHeight = Math.ceil(panelBBox.maxY) + PADDING;
+        if (actualWidth < width || actualHeight < height) {
+          const newWidth = Math.min(actualWidth, width);
+          const newHeight = Math.min(actualHeight, height);
+          s2.changeSheetSize(newWidth, newHeight);
+          await s2.render(false);
+        }
+      }
+    })();
+    return () => {
+      if (s2Ref.current) {
+        s2Ref.current.destroy();
+        s2Ref.current = null;
+      }
+    };
+  }, [data, rows, columns, values, theme, width, height, isPivot]);
+  return /* @__PURE__ */ import_react.default.createElement(SpreadsheetWrapper, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: "spreadsheet-container" }));
+};
+var Spreadsheet_default = Spreadsheet;

package/dist/cjs/export.d.ts

@@ -31,8 +31,9 @@ export { Map, type MapProps } from './export-map';
 import { PinMap, type PinMapProps, HeatMap, type HeatMapProps, PathMap, type PathMapProps } from './export-map';
 /********** NTV **********/
 import { default as Table, type TableProps } from './Table';
+import { default as Spreadsheet, type SpreadsheetProps } from './Spreadsheet';
 export { VisText, type VisTextProps } from './Text';
-export { Area, Bar, Boxplot, Column, DualAxes, FishboneDiagram, FlowDiagram, Funnel, HeatMap, Histogram, IndentedTree, Line, Liquid, MindMap, NetworkGraph, OrganizationChart, PathMap, Pie, PinMap, Radar, Sankey, Scatter, Treemap, Venn, Violin, Waterfall, Table, WordCloud, type AreaProps, type BarProps, type BoxplotProps, type ColumnProps, type DualAxesProps, type FishboneDiagramProps, type FlowDiagramProps, type FunnelProps, type HeatMapProps, type HistogramProps, type IndentedTreeProps, type LineProps, type LiquidProps, type MindMapProps, type NetworkGraphProps, type OrganizationChartProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type SankeyProps, type ScatterProps, type TreemapProps, type VennProps, type ViolinProps, type WaterfallProps, type TableProps, type WordCloudProps, };
+export { Area, Bar, Boxplot, Column, DualAxes, FishboneDiagram, FlowDiagram, Funnel, HeatMap, Histogram, IndentedTree, Line, Liquid, MindMap, NetworkGraph, OrganizationChart, PathMap, Pie, PinMap, Radar, Sankey, Scatter, Treemap, Venn, Violin, Waterfall, Table, Spreadsheet, WordCloud, type AreaProps, type BarProps, type BoxplotProps, type ColumnProps, type DualAxesProps, type FishboneDiagramProps, type FlowDiagramProps, type FunnelProps, type HeatMapProps, type HistogramProps, type IndentedTreeProps, type LineProps, type LiquidProps, type MindMapProps, type NetworkGraphProps, type OrganizationChartProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type SankeyProps, type ScatterProps, type TreemapProps, type VennProps, type ViolinProps, type WaterfallProps, type TableProps, type SpreadsheetProps, type WordCloudProps, };
 export type VisOptionMap = {
     [ChartType.Area]: AreaProps;
     [ChartType.Bar]: BarProps;
@@ -57,6 +58,7 @@ export type VisOptionMap = {
     [ChartType.Sankey]: SankeyProps;
     [ChartType.Scatter]: ScatterProps;
     [ChartType.Table]: TableProps;
+    [ChartType.Spreadsheet]: SpreadsheetProps;
     [ChartType.Treemap]: TreemapProps;
     [ChartType.Venn]: VennProps;
     [ChartType.Violin]: ViolinProps;

package/dist/cjs/export.js

@@ -53,6 +53,7 @@ __export(export_exports, {
   Radar: () => import_Radar.default,
   Sankey: () => import_Sankey.default,
   Scatter: () => import_Scatter.default,
+  Spreadsheet: () => import_Spreadsheet.default,
   Table: () => import_Table.default,
   Treemap: () => import_Treemap.default,
   Venn: () => import_Venn.default,
@@ -90,6 +91,7 @@ var import_IndentedTree = __toESM(require("./IndentedTree"));
 var import_export_map = require("./export-map");
 var import_export_map2 = require("./export-map");
 var import_Table = __toESM(require("./Table"));
+var import_Spreadsheet = __toESM(require("./Spreadsheet"));
 var import_Text = require("./Text");
 var DEFAULT_CHART_COMPONENTS = {
   [import_types.ChartType.Area]: import_Area.default,
@@ -146,6 +148,7 @@ var DEFAULT_CHART_COMPONENTS = {
   Radar,
   Sankey,
   Scatter,
+  Spreadsheet,
   Table,
   Treemap,
   Venn,

package/dist/cjs/types/chart.d.ts

@@ -30,6 +30,7 @@ export declare enum ChartType {
     Violin = "violin",
     Waterfall = "waterfall",
     Table = "table",
+    Spreadsheet = "spreadsheet",
     VisText = "vis-text",
     WordCloud = "word-cloud"
 }

package/dist/cjs/types/chart.js

@@ -50,6 +50,7 @@ var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["Violin"] = "violin";
   ChartType2["Waterfall"] = "waterfall";
   ChartType2["Table"] = "table";
+  ChartType2["Spreadsheet"] = "spreadsheet";
   ChartType2["VisText"] = "vis-text";
   ChartType2["WordCloud"] = "word-cloud";
   return ChartType2;

package/dist/cjs/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.14";
+declare const _default: "0.6.0";
 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.14";
+var version_default = "0.6.0";

package/dist/esm/ChartCodeRender/VisChart.js

@@ -125,14 +125,50 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     activeTab = _useState8[0],
     setActiveTab = _useState8[1];
-  var chartJson;
 
-  // Parse chart JSON with error handling
+  // Parse chart JSON early to determine type for hooks
+  var chartJson = null;
+  var parseError = null;
+  var type;
   try {
+    var _chartJson;
     chartJson = JSON.parse(content);
+    type = (_chartJson = chartJson) === null || _chartJson === void 0 ? void 0 : _chartJson.type;
   } catch (e) {
-    var parseError = e;
+    parseError = e;
+  }
+
+  // Check if chart supports G6 zoom functionality
+  var isG6 = type ? G6List.includes(type) : false;
 
+  // Handle chart resizing on container size change
+  var handleResize = useMemo(function () {
+    var debouncedFn = debounce(function () {
+      var chart = chartRef.current;
+      var container = chartContainerRef.current;
+      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);
+    return debouncedFn;
+  }, [isG6]);
+
+  // Handle parse errors after all hooks are called
+  if (parseError) {
     // Clear any existing timeout and set loading timeout
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -165,10 +201,12 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     // 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];
+
+  // chartJson is guaranteed to be non-null here
+  var _ref2 = chartJson,
+    chartType = _ref2.type,
+    chartProps = _objectWithoutProperties(_ref2, _excluded);
+  var ChartComponent = components[chartType];
 
   // Debug mode: print chart JSON
   if (debug) {
@@ -177,7 +215,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
 
   // Handle unsupported chart types
   if (!ChartComponent) {
-    var message = "".concat(labels.unsupportedChart, ": \"").concat(type, "\"");
+    var message = "".concat(labels.unsupportedChart, ": \"").concat(chartType, "\"");
     if (errorRender) {
       return errorRender({
         error: new Error(message),
@@ -188,8 +226,8 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
   }
 
   // Error fallback component for chart rendering errors
-  var FallbackComponent = function FallbackComponent(_ref2) {
-    var error = _ref2.error;
+  var FallbackComponent = function FallbackComponent(_ref3) {
+    var error = _ref3.error;
     // Set render error state and switch to code tab
     if (!hasRenderError) {
       setHasRenderError(true);
@@ -210,7 +248,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
 
   // Handle copy functionality
   var handleCopy = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -242,13 +280,13 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       }, _callee, null, [[0, 8]]);
     }));
     return function handleCopy() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
   // Handle download functionality
   var handleDownload = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var result;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -267,7 +305,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
             _context2.next = 7;
             return result.download({
               format: 'png',
-              filename: "chart-".concat(type, "-").concat(Date.now())
+              filename: "chart-".concat(chartType, "-").concat(Date.now())
             });
           case 7:
             _context2.next = 12;
@@ -283,13 +321,10 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       }, _callee2, null, [[0, 9]]);
     }));
     return function handleDownload() {
-      return _ref4.apply(this, arguments);
+      return _ref5.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') {
@@ -308,36 +343,6 @@ 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, {
@@ -415,7 +420,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     }
   }, /*#__PURE__*/React.createElement(StyledGPTVis, {
     className: "gpt-vis",
-    type: type
+    type: chartType
   }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: handleResize
   }, /*#__PURE__*/React.createElement(ChartWrapper, {

package/dist/esm/ChartCodeRender/styles.js

@@ -4,7 +4,7 @@ export var StyledGPTVis = styled.div.withConfig({
   componentId: "gpt-vis-c7ef__sc-2dc7ka-0"
 })(["min-width:300px;max-width:100%;height:", ";overflow:hidden;position:relative;padding:16px;"], function (_ref) {
   var type = _ref.type;
-  return type === 'table' ? 'auto' : '300px';
+  return type === 'table' || type === 'spreadsheet' ? 'auto' : '300px';
 });
 export var TextButton = styled.button.withConfig({
   displayName: "TextButton",

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

@@ -0,0 +1,28 @@
+import '@antv/s2/dist/s2.min.css';
+import React from 'react';
+/**
+ * 主题名
+ */
+type ThemeName = 'default' | 'dark';
+/**
+ * 数据项
+ */
+type DataItem = Record<string, string | number | null | undefined>;
+export type SpreadsheetProps = {
+    /** 原始数据 */
+    data: DataItem[];
+    /** 行头字段（存在时为透视表） */
+    rows?: string[];
+    /** 列头字段/列顺序 */
+    columns?: string[];
+    /** 数值字段（存在时为透视表） */
+    values?: string[];
+    /** 主题名称 */
+    theme?: ThemeName;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+};
+declare const Spreadsheet: (props: SpreadsheetProps) => React.JSX.Element;
+export default Spreadsheet;