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

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

@@ -23,12 +23,14 @@ __export(area_exports, {
 });
 module.exports = __toCommonJS(area_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
-var getLinearGradientColor = (color) => `linear-gradient(-90deg, white 0%, ${color} 100%)`;
+var import_util = require("../../util");
+var getLinearGradientColor = (color, backgroundColor = "white") => `linear-gradient(-90deg, ${backgroundColor} 0%, ${color} 100%)`;
 var DEFAULT_COLOR = "#3A95FF";
 var Area = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
+  let cleanupCrosshairAxisLabels = null;
   const render = (config) => {
     var _a;
     const {
@@ -41,13 +43,31 @@ var Area = (options) => {
       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 fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
+    const fillColor = getLinearGradientColor(colors[0] || DEFAULT_COLOR, backgroundColor);
+    const areaOpacity = import_util.CHART_STYLE_DEFAULTS.areaOpacity;
+    const lineOpacity = import_util.CHART_STYLE_DEFAULTS.lineOpacity;
+    const cartesianAxisOptions = {
+      axisXTitle,
+      axisYTitle,
+      xLabels: data.map(({ time }) => time),
+      chartWidth: width
+    };
+    const tooltip = {
+      items: [
+        (d) => ({
+          name: hasGroupField ? d.group : axisYTitle || d.time,
+          value: d.value
+        })
+      ]
+    };
     chart = new import_g2.Chart({
       container,
       width,
@@ -65,11 +85,11 @@ var Area = (options) => {
       children = [
         {
           type: "area",
-          style: { fillOpacity: 0.6 }
+          style: { fillOpacity: areaOpacity }
         },
         {
           type: "line",
-          style: { lineWidth, strokeOpacity: 0.6 }
+          style: { lineWidth, strokeOpacity: lineOpacity }
         }
       ];
     } else if (hasGroupField) {
@@ -78,11 +98,11 @@ var Area = (options) => {
       children = [
         {
           type: "area",
-          style: { fillOpacity: 0.6 }
+          style: { fillOpacity: areaOpacity }
         },
         {
           type: "line",
-          style: { lineWidth, strokeOpacity: 0.6 }
+          style: { lineWidth, strokeOpacity: lineOpacity }
         }
       ];
     } else {
@@ -91,7 +111,7 @@ var Area = (options) => {
         {
           type: "area",
           style: {
-            fillOpacity: 0.6,
+            fillOpacity: areaOpacity,
             fill: fillColor
           }
         },
@@ -99,47 +119,72 @@ var Area = (options) => {
           type: "line",
           style: {
             lineWidth,
-            strokeOpacity: 0.6,
-            ...style.palette ? { stroke: colors[0] } : {}
+            strokeOpacity: lineOpacity,
+            lineCap: "round",
+            lineJoin: "round",
+            stroke: colors[0]
           }
         }
       ];
     }
+    children = children.map((child) => ({
+      ...child,
+      animate: (0, import_util.getChartAnimation)(hasRendered, child.type === "line" ? "pathIn" : "fadeIn"),
+      tooltip: child.type === "line" ? tooltip : false,
+      state: hasGroupField ? child.type === "area" ? {
+        active: { fillOpacity: Math.min(areaOpacity + 0.1, 1) },
+        inactive: { fillOpacity: 0.07 }
+      } : (0, import_util.getLineHighlightState)(lineWidth) : void 0
+    }));
+    if (!hasGroupField && data.length <= 24) {
+      children.push({
+        type: "point",
+        encode: {
+          x: "time",
+          y: "value",
+          shape: "point",
+          size: import_util.CHART_STYLE_DEFAULTS.pointSize
+        },
+        animate: (0, import_util.getChartAnimation)(hasRendered, "fadeIn"),
+        tooltip: false,
+        style: {
+          lineWidth: import_util.CHART_STYLE_DEFAULTS.pointLineWidth,
+          fill: colors[0],
+          stroke: backgroundColor
+        }
+      });
+    }
     const chartOptions = {
-      animate: false,
       type: "view",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
       transform,
       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 }),
+        ...hasGroupField ? (0, import_util.getSeriesHighlightByColorInteraction)() : {}
       },
-      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/bar/index.d.ts

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

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

@@ -23,10 +23,11 @@ __export(bar_exports, {
 });
 module.exports = __toCommonJS(bar_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Bar = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const render = (config) => {
     var _a;
     const {
@@ -43,8 +44,7 @@ var Bar = (options) => {
       chart.destroy();
     }
     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);
     chart = new import_g2.Chart({
       container,
       width,
@@ -55,7 +55,7 @@ var Bar = (options) => {
     let transform = [];
     let radiusStyle = {};
     if (theme !== "academy") {
-      radiusStyle = { radiusTopLeft: 4, radiusTopRight: 4 };
+      radiusStyle = { radius: 4 };
     }
     if (hasGroupField && group) {
       transform = [{ type: "dodgeX" }];
@@ -66,51 +66,54 @@ var Bar = (options) => {
     if (hasGroupField) {
       encode = { x: "category", y: "value", color: "group" };
     } else {
-      encode = { x: "category", y: "value", color: "category" };
+      encode = { x: "category", y: "value" };
     }
     const scaleConfig = {
       y: { nice: true },
-      ...style.palette ? { color: { range: colors } } : {}
+      ...hasGroupField ? { color: { range: colors } } : {}
     };
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "growInX"),
       type: "interval",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
       transform,
       coordinate: { transform: [{ type: "transpose" }] },
       scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle || false },
-        y: { title: axisYTitle || false }
-      },
-      legend: hasGroupField ? { color: { position: "top" } } : false,
+      axis: (0, import_util.getCartesianAxis)({ axisXTitle, axisYTitle }),
+      legend: (0, import_util.getColorLegend)(hasGroupField),
       tooltip: {
         items: [
           (d) => ({
-            name: axisYTitle || d.category,
+            name: hasGroupField ? d.group : axisYTitle || d.category,
             value: d.value
           })
         ]
       },
+      state: (0, import_util.getCategoryBackgroundHighlightState)(theme),
+      interaction: {
+        tooltip: true,
+        elementHighlight: (0, import_util.getCategoryHighlightInteraction)()
+      },
       style: {
         ...radiusStyle,
-        columnWidthRatio: 0.8
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+        columnWidthRatio: import_util.CHART_STYLE_DEFAULTS.intervalWidthRatio,
+        ...!hasGroupField ? { fill: colors[0] } : {}
       },
-      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/boxplot/index.js

@@ -34,7 +34,6 @@ var Boxplot = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const startAtZero = style.startAtZero || false;
     const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
     let encode = {};
@@ -86,9 +85,7 @@ var Boxplot = (options) => {
       legend: {
         color: hasGroupField ? { position: "top" } : false
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);

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

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

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

@@ -23,10 +23,11 @@ __export(column_exports, {
 });
 module.exports = __toCommonJS(column_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Column = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const render = (config) => {
     var _a;
     const {
@@ -43,8 +44,7 @@ var Column = (options) => {
       chart.destroy();
     }
     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);
     chart = new import_g2.Chart({
       container,
       width,
@@ -66,50 +66,60 @@ var Column = (options) => {
     if (hasGroupField) {
       encode = { x: "category", y: "value", color: "group" };
     } else {
-      encode = { x: "category", y: "value", color: "category" };
+      encode = { x: "category", y: "value" };
     }
     const scaleConfig = {
       y: { nice: true },
-      ...style.palette ? { color: { range: colors } } : {}
+      ...hasGroupField ? { color: { range: colors } } : {}
+    };
+    const cartesianAxisOptions = {
+      axisXTitle,
+      axisYTitle,
+      xLabels: data.map(({ category }) => category),
+      chartWidth: width
     };
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "growInY"),
       type: "interval",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
       transform,
       scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle || false },
-        y: { title: axisYTitle || false }
-      },
-      legend: hasGroupField ? { color: { position: "top" } } : false,
+      ...(0, import_util.getCartesianLayout)(cartesianAxisOptions),
+      axis: (0, import_util.getCartesianAxis)(cartesianAxisOptions),
+      legend: (0, import_util.getColorLegend)(hasGroupField),
       tooltip: {
         items: [
           (d) => ({
-            name: axisYTitle || d.category,
+            name: hasGroupField ? d.group : axisYTitle || d.category,
             value: d.value
           })
         ]
       },
+      state: (0, import_util.getCategoryBackgroundHighlightState)(theme),
+      interaction: {
+        tooltip: true,
+        elementHighlight: (0, import_util.getCategoryHighlightInteraction)()
+      },
       style: {
         ...radiusStyle,
-        columnWidthRatio: 0.8
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+        columnWidthRatio: import_util.CHART_STYLE_DEFAULTS.intervalWidthRatio,
+        ...!hasGroupField ? { fill: colors[0] } : {}
       },
-      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/dual-axes/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
  */
@@ -16,7 +16,7 @@ export interface DualAxesConfig {
     series: DualAxesSeriesItem[];
     title?: string;
     axisXTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

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,17 +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,
-            radiusTopLeft: 4,
-            radiusTopRight: 4
-          }
+            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 {
@@ -90,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/fishbone-diagram/index.js

@@ -100,9 +100,17 @@ var FishboneDiagram = (options) => {
       height,
       autoFit: "view",
       autoResize: true,
-      padding: 20,
-      theme: chartTheme,
-      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : [],
+      padding: title ? [46, 20, 20, 20] : 20,
+      theme: (0, import_theme.getTheme)(theme),
+      plugins: title ? [
+        {
+          key: "title",
+          type: "title",
+          title,
+          titleFill: isDark ? "#e0e6ed" : "#000",
+          titleFontFamily: "sans-serif"
+        }
+      ] : [],
       data: graphData,
       node: {
         type: "rect",
@@ -110,7 +118,7 @@ var FishboneDiagram = (options) => {
           var _a;
           const depth = d.depth ?? 0;
           const nodeStyle = {
-            radius: 8,
+            radius: theme === "academy" ? 0 : 8,
             size: getNodeSize(String(d.id), depth),
             labelText: String(d.id),
             labelPlacement: "left",