@antv/gpt-vis 0.5.6 → 0.5.8

package/README.ja-JP.md

@@ -13,7 +13,7 @@ GPTs、生成AI、およびLLMプロジェクトのためのコンポーネン
 <p align="center">
   <a href="https://gpt-vis.antv.vision" target="_blank">ドキュメント</a> •
   <a href="/knowledges" target="_blank">知識</a> •
-  <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">エージェントデモ</a> •
+  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">エージェントデモ</a> •
   <a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
 </p>
 </div>
@@ -48,16 +48,16 @@ const markdownContent = `
 {
   "type": "line",
   "data": [
-    { "time":2013,"value":59.3 },
-    { "time":2014,"value":64.4 },
-    { "time":2015,"value":68.9 },
-    { "time":2016,"value":74.4 },
-    { "time":2017,"value":82.7 },
-    { "time":2018,"value":91.9 },
-    { "time":2019,"value":99.1 },
-    { "time":2020,"value":101.6 },
-    { "time":2021,"value":114.4 },
-    { "time":2022,"value":121 }
+    { "time": "2013", "value": 59.3 },
+    { "time": "2014", "value": 64.4 },
+    { "time": "2015", "value": 68.9 },
+    { "time": "2016", "value": 74.4 },
+    { "time": "2017", "value": 82.7 },
+    { "time": "2018", "value": 91.9 },
+    { "time": "2019", "value": 99.1 },
+    { "time": "2020", "value": 101.6 },
+    { "time": "2021", "value": 114.4 },
+    { "time": "2022", "value": 121 }
   ]
 }
 \`\`\`

package/README.md

@@ -13,7 +13,7 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
 <p align="center">
   <a href="https://gpt-vis.antv.vision" target="_blank">Document</a> •
   <a href="/knowledges" target="_blank">Knowledge</a> •
-  <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">Agent Demo</a> •
+  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">Agent Demo</a> •
   <a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
 </p>
 </div>
@@ -50,16 +50,16 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
 {
   "type": "line",
   "data": [
-    { "time":2013,"value":59.3 },
-    { "time":2014,"value":64.4 },
-    { "time":2015,"value":68.9 },
-    { "time":2016,"value":74.4 },
-    { "time":2017,"value":82.7 },
-    { "time":2018,"value":91.9 },
-    { "time":2019,"value":99.1 },
-    { "time":2020,"value":101.6 },
-    { "time":2021,"value":114.4 },
-    { "time":2022,"value":121 }
+    { "time": "2013", "value": 59.3 },
+    { "time": "2014", "value": 64.4 },
+    { "time": "2015", "value": 68.9 },
+    { "time": "2016", "value": 74.4 },
+    { "time": "2017", "value": 82.7 },
+    { "time": "2018", "value": 91.9 },
+    { "time": "2019", "value": 99.1 },
+    { "time": "2020", "value": 101.6 },
+    { "time": "2021", "value": 114.4 },
+    { "time": "2022", "value": 121 }
   ]
 }
 \`\`\`

package/README.zh-CN.md

@@ -13,7 +13,7 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
 <p align="center">
   <a href="https://gpt-vis.antv.vision" target="_blank">文档</a> •
   <a href="/knowledges" target="_blank">知识库</a> •
-  <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">体验 Agent</a> •
+  <a href="https://www.tbox.cn/share/202504APmv6c00373739?platform=WebService" target="_blank">体验 Agent</a> •
   <a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
 </p>
 </div>
@@ -48,16 +48,16 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
 {
   "type": "line",
   "data": [
-    { "time":2013,"value":59.3 },
-    { "time":2014,"value":64.4 },
-    { "time":2015,"value":68.9 },
-    { "time":2016,"value":74.4 },
-    { "time":2017,"value":82.7 },
-    { "time":2018,"value":91.9 },
-    { "time":2019,"value":99.1 },
-    { "time":2020,"value":101.6 },
-    { "time":2021,"value":114.4 },
-    { "time":2022,"value":121 }
+    { "time": "2013", "value": 59.3 },
+    { "time": "2014", "value": 64.4 },
+    { "time": "2015", "value": 68.9 },
+    { "time": "2016", "value": 74.4 },
+    { "time": "2017", "value": 82.7 },
+    { "time": "2018", "value": 91.9 },
+    { "time": "2019", "value": 99.1 },
+    { "time": "2020", "value": 101.6 },
+    { "time": "2021", "value": 114.4 },
+    { "time": "2022", "value": 121 }
   ]
 }
 \`\`\`

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

@@ -6,6 +6,9 @@ type BarDataItem = {
     value: number;
     [key: string]: string | number;
 };
-export type BarProps = BasePlotProps<BarDataItem> & Partial<BarConfig> & Theme & Style;
+export type BarProps = BasePlotProps<BarDataItem> & Partial<BarConfig> & Theme & Style & {
+    group?: boolean;
+    stack?: boolean;
+};
 declare const Bar: (props: BarProps) => React.JSX.Element;
 export default Bar;

package/dist/cjs/Bar/index.js

@@ -82,14 +82,19 @@ var defaultConfig = (props) => {
       },
       ...paletteConfig
     },
-    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 },
+    legend: hasGroupField ? {} : false
   };
 };
 var Bar = (props) => {
   const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const { data, group = false, stack = false } = props;
+  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
   const config = (0, import_hooks.usePlotConfig)("Bar", defaultConfig, {
     ...props,
-    theme: themeConfig
+    theme: themeConfig,
+    group: hasGroupField && group,
+    stack: hasGroupField && stack
   });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Bar, { ...config });
 };

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

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

package/dist/cjs/Boxplot/index.js

@@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Boxplot/index.tsx
+var Boxplot_exports = {};
+__export(Boxplot_exports, {
+  default: () => Boxplot_default
+});
+module.exports = __toCommonJS(Boxplot_exports);
+var import_plots = require("@ant-design/plots");
+var import_react = __toESM(require("react"));
+var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
+var defaultConfig = (props) => {
+  var _a;
+  const { data, style = {}, axisYTitle, axisXTitle, xField = "category", yField = "value" } = props;
+  const { backgroundColor, palette } = style;
+  const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
+  let paletteConfig = { color: void 0 };
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  const colorField = hasGroupField ? "group" : "category";
+  const seriesField = hasGroupField ? "group" : "category";
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
+  return {
+    data,
+    boxType: "boxplot",
+    xField,
+    yField,
+    colorField,
+    seriesField,
+    axis: {
+      y: {
+        title: axisYTitle || false
+      },
+      x: {
+        title: axisXTitle || false
+      }
+    },
+    scale: {
+      x: { paddingInner: 0.6, paddingOuter: 0.3 },
+      series: { paddingInner: 0.3, paddingOuter: 0.1 },
+      y: { nice: true },
+      ...paletteConfig
+    },
+    style: { stroke: "black" },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+  };
+};
+var Boxplot = (props) => {
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Boxplot", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import_plots.Box, { ...config });
+};
+var Boxplot_default = Boxplot;

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -274,7 +274,7 @@ var RenderVisChart = (0, import_react.memo)(
           }
         }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis" }, /* @__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_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
         ChartComponent,
         {
           ...chartProps,

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export declare const StyledGPTVis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface StyledGPTVisProps {
+    type?: string;
+}
+export declare const StyledGPTVis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledGPTVisProps>> & string;
 export declare const TextButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ChartWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -13,3 +16,4 @@ export declare const StyledTabButton: import("styled-components/dist/types").ISt
     active?: boolean | undefined;
 }>> & string;
 export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/cjs/ChartCodeRender/styles.js

@@ -47,7 +47,8 @@ var import_styled_components = __toESM(require("styled-components"));
 var StyledGPTVis = import_styled_components.default.div`
   min-width: 300px;
   max-width: 100%;
-  height: 300px;
+  height: ${({ type }) => type === "table" ? "auto" : "300px"};
+  /* height: 300px; */
   overflow: hidden;
   position: relative;
   padding: 16px;
@@ -103,6 +104,12 @@ var TextButton = import_styled_components.default.button`
 var ChartWrapper = import_styled_components.default.div`
   width: 100%;
   height: 100%;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   h5 {
     font-size: 12px;

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

@@ -5,6 +5,9 @@ export type ColumnDataItem = {
     value: number;
     [key: string]: string | number;
 };
-export type ColumnProps = BasePlotProps<ColumnDataItem> & Theme & Style;
+export type ColumnProps = BasePlotProps<ColumnDataItem> & Theme & Style & {
+    group?: boolean;
+    stack?: boolean;
+};
 declare const Column: (props: ColumnProps) => React.JSX.Element;
 export default Column;

package/dist/cjs/Column/index.js

@@ -82,14 +82,20 @@ var defaultConfig = (props) => {
       },
       ...paletteConfig
     },
-    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 },
+    legend: hasGroupField ? {} : false,
+    group: hasGroupField
   };
 };
 var Column = (props) => {
   const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const { data, group = false, stack = false } = props;
+  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
   const config = (0, import_hooks.usePlotConfig)("Column", defaultConfig, {
     ...props,
-    theme: themeConfig
+    theme: themeConfig,
+    group: hasGroupField && group,
+    stack: hasGroupField && stack
   });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Column, { ...config });
 };

package/dist/cjs/DualAxes/util.js

@@ -24,7 +24,10 @@ __export(util_exports, {
 module.exports = __toCommonJS(util_exports);
 var import_types = require("../types");
 function transform(series, categories) {
-  const newChildren = series.map((item, index) => {
+  const newChildren = series.sort((a, b) => {
+    const ORDER = ["column", "line"];
+    return ORDER.indexOf(a.type) - ORDER.indexOf(b.type);
+  }).map((item, index) => {
     const { type, axisYTitle, ...others } = item;
     const defaultYField = axisYTitle || `value_${index + 1}`;
     const baseConfig = {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type FunnelDatum = {
+    category: string;
+    value: number;
+};
+export type FunnelProps = BasePlotProps<FunnelDatum> & Theme & Style & {
+    width?: number;
+    height?: number;
+};
+declare const Funnel: (props: FunnelProps) => React.JSX.Element;
+export default Funnel;

package/dist/cjs/Funnel/index.js

@@ -0,0 +1,173 @@
+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/Funnel/index.tsx
+var Funnel_exports = {};
+__export(Funnel_exports, {
+  default: () => Funnel_default
+});
+module.exports = __toCommonJS(Funnel_exports);
+var import_g2 = require("@antv/g2");
+var import_react = __toESM(require("react"));
+var import_theme = require("../theme");
+var defaultConfig = (props) => {
+  const { data, title, theme = "default", style = {} } = props;
+  const { backgroundColor, palette = [] } = style;
+  const r = (start, end) => `${(end / start * 100).toFixed(2)} %`;
+  return {
+    type: "view",
+    data,
+    theme: import_theme.THEME_MAP[theme],
+    title,
+    padding: 40,
+    insetRight: 28,
+    children: [
+      {
+        type: "interval",
+        data,
+        encode: { x: "category", y: "value", color: "category", shape: "funnel" },
+        transform: [{ type: "symmetryY" }],
+        scale: {
+          x: { padding: 0 },
+          ...(palette == null ? void 0 : palette[0]) ? {
+            color: {
+              range: palette
+            }
+          } : {}
+        },
+        coordinate: { transform: [{ type: "transpose" }] },
+        legend: {
+          color: {
+            position: "top",
+            layout: {
+              justifyContent: "center"
+            }
+          }
+        },
+        labels: [
+          {
+            text: (d) => `${d.category}
+${d.value}`,
+            position: "inside",
+            transform: [{ type: "contrastReverse" }]
+          },
+          {
+            text: (d, i) => i !== 0 ? "———" : "",
+            style: {
+              "font-size": "1px",
+              color: "#666",
+              "letter-spacing": "0px"
+            },
+            position: "top-right",
+            fill: "#666",
+            dx: 35,
+            dy: -8
+          },
+          {
+            text: (d, i) => i !== 0 ? "转化率" : "",
+            position: "top-right",
+            textAlign: "left",
+            textBaseline: "middle",
+            fill: "#666",
+            dx: 40
+          },
+          {
+            text: (d, i, data2) => i !== 0 ? r(data2[i - 1].value, data2[i].value) : "",
+            position: "top-right",
+            textAlign: "left",
+            textBaseline: "middle",
+            dx: 80
+          }
+        ],
+        ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+      },
+      {
+        type: "connector",
+        data: [
+          {
+            startX: data[0].category,
+            startY: data[data.length - 1].category,
+            endX: 0,
+            endY: (data[0].value - data[data.length - 1].value) / 2
+          }
+        ],
+        encode: { x: "startX", x1: "startY", y: "endX", y1: "endY" },
+        style: {
+          stroke: "#666",
+          markerEnd: false,
+          connectLength1: -12,
+          offset2: -20,
+          connectorStroke: "#0649f2",
+          lineDash: [12, 2]
+        },
+        labels: [
+          {
+            text: "转化率",
+            position: "left",
+            textAlign: "start",
+            textBaseline: "middle",
+            fill: "#666",
+            dx: 10
+          },
+          {
+            text: r(data[0].value, data[data.length - 1].value),
+            position: "left",
+            textAlign: "start",
+            dx: 50,
+            fill: "#000"
+          }
+        ]
+      }
+    ],
+    axis: false,
+    animate: false
+  };
+};
+var Funnel = (props) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current)
+      return;
+    const chart = new import_g2.Chart({
+      container: containerRef.current,
+      autoFit: true,
+      padding: "auto"
+    });
+    const config = defaultConfig(props);
+    chart.options(config);
+    chart.render();
+    chartRef.current = chart;
+    return () => {
+      chart.destroy();
+      chartRef.current = null;
+    };
+  }, [props]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef });
+};
+var Funnel_default = Funnel;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Style, Theme } from '../types';
+export type LiquidProps = Theme & Style & {
+    percent: number;
+    shape?: 'rect' | 'circle' | 'pin' | 'triangle';
+    title?: string;
+    width?: number;
+    height?: number;
+};
+declare const Liquid: (props: LiquidProps) => React.JSX.Element;
+export default Liquid;

package/dist/cjs/Liquid/index.js

@@ -0,0 +1,85 @@
+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/Liquid/index.tsx
+var Liquid_exports = {};
+__export(Liquid_exports, {
+  default: () => Liquid_default
+});
+module.exports = __toCommonJS(Liquid_exports);
+var import_plots = require("@ant-design/plots");
+var import_react = __toESM(require("react"));
+var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
+var defaultConfig = (props) => {
+  const { percent, shape = "circle", style = {}, width = 600, height = 400 } = props;
+  const { backgroundColor, palette } = style;
+  const inferFontSize = Math.min(width, height) / 10;
+  const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { fill: void 0, outlineStroke: void 0 };
+  if (hasPalette) {
+    paletteConfig = { fill: palette[0], outlineStroke: palette[0] };
+  }
+  return {
+    percent,
+    style: {
+      shape,
+      contentFontSize: fontSize,
+      contentFill: "#000",
+      contentStroke: "#fff",
+      contentLineWidth: 2,
+      outlineBorder: 4,
+      outlineDistance: 4,
+      waveLength: 128,
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+    interaction: { tooltip: false },
+    animate: false
+  };
+};
+var Liquid = (props) => {
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const containerRef = (0, import_react.useRef)(null);
+  const [size, setSize] = (0, import_react.useState)({ width: 0, height: 0 });
+  const config = (0, import_hooks.usePlotConfig)("Liquid", defaultConfig, {
+    ...props,
+    theme: themeConfig,
+    width: size.width,
+    height: size.height
+  });
+  (0, import_react.useEffect)(() => {
+    if (containerRef.current) {
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      setSize({ width: offsetWidth, height: offsetHeight });
+    }
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, style: { width: "100%", height: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_plots.Liquid, { ...config }));
+};
+var Liquid_default = Liquid;

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

@@ -16,6 +16,8 @@ type PieDataItem = {
  * the props for the Pie
  * @param data pie data
  */
-export type PieProps = BasePlotProps<PieDataItem> & Partial<PieConfig> & Theme;
+export type PieProps = BasePlotProps<PieDataItem> & Partial<PieConfig> & Theme & {
+    innerRadius?: number;
+};
 declare const Pie: (props: PieProps) => React.JSX.Element;
 export default Pie;

package/dist/cjs/Pie/index.js

@@ -62,6 +62,7 @@ var defaultConfig = (props) => {
     label: {
       position: "outside",
       // text: angleField,
+      transform: [{ type: "overlapHide" }],
       text: (d) => `${d[colorField]}: ${(0, import_lodash.round)(d[angleField] / sumValue * 100, 1)}%`
     },
     legend: {
@@ -85,7 +86,8 @@ var Pie = (props) => {
   const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
   const config = (0, import_hooks.usePlotConfig)("Pie", defaultConfig, {
     ...props,
-    theme: themeConfig
+    theme: themeConfig,
+    innerRadius: Math.max(0, Math.min(1, props.innerRadius || 0))
   });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Pie, { ...config });
 };