@antv/gpt-vis 0.5.6 → 0.5.7

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/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/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/Sankey/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type SankeyDatum = {
+    source: string;
+    target: string;
+    value: number;
+};
+export type SankeyProps = BasePlotProps<SankeyDatum> & Theme & Style & {
+    nodeAlign?: 'left' | 'center' | 'right' | 'justify';
+};
+declare const Sankey: (props: SankeyProps) => React.JSX.Element;
+export default Sankey;

package/dist/cjs/Sankey/index.js

@@ -0,0 +1,106 @@
+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/Sankey/index.tsx
+var Sankey_exports = {};
+__export(Sankey_exports, {
+  default: () => Sankey_default
+});
+module.exports = __toCommonJS(Sankey_exports);
+var import_g2 = require("@antv/g2");
+var import_react = __toESM(require("react"));
+var import_theme = require("../theme");
+var defaultConfig = (props) => {
+  const { title, data, theme = "default", nodeAlign = "center", style = {} } = props;
+  const { backgroundColor, palette } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = {};
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
+  return {
+    title,
+    type: "sankey",
+    theme: import_theme.THEME_MAP[theme],
+    layout: {
+      nodeAlign,
+      nodePadding: 0.01
+    },
+    data: {
+      type: "inline",
+      value: data,
+      transform: [
+        {
+          type: "custom",
+          callback: (data2) => ({
+            links: data2
+          })
+        }
+      ]
+    },
+    scale: {
+      ...paletteConfig
+    },
+    style: {
+      labelSpacing: 2,
+      nodeLineWidth: 1,
+      linkFillOpacity: 0.3
+    },
+    viewStyle: {
+      viewFill: "red"
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+  };
+};
+var Sankey = (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 Sankey_default = Sankey;

package/dist/cjs/Scatter/index.js

@@ -71,10 +71,13 @@ var defaultConfig = (props) => {
     data,
     xField,
     yField,
-    tooltip: [
-      { channel: "x", name: axisXTitle || "x" },
-      { channel: "y", name: axisYTitle || "y" }
-    ],
+    tooltip: {
+      title: (d) => (d == null ? void 0 : d.group) ? d.group : false,
+      items: [
+        { channel: "x", name: axisXTitle || "x" },
+        { channel: "y", name: axisYTitle || "y" }
+      ]
+    },
     legend: hasGroupField ? {} : false,
     encode,
     scale: {

package/dist/cjs/Treemap/index.js

@@ -87,6 +87,7 @@ var Treemap = (props) => {
   });
   const { data, ...others } = config;
   const transformData = (0, import_react.useMemo)(() => transform(data), [data]);
+  console.log("treemap config:", config, props);
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Treemap, { ...others, data: transformData });
 };
 var Treemap_default = Treemap;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type VennDatum = {
+    /**
+     * Label for the venn chart segment.
+     * This should be a string that describes the segment.
+     * For example, "A", "B", or "A ∩ B" for intersections.
+     * It is used to identify the segment in the chart.
+     */
+    label?: string;
+    /**
+     * Value for the venn chart segment.
+     * This should be a number that represents the size or count of the segment.
+     * For example, if the segment represents a set of items, this could be the number of items in that set.
+     * It is used to determine the size of the segment in the chart.
+     * For intersections, this value should represent the count of items that belong to the intersection of sets.
+     * For example, if "A ∩ B" represents the intersection of sets A and B, this value should be the count of items that are in both sets.
+     */
+    value: number;
+    /**
+     * Sets that the segment belongs to.
+     * This should be an array of strings representing the sets that the segment is part of.
+     * For example, if the segment represents items that belong to both set A and set B, this could be ['A', 'B'].
+     * It is used to determine how the segment is displayed in the venn chart.
+     * For intersections, this array should include the sets that contribute to the intersection.
+     * For example, if "A ∩ B" represents the intersection of sets A and B, this array should be ['A', 'B'].
+     */
+    sets: string[] | number[];
+};
+export type VennProps = BasePlotProps<VennDatum> & Theme & Style;
+declare const Venn: (props: VennProps) => React.JSX.Element;
+export default Venn;