@antv/gpt-vis 0.5.4 → 0.5.6

package/dist/cjs/ConfigProvider/hooks/useConfig.js

@@ -63,9 +63,10 @@ function usePlotConfig(name, defaultConfig, props) {
   const mergedProps = { ...globalConfig, ...props };
   const transformedProps = (0, import_plot.transform2ADCProps)(mergedProps);
   const _defaultConfig = typeof defaultConfig === "function" ? defaultConfig(transformedProps) : defaultConfig;
+  const { style, ...restTransformedProps } = transformedProps;
   const config = {
     ..._defaultConfig,
-    ...transformedProps
+    ...restTransformedProps
   };
   return config;
 }

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

@@ -4,7 +4,7 @@ export type DualAxesProps = Partial<DualAxesConfig> & {
     categories: string[];
     axisXTitle?: string;
     series: DualAxesSeriesItem[];
-    legendTypeList: string[];
+    legendTypeList?: string[];
 };
 export type DualAxesSeriesItem = {
     type: string;

package/dist/cjs/DualAxes/index.js

@@ -35,9 +35,20 @@ module.exports = __toCommonJS(DualAxes_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 import_util = require("./util");
 var defaultConfig = (props) => {
-  const { xField = "category", axisXTitle, legendTypeList } = props;
+  const { xField = "category", axisXTitle, legendTypeList, style = {} } = props;
+  const { palette, backgroundColor } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { color: void 0 };
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     xField,
     axis: {
@@ -48,23 +59,24 @@ var defaultConfig = (props) => {
     legend: {
       color: {
         itemMarker: (v, i) => {
-          return legendTypeList[i];
+          return legendTypeList == null ? void 0 : legendTypeList[i];
         }
       }
     },
     scale: {
-      color: {
-        palette: "category10"
-      }
-    }
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var DualAxes = (props) => {
-  const { categories, series, ...others } = props;
+  const { categories, series, theme = "default", ...others } = props;
+  const themeConfig = import_theme.THEME_MAP[theme];
   const transformData = (0, import_react.useMemo)(() => (0, import_util.transform)(series, categories), [props]);
   const config = (0, import_hooks.usePlotConfig)("DualAxes", defaultConfig, {
     ...others,
-    ...transformData
+    ...transformData,
+    theme: themeConfig
   });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.DualAxes, { ...config });
 };

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

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

package/dist/cjs/FishboneDiagram/index.js

@@ -35,18 +35,32 @@ module.exports = __toCommonJS(FishboneDiagram_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 = {
-  autoFit: "view",
-  autoResize: true,
-  zoomRange: [0.1, 5],
-  zoom: 1,
-  behaviors: ["drag-canvas"]
+var getDefaultConfig = (props) => {
+  const { theme = "default" } = props;
+  return {
+    autoFit: "view",
+    autoResize: true,
+    zoomRange: [0.1, 5],
+    zoom: 1,
+    behaviors: ["drag-canvas"],
+    transforms: (prev) => [
+      {
+        ...prev.find((transform) => transform.key === "assign-color-by-branch") || {},
+        ...import_theme.G6THEME_MAP[theme]
+      }
+    ]
+  };
 };
 var FishboneDiagram = (props) => {
   const { data: propsData, ...restProps } = props;
   const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
-  const config = (0, import_hooks.useGraphConfig)("FishboneDiagram", defaultConfig, restProps);
+  const config = (0, import_hooks.useGraphConfig)(
+    "FishboneDiagram",
+    getDefaultConfig(props),
+    restProps
+  );
   return /* @__PURE__ */ import_react.default.createElement(import_graphs.Fishbone, { data, ...config });
 };
 var FishboneDiagram_default = FishboneDiagram;

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

@@ -1,6 +1,7 @@
-import type { HistogramConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
-export type HistogramProps = BasePlotProps<number> & Partial<HistogramConfig>;
+import type { BasePlotProps, Style, Theme } from '../types';
+export type HistogramProps = BasePlotProps<number> & Theme & Style & {
+    binNumber: number;
+};
 declare const Histogram: (props: HistogramProps) => React.JSX.Element;
 export default Histogram;

package/dist/cjs/Histogram/index.js

@@ -35,16 +35,45 @@ module.exports = __toCommonJS(Histogram_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 { binField = (d) => d, binNumber } = props;
+  const { binField = (d) => d, binNumber, style = {} } = props;
+  const { backgroundColor, palette } = style;
+  const hasPalette = !!(palette == null ? void 0 : palette[0]);
+  let paletteConfig = { color: void 0 };
+  if (hasPalette) {
+    paletteConfig = {
+      color: {
+        range: palette
+      }
+    };
+  }
   return {
     binField,
     binNumber,
-    style: { inset: 0.5 }
+    style: { inset: 0.5, minHeight: 1, columnWidthRatio: 1 },
+    legend: false,
+    // @ts-ignore
+    encode: {
+      x: (d) => d,
+      y: "count",
+      color: () => "all"
+    },
+    scale: {
+      y: {
+        nice: true
+      },
+      ...paletteConfig
+    },
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : { viewStyle: void 0 }
   };
 };
 var Histogram = (props) => {
-  const config = (0, import_hooks.usePlotConfig)("Histogram", defaultConfig, props);
+  const themeConfig = import_theme.THEME_MAP[props.theme ?? "default"];
+  const config = (0, import_hooks.usePlotConfig)("Histogram", defaultConfig, {
+    ...props,
+    theme: themeConfig
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_plots.Histogram, { ...config });
 };
 var Histogram_default = Histogram;

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

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

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

@@ -1,11 +1,10 @@
-import type { ScatterConfig } from '@ant-design/plots';
 import React from 'react';
-import type { BasePlotProps } from '../types';
+import type { BasePlotProps, Style, Theme } from '../types';
 type ScatterDataItem = {
     x: number;
     y: number;
     [key: string]: string | number;
 };
-export type ScatterProps = BasePlotProps<ScatterDataItem> & Partial<ScatterConfig>;
+export type ScatterProps = BasePlotProps<ScatterDataItem> & Theme & Style;
 declare const Scatter: (props: ScatterProps) => React.JSX.Element;
 export default Scatter;