@antv/gpt-vis 1.0.0 → 1.0.2

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,9 @@ export type FunnelDataItem = {
 export interface FunnelConfig {
     type?: 'funnel';
     data: FunnelDataItem[];
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
+    conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -23,32 +23,97 @@ __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, conversionRateLabel, style = {} } = config;
+    const chartLocale = (0, import_util.resolveChartLocale)(locale);
+    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 isInverted = data.length > 1 && data[0].value < data[data.length - 1].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 +131,121 @@ 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 ? "转化率" : "",
-              position: "top-right",
-              textAlign: "left",
-              textBaseline: "middle",
-              fill: "#666",
-              dx: 40
+              text: (_d, index, items) => (isInverted ? index < items.length - 1 : index > 0) ? "———" : "",
+              position: isInverted ? "bottom-right" : "top-right",
+              fill: tokens.textSecondary,
+              fillOpacity: 0.72,
+              dx: 8,
+              dy: isInverted ? 6 : -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) : "",
-              position: "top-right",
+              text: (_d, index, items) => {
+                const from = isInverted ? items[index] : items[index - 1];
+                const to = isInverted ? items[index + 1] : items[index];
+                return from && to ? formatMetricLabel(
+                  stageConversionRateLabel,
+                  formatConversionRate(from.value, to.value),
+                  chartLocale
+                ) : "";
+              },
+              position: isInverted ? "bottom-right" : "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: 26,
+              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: isInverted ? data[data.length - 1].category : data[0].category,
+                startY: isInverted ? data[0].category : data[data.length - 1].category,
+                endX: 0,
+                endY: Math.abs(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/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;

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

@@ -23,7 +23,7 @@ __export(liquid_exports, {
 });
 module.exports = __toCommonJS(liquid_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var DEFAULT_WIDTH = 640;
 var DEFAULT_HEIGHT = 480;
 var Liquid = (options) => {
@@ -34,10 +34,18 @@ var Liquid = (options) => {
     if (chart) {
       chart.destroy();
     }
-    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 tokens = (0, import_util.getChartVisualTokens)(theme);
+    const normalizedPercent = Number.isFinite(percent) ? Math.max(0, Math.min(1, percent)) : 0;
     const inferFontSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT) / 10;
     const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
+    const chartSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT);
+    const waveLength = Math.min(Math.max(chartSize * 0.4, 96), 192);
+    const formattedPercent = `${Number((normalizedPercent * 100).toFixed(1))}%`;
+    const liquidColor = colors[0];
+    const isAcademy = theme === "academy";
+    const outlineShadowColor = theme === "dark" ? "rgba(0, 0, 0, 0.32)" : "rgba(15, 23, 42, 0.10)";
     chart = new import_g2.Chart({
       container,
       width,
@@ -47,25 +55,42 @@ var Liquid = (options) => {
     const chartOptions = {
       animate: false,
       type: "liquid",
-      data: percent,
-      title: title ?? "",
+      data: normalizedPercent,
+      title: title || "",
+      inset: 20,
       style: {
         shape,
+        contentText: formattedPercent,
         contentFontSize: fontSize,
-        contentFill: "#000",
-        contentStroke: "#fff",
-        contentLineWidth: 2,
-        outlineBorder: 4,
-        outlineDistance: 4,
-        waveLength: 128,
+        contentFill: tokens.textPrimary,
+        contentStroke: backgroundColor,
+        contentStrokeOpacity: 0.92,
+        contentLineWidth: theme === "dark" ? 3 : 2.5,
+        contentFontFamily: import_util.CHART_FONT_FAMILY,
+        contentFontWeight: 600,
+        contentLetterSpacing: -0.8,
+        contentFontVariantNumeric: "tabular-nums",
+        contentPaintOrder: "stroke",
+        backgroundFill: liquidColor,
+        backgroundFillOpacity: theme === "dark" ? 0.14 : isAcademy ? 0.06 : 0.08,
+        backgroundStroke: liquidColor,
+        backgroundStrokeOpacity: theme === "dark" ? 0.3 : 0.22,
+        backgroundLineWidth: 1,
+        outlineBorder: isAcademy ? 1.5 : 2,
+        outlineDistance: 0,
+        outlineStrokeOpacity: isAcademy ? 0.9 : 0.72,
+        outlineShadowColor: isAcademy ? "transparent" : outlineShadowColor,
+        outlineShadowBlur: isAcademy ? 0 : 6,
+        outlineShadowOffsetY: isAcademy ? 0 : 2,
+        waveLength,
+        waveCount: 2,
+        fillOpacity: isAcademy ? 0.9 : 0.88,
         contentPointerEvents: "none",
         // Use palette color if provided
-        ...colors[0] ? { fill: colors[0], outlineStroke: colors[0] } : {}
+        ...liquidColor ? { fill: liquidColor, outlineStroke: liquidColor } : {}
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
-      theme: (0, import_theme.getThemeObject)(theme),
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme),
       tooltip: false
     };
     chart.options(chartOptions);

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

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * PieDataItem is the type for each data item in the pie chart.
  */
@@ -13,7 +13,7 @@ export interface PieConfig {
     type?: 'pie';
     data: PieDataItem[];
     innerRadius?: number;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;