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

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;

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