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

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/mindmap/index.js

@@ -111,12 +111,20 @@ var Mindmap = (options) => {
       height,
       autoFit: "view",
       autoResize: true,
-      padding: 20,
+      padding: title ? [46, 20, 20, 20] : 20,
       zoomRange: [0.1, 5],
       zoom: 1,
-      theme: chartTheme,
+      theme: (0, import_theme.getTheme)(theme),
       data: graphData,
-      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"
+        }
+      ] : [],
       node: {
         type: "rect",
         animation: { translate: false, update: false },
@@ -134,7 +142,7 @@ var Mindmap = (options) => {
           const base = {
             size: [nodeWidth, nodeHeight],
             dx,
-            radius: 8,
+            radius: theme === "academy" ? 0 : 8,
             labelText: label,
             labelPlacement: "center",
             labelFontSize: fontSize,

package/dist/cjs/vis/network-graph/index.js

@@ -119,7 +119,8 @@ var NetworkGraph = (options) => {
       height,
       autoFit: "view",
       autoResize: true,
-      padding: 24,
+      theme: (0, import_theme.getTheme)(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: {
         nodes: nodeData,
         edges: edgeData
@@ -132,7 +133,15 @@ var NetworkGraph = (options) => {
         }
       },
       behaviors: ["drag-canvas", "drag-element", "click-select"],
-      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/organization-chart/index.js

@@ -83,7 +83,8 @@ var OrganizationChart = (options) => {
       height,
       autoFit: "view",
       autoResize: true,
-      padding: 24,
+      theme: (0, import_theme.getTheme)(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
       data: { nodes: nodeData, edges: edgeData },
       plugins: [
         {
@@ -119,7 +120,15 @@ var OrganizationChart = (options) => {
             }
           }
         },
-        ...title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+        ...title ? [
+          {
+            key: "title",
+            type: "title",
+            title,
+            titleFill: isDark ? "#e0e6ed" : "#000",
+            titleFontFamily: "sans-serif"
+          }
+        ] : []
       ],
       node: {
         type: "rect",
@@ -132,7 +141,7 @@ var OrganizationChart = (options) => {
           fill: (d) => colors[d.data.depth % colors.length],
           stroke: isDark ? "#555" : "#e8ebf0",
           lineWidth: 1,
-          radius: 8,
+          radius: theme === "academy" ? 0 : 8,
           // Use official label wrapping/ellipsis for BOTH name & description.
           // 1 line name + up to 2 lines description => total maxLines = 3.
           labelText: (d) => d.data.description ? `${d.data.name}

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;

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

@@ -23,18 +23,19 @@ __export(pie_exports, {
 });
 module.exports = __toCommonJS(pie_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Pie = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const PERCENTAGE_PRECISION_MULTIPLIER = 1e4;
   const render = (config) => {
     const { data = [], innerRadius = 0, theme = chartTheme, title, style = {} } = config;
     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 tokens = (0, import_util.getChartVisualTokens)(theme);
     const sumValue = data.reduce((sum, item) => sum + item.value, 0);
     chart = new import_g2.Chart({
       container,
@@ -43,10 +44,10 @@ var Pie = (options) => {
       autoFit: true
     });
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "waveIn"),
       type: "interval",
       data,
-      title: title ?? "",
+      title: title || "",
       encode: {
         y: "value",
         color: "category"
@@ -56,14 +57,13 @@ var Pie = (options) => {
       scale: {
         color: { range: colors }
       },
-      legend: {
-        color: { position: "top" }
-      },
-      labels: [
+      legend: (0, import_util.getColorLegend)(true),
+      labels: data.length > 8 ? [] : [
         {
           text: (d) => {
-            const percentage = Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER;
-            return `${d.category}: ${percentage}%`;
+            const percentage = sumValue ? Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER : 0;
+            const formattedPercentage = Number(percentage.toFixed(1)).toString();
+            return `${d.category}: ${formattedPercentage}%`;
           },
           position: "outside",
           transform: [{ type: "overlapHide" }]
@@ -78,24 +78,34 @@ var Pie = (options) => {
         ]
       },
       interaction: {
+        tooltip: true,
+        elementHighlight: true,
+        elementHoverScale: { shadow: false },
         elementSelect: { single: true }
       },
-      style: {
-        fillOpacity: 0.8
+      state: {
+        active: { fillOpacity: 1, lineWidth: 3 },
+        inactive: { fillOpacity: 0.3 },
+        selected: { fillOpacity: 1, lineWidth: 3 }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      style: {
+        fillOpacity: 1,
+        stroke: tokens.separator,
+        lineWidth: 2
       },
-      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/radar/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * RadarDataItem is the type for each data item in the radar chart.
  */
@@ -15,7 +15,7 @@ export interface RadarConfig {
     data: RadarDataItem[];
     title?: string;
     align?: boolean;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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

@@ -23,7 +23,7 @@ __export(radar_exports, {
 });
 module.exports = __toCommonJS(radar_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 function transformRadarToParallel(data) {
   if (!data || data.length === 0) {
     return [];
@@ -55,11 +55,12 @@ var Radar = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const { lineWidth = 2 } = style;
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const { lineWidth = import_util.CHART_STYLE_DEFAULTS.lineWidth } = style;
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
     const parallelData = transformRadarToParallel(data);
     const position = Object.keys(parallelData[0] || {}).filter((key) => key !== "group");
+    const hasMultipleSeries = parallelData.length > 1;
+    const legend = (0, import_util.getColorLegend)(hasMultipleSeries);
     chart = new import_g2.Chart({
       container,
       width,
@@ -70,9 +71,9 @@ var Radar = (options) => {
       animate: false,
       type: "line",
       data: parallelData,
-      title: title ?? "",
+      title: title || "",
       coordinate: { type: "radar" },
-      inset: 18,
+      inset: 24,
       encode: {
         position,
         color: "group"
@@ -96,42 +97,33 @@ var Radar = (options) => {
         Array.from({ length: position.length }, (_, i) => [
           `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,
+            label: align ? i === 0 : true,
             tickFilter: (_2, idx) => {
               return !(i !== 0 && idx === 0);
             },
-            tickCount: 4,
-            gridStrokeOpacity: 0.45,
-            gridStroke: theme === "dark" ? "#fff" : "#000",
-            gridLineWidth: 1,
-            gridLineDash: [4, 4]
+            grid: i === 0
           }
         ])
       ),
       style: {
         lineWidth,
         lineCap: "round",
-        lineJoin: "round"
+        lineJoin: "round",
+        strokeOpacity: import_util.CHART_STYLE_DEFAULTS.lineOpacity
       },
-      legend: parallelData.length > 1 ? { color: { position: "top", itemMarker: "point" } } : false,
-      interaction: {
-        tooltip: {
-          series: false
+      state: hasMultipleSeries ? (0, import_util.getLineHighlightState)(lineWidth) : void 0,
+      legend: legend === false ? false : {
+        color: {
+          ...legend.color,
+          itemMarker: "smooth"
         }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: true,
+        ...hasMultipleSeries ? (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();

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

@@ -33,7 +33,6 @@ var Sankey = (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,
@@ -67,9 +66,7 @@ var Sankey = (options) => {
         nodeLineWidth: 1,
         linkFillOpacity: 0.3
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       legend: false,
       tooltip: false

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

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

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

@@ -23,18 +23,19 @@ __export(scatter_exports, {
 });
 module.exports = __toCommonJS(scatter_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Scatter = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const render = (config) => {
     var _a;
-    const { data = [], theme = chartTheme, title, style = {} } = config;
+    const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
     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 hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
     chart = new import_g2.Chart({
       container,
@@ -44,45 +45,71 @@ var Scatter = (options) => {
     });
     let encode = {};
     const scaleConfig = {
-      y: { nice: true }
+      y: { nice: true },
+      x: { nice: true }
     };
     if (hasGroupField) {
-      encode = { x: "x", y: "y", color: "group" };
+      encode = {
+        x: "x",
+        y: "y",
+        color: "group",
+        shape: "point",
+        size: import_util.CHART_STYLE_DEFAULTS.scatterPointSize
+      };
       scaleConfig.color = { range: colors };
     } else {
-      encode = { x: "x", y: "y", color: () => "all" };
+      encode = {
+        x: "x",
+        y: "y",
+        shape: "point",
+        size: import_util.CHART_STYLE_DEFAULTS.scatterPointSize
+      };
     }
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "fadeIn"),
       type: "point",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
-      legend: hasGroupField ? { color: { position: "top" } } : false,
+      legend: (0, import_util.getColorLegend)(hasGroupField),
       scale: scaleConfig,
+      axis: (0, import_util.getCartesianAxis)({
+        axisXTitle,
+        axisYTitle
+      }),
       style: {
-        lineWidth: 1
+        lineWidth: import_util.CHART_STYLE_DEFAULTS.pointLineWidth,
+        fillOpacity: 0.88,
+        stroke: backgroundColor,
+        ...!hasGroupField ? { fill: colors[0] } : {}
       },
+      // A same-color stroke enlarges the rendered path without changing its transform or
+      // hit area, so repeated pointer events cannot accumulate scale.
+      state: (0, import_util.getPointHighlightState)(),
       tooltip: {
         title: (d) => (d == null ? void 0 : d.group) ? d.group : false,
         items: [
-          { channel: "x", name: "x" },
-          { channel: "y", name: "y" }
+          { channel: "x", name: axisXTitle ?? "x" },
+          { channel: "y", name: axisYTitle ?? "y" }
         ]
       },
-      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();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

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

@@ -33,7 +33,6 @@ var Treemap = (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,
@@ -74,9 +73,7 @@ var Treemap = (options) => {
           }
         ]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       scale: {
         ...colors.length > 0 ? {

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

@@ -43,7 +43,6 @@ var Venn = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const normalizedData = data.map((d) => ({
       ...d,
       sets: normalizeVennSets(d.sets)
@@ -87,9 +86,7 @@ var Venn = (options) => {
           fontSize: 10
         }
       ],
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       legend: false,
       axis: false,

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

@@ -133,7 +133,7 @@ var Violin = (options) => {
       legend: {
         color: hasGroupField ? { position: "top" } : false
       },
-      ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);

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

@@ -116,7 +116,7 @@ var Waterfall = (options) => {
           style: {
             maxWidth: 60,
             stroke: "#666",
-            radius: 4,
+            ...theme !== "academy" ? { radius: 4 } : {},
             fill: (d) => {
               return d.isTotal || d.isIntermediateTotal ? totalColor : d.__value__ > 0 ? positiveColor : negativeColor;
             }
@@ -172,7 +172,7 @@ var Waterfall = (options) => {
         }
       ],
       legend: false,
-      ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);

package/dist/cjs/vis/word-cloud/index.d.ts

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