nuxt-charts 2.2.1 → 3.0.0-beta.0

package/dist/runtime/utils/curve.d.ts

@@ -0,0 +1,12 @@
+import { CurveType } from "../enums.js";
+/**
+ * The subset of `vccs` curve `type` strings we map onto. `vccs`'s union also
+ * includes `bump*` variants and a `CurveFactory`, which the v2 `CurveType`
+ * enum has no members for, so they're unreachable here.
+ */
+export type VccsCurveType = "basis" | "basisClosed" | "basisOpen" | "linear" | "linearClosed" | "natural" | "monotoneX" | "monotoneY" | "monotone" | "step" | "stepBefore" | "stepAfter";
+/**
+ * Translate a {@link CurveType} into the `vccs` curve `type` string.
+ * Defaults to `monotone` when unset (matches v2's smooth default).
+ */
+export declare function curveTypeToVccs(curve: CurveType | undefined): VccsCurveType;

package/dist/runtime/utils/curve.js

@@ -0,0 +1,26 @@
+import { CurveType } from "../enums.js";
+const CURVE_MAP = {
+  [CurveType.Basis]: "basis",
+  [CurveType.BasisClosed]: "basisClosed",
+  [CurveType.BasisOpen]: "basisOpen",
+  // No direct vccs equivalent — basis is the closest smooth spline.
+  [CurveType.Bundle]: "basis",
+  [CurveType.Cardinal]: "natural",
+  [CurveType.CardinalClosed]: "basisClosed",
+  [CurveType.CardinalOpen]: "basisOpen",
+  [CurveType.CatmullRom]: "natural",
+  [CurveType.CatmullRomClosed]: "basisClosed",
+  [CurveType.CatmullRomOpen]: "basisOpen",
+  [CurveType.Linear]: "linear",
+  [CurveType.LinearClosed]: "linearClosed",
+  [CurveType.MonotoneX]: "monotoneX",
+  [CurveType.MonotoneY]: "monotoneY",
+  [CurveType.Natural]: "natural",
+  [CurveType.Step]: "step",
+  [CurveType.StepAfter]: "stepAfter",
+  [CurveType.StepBefore]: "stepBefore"
+};
+export function curveTypeToVccs(curve) {
+  if (curve === void 0) return "monotone";
+  return CURVE_MAP[curve];
+}

package/dist/runtime/utils/dither.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Dithered area fills.
+ *
+ * Instead of a smooth gradient, the area is filled with a tiling SVG
+ * `<pattern>` of dots whose size steps down the height of the plot — the
+ * halftone/ordered-dither look. Each variant is a list of rows; a row's
+ * `radius` is a fraction of the tile size, so tiles stay crisp at any scale.
+ */
+/** Built-in dither treatments for an area fill. */
+export type DitherVariant = "bayer" | "noise" | "fade";
+/** All variants, in the order a UI should cycle through them. */
+export declare const DITHER_VARIANTS: DitherVariant[];
+/**
+ * Build a deterministic pattern id so the `<defs>` element and the
+ * `fill="url(#id)"` reference agree. Mirrors `gradientId`.
+ */
+export declare function ditherId(dataKey: string, scope?: string): string;
+/**
+ * Id for the repeating dot tile of a series.
+ *
+ * Separate from `ditherId` because a faded dither composes two paints: this
+ * tile is painted over a gradient wash inside the plot-sized pattern that
+ * `ditherId` names and the area's `fill` actually references.
+ */
+export declare function dotsId(dataKey: string, scope?: string): string;
+/**
+ * Id for the shared vertical fade applied to the dot texture. One per chart
+ * scope — the stops carry opacity only, so every series can reuse it.
+ */
+export declare function ditherFadeMaskId(scope: string): string;
+/** One dot within a dither tile, in tile-relative units (0–1). */
+export interface DitherDot {
+    /** Horizontal centre, as a fraction of the tile width. */
+    cx: number;
+    /** Vertical centre, as a fraction of the tile height. */
+    cy: number;
+    /** Dot radius, as a fraction of the tile width. */
+    r: number;
+}
+/** Geometry + sizing for one dither variant. */
+export interface DitherPattern {
+    /** Tile edge length in user units (px). */
+    tile: number;
+    /** Dots within a single tile. */
+    dots: DitherDot[];
+}
+/**
+ * Build the dot geometry for a variant.
+ *
+ * - `bayer` — uniform grid, radius stepped by the Bayer matrix.
+ * - `noise` — same radii, but each dot jittered off the grid for a grain look.
+ * - `fade`  — radius scales with the row, so the tile reads denser at its top;
+ *   stacked vertically this makes the fill thin out toward the baseline.
+ */
+export declare function buildDitherPattern(variant: DitherVariant, tile?: number): DitherPattern;

package/dist/runtime/utils/dither.js

@@ -0,0 +1,45 @@
+export const DITHER_VARIANTS = ["bayer", "noise", "fade"];
+export function ditherId(dataKey, scope) {
+  const id = scope ? `${scope}-${dataKey}` : dataKey;
+  return `nc-dither-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+export function dotsId(dataKey, scope) {
+  return `${ditherId(dataKey, scope)}-dots`;
+}
+export function ditherFadeMaskId(scope) {
+  return `nc-dither-fade-${scope.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+const BAYER_4X4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5]
+];
+const NOISE_OFFSETS = [
+  [0.18, 0.72, 0.41, 0.94],
+  [0.63, 0.07, 0.86, 0.29],
+  [0.35, 0.51, 0.12, 0.68],
+  [0.79, 0.24, 0.57, 0.03]
+];
+const GRID = 4;
+const DEFAULT_TILE = 8;
+export function buildDitherPattern(variant, tile = DEFAULT_TILE) {
+  const dots = [];
+  const cell = 1 / GRID;
+  const maxRadius = cell * 0.5;
+  for (let row = 0; row < GRID; row++) {
+    for (let col = 0; col < GRID; col++) {
+      const threshold = (BAYER_4X4[row]?.[col] ?? 0) / (GRID * GRID);
+      const weight = variant === "fade" ? 1 - row / GRID : 1 - threshold;
+      const r = maxRadius * weight;
+      if (r <= 0) continue;
+      const jitter = variant === "noise" ? ((NOISE_OFFSETS[row]?.[col] ?? 0.5) - 0.5) * cell : 0;
+      dots.push({
+        cx: col * cell + cell / 2 + jitter,
+        cy: row * cell + cell / 2 + jitter,
+        r
+      });
+    }
+  }
+  return { tile, dots };
+}

package/dist/runtime/utils/gradient.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Build a deterministic gradient id for one series so the `<defs>` element and
+ * the `fill="url(#id)"` reference agree.
+ */
+export declare function gradientId(dataKey: string, scope?: string): string;
+/** One stop in a vertical area-fill gradient. */
+export interface GradientStop {
+    offset: string;
+    stopOpacity: number;
+}
+/** Default vertical fade used for the area fill when no explicit stops are given. */
+export declare const DEFAULT_GRADIENT_STOPS: GradientStop[];

package/dist/runtime/utils/gradient.js

@@ -0,0 +1,8 @@
+export function gradientId(dataKey, scope) {
+  const id = scope ? `${scope}-${dataKey}` : dataKey;
+  return `nc-grad-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+export const DEFAULT_GRADIENT_STOPS = [
+  { offset: "0%", stopOpacity: 0.6 },
+  { offset: "100%", stopOpacity: 0 }
+];

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./categories.js";
+export * from "./curve.js";
+export * from "./legend.js";
+export * from "./axis.js";
+export * from "./style.js";
+export * from "./cubes.js";

package/dist/runtime/utils/index.js

@@ -0,0 +1,6 @@
+export * from "./categories.js";
+export * from "./curve.js";
+export * from "./legend.js";
+export * from "./axis.js";
+export * from "./style.js";
+export * from "./cubes.js";

package/dist/runtime/utils/legend.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from "vue";
+import { LegendPosition } from "../enums.js";
+/** `vccs` `<Legend>` horizontal alignment. */
+export type LegendAlign = "left" | "center" | "right";
+/** `vccs` `<Legend>` vertical alignment. */
+export type LegendVerticalAlign = "top" | "middle" | "bottom";
+export interface VccsLegendProps {
+    align: LegendAlign;
+    verticalAlign: LegendVerticalAlign;
+    layout: "horizontal" | "vertical";
+}
+/**
+ * Translate a {@link LegendPosition} into `vccs` `<Legend>` props.
+ * Defaults to bottom-centre (matches v2).
+ */
+export declare function legendPositionToLegendProps(position: LegendPosition | undefined): VccsLegendProps;
+/**
+ * Gap between the plot area and the legend. Applied as wrapper padding on the
+ * side facing the chart so vccs's legend-size measurement reserves the extra
+ * space in chart margins (see `appendOffsetOfLegend` in vccs).
+ */
+export declare const LEGEND_INSET: "var(--vc-legend-inset, 0.75rem)";
+/**
+ * Build the `vccs` `<Legend wrapperStyle>` object: a position-aware inset
+ * between chart and legend, merged with any user `legendStyle` overrides.
+ */
+export declare function resolveLegendWrapperStyle(position: LegendPosition | undefined, userStyle?: CSSProperties): CSSProperties;

package/dist/runtime/utils/legend.js

@@ -0,0 +1,19 @@
+import { LegendPosition } from "../enums.js";
+const LEGEND_MAP = {
+  [LegendPosition.TopLeft]: { align: "left", verticalAlign: "top", layout: "horizontal" },
+  [LegendPosition.TopCenter]: { align: "center", verticalAlign: "top", layout: "horizontal" },
+  [LegendPosition.TopRight]: { align: "right", verticalAlign: "top", layout: "horizontal" },
+  [LegendPosition.BottomLeft]: { align: "left", verticalAlign: "bottom", layout: "horizontal" },
+  [LegendPosition.BottomCenter]: { align: "center", verticalAlign: "bottom", layout: "horizontal" },
+  [LegendPosition.BottomRight]: { align: "right", verticalAlign: "bottom", layout: "horizontal" }
+};
+export function legendPositionToLegendProps(position) {
+  if (position === void 0) return LEGEND_MAP[LegendPosition.BottomCenter];
+  return LEGEND_MAP[position];
+}
+export const LEGEND_INSET = "var(--vc-legend-inset, 0.75rem)";
+export function resolveLegendWrapperStyle(position, userStyle) {
+  const { verticalAlign } = legendPositionToLegendProps(position);
+  const insetStyle = verticalAlign === "bottom" ? { paddingTop: LEGEND_INSET } : verticalAlign === "top" ? { paddingBottom: LEGEND_INSET } : {};
+  return { ...insetStyle, ...userStyle };
+}

package/dist/runtime/utils/marker.d.ts

@@ -0,0 +1,20 @@
+import type { MarkerConfig, MarkerSeriesConfig } from "../types/shared.js";
+/**
+ * Normalise the v2 `markerConfig` (flat record, or legacy `{ id, config }`
+ * wrapper) into a flat `Record<seriesKey, MarkerSeriesConfig>`.
+ */
+export declare function normalizeMarkerConfig(markerConfig: MarkerConfig | undefined): Record<string, MarkerSeriesConfig>;
+/**
+ * Resolve the `vccs` `dot` prop for one series from its marker config.
+ * Returns `false` (no dot) when the series has no marker, otherwise a dot
+ * options object (`r`, `fill`, `stroke`, `strokeWidth`) `vccs` understands.
+ *
+ * `vccs` (recharts-shaped) renders circular dots; the v2 `type` (square /
+ * triangle / diamond) has no analog, so only the size / colours carry over.
+ */
+export declare function markerToDot(marker: MarkerSeriesConfig | undefined, seriesColor: string): false | Record<string, unknown>;
+/**
+ * Convert the v2 `lineDashArray` into an SVG `stroke-dasharray` string.
+ * Accepts the v2 `number[][]` form (first pattern used) or a ready string.
+ */
+export declare function toStrokeDasharray(lineDashArray: number[][] | string | undefined): string | undefined;

package/dist/runtime/utils/marker.js

@@ -0,0 +1,21 @@
+export function normalizeMarkerConfig(markerConfig) {
+  if (!markerConfig) return {};
+  const wrapped = markerConfig;
+  if (wrapped.config) return wrapped.config;
+  return markerConfig;
+}
+export function markerToDot(marker, seriesColor) {
+  if (!marker) return false;
+  return {
+    r: marker.size ? marker.size / 2 : 3,
+    fill: marker.color ?? seriesColor,
+    stroke: marker.strokeColor ?? marker.color ?? seriesColor,
+    strokeWidth: marker.strokeWidth ?? 1
+  };
+}
+export function toStrokeDasharray(lineDashArray) {
+  if (lineDashArray === void 0) return void 0;
+  if (typeof lineDashArray === "string") return lineDashArray;
+  const first = lineDashArray[0];
+  return first?.length ? first.join(" ") : void 0;
+}

package/dist/runtime/utils/style.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from "vue";
+/**
+ * Coerce a v2 `legendStyle` (a CSS string or a `Record<string,string>`) into the
+ * `CSSProperties` object `vccs`'s `<Legend wrapperStyle>` expects. A raw CSS
+ * string has no structured equivalent, so it's dropped (returns `undefined`)
+ * rather than asserted.
+ */
+export declare function toCssProperties(style: string | Record<string, string> | undefined): CSSProperties | undefined;
+/**
+ * Normalise a v2 domain tuple into a `vccs` axis `domain`. `vccs` requires both
+ * bounds to be defined; if either is missing the whole domain is dropped
+ * (returns `undefined`) so the axis auto-scales instead of erroring.
+ */
+export declare function toAxisDomain(domain: [number | undefined, number | undefined] | undefined): readonly [number, number] | undefined;

package/dist/runtime/utils/style.js

@@ -0,0 +1,10 @@
+export function toCssProperties(style) {
+  if (style === void 0 || typeof style === "string") return void 0;
+  return style;
+}
+export function toAxisDomain(domain) {
+  if (!domain) return void 0;
+  const [min, max] = domain;
+  if (min === void 0 || max === void 0) return void 0;
+  return [min, max];
+}

package/dist/runtime/utils/theme.d.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "vue";
+import type { ChartTheme } from "../types/shared.js";
+/**
+ * Flatten a {@link ChartTheme} into the `--vc-*` CSS custom properties the chart
+ * components read (`runtime/assets/theme.css`, `runtime/assets/components.css`).
+ * bound as an inline `style` on the `.vue-chrts` root, where it overrides the
+ * global token defaults (inline custom properties beat class-scoped ones).
+ *
+ * Only the keys the caller actually set produce a variable, so unset fields fall
+ * through to the shipped light/dark defaults. `hover.visible` is intentionally
+ * *not* a token — it toggles the vccs `<Tooltip cursor>` prop and is surfaced
+ * separately via {@link resolveHoverVisible}.
+ */
+export declare function themeToVars(theme: ChartTheme | undefined): CSSProperties;
+/**
+ * Whether the hover cursor should render. Defaults to `true`; only an explicit
+ * `hover.visible === false` disables it.
+ */
+export declare function resolveHoverVisible(theme: ChartTheme | undefined): boolean;
+/** Default matches `--vc-hover-radius` in `theme.css`. vccs `Rectangle` needs a number. */
+export declare const DEFAULT_HOVER_RADIUS = 6;
+/**
+ * Corner radius for the hover cursor rectangle. CSS vars can't be passed —
+ * vccs validates `radius` as `Number | Array`.
+ */
+export declare function resolveHoverRadius(theme: ChartTheme | undefined): number;
+/**
+ * Map per-axis tick *colour / size / weight* (from {@link AxisConfig}) onto
+ * scoped `--vc-{x|y}-tick-*` CSS variables read by
+ * `.v-charts-cartesian-axis-tick-value`. These are applied via CSS (not the
+ * vccs `tick` prop) because the stylesheet sets `fill` / `font-*`
+ * unconditionally, so a CSS rule always wins over an SVG presentation attr.
+ * Horizontal alignment is handled separately by the native `tick` prop, since
+ * it must live in SVG space to position correctly (see `toTickProp`).
+ */
+export declare function axisTickVars(prefix: "x" | "y", tick: Record<string, unknown> | undefined): CSSProperties;

package/dist/runtime/utils/theme.js

@@ -0,0 +1,45 @@
+export function themeToVars(theme) {
+  const vars = {};
+  if (!theme) return vars;
+  const set = (name, value) => {
+    if (value !== void 0) vars[name] = String(value);
+  };
+  set("--vc-grid-color", theme.grid?.color);
+  set("--vc-grid-dash", theme.grid?.dash);
+  set("--vc-grid-width", theme.grid?.width);
+  set("--vc-tick-color", theme.axis?.tickColor);
+  set("--vc-tick-size", theme.axis?.tickSize);
+  set("--vc-tick-weight", theme.axis?.tickWeight);
+  set("--vc-axis-label-color", theme.axis?.labelColor);
+  set("--vc-axis-label-size", theme.axis?.labelSize);
+  set("--vc-axis-line-color", theme.axis?.lineColor);
+  set("--vc-legend-color", theme.legend?.color);
+  set("--vc-legend-size", theme.legend?.size);
+  set("--vc-legend-weight", theme.legend?.weight);
+  set("--vc-legend-gap", theme.legend?.gap);
+  set("--vc-legend-inset", theme.legend?.inset);
+  set("--vc-hover-fill", theme.hover?.fill);
+  set("--vc-hover-stroke", theme.hover?.stroke);
+  set("--vc-hover-radius", theme.hover?.radius);
+  set("--vc-tooltip-bg", theme.tooltip?.bg);
+  set("--vc-tooltip-fg", theme.tooltip?.fg);
+  set("--vc-tooltip-border", theme.tooltip?.border);
+  set("--vc-tooltip-radius", theme.tooltip?.radius);
+  return vars;
+}
+export function resolveHoverVisible(theme) {
+  return theme?.hover?.visible !== false;
+}
+export const DEFAULT_HOVER_RADIUS = 6;
+export function resolveHoverRadius(theme) {
+  const r = theme?.hover?.radius;
+  return typeof r === "number" && Number.isFinite(r) ? r : DEFAULT_HOVER_RADIUS;
+}
+export function axisTickVars(prefix, tick) {
+  const vars = {};
+  if (!tick) return vars;
+  if (tick.fill !== void 0) vars[`--vc-${prefix}-tick-color`] = String(tick.fill);
+  if (tick.fontSize !== void 0) vars[`--vc-${prefix}-tick-size`] = String(tick.fontSize);
+  if (tick.fontWeight !== void 0) vars[`--vc-${prefix}-tick-weight`] = String(tick.fontWeight);
+  return vars;
+}

package/package.json

@@ -1,14 +1,44 @@
 {
   "name": "nuxt-charts",
-  "version": "2.2.1",
-  "description": "Nuxt module for vue-chrts (legacy Unovis engine)",
+  "version": "3.0.0-beta.0",
+  "description": "Beautiful chart components for Nuxt (vccs engine) — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Candlestick, Status Tracker",
   "license": "MIT",
+  "author": "Dennis Adriaansen <adriaansendennis@gmail.com>",
+  "homepage": "https://nuxtcharts.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dennisadriaans/vue-chrts.git",
+    "directory": "packages/nuxt-charts-next"
+  },
+  "bugs": {
+    "url": "https://github.com/dennisadriaans/vue-chrts/issues"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "vue",
+    "charts",
+    "chart",
+    "dataviz",
+    "visualization",
+    "vccs"
+  ],
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs",
       "default": "./dist/module.mjs"
+    },
+    "./types": {
+      "types": "./dist/runtime/types.d.ts",
+      "import": "./dist/runtime/types.js",
+      "default": "./dist/runtime/types.js"
+    },
+    "./enums": {
+      "types": "./dist/runtime/enums.d.ts",
+      "import": "./dist/runtime/enums.js",
+      "default": "./dist/runtime/enums.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -17,7 +47,18 @@
     "dist"
   ],
   "dependencies": {
-    "vue-chrts": "2.2.1"
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-shape": "^3.1.8",
+    "@types/d3-zoom": "^3.0.8",
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
+    "motion-v": "^2.3.0",
+    "vccs": "^0.4.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",
@@ -27,30 +68,33 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.3.0",
     "@nuxt/test-utils": "^3.23.0",
-    "@playwright/test": "^1.61.1",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "latest",
-    "changelogen": "^0.6.2",
-    "commit-and-tag-version": "^12.5.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.11",
     "eslint": "^9.39.2",
+    "happy-dom": "^20.10.6",
     "nuxt": "^4.3.0",
     "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
     "vue-tsc": "^3.2.4"
   },
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  },
   "scripts": {
     "dev": "nuxi dev playground",
-    "build": "nuxi build playground",
+    "build": "nuxt-module-build build",
+    "build:playground": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "pnpm run prepack && commit-and-tag-version && pnpm publish",
+    "release": "node ../../tools/release.mjs --package nuxt-charts",
     "lint": "eslint .",
     "typecheck": "pnpm run test:types",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:e2e": "playwright test",
-    "test:e2e:prod": "NUXT_CHARTS_E2E_MODE=prod playwright test",
-    "test:e2e:all": "./scripts/run-e2e.sh",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "release:dry": "node ../../tools/release.mjs --package nuxt-charts --dry-run"
   }
 }

package/dist/runtime/vue-chrts.d.ts

@@ -1 +0,0 @@
-export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, GanttChart, DagreGraph, DualChart, SankeyChart, TopoJSONMap, DottedMap, } from "vue-chrts";

package/dist/runtime/vue-chrts.js

@@ -1,13 +0,0 @@
-export {
-  AreaChart,
-  LineChart,
-  BarChart,
-  DonutChart,
-  BubbleChart,
-  GanttChart,
-  DagreGraph,
-  DualChart,
-  SankeyChart,
-  TopoJSONMap,
-  DottedMap
-} from "vue-chrts";