@antv/gpt-vis 0.5.5 → 0.5.7

package/dist/cjs/IndentedTree/index.js

@@ -35,32 +35,44 @@ module.exports = __toCommonJS(IndentedTree_exports);
 var import_graphs = require("@ant-design/graphs");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var import_graph = require("../utils/graph");
-var defaultConfig = {
-  type: "linear",
-  autoFit: "view",
-  autoResize: true,
-  zoomRange: [0.1, 5],
-  zoom: 1,
-  node: { animation: { update: false, translate: false } },
-  edge: { animation: { update: false, translate: false } },
-  transforms: (prev) => [
-    ...prev.filter(
-      (transform) => transform.type !== "collapse-expand-react-node"
-    ),
-    {
-      ...prev.find(
-        (transform) => transform.type === "collapse-expand-react-node"
+var getDefaultConfig = (props) => {
+  const { theme = "default" } = props;
+  return {
+    type: "linear",
+    autoFit: "view",
+    autoResize: true,
+    zoomRange: [0.1, 5],
+    zoom: 1,
+    node: { animation: { update: false, translate: false } },
+    edge: { animation: { update: false, translate: false } },
+    transforms: (prev) => [
+      ...prev.filter(
+        (transform) => transform.type !== "collapse-expand-react-node"
       ),
-      enable: true
-    }
-  ],
-  behaviors: ["drag-canvas"]
+      {
+        ...prev.find(
+          (transform) => transform.type === "collapse-expand-react-node"
+        ),
+        enable: true
+      },
+      {
+        ...prev.find((transform) => transform.key === "assign-color-by-branch") || {},
+        ...import_theme.G6THEME_MAP[theme]
+      }
+    ],
+    behaviors: ["drag-canvas"]
+  };
 };
 var IndentedTree = (props) => {
   const { data: propsData, ...restProps } = props;
   const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
-  const config = (0, import_hooks.useGraphConfig)("IndentedTree", defaultConfig, restProps);
+  const config = (0, import_hooks.useGraphConfig)(
+    "IndentedTree",
+    getDefaultConfig(props),
+    restProps
+  );
   return /* @__PURE__ */ import_react.default.createElement(import_graphs.IndentedTree, { data, ...config });
 };
 var IndentedTree_default = IndentedTree;

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

@@ -1,11 +1,10 @@
-import type { LineConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Style, Theme } from '../types';
 export type LineDataItem = {
     time: string | number;
     value: number;
     [key: string]: string | number;
 };
-export type LineProps = BasePlotProps<LineDataItem> & Partial<LineConfig>;
+export type LineProps = BasePlotProps<LineDataItem> & Theme & Style;
 declare const Line: (props: LineProps) => React.JSX.Element;
 export default Line;

package/dist/cjs/Line/index.js

@@ -36,25 +36,58 @@ var import_plots = require("@ant-design/plots");
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var defaultConfig = (props) => {
-  const { data, xField = "time", yField = "value" } = props;
+  const { data, xField = "time", yField = "value", style = {} } = props;
+  const { palette, lineWidth, backgroundColor } = style;
   const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
   const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let encode = {};
+  let paletteConfig = { color: void 0 };
+  if (hasGroupField) {
+    encode = { x: xField, y: yField, color: "group" };
+  } else {
+    encode = { x: xField, y: yField, color: () => "all" };
+  }
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     xField,
     yField,
     colorField: hasGroupField ? "group" : void 0,
+    encode,
+    legend: hasGroupField ? {} : false,
     tooltip: (d) => {
       const tooltipName = axisYTitle || d[xField];
       return {
         name: tooltipName,
         value: d[yField]
       };
-    }
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    style: {
+      lineWidth: lineWidth || 2
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var Line = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Line", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Line", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Line, { ...config });
 };
 var Line_default = Line;

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

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import type { TreeGraphProps } from '../types';
 export interface MindMapProps extends TreeGraphProps {
+    theme?: 'default' | 'academy';
 }
 declare const MindMap: FC<MindMapProps>;
 export default MindMap;

package/dist/cjs/MindMap/index.js

@@ -35,33 +35,41 @@ module.exports = __toCommonJS(MindMap_exports);
 var import_graphs = require("@ant-design/graphs");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var import_graph = require("../utils/graph");
-var defaultConfig = {
-  type: "boxed",
-  autoFit: "view",
-  autoResize: true,
-  padding: 2,
-  zoomRange: [0.1, 5],
-  zoom: 1,
-  node: { animation: { translate: false, update: false } },
-  edge: { animation: { translate: false, update: false } },
-  transforms: (prev) => [
-    ...prev.filter(
-      (transform) => transform.type !== "collapse-expand-react-node"
-    ),
-    {
-      ...prev.find(
-        (transform) => transform.type === "collapse-expand-react-node"
+var getDefaultConfig = (props) => {
+  const { theme = "default" } = props;
+  return {
+    type: "boxed",
+    autoFit: "view",
+    autoResize: true,
+    padding: 2,
+    zoomRange: [0.1, 5],
+    zoom: 1,
+    node: { animation: { translate: false, update: false } },
+    edge: { animation: { translate: false, update: false } },
+    transforms: (prev) => [
+      ...prev.filter(
+        (transform) => transform.type !== "collapse-expand-react-node"
       ),
-      enable: true
-    }
-  ],
-  behaviors: ["drag-canvas"]
+      {
+        ...prev.find(
+          (transform) => transform.type === "collapse-expand-react-node"
+        ),
+        enable: true
+      },
+      {
+        ...prev.find((transform) => transform.key === "assign-color-by-branch") || {},
+        ...import_theme.G6THEME_MAP[theme]
+      }
+    ],
+    behaviors: ["drag-canvas"]
+  };
 };
 var MindMap = (props) => {
   const { data: propsData, ...restProps } = props;
   const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
-  const config = (0, import_hooks.useGraphConfig)("MindMap", defaultConfig, restProps);
+  const config = (0, import_hooks.useGraphConfig)("MindMap", getDefaultConfig(props), restProps);
   return /* @__PURE__ */ import_react.default.createElement(import_graphs.MindMap, { data, ...config });
 };
 var MindMap_default = MindMap;

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

@@ -1,6 +1,6 @@
 import type { PieConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Theme } from '../types';
 /**
  * PieDataItem is the type for each data item in the pie chart.
  * It includes the name of the sector and its corresponding value.
@@ -16,6 +16,6 @@ type PieDataItem = {
  * the props for the Pie
  * @param data pie data
  */
-export type PieProps = BasePlotProps<PieDataItem> & Partial<PieConfig>;
+export type PieProps = BasePlotProps<PieDataItem> & Partial<PieConfig> & Theme;
 declare const Pie: (props: PieProps) => React.JSX.Element;
 export default Pie;

package/dist/cjs/Pie/index.js

@@ -36,9 +36,20 @@ var import_plots = require("@ant-design/plots");
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
 var defaultConfig = (props) => {
-  const { data = [], angleField = "value", colorField = "category" } = props;
+  const { data = [], angleField = "value", colorField = "category", style = {} } = props;
   const sumValue = (0, import_lodash.sumBy)(data, angleField);
+  const { backgroundColor, palette } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { color: void 0 };
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     angleField,
     colorField,
@@ -63,11 +74,19 @@ var defaultConfig = (props) => {
       elementSelect: {
         single: true
       }
-    }
+    },
+    scale: {
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var Pie = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Pie", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Pie", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Pie, { ...config });
 };
 var Pie_default = Pie;

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

@@ -1,11 +1,13 @@
-import type { RadarConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Style, Theme } from '../types';
 export type RadarDataItem = {
     name: string;
     value: number;
     [key: string]: string | number;
 };
-export type RadarProps = BasePlotProps<RadarDataItem> & Partial<RadarConfig>;
+export type RadarProps = BasePlotProps<RadarDataItem> & Theme & Style & {
+    width?: number;
+    height?: number;
+};
 declare const Radar: (props: RadarProps) => React.JSX.Element;
 export default Radar;

package/dist/cjs/Radar/index.js

@@ -32,53 +32,122 @@ __export(Radar_exports, {
   default: () => Radar_default
 });
 module.exports = __toCommonJS(Radar_exports);
-var import_plots = require("@ant-design/plots");
-var import_lodash = require("lodash");
+var import_g2 = require("@antv/g2");
 var import_react = __toESM(require("react"));
-var import_hooks = require("../ConfigProvider/hooks");
+var import_theme = require("../theme");
+var import_plot = require("../utils/plot");
+function transformRadartoParallel(data) {
+  if (!data || data.length === 0) {
+    return [];
+  }
+  const groups = (0, import_plot.groupBy)(data, (d) => d.group || "");
+  return Object.entries(groups).map(([group, values]) => {
+    const paralleValues = (values || []).reduce((acc, { name, value }) => {
+      acc[name] = value;
+      return acc;
+    }, {});
+    return {
+      ...paralleValues,
+      group
+    };
+  });
+}
 var defaultConfig = (props) => {
-  const { data, xField = "name", yField = "value" } = props;
-  const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
+  const { data, title, theme = "default", style = {} } = props;
+  const { backgroundColor, palette = [], lineWidth = 2 } = style;
+  const parallelData = transformRadartoParallel(data);
+  const position = Object.keys(parallelData[0] || {}).filter((key) => key !== "group");
   return {
-    xField,
-    yField,
-    colorField: hasGroupField ? "group" : void 0,
-    area: {
-      style: {
-        fillOpacity: 0.5
-      }
+    title,
+    autoFit: true,
+    theme: import_theme.THEME_MAP[theme],
+    inset: 18,
+    type: "line",
+    data: parallelData,
+    coordinate: { type: "radar" },
+    encode: {
+      position,
+      color: "group"
+    },
+    style: {
+      lineWidth,
+      lineCap: "round",
+      lineJoin: "round"
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+    legend: {
+      color: parallelData.length > 1 ? { itemMarker: "point" } : false
     },
     scale: {
-      x: {
-        padding: 0.6,
-        align: 0
-      },
-      y: {
-        nice: true
-      }
+      ...Object.fromEntries(
+        Array.from({ length: position.length }, (_, i) => [
+          `position${i === 0 ? "" : i}`,
+          {
+            domainMin: 0,
+            nice: true
+          }
+        ])
+      ),
+      ...(palette == null ? void 0 : palette[0]) ? {
+        color: {
+          range: palette
+        }
+      } : {}
     },
-    axis: {
-      x: {
-        title: false,
-        grid: true
-      },
-      y: {
-        zIndex: 1,
-        title: false,
-        gridConnect: "line",
-        gridLineWidth: 1
+    axis: Object.fromEntries(
+      Array.from({ length: position.length }, (_, i) => {
+        return [
+          `position${i === 0 ? "" : i}`,
+          {
+            zIndex: 1,
+            titleFontSize: 10,
+            titleSpacing: 8,
+            label: true,
+            labelFill: theme === "dark" ? "#fff" : "#000",
+            labelOpacity: 0.45,
+            labelFontSize: 10,
+            line: true,
+            lineFill: "#000",
+            lineStrokeOpacity: 0.25,
+            tickFilter: (_2, idx) => {
+              return !(i !== 0 && idx === 0);
+            },
+            tickCount: 4,
+            gridStrokeOpacity: 0.45,
+            gridStroke: theme === "dark" ? "#fff" : "#000",
+            gridLineWidth: 1,
+            gridLineDash: [4, 4]
+          }
+        ];
+      })
+    ),
+    interaction: {
+      tooltip: {
+        series: false
       }
-    },
-    tooltip: (d) => {
-      return {
-        name: d[xField],
-        value: d[yField]
-      };
     }
   };
 };
 var Radar = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Radar", defaultConfig, props);
-  return /* @__PURE__ */ import_react.default.createElement(import_plots.Radar, { ...config });
+  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 Radar_default = Radar;

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;