nuxt-charts 2.2.1-beta.0 → 3.0.0-beta.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) [year] [fullname]
+Copyright (c) 2025 Dennis Adriaansen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,109 +1,110 @@
 # nuxt-charts
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
+Beautiful chart components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Candlestick and Status Tracker.
 
-Nuxt module for [vue-chrts](https://github.com/dennisadriaans/vue-chrts/tree/main/packages/vue)
+Powered by [vccs](https://vue-charts.com) (Vue port of Recharts). Drop-in config-prop API from nuxt-charts v2.
 
-## Features
-
-- 📊 Use beautiful chart components in your Nuxt applications
-- 🔄 Auto-imports for all chart components
-- 📊 Multiple types: Line, Bar, Area, Donut
-- 🎨 Easily customizable
-- 💡 Simple, intuitive API
-- 🚀 Built with Vue 3 and TypeScript
-
-## Installation
+## Install
 
 ```bash
-# npm
-npm install nuxt-charts
-
-# yarn
-yarn add nuxt-charts
-
-# pnpm
-pnpm add nuxt-charts
+# beta (v3)
+pnpm add nuxt-charts@beta
 ```
 
-## Usage
-
-Add the module to your Nuxt config:
-
 ```ts
-// nuxt.config.ts
 export default defineNuxtConfig({
-  modules: ["nuxt-charts"]
-});
+  modules: ["nuxt-charts"],
+})
 ```
 
-Then use the components in your Nuxt application:
+## Charts
 
-```vue
-<template>
-  <div class="chart-wrapper">
-  <LineChart
-    :data="data"
-    :categories="categories"
-    :height="300"
-    :xFormatter="xFormatter"
-    xLabel="Month"
-    yLabel="Amount"
-  />
-  </div>
-</template>
+| Component | Notes |
+|---|---|
+| `AreaChart` | Gradients, dither fills, stacked |
+| `BarChart` | Grouped, stacked, horizontal, cube bars |
+| `LineChart` | Multi-series, curve types |
+| `DonutChart` | Center slot for labels |
+| `BubbleChart` | Scatter with size encoding |
+| `RadarChart` | New in v3 |
+| `RadialBarChart` | New in v3 |
+| `FunnelChart` | New in v3 |
+| `CandlestickChart` | New in v3 |
+| `StatusTrackerChart` | New in v3 |
+
+### New cross-cutting props (cartesian charts)
+
+- `yAxes` — plot series with different units on independent y-axes.
+- `referenceLines` — draw horizontal / vertical reference lines across the plot.
+- `syncId` — synchronise tooltip / hover across charts that share the same id.
+- Revived from v2: `xExplicitTicks` / `yExplicitTicks` (→ axis `ticks`),
+  `minMaxTicksOnly` (→ `interval="preserveStartEnd"`), and `AxisConfig` tick text
+  colour / size / alignment now apply.
 
-<script setup>
-import { LineChart } from 'vue-chrts';
+#### Multiple y-axes
 
-const data = [
-  { month: 'Jan', sales: 100, profit: 50 },
-  { month: 'Feb', sales: 120, profit: 55 },
-  { month: 'Mar', sales: 180, profit: 80 },
-  { month: 'Apr', sales: 110, profit: 40 },
-  { month: 'May', sales: 90, profit: 30 },
-];
+Give a category a `yAxis` id and describe that axis in `yAxes`. Series sharing
+an id share a scale; series without one stay on the primary axis, so existing
+charts are unaffected.
 
+```vue
+<script setup lang="ts">
 const categories = {
-  sales: {
-    name: 'Sales',
-    color: '#3b82f6'
-  },
-  profit: {
-    name: 'Profit', 
-    color: '#10b981'
-  }
+  indoor: { name: "Indoor", color: "#2662d9", yAxis: "temp" },
+  outdoor: { name: "Outdoor", color: "#e23670", yAxis: "temp" },
+  humidity: { name: "Humidity", color: "#af57db", yAxis: "pct" },
 };
 
-const xFormatter = (i) => data[i].month;
+const yAxes = {
+  temp: { orientation: "left", label: "°C" },
+  pct: { orientation: "right", label: "%", domain: [0, 100] },
+};
 </script>
+
+<template>
+  <LineChart :data="data" :categories="categories" :y-axes="yAxes" :height="320" x-axis="time" />
+</template>
 ```
 
-## Available Components
+Each axis accepts `orientation`, `label`, `domain`, `numTicks`, `formatter`,
+`hide`, and the usual `AxisConfig` tick options; anything unset falls back to
+the top-level `yLabel` / `yDomain` / `yAxisConfig` props. Supported on
+`LineChart`, `AreaChart` and `BarChart` (vertical orientation).
 
-- `AreaChart` - Area chart
-- `AreaStackedChart` - Stacked area chart
-- `LineChart` - Line chart
-- `BarChart` - Bar chart
-- `DonutChart` - Donut chart
+### Deferred / removed
 
-## Auto-imported Types
+- **`SankeyChart`** — deferred: the published `vccs` release does not yet export
+  a Sankey chart. Returns once `vccs` ships it.
+- **`DualChart`** — planned for v3.1 (maps onto the `vccs` `ComposedChart`).
+- **`GanttChart`, `DagreGraph`, `Maps`** — removed in v3. They were Unovis /
+  d3-geo specific and have no `vccs` equivalent.
 
-The following types are auto-imported:
+## Module options
 
-- `LegendPosition`
-- `CurveType`
-- `Orientation`
-- `BulletLegendItemInterface`
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-charts"],
+  nuxtCharts: {
+    prefix: "",        // prefix component names, e.g. "V" -> <VBarChart>
+    global: true,      // register globally (no import needed)
+    autoImports: true, // auto-import enums and prop types
+    include: [],       // [] = all; or a subset, e.g. ["BarChart", "LineChart"]
+  },
+})
+```
 
-## License
+## Auto-imported enums & types
 
-MIT
+- Enums: `CurveType`, `LegendPosition`, `Orientation`, `DonutType`
+- Types: `AreaChartProps`, `BarChartProps`, `LineChartProps`, `BubbleChartProps`,
+  `DonutChartProps`, `RadarChartProps`, `RadialBarChartProps`, `FunnelChartProps`,
+  `StatusTrackerChartProps`, `StatusTrackerDatum`, `BulletLegendItemInterface`,
+  `AxisConfig`, `TooltipConfig`, `ValueLabel`, `ReferenceLineConfig`
+
+## Migrating from v2
 
-<!-- Badges -->
+See the [Upgrade to v3](https://nuxtcharts.com/docs/getting-started/upgrade-to-v3) guide. Specialty charts (maps, gantt, dual, sankey, dagre) are not in v3 yet — stay on `nuxt-charts@2` if you need them.
 
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-charts/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/nuxt-charts
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-charts.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/nuxt-charts
+## License
+
+MIT

package/dist/module.d.mts

@@ -2,22 +2,22 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
     /**
-     * Prefix for component names
+     * Prefix for component names.
      * @default ''
      */
     prefix?: string;
     /**
-     * Register global components
+     * Register components globally (no explicit import needed in templates).
      * @default true
      */
     global?: boolean;
     /**
-     * Use auto-imports (recommended)
+     * Auto-import enums and types.
      * @default true
      */
     autoImports?: boolean;
     /**
-     * Components to include (empty array means all components)
+     * Components to include. Empty means all.
      * @default []
      */
     include?: string[];

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3"
   },
-  "version": "2.2.1-beta.0",
+  "version": "3.0.0-beta.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,85 +1,70 @@
-import { createRequire } from 'node:module';
-import { dirname } from 'node:path';
-import { addComponent, addImportsSources, defineNuxtModule, createResolver } from '@nuxt/kit';
+import { createResolver, addComponent, addImportsSources, defineNuxtModule } from '@nuxt/kit';
 
-const resolveComponents = (config, filePath) => {
+const COMPONENTS = {
+  AreaChart: "AreaChart",
+  BarChart: "BarChart",
+  LineChart: "LineChart",
+  DonutChart: "DonutChart",
+  BubbleChart: "BubbleChart",
+  RadarChart: "RadarChart",
+  RadialBarChart: "RadialBarChart",
+  FunnelChart: "FunnelChart",
+  CandlestickChart: "CandlestickChart",
+  StatusTrackerChart: "StatusTrackerChart"
+};
+const resolveComponents = (config, resolverUrl) => {
   const { prefix, include, global } = config;
-  const allComponents = [
-    "AreaChart",
-    "LineChart",
-    "BarChart",
-    "DonutChart",
-    "BubbleChart",
-    "GanttChart",
-    "DagreGraph",
-    "DualChart",
-    "SankeyChart",
-    "TopoJSONMap",
-    "DottedMap"
-  ];
-  const components = include?.length ? allComponents.filter((component) => include.includes(component)) : allComponents;
-  components.forEach((component) => {
+  const { resolve } = createResolver(resolverUrl);
+  const names = Object.keys(COMPONENTS).filter(
+    (name) => include?.length ? include.includes(name) : true
+  );
+  for (const name of names) {
     addComponent({
-      export: component,
-      name: prefix + component,
+      name: `${prefix}${name}`,
+      filePath: resolve(`./runtime/components/${COMPONENTS[name]}.vue`),
       mode: "client",
-      global,
-      filePath
+      global
     });
-  });
+  }
 };
 
-const resolveImports = (config, filePath) => {
-  if (!config.autoImports) {
-    return;
-  }
-  const allTypes = ["BulletLegendItemInterface", "MarkerConfig", "CrosshairConfig", "AxisConfig", "TooltipConfig", "MapRegion", "MapPin"];
-  addImportsSources({
-    from: "vue-chrts/types",
-    type: true,
-    imports: [...allTypes]
-  });
-  const enumImports = ["CurveType", "LegendPosition", "Orientation"];
-  addImportsSources({
-    from: "vue-chrts/enums",
-    imports: [...enumImports]
-  });
-  const runtimeImports = ["DonutType", "getMap", "getPin"];
-  addImportsSources({
-    from: "vue-chrts",
-    imports: [...runtimeImports]
-  });
-  const geoImports = ["geoMercator"];
+const resolveImports = (config, resolverUrl) => {
+  if (!config.autoImports) return;
+  const { resolve } = createResolver(resolverUrl);
   addImportsSources({
-    from: "vue-chrts",
-    imports: [...geoImports]
+    from: resolve("./runtime/enums"),
+    imports: ["CurveType", "LegendPosition", "Orientation", "DonutType"]
   });
-  const topoJsonImports = [
-    "ChinaTopoJSON",
-    "FranceTopoJSON",
-    "GermanyTopoJSON",
-    "IndiaTopoJSON",
-    "UKTopoJSON",
-    "USATopoJSON",
-    "USCountiesTopoJSON",
-    "WorldMap110mAlphaTopoJSON",
-    "WorldMapSimplestTopoJSON",
-    "WorldMapTopoJSON"
-  ];
   addImportsSources({
-    from: "vue-chrts",
-    imports: [...topoJsonImports]
+    from: resolve("./runtime/types"),
+    type: true,
+    imports: [
+      "AreaChartProps",
+      "BarChartProps",
+      "LineChartProps",
+      "BubbleChartProps",
+      "DonutChartProps",
+      "RadarChartProps",
+      "RadialBarChartProps",
+      "FunnelChartProps",
+      "CandlestickChartProps",
+      "StatusTrackerChartProps",
+      "StatusTrackerDatum",
+      "BulletLegendItemInterface",
+      "AxisConfig",
+      "TooltipConfig",
+      "ValueLabel",
+      "ReferenceLineConfig",
+      // v2 parity: these auto-imported in nuxt-charts v2. The types still exist
+      // (MarkerConfig drives line/area dot rendering; CrosshairConfig is inert
+      // but kept so old templates type-check), so keep them auto-importable.
+      "MarkerConfig",
+      "CrosshairConfig"
+    ]
   });
 };
 
-function resolvePackageDir(packageName, fromPackage) {
-  try {
-    const _require = fromPackage ? createRequire(createRequire(import.meta.url).resolve(fromPackage)) : createRequire(import.meta.url);
-    return dirname(_require.resolve(`${packageName}/package.json`));
-  } catch {
-    return void 0;
-  }
-}
+const VCCS_DEPS = ["vccs", "motion-v", "vccs > eventemitter3"];
 const module$1 = defineNuxtModule({
   meta: {
     name: "nuxt-charts",
@@ -94,40 +79,24 @@ const module$1 = defineNuxtModule({
     autoImports: true,
     include: []
   },
-  async setup(options, nuxt) {
-    nuxt.hook("modules:done", () => {
-      nuxt.options.build.transpile = nuxt.options.build.transpile.filter(
-        (entry) => entry !== "vue-chrts"
-      );
-    });
-    const unovisTsDir = resolvePackageDir("@unovis/ts", "vue-chrts");
-    const unovisVueDir = resolvePackageDir("@unovis/vue", "vue-chrts");
-    if (unovisTsDir) {
-      nuxt.options.alias["@unovis/ts"] = unovisTsDir;
-    }
-    if (unovisVueDir) {
-      nuxt.options.alias["@unovis/vue"] = unovisVueDir;
-    }
+  setup(options, nuxt) {
     nuxt.hook("vite:extendConfig", (viteConfig, { isClient }) => {
       if (!isClient) return;
       const config = viteConfig;
       config.optimizeDeps ??= {};
       config.optimizeDeps.include ??= [];
-      const entries = [
-        "vue-chrts",
-        ...unovisTsDir ? ["@unovis/ts"] : [],
-        ...unovisVueDir ? ["@unovis/vue"] : []
-      ];
-      for (const entry of entries) {
-        if (!config.optimizeDeps.include.includes(entry)) {
-          config.optimizeDeps.include.push(entry);
-        }
+      const include = config.optimizeDeps.include;
+      for (const dep of VCCS_DEPS) {
+        if (!include.includes(dep)) include.push(dep);
       }
     });
     const { resolve } = createResolver(import.meta.url);
-    const runtimePath = resolve("./runtime/vue-chrts");
-    resolveImports(options);
-    resolveComponents(options, runtimePath);
+    nuxt.options.css.push(
+      resolve("./runtime/assets/theme.css"),
+      resolve("./runtime/assets/components.css")
+    );
+    resolveImports(options, import.meta.url);
+    resolveComponents(options, import.meta.url);
   }
 });
 

package/dist/runtime/assets/components.css

@@ -0,0 +1 @@
+@layer vue-chrts{.vc-tooltip{background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));font-size:var(--vc-legend-size,.75rem);line-height:1.5;min-width:8rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none}.vc-tooltip,.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0))}.vc-tooltip__label{font-weight:500;margin:0 0 .25rem}.vc-tooltip__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0}.vc-tooltip__item{align-items:center;display:flex;gap:.375rem}.vc-tooltip__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:.5rem;width:.5rem}.vc-tooltip__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-tooltip__value{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto}.vc-legend{flex-wrap:wrap;font-size:var(--vc-legend-size,.75rem);font-weight:var(--vc-legend-weight,400);gap:var(--vc-legend-gap,.75rem);justify-content:center;line-height:1.5;list-style:none;margin:0;padding:0}.vc-legend,.vc-legend__item{align-items:center;display:flex}.vc-legend__item{gap:.375rem}.vc-legend__item--inactive{opacity:.4}.vc-legend__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-candlestick-chart{cursor:crosshair;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vc-candlestick-chart__svg{display:block;overflow:visible;width:100%}.vc-funnel-layered{position:relative;width:100%}.vc-funnel-layered__tooltip{align-items:center;background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}.vc-funnel-layered__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-funnel-layered__value{font-variant-numeric:tabular-nums;font-weight:600}.vc-funnel-layered__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-funnel-layered-shape{opacity:.96;transition:opacity .15s}.vc-funnel-layered-shape:hover{opacity:1}.vc-status-tracker{color:var(--foreground,oklch(.205 0 0));font-family:inherit;width:100%}.vc-status-tracker__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.75rem}.vc-status-tracker__summary,.vc-status-tracker__title{font-size:.875rem;line-height:1.25rem;margin:0}.vc-status-tracker__title{font-weight:600}.vc-status-tracker__summary{color:var(--muted-foreground,oklch(.556 0 0));font-variant-numeric:tabular-nums}.vc-status-tracker__track{display:flex;overflow:hidden;width:100%}.vc-status-tracker__bar{display:block;flex:0 0 auto;height:100%;min-width:1px;transition:opacity .16s ease}.vc-status-tracker__bar:hover{opacity:.78}.vc-status-tracker__bar--rounded-start{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.vc-status-tracker__bar--rounded-end{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.vc-status-tracker__bar--empty:hover{opacity:1}.vc-status-tracker__labels{gap:1rem;justify-content:space-between;margin-top:.5rem}.vc-status-tracker__labels,.vc-status-tracker__legend{color:var(--vc-legend-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);line-height:1rem}.vc-status-tracker__legend{flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:.75rem 0 0;padding:0}.vc-status-tracker__legend-item{align-items:center;display:inline-flex;gap:.375rem}.vc-status-tracker__legend-dot{border-radius:9999px;flex:0 0 auto;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}}

package/dist/runtime/assets/theme.css

@@ -0,0 +1 @@
+@layer vue-chrts{.vue-chrts{--vc-grid-color:var(--border,oklch(0.922 0 0));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--border,oklch(0.922 0 0));--vc-axis-line-width:1px;--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--muted-foreground,oklch(0.556 0 0));--vc-tick-size:var(--vc-legend-size);--vc-tick-weight:var(--vc-legend-weight);--vc-axis-label-color:var(--foreground,oklch(0.205 0 0));--vc-axis-label-size:var(--vc-legend-size);--vc-axis-label-weight:500}.vue-chrts .v-charts-cartesian-axis .v-charts-label{fill:var(--vc-axis-label-color);font-size:var(--vc-axis-label-size);font-weight:var(--vc-axis-label-weight)}.vue-chrts{--vc-legend-gap:0.75rem;--vc-legend-inset:0.75rem;--vc-legend-color:var(--muted-foreground,oklch(0.556 0 0));--vc-legend-dot-size:0.5rem;--vc-hover-fill:color-mix(in oklab,var(--foreground,oklch(0.205 0 0)) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--popover,oklch(1 0 0));--vc-tooltip-fg:var(--popover-foreground,oklch(0.205 0 0));--vc-tooltip-muted:var(--muted-foreground,oklch(0.556 0 0));--vc-tooltip-border:var(--border,oklch(0.922 0 0));--vc-tooltip-radius:0.5rem;--vc-tooltip-padding:0.375rem 0.625rem;--vc-tooltip-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.vue-chrts .v-charts-xAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-x-tick-color,var(--vc-tick-color));font-size:var(--vc-x-tick-size,var(--vc-tick-size));font-weight:var(--vc-x-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-yAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-y-tick-color,var(--vc-tick-color));font-size:var(--vc-y-tick-size,var(--vc-tick-size));font-weight:var(--vc-y-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-polar-angle-axis-tick-value,.vue-chrts .v-charts-polar-radius-axis-tick-value{fill:var(--vc-tick-color);font-size:var(--vc-tick-size);font-weight:var(--vc-tick-weight)}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--border,oklch(0.269 0 0));--vc-axis-line-color:var(--border,oklch(0.269 0 0));--vc-tick-color:var(--muted-foreground,oklch(0.708 0 0));--vc-axis-label-color:var(--foreground,oklch(0.985 0 0));--vc-legend-color:var(--muted-foreground,oklch(0.708 0 0));--vc-hover-fill:color-mix(in oklab,oklch(0.985 0 0) 8%,transparent);--vc-tooltip-bg:var(--popover,oklch(0.205 0 0));--vc-tooltip-fg:var(--popover-foreground,oklch(0.985 0 0));--vc-tooltip-muted:var(--muted-foreground,oklch(0.708 0 0));--vc-tooltip-border:var(--border,oklch(0.269 0 0))}}

package/dist/runtime/components/AreaChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { AreaChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AreaChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/AreaChart.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { computed, useId } from "vue";
+import { Area, AreaChart as VccsAreaChart } from "vccs";
+import CartesianFrame from "./internal/CartesianFrame.vue";
+import GradientDefs from "./internal/GradientDefs";
+import { categoriesToSeries } from "../utils/categories";
+import { curveTypeToVccs } from "../utils/curve";
+import { markerToDot, normalizeMarkerConfig, toStrokeDasharray } from "../utils/marker";
+import { DEFAULT_GRADIENT_STOPS, gradientId } from "../utils/gradient";
+import DitherDefs from "./internal/DitherDefs";
+import { ditherId } from "../utils/dither";
+const props = defineProps({
+  xAxis: { type: null, required: false },
+  curveType: { type: String, required: false },
+  hideArea: { type: Boolean, required: false },
+  gradient: { type: Boolean, required: false, default: true },
+  gradientStops: { type: Array, required: false },
+  dither: { type: [Boolean, String], required: false },
+  ditherTile: { type: Number, required: false },
+  ditherWash: { type: Number, required: false },
+  lineWidth: { type: Number, required: false },
+  stacked: { type: Boolean, required: false },
+  lineDashArray: { type: [Array, String], required: false },
+  markerConfig: { type: Object, required: false },
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  padding: { type: Object, required: false },
+  categories: { type: Object, required: true },
+  xFormatter: { type: Function, required: false },
+  yFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  xNumTicks: { type: Number, required: false },
+  yNumTicks: { type: Number, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  xDomainLine: { type: Boolean, required: false },
+  yDomainLine: { type: Boolean, required: false },
+  xTickLine: { type: Boolean, required: false },
+  yTickLine: { type: Boolean, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  xDomain: { type: Array, required: false },
+  yDomain: { type: Array, required: false },
+  duration: { type: Number, required: false },
+  xAxisConfig: { type: Object, required: false },
+  yAxisConfig: { type: Object, required: false },
+  yAxes: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  referenceLines: { type: Array, required: false },
+  syncId: { type: String, required: false },
+  minMaxTicksOnly: { type: Boolean, required: false },
+  xExplicitTicks: { type: Array, required: false },
+  yExplicitTicks: { type: Array, required: false },
+  crosshairConfig: { type: Object, required: false },
+  theme: { type: Object, required: false }
+});
+const gradientScope = useId();
+const markers = computed(() => normalizeMarkerConfig(props.markerConfig));
+const series = computed(
+  () => categoriesToSeries(props.categories).map((s) => ({
+    ...s,
+    dot: markerToDot(markers.value[s.dataKey], s.color)
+  }))
+);
+const curve = computed(() => curveTypeToVccs(props.curveType));
+const stackId = computed(() => props.stacked ? "stack" : void 0);
+const fillOpacity = computed(() => props.hideArea ? 0 : 0.6);
+const dashArray = computed(() => toStrokeDasharray(props.lineDashArray));
+const useDither = computed(
+  () => !props.hideArea && props.dither !== void 0 && props.dither !== false
+);
+const ditherVariant = computed(
+  () => typeof props.dither === "string" ? props.dither : "bayer"
+);
+const useGradientFill = computed(
+  () => !props.hideArea && props.gradient !== false && !useDither.value
+);
+const useDitherFade = computed(
+  () => useDither.value && props.gradient !== false
+);
+const gradientStops = computed(
+  () => props.gradientStops?.length ? props.gradientStops : DEFAULT_GRADIENT_STOPS
+);
+const ditherWashStops = computed(() => {
+  if (!useDitherFade.value) return void 0;
+  const scale = props.ditherWash ?? 1;
+  if (scale <= 0) return void 0;
+  return gradientStops.value.map((stop) => ({
+    ...stop,
+    stopOpacity: stop.stopOpacity * scale
+  }));
+});
+function fillFor(dataKey, color) {
+  if (useDither.value) return `url(#${ditherId(dataKey, gradientScope)})`;
+  if (useGradientFill.value) return `url(#${gradientId(dataKey, gradientScope)})`;
+  return color;
+}
+const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : void 0);
+</script>
+
+<template>
+  <CartesianFrame :container="VccsAreaChart" :x-axis-key="xAxisKey" v-bind="props">
+    <!--
+      GradientDefs builds SVG nodes with `h()` so they land in the SVG namespace
+      inside the chart surface. Do not wrap this in vccs `<Customized>`: that
+      component subscribes to the chart store and re-renders on every tooltip
+      mousemove, which recreates all gradients and freezes the page.
+    -->
+    <GradientDefs
+      v-if="useGradientFill"
+      :series="series"
+      :stops="gradientStops"
+      :scope="gradientScope"
+    />
+    <!-- Same namespace/`Customized` constraints as GradientDefs above. -->
+    <DitherDefs
+      v-if="useDither"
+      :series="series"
+      :variant="ditherVariant"
+      :scope="gradientScope"
+      :tile="ditherTile ?? 8"
+      :fade-stops="ditherWashStops"
+      :height="height"
+    />
+    <Area
+      v-for="s in series"
+      :key="s.dataKey"
+      :data-key="s.dataKey"
+      :name="s.name"
+      :y-axis-id="s.yAxisId"
+      :type="curve"
+      :stack-id="stackId"
+      :stroke="s.color"
+      :fill="fillFor(s.dataKey, s.color)"
+      :fill-opacity="useGradientFill || useDither ? 1 : fillOpacity"
+      :stroke-width="lineWidth ?? 2"
+      :stroke-dasharray="dashArray"
+      :dot="s.dot"
+      :hide="s.hidden"
+      :is-animation-active="duration !== void 0 && duration !== 0"
+    />
+  </CartesianFrame>
+</template>

package/dist/runtime/components/AreaChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { AreaChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AreaChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/BarChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { BarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<BarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};