@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/cjs/util/tokens.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/tokens.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  CHART_FONT_FAMILY: () => CHART_FONT_FAMILY,
+  CHART_STYLE_DEFAULTS: () => CHART_STYLE_DEFAULTS,
+  getChartVisualTokens: () => getChartVisualTokens
+});
+module.exports = __toCommonJS(tokens_exports);
+var CHART_FONT_FAMILY = 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+var CHART_STYLE_DEFAULTS = {
+  animationDuration: 260,
+  interactionDelay: 40,
+  lineWidth: 2.5,
+  areaOpacity: 0.24,
+  lineOpacity: 0.92,
+  inactiveOpacity: 0.24,
+  pointSize: 3.5,
+  scatterPointSize: 5,
+  pointLineWidth: 1.5,
+  pointActiveLineWidth: 5,
+  intervalWidthRatio: 0.64
+};
+var LIGHT_TOKENS = {
+  background: "#FFFFFF",
+  textPrimary: "#1F2937",
+  textSecondary: "#667085",
+  grid: "#E7EAF0",
+  axisGrid: "#EAECF0",
+  axisLine: "#D0D5DD",
+  axisTick: "#98A2B3",
+  separator: "#FFFFFF",
+  tooltipBackground: "rgba(255, 255, 255, 0.96)",
+  tooltipBorder: "rgba(15, 23, 42, 0.09)",
+  tooltipDivider: "rgba(15, 23, 42, 0.08)",
+  tooltipMarkerShadow: "0 0 0 2px #FFFFFF, 0 1px 3px rgba(15, 23, 42, 0.20)",
+  tooltipShadow: "0 12px 32px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.82)"
+};
+var DARK_TOKENS = {
+  background: "#141414",
+  textPrimary: "#F3F4F6",
+  textSecondary: "#A7AFBE",
+  grid: "#343841",
+  axisGrid: "#2B2F36",
+  axisLine: "#454B56",
+  axisTick: "#596170",
+  separator: "#141414",
+  tooltipBackground: "rgba(26, 27, 31, 0.96)",
+  tooltipBorder: "rgba(255, 255, 255, 0.12)",
+  tooltipDivider: "rgba(255, 255, 255, 0.10)",
+  tooltipMarkerShadow: "0 0 0 2px #1A1B1F, 0 1px 3px rgba(0, 0, 0, 0.42)",
+  tooltipShadow: "0 14px 36px rgba(0, 0, 0, 0.34), 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08)"
+};
+var ACADEMY_TOKENS = {
+  background: "#FFFFFF",
+  textPrimary: "#23262D",
+  textSecondary: "#626975",
+  grid: "#DDDDDD",
+  axisGrid: "#DDDDDD",
+  axisLine: "#888888",
+  axisTick: "#000000",
+  separator: "#FFFFFF",
+  tooltipBackground: "rgba(255, 253, 249, 0.98)",
+  tooltipBorder: "rgba(83, 72, 60, 0.14)",
+  tooltipDivider: "rgba(83, 72, 60, 0.12)",
+  tooltipMarkerShadow: "0 0 0 2px #FFFDF9, 0 1px 3px rgba(63, 49, 38, 0.20)",
+  tooltipShadow: "0 12px 30px rgba(63, 49, 38, 0.11), 0 3px 8px rgba(63, 49, 38, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88)"
+};
+var getChartVisualTokens = (theme) => {
+  if (theme === "dark")
+    return DARK_TOKENS;
+  if (theme === "academy")
+    return ACADEMY_TOKENS;
+  return LIGHT_TOKENS;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CHART_FONT_FAMILY,
+  CHART_STYLE_DEFAULTS,
+  getChartVisualTokens
+});

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

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

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