@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/cjs/util/interaction.d.ts

@@ -0,0 +1,14 @@
+import type { VisualizationTheme } from '../types';
+export type SharedTooltipInteractionOptions = {
+    crosshairs?: boolean;
+};
+export type PointHighlightStateOptions = {
+    activeLineWidth?: number;
+    inactiveOpacity?: number;
+};
+export declare const getSharedTooltipInteraction: ({ crosshairs, }?: SharedTooltipInteractionOptions) => Record<string, boolean>;
+export declare const getCategoryBackgroundHighlightState: (theme: VisualizationTheme) => Record<string, any>;
+export declare const getCategoryHighlightInteraction: () => Record<string, any>;
+export declare const getPointHighlightState: ({ activeLineWidth, inactiveOpacity, }?: PointHighlightStateOptions) => Record<string, any>;
+export declare const getSeriesHighlightByColorInteraction: () => Record<string, boolean>;
+export declare const getLineHighlightState: (lineWidth: number) => Record<string, any>;

package/dist/cjs/util/interaction.js

@@ -0,0 +1,89 @@
+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/interaction.ts
+var interaction_exports = {};
+__export(interaction_exports, {
+  getCategoryBackgroundHighlightState: () => getCategoryBackgroundHighlightState,
+  getCategoryHighlightInteraction: () => getCategoryHighlightInteraction,
+  getLineHighlightState: () => getLineHighlightState,
+  getPointHighlightState: () => getPointHighlightState,
+  getSeriesHighlightByColorInteraction: () => getSeriesHighlightByColorInteraction,
+  getSharedTooltipInteraction: () => getSharedTooltipInteraction
+});
+module.exports = __toCommonJS(interaction_exports);
+var import_tokens = require("./tokens");
+var getSharedTooltipInteraction = ({
+  crosshairs = false
+} = {}) => ({
+  shared: true,
+  series: true,
+  crosshairs
+});
+var getCategoryBackgroundHighlightState = (theme) => {
+  const tokens = (0, import_tokens.getChartVisualTokens)(theme);
+  return {
+    active: {
+      backgroundFill: tokens.grid,
+      backgroundFillOpacity: theme === "dark" ? 0.56 : 0.58,
+      backgroundLineWidth: 0,
+      backgroundPadding: 0.08,
+      backgroundRadius: 4
+    }
+  };
+};
+var getCategoryHighlightInteraction = () => ({
+  background: true,
+  region: true
+});
+var getPointHighlightState = ({
+  activeLineWidth = import_tokens.CHART_STYLE_DEFAULTS.pointActiveLineWidth,
+  inactiveOpacity
+} = {}) => ({
+  active: {
+    lineWidth: activeLineWidth,
+    stroke: (_datum, _index, _data, element) => {
+      var _a, _b;
+      return ((_a = element == null ? void 0 : element.style) == null ? void 0 : _a.fill) || ((_b = element == null ? void 0 : element.style) == null ? void 0 : _b.stroke);
+    },
+    fillOpacity: 1,
+    zIndex: 10
+  },
+  ...inactiveOpacity === void 0 ? {} : {
+    inactive: {
+      fillOpacity: inactiveOpacity,
+      strokeOpacity: inactiveOpacity
+    }
+  }
+});
+var getSeriesHighlightByColorInteraction = () => ({
+  elementHighlightByColor: true
+});
+var getLineHighlightState = (lineWidth) => ({
+  active: { lineWidth: lineWidth + 1, strokeOpacity: 1 },
+  inactive: { strokeOpacity: import_tokens.CHART_STYLE_DEFAULTS.inactiveOpacity }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getCategoryBackgroundHighlightState,
+  getCategoryHighlightInteraction,
+  getLineHighlightState,
+  getPointHighlightState,
+  getSeriesHighlightByColorInteraction,
+  getSharedTooltipInteraction
+});

package/dist/cjs/util/theme.d.ts

@@ -1,26 +1,20 @@
+import type { Theme } from '@antv/g2';
+import type { VisualizationTheme } from '../types';
 export declare const DEFAULT_COLOR_PALETTE: string[];
 export declare const ACADEMY_COLOR_PALETTE: string[];
-export declare const THEME_MAP: Record<string, any>;
-/**
- * Get normalized theme name for G2.
- * Converts 'default' to 'light' for G2 compatibility.
- */
-export declare const getTheme: (theme: string) => string;
-/**
- * Get theme object from THEME_MAP.
- * This should be used for visualization components to properly support dark theme with multiple marks.
- */
-export declare const getThemeObject: (theme: string) => any;
-/**
- * Get theme color palette based on theme name.
- */
-export declare const getThemeColors: (theme: string) => string[];
-/**
- * Get background color based on theme.
- */
-export declare const getBackgroundColor: (theme: string) => string;
-/**
- * Normalize palette to always return an array.
- * Handles the case where a single color is parsed as a string instead of an array.
- */
-export declare const normalizePalette: (palette: string | string[] | undefined, theme: string) => string[];
+type G2ThemeType = 'light' | 'dark' | 'academy';
+type ChartTheme = Theme & {
+    enter?: {
+        duration?: number;
+        easing?: string;
+    };
+    elementHighlightByColor?: Record<string, unknown>;
+    elementHoverScale?: Record<string, unknown>;
+};
+export declare const THEME_MAP: Record<VisualizationTheme, ChartTheme>;
+export declare const getTheme: (theme: VisualizationTheme) => G2ThemeType;
+export declare const getThemeObject: (theme: VisualizationTheme) => ChartTheme;
+export declare const getThemeColors: (theme: VisualizationTheme) => string[];
+export declare const getBackgroundColor: (theme: VisualizationTheme) => string;
+export declare const normalizePalette: (palette: string | string[] | undefined, theme: VisualizationTheme) => string[];
+export {};

package/dist/cjs/util/theme.js

@@ -29,17 +29,17 @@ __export(theme_exports, {
   normalizePalette: () => normalizePalette
 });
 module.exports = __toCommonJS(theme_exports);
+var import_tokens = require("./tokens");
 var DEFAULT_COLOR_PALETTE = [
-  "#1783FF",
-  "#F08F56",
-  "#D580FF",
-  "#00C9C9",
-  "#7863FF",
-  "#DB9D0D",
-  "#60C42D",
-  "#FF80CA",
-  "#2491B3",
-  "#17C76F"
+  "#5B6CFF",
+  "#2DAF9E",
+  "#F2B84B",
+  "#EF6A6A",
+  "#55A6D9",
+  "#3AA76D",
+  "#F58A57",
+  "#8B6FD6",
+  "#D96C9B"
 ];
 var ACADEMY_COLOR_PALETTE = [
   "#4e79a7",
@@ -53,127 +53,310 @@ var ACADEMY_COLOR_PALETTE = [
   "#9c755f",
   "#bab0ab"
 ];
-var DEFAULT_THEME = {
-  type: "light",
-  view: {
-    viewFill: "#FFF",
-    plotFill: "transparent",
-    mainFill: "transparent",
-    contentFill: "transparent"
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
+var filterBaselineGrid = (_, index) => index !== 0;
+var createTheme = (type) => {
+  const tokens = (0, import_tokens.getChartVisualTokens)(type);
+  const isDark = type === "dark";
+  const isAcademy = type === "academy";
+  const colors = isAcademy ? ACADEMY_COLOR_PALETTE : DEFAULT_COLOR_PALETTE;
+  return {
+    type,
+    color: colors[0],
+    category10: colors,
+    category20: colors,
+    view: {
+      viewFill: tokens.background,
+      plotFill: "transparent",
+      mainFill: "transparent",
+      contentFill: "transparent"
+    },
+    interval: {
+      rect: {
+        fillOpacity: 0.96
+      }
+    },
     line: {
-      lineWidth: 2
-    }
-  },
-  area: {
+      line: {
+        lineWidth: import_tokens.CHART_STYLE_DEFAULTS.lineWidth
+      }
+    },
     area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
+      area: {
+        fillOpacity: import_tokens.CHART_STYLE_DEFAULTS.areaOpacity
+      }
+    },
     point: {
-      lineWidth: 1
+      point: {
+        lineWidth: import_tokens.CHART_STYLE_DEFAULTS.pointLineWidth,
+        fillOpacity: 0.82
+      },
+      hollow: {
+        lineWidth: 2,
+        strokeOpacity: 1
+      }
+    },
+    enter: {
+      duration: import_tokens.CHART_STYLE_DEFAULTS.animationDuration,
+      easing: "ease-out"
+    },
+    axis: {
+      labelAutoHide: { keepHeader: true, keepTail: true },
+      titleOpacity: 1,
+      titleFillOpacity: 1,
+      labelOpacity: 1,
+      labelFillOpacity: 1,
+      line: true,
+      lineLineWidth: 1,
+      lineStroke: tokens.axisLine,
+      lineStrokeOpacity: 1,
+      tick: true,
+      tickLineWidth: 1,
+      tickStroke: tokens.axisTick,
+      tickStrokeOpacity: 1,
+      ...isAcademy ? {
+        titleFill: "#000000",
+        titleStrokeOpacity: 1,
+        titleFontSize: 11,
+        titleFontWeight: "bold",
+        titleSpacing: 12,
+        labelFill: "#000000",
+        labelStrokeOpacity: 1,
+        labelFontSize: 10,
+        labelFontWeight: "normal",
+        labelSpacing: 4,
+        tickLength: 5
+      } : {
+        titleFill: tokens.textSecondary,
+        titleFontFamily: import_tokens.CHART_FONT_FAMILY,
+        titleFontSize: 12,
+        titleFontWeight: 500,
+        titleLineWidth: 0,
+        titleSpacing: 16,
+        labelFill: tokens.textSecondary,
+        labelFontFamily: import_tokens.CHART_FONT_FAMILY,
+        labelFontSize: 12,
+        labelFontWeight: 400,
+        labelLineWidth: 0,
+        labelSpacing: 6,
+        tickLength: 3,
+        tickOpacity: 1
+      }
+    },
+    axisX: {
+      grid: isAcademy,
+      labelAutoRotate: {
+        optionalAngles: [0, 45, 90],
+        recoverWhenFailed: true
+      },
+      ...isAcademy ? {
+        gridStroke: tokens.axisGrid,
+        gridStrokeOpacity: 1,
+        gridLineWidth: 1,
+        gridLineDash: [0, 0]
+      } : {}
+    },
+    axisY: {
+      lineLineWidth: isAcademy ? 1 : 0.75,
+      grid: true,
+      gridStroke: tokens.axisGrid,
+      gridStrokeOpacity: 1,
+      gridLineWidth: isAcademy ? 1 : 0.5,
+      gridLineDash: isAcademy ? [0, 0] : [2, 4],
+      gridFilter: filterBaselineGrid
+    },
+    axisRadar: {
+      zIndex: 1,
+      titleFill: isAcademy ? tokens.textPrimary : tokens.textSecondary,
+      titleFontFamily: import_tokens.CHART_FONT_FAMILY,
+      titleFontSize: isAcademy ? 10 : 12,
+      titleFontWeight: isAcademy ? 600 : 500,
+      titleSpacing: 10,
+      labelFill: tokens.textSecondary,
+      labelOpacity: 1,
+      labelFontFamily: import_tokens.CHART_FONT_FAMILY,
+      labelFontSize: isAcademy ? 10 : 11,
+      line: true,
+      lineStroke: tokens.axisLine,
+      lineStrokeOpacity: isAcademy ? 1 : 0.64,
+      lineLineWidth: isAcademy ? 1 : 0.75,
+      tick: true,
+      tickLength: isAcademy ? 4 : 2,
+      tickStroke: tokens.axisTick,
+      tickStrokeOpacity: isAcademy ? 1 : 0.68,
+      tickCount: 4,
+      gridStroke: tokens.axisGrid,
+      gridStrokeOpacity: isAcademy ? 1 : 0.9,
+      gridLineWidth: isAcademy ? 1 : 0.75,
+      gridLineDash: [0, 0]
+    },
+    title: {
+      spacing: 6,
+      titleFill: tokens.textPrimary,
+      titleFontSize: 16,
+      titleFontWeight: 600,
+      subtitleFill: tokens.textSecondary,
+      subtitleFontSize: 12,
+      subtitleFontWeight: 400
+    },
+    legendCategory: {
+      backgroundFill: "transparent",
+      padding: [5, 0, 10, 0],
+      itemMarkerSize: 10,
+      itemMarkerFillOpacity: 0.92,
+      itemMarkerStrokeOpacity: 0.92,
+      itemLabelFill: tokens.textPrimary,
+      itemLabelFillOpacity: 0.78,
+      itemLabelFontFamily: import_tokens.CHART_FONT_FAMILY,
+      itemLabelFontSize: 12,
+      itemLabelFontWeight: 400,
+      itemLabelLineHeight: 16,
+      itemLabelLetterSpacing: 0.1,
+      itemLabelTextBaseline: "middle",
+      itemSpacing: [8, 0, 0],
+      itemCursor: "pointer",
+      rowPadding: 8,
+      colPadding: 22,
+      navButtonFill: tokens.textSecondary,
+      navButtonFillOpacity: 0.72,
+      navButtonSize: 9,
+      navPageNumFill: tokens.textSecondary,
+      navPageNumFillOpacity: 0.72,
+      navPageNumFontFamily: import_tokens.CHART_FONT_FAMILY,
+      navPageNumFontSize: 11,
+      navPageNumFontWeight: 400,
+      navControllerPadding: 4,
+      navControllerSpacing: 14
+    },
+    tooltip: {
+      shared: false,
+      series: false,
+      crosshairs: false,
+      marker: true,
+      markerR: 4,
+      markerLineWidth: 2,
+      markerStroke: tokens.background,
+      crosshairsStroke: tokens.textSecondary,
+      crosshairsStrokeOpacity: 0.18,
+      crosshairsLineWidth: 1,
+      crosshairsLineDash: [0, 0],
+      css: {
+        ".g2-tooltip": {
+          "background-color": tokens.tooltipBackground,
+          border: `1px solid ${tokens.tooltipBorder}`,
+          "border-radius": "10px",
+          "box-shadow": tokens.tooltipShadow,
+          color: tokens.textSecondary,
+          padding: "10px 12px",
+          "min-width": "164px",
+          "max-width": "300px",
+          overflow: "hidden",
+          "box-sizing": "border-box",
+          "backdrop-filter": "blur(10px) saturate(1.08)",
+          "-webkit-backdrop-filter": "blur(10px) saturate(1.08)",
+          "font-family": import_tokens.CHART_FONT_FAMILY,
+          "font-size": "12px",
+          "line-height": "18px",
+          "font-variant-numeric": "tabular-nums",
+          "font-feature-settings": '"tnum" 1, "zero" 1',
+          "-webkit-font-smoothing": "antialiased",
+          contain: "layout paint style"
+        },
+        ".g2-tooltip-title": {
+          color: tokens.textSecondary,
+          "font-size": "11px",
+          "font-weight": "500",
+          "line-height": "16px",
+          "letter-spacing": "0.01em",
+          "margin-bottom": "6px",
+          "padding-bottom": "7px",
+          "border-bottom": `1px solid ${tokens.tooltipDivider}`,
+          "max-width": "276px"
+        },
+        ".g2-tooltip-list": {
+          display: "grid",
+          gap: "4px"
+        },
+        ".g2-tooltip-list-item": {
+          display: "grid",
+          "grid-template-columns": "minmax(0, 1fr) auto",
+          "align-items": "center",
+          "column-gap": "18px",
+          "min-height": "22px",
+          "line-height": "22px"
+        },
+        ".g2-tooltip-list-item-name": {
+          gap: "8px",
+          "min-width": "0",
+          "max-width": "208px",
+          overflow: "hidden",
+          color: tokens.textSecondary
+        },
+        ".g2-tooltip-list-item-name-label": {
+          color: tokens.textSecondary,
+          "font-weight": "400"
+        },
+        ".g2-tooltip-list-item-value": {
+          color: tokens.textPrimary,
+          "font-weight": "600",
+          flex: "0 0 auto",
+          "min-width": "40px",
+          "margin-left": "0",
+          "text-align": "right",
+          "letter-spacing": "-0.01em",
+          "font-variant-numeric": "tabular-nums",
+          "font-feature-settings": '"tnum" 1, "zero" 1'
+        },
+        ".g2-tooltip-list-item-marker": {
+          width: "7px",
+          height: "7px",
+          flex: "0 0 auto",
+          "margin-right": "0",
+          "border-radius": "999px",
+          "box-shadow": tokens.tooltipMarkerShadow
+        },
+        ".g2-tooltip-crosshair-x": {
+          "background-color": isDark ? "rgba(255, 255, 255, 0.16)" : "rgba(71, 84, 103, 0.16)"
+        },
+        ".g2-tooltip-crosshair-y": {
+          "background-color": isDark ? "rgba(255, 255, 255, 0.16)" : "rgba(71, 84, 103, 0.16)"
+        }
+      }
+    },
+    elementHighlight: {
+      delay: import_tokens.CHART_STYLE_DEFAULTS.interactionDelay
+    },
+    elementHighlightByColor: {
+      delay: import_tokens.CHART_STYLE_DEFAULTS.interactionDelay
+    },
+    elementHoverScale: {
+      delay: import_tokens.CHART_STYLE_DEFAULTS.interactionDelay,
+      scale: 1.04,
+      shadow: true,
+      shadowBlur: isDark ? 7 : isAcademy ? 5 : 6,
+      shadowColor: isDark ? "rgba(226, 232, 240, 0.38)" : isAcademy ? "rgba(63, 49, 38, 0.44)" : "rgba(15, 23, 42, 0.46)",
+      shadowOffsetX: 0,
+      shadowOffsetY: isDark ? 0 : 3,
+      zIndex: 10
     }
-  }
-};
-var DARK_THEME = {
-  type: "dark",
-  view: {
-    viewFill: "#000",
-    plotFill: "transparent",
-    mainFill: "transparent",
-    contentFill: "transparent"
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
-    line: {
-      lineWidth: 2
-    }
-  },
-  area: {
-    area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
-    point: {
-      lineWidth: 1
-    }
-  }
-};
-var ACADEMY_THEME = {
-  type: "academy",
-  view: {
-    viewFill: "#FFF",
-    plotFill: "transparent",
-    mainFill: "transparent",
-    contentFill: "transparent"
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
-    line: {
-      lineWidth: 2
-    }
-  },
-  area: {
-    area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
-    point: {
-      lineWidth: 1
-    }
-  }
+  };
 };
+var LIGHT_THEME = createTheme("light");
+var ACADEMY_THEME = createTheme("academy");
+var DARK_THEME = createTheme("dark");
 var THEME_MAP = {
-  default: DEFAULT_THEME,
+  default: LIGHT_THEME,
+  light: LIGHT_THEME,
   academy: ACADEMY_THEME,
   dark: DARK_THEME
 };
-var getTheme = (theme) => {
-  return theme === "default" ? "light" : theme;
-};
-var getThemeObject = (theme) => {
-  return THEME_MAP[theme] || THEME_MAP.default;
-};
-var getThemeColors = (theme) => {
-  switch (theme) {
-    case "academy":
-      return ACADEMY_COLOR_PALETTE;
-    case "dark":
-    case "default":
-    default:
-      return DEFAULT_COLOR_PALETTE;
-  }
-};
-var getBackgroundColor = (theme) => {
-  switch (theme) {
-    case "dark":
-      return "#000";
-    case "academy":
-    case "default":
-    default:
-      return "#FFF";
-  }
-};
+var getTheme = (theme) => theme === "default" ? "light" : theme;
+var getThemeObject = (theme) => THEME_MAP[theme] || THEME_MAP.default;
+var getThemeColors = (theme) => theme === "academy" ? ACADEMY_COLOR_PALETTE : DEFAULT_COLOR_PALETTE;
+var getBackgroundColor = (theme) => (0, import_tokens.getChartVisualTokens)(theme).background;
 var normalizePalette = (palette, theme) => {
-  if (!palette || Array.isArray(palette) && palette.length === 0)
+  if (!palette || Array.isArray(palette) && palette.length === 0) {
     return getThemeColors(theme);
+  }
   return Array.isArray(palette) ? palette : [palette];
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/util/tokens.d.ts

@@ -0,0 +1,31 @@
+import type { VisualizationTheme } from '../types';
+export declare const CHART_FONT_FAMILY = "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+export declare const CHART_STYLE_DEFAULTS: {
+    readonly animationDuration: 260;
+    readonly interactionDelay: 40;
+    readonly lineWidth: 2.5;
+    readonly areaOpacity: 0.24;
+    readonly lineOpacity: 0.92;
+    readonly inactiveOpacity: 0.24;
+    readonly pointSize: 3.5;
+    readonly scatterPointSize: 5;
+    readonly pointLineWidth: 1.5;
+    readonly pointActiveLineWidth: 5;
+    readonly intervalWidthRatio: 0.64;
+};
+export type ChartVisualTokens = {
+    background: string;
+    textPrimary: string;
+    textSecondary: string;
+    grid: string;
+    axisGrid: string;
+    axisLine: string;
+    axisTick: string;
+    separator: string;
+    tooltipBackground: string;
+    tooltipBorder: string;
+    tooltipDivider: string;
+    tooltipMarkerShadow: string;
+    tooltipShadow: string;
+};
+export declare const getChartVisualTokens: (theme: VisualizationTheme) => ChartVisualTokens;