@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/cjs/vis/dual-axes/index.js

@@ -23,13 +23,13 @@ __export(dual_axes_exports, {
 });
 module.exports = __toCommonJS(dual_axes_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
+var getSeriesField = (index) => `value_${index + 1}`;
 function transformData(series, categories) {
   return categories.map((category, index) => {
     const dataPoint = { category };
-    series.forEach((s, i) => {
-      const yField = s.axisYTitle || `value_${i + 1}`;
-      dataPoint[yField] = s.data[index];
+    series.forEach((item, seriesIndex) => {
+      dataPoint[getSeriesField(seriesIndex)] = item.data[index];
     });
     return dataPoint;
   });
@@ -37,14 +37,19 @@ function transformData(series, categories) {
 var DualAxes = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const render = (config) => {
     const { categories, series, theme = chartTheme, title, axisXTitle, style = {} } = config;
     if (chart) {
       chart.destroy();
     }
     const { startAtZero = false } = style;
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const requestedColors = style.palette ? (0, import_util.normalizePalette)(style.palette, theme) : [];
+    const defaultColors = (0, import_util.normalizePalette)(void 0, theme);
+    const colors = [
+      ...requestedColors,
+      ...defaultColors.filter((color) => !requestedColors.includes(color))
+    ];
     const data = transformData(series, categories);
     chart = new import_g2.Chart({
       container,
@@ -52,13 +57,34 @@ var DualAxes = (options) => {
       height,
       autoFit: true
     });
-    const sortedSeries = [...series].sort((a, b) => {
+    const sortedSeries = series.map((item, originalIndex) => ({ item, originalIndex })).sort((a, b) => {
       const order = ["column", "line"];
-      return order.indexOf(a.type) - order.indexOf(b.type);
+      return order.indexOf(a.item.type) - order.indexOf(b.item.type);
     });
-    const children = sortedSeries.map((item, index) => {
-      const yField = item.axisYTitle || `value_${index + 1}`;
-      const color = colors[index % colors.length];
+    const seriesMeta = sortedSeries.map(({ item, originalIndex }, index) => ({
+      item,
+      yField: getSeriesField(originalIndex),
+      displayName: item.axisYTitle || getSeriesField(originalIndex),
+      color: colors[index % colors.length]
+    }));
+    const seriesByField = new Map(
+      seriesMeta.map(({ item, yField, displayName }) => [yField, { type: item.type, displayName }])
+    );
+    const cartesianAxisOptions = {
+      axisXTitle,
+      xLabels: categories,
+      chartWidth: width
+    };
+    const cartesianAxis = (0, import_util.getCartesianAxis)(cartesianAxisOptions);
+    const children = seriesMeta.map(({ item, yField, displayName, color }) => {
+      const tooltip = {
+        items: [
+          (datum) => ({
+            name: displayName,
+            value: datum[yField]
+          })
+        ]
+      };
       if (item.type === "column") {
         return {
           type: "interval",
@@ -68,16 +94,24 @@ var DualAxes = (options) => {
             color: () => yField
           },
           scale: {
-            y: { nice: true, zero: startAtZero },
-            color: { range: [color] }
+            y: { nice: true, zero: startAtZero }
           },
+          tooltip,
           axis: {
-            y: { title: item.axisYTitle || "" }
+            y: {
+              ...cartesianAxis.y,
+              title: item.axisYTitle || "",
+              titleFill: color,
+              titleFontWeight: 500
+            }
           },
           style: {
-            columnWidthRatio: 0.8,
+            fill: color,
+            fillOpacity: 0.86,
+            columnWidthRatio: import_util.CHART_STYLE_DEFAULTS.intervalWidthRatio,
             ...theme !== "academy" ? { radiusTopLeft: 4, radiusTopRight: 4 } : {}
-          }
+          },
+          animate: (0, import_util.getChartAnimation)(hasRendered, "growInY")
         };
       } else {
         return {
@@ -89,52 +123,73 @@ var DualAxes = (options) => {
             color: () => yField
           },
           scale: {
-            y: { independent: true, zero: startAtZero },
-            color: { range: [color] }
+            y: { independent: true, zero: startAtZero }
           },
+          tooltip,
           axis: {
-            y: { position: "right", title: item.axisYTitle || "" }
+            y: {
+              ...cartesianAxis.y,
+              position: "right",
+              title: item.axisYTitle || "",
+              titleFill: color,
+              titleFontWeight: 500,
+              grid: false
+            }
           },
           style: {
-            lineWidth: 2
-          }
+            stroke: color,
+            lineWidth: import_util.CHART_STYLE_DEFAULTS.lineWidth,
+            lineCap: "round",
+            lineJoin: "round"
+          },
+          state: (0, import_util.getLineHighlightState)(import_util.CHART_STYLE_DEFAULTS.lineWidth),
+          animate: (0, import_util.getChartAnimation)(hasRendered, "pathIn")
         };
       }
     });
     const chartOptions = {
-      animate: false,
       type: "view",
       data,
-      title: title ?? "",
+      title: title || "",
       children,
-      axis: {
-        x: { title: axisXTitle || false }
-      },
+      ...(0, import_util.getCartesianLayout)(cartesianAxisOptions),
+      axis: { x: cartesianAxis.x },
       scale: {
-        y: { nice: true }
+        y: { nice: true },
+        color: {
+          domain: seriesMeta.map(({ yField }) => yField),
+          range: seriesMeta.map(({ color }) => color)
+        }
       },
       legend: {
         color: {
-          position: "top",
-          itemMarker: (v, index) => {
-            const seriesItem = series[index];
-            return (seriesItem == null ? void 0 : seriesItem.type) === "line" ? "smooth" : "rect";
+          labelFormatter: (value) => {
+            var _a;
+            return ((_a = seriesByField.get(value)) == null ? void 0 : _a.displayName) || value;
+          },
+          itemMarker: (value) => {
+            var _a;
+            return ((_a = seriesByField.get(value)) == null ? void 0 : _a.type) === "line" ? "smooth" : "rect";
           }
         }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: (0, import_util.getSharedTooltipInteraction)({ crosshairs: true }),
+        ...(0, import_util.getSeriesHighlightByColorInteraction)()
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

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/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[];