@antv/gpt-vis 1.0.0-beta.2 → 1.0.1

package/dist/cjs/vis/flow-diagram/index.js

@@ -53,12 +53,13 @@ function ensureBehaviorRegistered() {
 function escapeHtml(str = "") {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function createNodeHTML(d, color, selectedBorderColor = "#000") {
+function createNodeHTML(d, color, selectedBorderColor = "#000", theme = "default") {
   var _a, _b, _c;
   const text = escapeHtml(((_a = d.data) == null ? void 0 : _a.text) || "");
   const isHovered = (_b = d.states) == null ? void 0 : _b.includes("active");
   const isSelected = (_c = d.states) == null ? void 0 : _c.includes("selected");
   const nodeColor = isHovered ? ACTIVE_COLOR : color;
+  const borderRadius = theme === "academy" ? "0px" : "8px";
   return `
     <div
       data-node-key="${escapeHtml(String(d.id))}"
@@ -69,7 +70,7 @@ function createNodeHTML(d, color, selectedBorderColor = "#000") {
         padding: 16px;
         background: ${nodeColor};
         border: 3px solid ${isSelected ? selectedBorderColor : nodeColor};
-        border-radius: 16px;
+        border-radius: ${borderRadius};
         color: #fff;
         font-size: 16px;
         font-weight: 600;
@@ -90,7 +91,7 @@ function createNodeHTML(d, color, selectedBorderColor = "#000") {
     </div>
   `;
 }
-function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorderColor) {
+function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorderColor, theme = "default") {
   const nodes = graph.getNodeData();
   const updatedNodes = nodes.map((node) => {
     const dom = container.querySelector(`[data-node-key="${CSS.escape(String(node.id))}"]`);
@@ -107,7 +108,8 @@ function measureAndUpdateNodeSizes(graph, container, nodeColorMap, selectedBorde
         innerHTML: createNodeHTML(
           node,
           nodeColorMap.get(String(node.id)) || "#1783FF",
-          selectedBorderColor
+          selectedBorderColor,
+          theme
         )
       }
     };
@@ -187,21 +189,35 @@ var FlowDiagram = (options) => {
       container: containerEl,
       width,
       height,
-      theme,
+      theme: (0, import_theme.getTheme)(theme),
       data: { nodes: g6Nodes, edges: g6Edges },
       autoFit: "view",
       autoResize: true,
-      padding: 20,
-      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : [],
+      padding: title ? [46, 20, 20, 20] : 20,
+      plugins: title ? [
+        {
+          key: "title",
+          type: "title",
+          title,
+          titleFill: isDark ? "#e0e6ed" : "#000",
+          titleFontFamily: "sans-serif"
+        }
+      ] : [],
       node: {
         type: "html",
         style: (d) => {
+          var _a;
           const color = nodeColorMap.get(String(d.id)) || colors[0];
+          const size = ((_a = d.style) == null ? void 0 : _a.size) || [
+            DEFAULT_NODE_WIDTH,
+            DEFAULT_NODE_HEIGHT
+          ];
+          const height2 = size[1];
           return {
-            size: [DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT],
+            size,
             dx: -DEFAULT_NODE_WIDTH / 2,
-            dy: -DEFAULT_NODE_HEIGHT / 2,
-            innerHTML: createNodeHTML(d, color, selectedBorder),
+            dy: -height2 / 2,
+            innerHTML: createNodeHTML(d, color, selectedBorder, theme),
             ports: [{ placement: "top" }, { placement: "bottom" }]
           };
         },
@@ -248,7 +264,7 @@ var FlowDiagram = (options) => {
     graph.render();
     graph.once("afterrender", () => {
       if (graph) {
-        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder);
+        measureAndUpdateNodeSizes(graph, containerEl, nodeColorMap, selectedBorder, theme);
       }
     });
   };

package/dist/cjs/vis/funnel/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
  */
@@ -12,8 +12,10 @@ export type FunnelDataItem = {
 export interface FunnelConfig {
     type?: 'funnel';
     data: FunnelDataItem[];
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
+    locale?: string;
+    conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;
         palette?: string[];

package/dist/cjs/vis/funnel/index.js

@@ -23,32 +23,103 @@ __export(funnel_exports, {
 });
 module.exports = __toCommonJS(funnel_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
+var FUNNEL_LABELS = {
+  "en-US": {
+    baseline: "Baseline",
+    conversionRate: "Conversion Rate",
+    currentValue: "Current value",
+    dropOff: "Drop-off from previous",
+    overallConversionRate: "Overall conversion",
+    stageConversion: "Stage conversion"
+  },
+  "zh-CN": {
+    baseline: "基准",
+    conversionRate: "转化率",
+    currentValue: "当前值",
+    dropOff: "较上一步流失",
+    overallConversionRate: "整体转化率",
+    stageConversion: "阶段转化率"
+  }
+};
+var formatConversionRate = (start, end) => {
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start === 0)
+    return "—";
+  return `${(end / start * 100).toFixed(1)}%`;
+};
+var formatMetricLabel = (label, value, locale) => locale === "zh-CN" ? `${label}：${value}` : `${label}: ${value}`;
 var Funnel = (options) => {
-  const { container, width, height, theme: chartTheme = "default" } = options;
+  const { container, width, height, locale, theme: chartTheme = "default" } = options;
   let chart = null;
   const render = (config) => {
-    var _a, _b, _c, _d, _e, _f;
-    const { data = [], theme = chartTheme, title, style = {} } = config;
+    const {
+      data = [],
+      theme = chartTheme,
+      title,
+      locale: renderLocale = locale,
+      conversionRateLabel,
+      style = {}
+    } = config;
+    const chartLocale = (0, import_util.resolveChartLocale)(renderLocale);
+    const labels = FUNNEL_LABELS[chartLocale];
+    const numberFormatter = new Intl.NumberFormat(chartLocale);
+    const stageConversionRateLabel = conversionRateLabel ?? labels.conversionRate;
+    const overallConversionRateLabel = conversionRateLabel ?? labels.overallConversionRate;
     if (chart) {
       chart.destroy();
     }
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
-    const conversionRate = (start, end) => `${(end / start * 100).toFixed(2)} %`;
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
+    const tokens = (0, import_util.getChartVisualTokens)(theme);
+    const formatValue = (value) => Number.isFinite(value) ? numberFormatter.format(value) : "—";
+    const metricsByCategory = new Map(
+      data.map((item, index) => {
+        const previous = data[index - 1];
+        return [
+          item.category,
+          {
+            conversion: previous ? formatConversionRate(previous.value, item.value) : labels.baseline,
+            dropOff: previous ? Math.max(0, previous.value - item.value) : null
+          }
+        ];
+      })
+    );
+    const funnelTooltip = {
+      title: "category",
+      items: [
+        (d) => ({
+          name: labels.currentValue,
+          value: formatValue(d.value)
+        }),
+        (d) => {
+          var _a;
+          return {
+            name: labels.stageConversion,
+            value: ((_a = metricsByCategory.get(d.category)) == null ? void 0 : _a.conversion) ?? "—"
+          };
+        },
+        (d) => {
+          var _a, _b;
+          return {
+            name: labels.dropOff,
+            value: ((_a = metricsByCategory.get(d.category)) == null ? void 0 : _a.dropOff) === null ? "—" : formatValue(((_b = metricsByCategory.get(d.category)) == null ? void 0 : _b.dropOff) ?? Number.NaN)
+          };
+        }
+      ]
+    };
     chart = new import_g2.Chart({
       container,
       width,
       height,
       autoFit: true,
-      paddingLeft: 40,
-      paddingRight: 68
+      paddingLeft: 56,
+      paddingRight: 118
     });
     const chartOptions = {
       animate: false,
       type: "view",
       data,
-      title: title ?? "",
+      title: title || "",
       children: [
         {
           type: "interval",
@@ -66,109 +137,117 @@ var Funnel = (options) => {
             x: { padding: 0 },
             color: { range: colors }
           },
-          legend: {
-            color: {
-              position: "top",
-              layout: {
-                justifyContent: "center"
-              }
-            }
-          },
+          legend: false,
+          tooltip: funnelTooltip,
           labels: [
-            // Inside label showing category and value
             {
               text: (d) => `${d.category}
-${d.value}`,
+${formatValue(d.value)}`,
               position: "inside",
-              transform: [{ type: "contrastReverse" }]
-            },
-            // Connecting line for conversion rate
-            {
-              text: (d, i) => i !== 0 ? "———" : "",
+              transform: [{ type: "contrastReverse" }, { type: "overflowStroke" }],
               style: {
-                "font-size": "1px",
-                color: "#666",
-                "letter-spacing": "0px"
-              },
-              position: "top-right",
-              fill: "#666",
-              dx: 35,
-              dy: -8
+                fontFamily: import_util.CHART_FONT_FAMILY,
+                fontSize: 12,
+                fontWeight: 500,
+                lineHeight: 17
+              }
             },
-            // Conversion rate label text
             {
-              text: (d, i) => i !== 0 ? "转化率" : "",
+              text: (_d, index) => index === 0 ? "" : "———",
               position: "top-right",
-              textAlign: "left",
-              textBaseline: "middle",
-              fill: "#666",
-              dx: 40
+              fill: tokens.textSecondary,
+              fillOpacity: 0.72,
+              dx: 18,
+              dy: -6,
+              style: {
+                fontFamily: import_util.CHART_FONT_FAMILY,
+                fontSize: 8,
+                fontWeight: 400,
+                letterSpacing: -2
+              }
             },
-            // Conversion rate percentage
             {
-              text: (d, i, dataArray) => i !== 0 ? conversionRate(dataArray[i - 1].value, dataArray[i].value) : "",
+              text: (_d, index, items) => index === 0 ? "" : formatMetricLabel(
+                stageConversionRateLabel,
+                formatConversionRate(items[index - 1].value, items[index].value),
+                chartLocale
+              ),
               position: "top-right",
               textAlign: "left",
               textBaseline: "middle",
-              dx: 80
-            }
-          ],
-          viewStyle: {
-            viewFill: backgroundColor
-          }
-        },
-        // Overall conversion rate connector
-        {
-          type: "connector",
-          data: [
-            {
-              startX: (_a = data[0]) == null ? void 0 : _a.category,
-              startY: (_b = data[data.length - 1]) == null ? void 0 : _b.category,
-              endX: 0,
-              endY: (((_c = data[0]) == null ? void 0 : _c.value) - ((_d = data[data.length - 1]) == null ? void 0 : _d.value)) / 2
+              fill: tokens.textPrimary,
+              dx: 44,
+              style: {
+                fontFamily: import_util.CHART_FONT_FAMILY,
+                fontSize: 11,
+                fontWeight: 500
+              }
             }
           ],
-          encode: { x: "startX", x1: "startY", y: "endX", y1: "endY" },
           style: {
-            stroke: "#666",
-            markerEnd: false,
-            connectLength1: -12,
-            offset2: -20,
-            connectorStroke: "#0649f2",
-            lineDash: [12, 2]
+            fillOpacity: 0.94,
+            stroke: tokens.separator,
+            lineWidth: 2,
+            ...theme === "academy" ? {} : { radius: 4 }
           },
-          labels: [
-            {
-              text: "转化率",
-              position: "left",
-              textAlign: "start",
-              textBaseline: "middle",
-              fill: "#666",
-              dx: 10
-            },
-            {
-              text: conversionRate((_e = data[0]) == null ? void 0 : _e.value, (_f = data[data.length - 1]) == null ? void 0 : _f.value),
-              position: "left",
-              textAlign: "start",
-              dx: 50,
-              fill: "#000"
+          state: {
+            active: {
+              fillOpacity: 1,
+              stroke: tokens.separator,
+              lineWidth: 3
             }
-          ]
-        }
+          },
+          viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0
+        },
+        ...data.length > 1 ? [
+          {
+            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" },
+            tooltip: false,
+            style: {
+              stroke: tokens.axisLine,
+              strokeOpacity: theme === "academy" ? 1 : 0.82,
+              lineWidth: theme === "academy" ? 1 : 0.75,
+              markerEnd: false,
+              connectLength1: -12
+            },
+            labels: [
+              {
+                text: formatMetricLabel(
+                  overallConversionRateLabel,
+                  formatConversionRate(data[0].value, data[data.length - 1].value),
+                  chartLocale
+                ),
+                position: "left",
+                textAlign: "start",
+                textBaseline: "middle",
+                fill: tokens.textPrimary,
+                dx: 8,
+                style: {
+                  fontFamily: import_util.CHART_FONT_FAMILY,
+                  fontSize: 11,
+                  fontWeight: 500
+                }
+              }
+            ]
+          }
+        ] : []
       ],
       axis: false,
-      tooltip: {
-        items: [
-          (d) => ({
-            name: d.category,
-            value: d.value
-          })
-        ]
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: true,
+        elementHighlight: true
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();

package/dist/cjs/vis/histogram/index.js

@@ -41,7 +41,6 @@ var Histogram = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
       width,
@@ -83,9 +82,7 @@ var Histogram = (options) => {
       tooltip: {
         items: [{ channel: "y", name: "频数" }]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);

package/dist/cjs/vis/indented-tree/index.js

@@ -281,15 +281,17 @@ var IndentedTree = (options) => {
       height,
       autoFit: "view",
       autoResize: true,
-      padding: 20,
+      theme: (0, import_theme.getTheme)(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: graphData,
       node: {
         type: GPT_VIS_INDENTED_NODE,
         style: {
           size: (d) => [measureTextWidth(String(d.id ?? ""), 12) + 6, NODE_HEIGHT],
           labelBackground: (datum) => datum.id === rootId,
-          labelBackgroundRadius: 0,
+          labelBackgroundRadius: theme === "academy" ? 0 : 4,
           labelBackgroundFill: palette[0] ?? "#1783FF",
+          labelPadding: (datum) => datum.id === rootId ? [2, 8] : 0,
           labelFill: (datum) => datum.id === rootId ? "#fff" : isDark ? "#d0d0d0" : "#666",
           labelText: (d) => {
             var _a;
@@ -352,7 +354,15 @@ var IndentedTree = (options) => {
           enable: (event) => event.targetType === "node" && event.target.id !== rootId
         }
       ],
-      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+      plugins: title ? [
+        {
+          key: "title",
+          type: "title",
+          title,
+          titleFill: isDark ? "#e0e6ed" : "#000",
+          titleFontFamily: "sans-serif"
+        }
+      ] : []
     });
     graph.render();
   };

package/dist/cjs/vis/line/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * LineDataItem is the type for each data item in the line chart.
  */
@@ -16,7 +16,7 @@ export interface LineConfig {
     title?: string;
     axisXTitle?: string;
     axisYTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

package/dist/cjs/vis/line/index.js

@@ -23,20 +23,40 @@ __export(line_exports, {
 });
 module.exports = __toCommonJS(line_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Line = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
+  let cleanupCrosshairAxisLabels = null;
   const render = (config) => {
     var _a;
     const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
-    const { lineWidth = 2 } = style;
+    const { lineWidth = import_util.CHART_STYLE_DEFAULTS.lineWidth } = style;
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
+    const tooltip = {
+      items: [
+        (d) => ({
+          name: hasGroupField ? d.group : axisYTitle || d.time,
+          value: d.value
+        })
+      ]
+    };
+    const lineAnimation = (0, import_util.getChartAnimation)(hasRendered, "pathIn");
+    const pointAnimation = (0, import_util.getChartAnimation)(hasRendered, "fadeIn");
+    const cartesianAxisOptions = {
+      axisXTitle,
+      axisYTitle,
+      xLabels: data.map(({ time }) => time),
+      chartWidth: width
+    };
     chart = new import_g2.Chart({
       container,
       width,
@@ -51,48 +71,68 @@ var Line = (options) => {
     } else {
       encode = { x: "time", y: "value" };
     }
+    const children = [
+      {
+        type: "line",
+        tooltip,
+        style: {
+          lineWidth,
+          lineCap: "round",
+          lineJoin: "round",
+          ...!hasGroupField ? { stroke: colors[0] } : {}
+        },
+        animate: lineAnimation
+      }
+    ];
+    const showPoints = data.length <= (hasGroupField ? 36 : 24);
+    if (showPoints) {
+      children.push({
+        type: "point",
+        encode: {
+          x: "time",
+          y: "value",
+          shape: "point",
+          size: import_util.CHART_STYLE_DEFAULTS.pointSize,
+          ...hasGroupField ? { color: "group" } : {}
+        },
+        animate: pointAnimation,
+        tooltip: false,
+        style: {
+          lineWidth: import_util.CHART_STYLE_DEFAULTS.pointLineWidth,
+          stroke: backgroundColor,
+          ...!hasGroupField ? { fill: colors[0] } : {}
+        }
+      });
+    }
     const chartOptions = {
-      animate: false,
       type: "view",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
-      children: [
-        {
-          type: "line",
-          style: {
-            lineWidth,
-            ...!hasGroupField && style.palette ? { stroke: colors[0] } : {}
-          }
-        }
-      ],
+      children,
       scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle || false },
-        y: { title: axisYTitle || false }
-      },
-      legend: hasGroupField ? { color: { position: "top" } } : false,
-      tooltip: {
-        items: [
-          (d) => ({
-            name: axisYTitle || d.time,
-            value: d.value
-          })
-        ]
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+      ...(0, import_util.getCartesianLayout)(cartesianAxisOptions),
+      axis: (0, import_util.getCartesianAxis)(cartesianAxisOptions),
+      legend: (0, import_util.getColorLegend)(hasGroupField),
+      interaction: {
+        tooltip: (0, import_util.getSharedTooltipInteraction)({ crosshairs: true })
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
+    cleanupCrosshairAxisLabels = (0, import_util.bindCrosshairAxisLabels)(chart, theme);
     chart.render();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

package/dist/cjs/vis/liquid/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * LiquidConfig defines the configuration for rendering the liquid chart.
  */
@@ -6,7 +6,7 @@ export interface LiquidConfig {
     type?: 'liquid';
     percent: number;
     shape?: 'rect' | 'circle' | 'pin' | 'triangle';
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;