nuxt-charts 3.0.0 → 3.1.0

package/README.md

@@ -1,6 +1,6 @@
 # nuxt-charts
 
-Beautiful chart components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick and Status Tracker.
+Beautiful chart and map components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick, Status Tracker, Dotted Map, and TopoJSON Map.
 
 Powered by [vccs](https://vue-charts.com) (Vue port of Recharts). Drop-in config-prop API from nuxt-charts v2.
 
@@ -12,8 +12,8 @@ the same components work in any Nuxt project.
 ## Install
 
 ```bash
-# beta (v3)
-pnpm add nuxt-charts@beta
+# v3
+pnpm add nuxt-charts@next
 ```
 
 ```ts
@@ -37,6 +37,51 @@ export default defineNuxtConfig({
 | `SankeyChart` | New in v3 |
 | `CandlestickChart` | New in v3 |
 | `StatusTrackerChart` | New in v3 |
+| `DottedMap` | D3 dotted geography, pins, regional filters, and country colors |
+| `TopoJSONMap` | D3 choropleths, points, routes, projections, and heatmaps |
+
+### Maps
+
+Maps include world geometry and need no external data fetch or Unovis dependency:
+
+```vue
+<script setup lang="ts">
+const pins = [{ lat: 52.3676, lng: 4.9041, label: "Amsterdam" }];
+const data = {
+  areas: [{ id: "NLD", value: 94 }, { id: "USA", value: 91 }],
+  points: [
+    { id: "ams", latitude: 52.3676, longitude: 4.9041, label: "Amsterdam" },
+    { id: "nyc", latitude: 40.7128, longitude: -74.006, label: "New York" },
+  ],
+  links: [{ source: "ams", target: "nyc" }],
+};
+</script>
+
+<template>
+  <DottedMap :pins="pins" :height="360" :map-height="75" />
+  <TopoJSONMap :data="data" value="value" projection="equalEarth" show-point-labels />
+</template>
+```
+
+Use `topoJson`/`geoJson` for custom geography, `mapFeatureKey` to select a
+TopoJSON object, and `featureId` to match area IDs to a property. The bundled
+map accepts ISO alpha-2, alpha-3, and numeric country IDs. `areaColor`, point
+styles, and link styles accept values or typed accessor functions. Named
+projections, configured D3 projections, and projection factories are supported.
+
+Both components render SVG during SSR, resize to their containers, and share
+chart themes, tooltip/legend variants, loading/error states, and accessibility.
+Drag, pinch, double-click, and keyboard zoom work by default; `zoomOnScroll`
+enables wheel zoom and `showControls` adds zoom/reset buttons. Exposed methods:
+`zoomIn`, `zoomOut`, `zoomTo`, `resetView`; TopoJSONMap also exposes
+`fitToPoints` and `zoomToFeature`. `zoomOnClick` is opt-in.
+
+Slots provide typed tooltips, legends, SVG overlays, and custom marks
+(`pin`/`dot` or `feature`/`point`/`link`). `getMap` and `getPin` are
+auto-imported for precomputation and exported from `nuxt-charts/maps`.
+
+See [Dotted Map](https://nuxtcharts.com/docs/maps/dotted-map) and
+[TopoJSON Map](https://nuxtcharts.com/docs/maps/topojson-map) for the full API.
 
 ### New cross-cutting props (cartesian charts)
 
@@ -146,8 +191,7 @@ several charts on one page never collide.
 ### Deferred / removed
 
 - **`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.
+- **`GanttChart`, `DagreGraph`** — removed in v3. They were Unovis-specific.
 
 ## Module options
 
@@ -212,13 +256,16 @@ with `--vc-*` variables (or the backwards-compatible `--chart-color-0` through
   `SankeyChartProps`, `SankeyInputNode`, `SankeyInputLink`,
   `StatusTrackerChartProps`, `StatusTrackerDatum`, `BulletLegendItemInterface`,
   `AxisConfig`, `ValueLabel`, `ReferenceLineConfig`, `NumericKeys`
+- Map types: `DottedMapProps`, `TopoJSONMapProps`, `MapData`, `MapArea`,
+  `MapFeature`, `MapPoint`, `MapLink`, `MapPin`, `MapDot`, `MapGeometry`,
+  `MapProjection`, `MapRegion`, `MapZoom`, `PrecomputedMap`
 - Style variant unions: `BarVariant`, `AreaFillVariant`, `StrokeVariant`,
   `DotVariant`, `DitherVariant`, `BackgroundVariant`, `LegendIndicatorVariant`,
   `TooltipVariant`, `TooltipRoundness`, `RadarVariant`, `RadialVariant`
 
 ## Migrating from v2
 
-See the [Upgrade to v3](https://nuxtcharts.com/docs/getting-started/upgrade-to-v3) guide. Specialty charts (maps, gantt, dual, dagre) are not in v3 yet — stay on `nuxt-charts@2` if you need them.
+See the [Upgrade to v3](https://nuxtcharts.com/docs/getting-started/upgrade-to-v3) guide. Maps now use D3 and include world geometry. Gantt, dual, and dagre charts remain deferred or removed.
 
 ## License
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3"
   },
-  "version": "3.0.0",
+  "version": "3.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -11,7 +11,12 @@ const COMPONENTS = {
   FunnelChart: "FunnelChart",
   SankeyChart: "SankeyChart",
   CandlestickChart: "CandlestickChart",
-  StatusTrackerChart: "StatusTrackerChart"
+  StatusTrackerChart: "StatusTrackerChart",
+  DottedMap: "DottedMap",
+  TopoJSONMap: "TopoJSONMap",
+  // Data-aware primitive: renders a serializable `ChartSpec` over raw rows by
+  // delegating to the adapters above.
+  DataChart: "DataChart"
 };
 const resolveComponents = (config, resolverUrl) => {
   const { prefix, include, global } = config;
@@ -23,7 +28,7 @@ const resolveComponents = (config, resolverUrl) => {
     addComponent({
       name: `${prefix}${name}`,
       filePath: resolve(`./runtime/components/${COMPONENTS[name]}.vue`),
-      mode: "client",
+      mode: name === "DottedMap" || name === "TopoJSONMap" ? "all" : "client",
       global
     });
   }
@@ -77,7 +82,55 @@ const resolveImports = (config, resolverUrl) => {
       "TooltipVariant",
       "TooltipRoundness",
       "RadarVariant",
-      "RadialVariant"
+      "RadialVariant",
+      "DottedMapProps",
+      "TopoJSONMapProps",
+      "MapsData",
+      "MapData",
+      "MapArea",
+      "MapFeature",
+      "MapPoint",
+      "MapLink",
+      "MapPin",
+      "MapDot",
+      "MapRegion",
+      "MapRegionName",
+      "MapGeometry",
+      "MapProjection",
+      "MapProjectionName",
+      "MapLegendItem",
+      "MapZoom",
+      "MapAccessor",
+      "MapInteractionKind",
+      "MapBaseProps",
+      "MapMarkSlot",
+      "MapOverlaySlot",
+      "MapTooltipSlot",
+      "DottedMapTooltipSlot",
+      "PrecomputedMap"
+    ]
+  });
+  addImportsSources({
+    from: resolve("./runtime/utils/dottedMap"),
+    imports: ["getMap", "getPin"]
+  });
+  addImportsSources({
+    from: resolve("./runtime/spec"),
+    imports: ["transform", "toCsv", "validateSpec", "seriesLabel", "formatBucket"]
+  });
+  addImportsSources({
+    from: resolve("./runtime/spec"),
+    type: true,
+    imports: [
+      "ChartSpec",
+      "SpecChartType",
+      "SpecAggregate",
+      "SpecInterval",
+      "SpecCompare",
+      "SpecDimensions",
+      "SpecTransform",
+      "SpecDatum",
+      "TransformResult"
     ]
   });
 };

package/dist/runtime/assets/components.css

@@ -1 +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));color:var(--vc-tooltip-fg,oklch(.205 0 0));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--frosted-glass{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:color-mix(in oklab,var(--vc-tooltip-bg,oklch(1 0 0)) 70%,transparent)}.vc-tooltip--sm{border-radius:.125rem}.vc-tooltip--md{border-radius:.375rem}.vc-tooltip--lg{border-radius:.5rem}.vc-tooltip--xl{border-radius:.75rem}.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0));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__dot--square{border-radius:0}.vc-legend__dot--rounded-square{border-radius:2px}.vc-legend__dot--circle{border-radius:9999px}.vc-legend__dot--vertical-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*1.5);width:calc(var(--vc-legend-dot-size, .5rem)*.5)}.vc-legend__dot--horizontal-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*.5);width:calc(var(--vc-legend-dot-size, .5rem)*1.5)}.vc-legend__dot--circle-outline,.vc-legend__dot--rounded-square-outline{box-sizing:border-box;height:calc(var(--vc-legend-dot-size, .5rem)*1.25);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;width:calc(var(--vc-legend-dot-size, .5rem)*1.25)}.vc-legend__dot--circle-outline{border-radius:9999px}.vc-legend__dot--rounded-square-outline{border-radius:3px}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-skeleton{align-items:stretch;box-sizing:border-box;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;overflow:hidden;padding:8% 4%;position:relative;width:100%}.vc-skeleton__bars{align-items:flex-end;display:flex;gap:2%;height:100%;width:100%}.vc-skeleton__bar{background:currentColor;border-radius:2px 2px 0 0;flex:1;opacity:.14}.vc-skeleton__wave{height:100%;opacity:.14;width:100%}.vc-skeleton__ring{aspect-ratio:1;border:1.75rem solid;border-radius:9999px;height:100%;margin:auto;opacity:.14}.vc-skeleton__shimmer{animation:vc-skeleton-sweep 1.8s linear infinite;background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);inset:0;opacity:.1;position:absolute}@keyframes vc-skeleton-sweep{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.vc-skeleton__pill{align-items:center;background:var(--vc-surface-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:.375rem;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;height:-moz-fit-content;height:fit-content;inset:0;line-height:1.5;margin:auto;padding:.125rem .5rem;position:absolute;width:-moz-fit-content;width:fit-content}.vc-skeleton__spinner{animation:vc-skeleton-spin .7s linear infinite;border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:9999px;border-top:1px solid;height:.75rem;width:.75rem}@keyframes vc-skeleton-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.vc-skeleton__shimmer,.vc-skeleton__spinner{animation:none}}.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{position:relative}.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-funnel .v-charts-label-list .v-charts-label{fill:var(--vc-funnel-value-color,oklch(.205 0 0));font-size:var(--vc-funnel-value-size,.75rem);font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-classic-shape{cursor:default}.vc-funnel-classic-shape__shadow{opacity:var(--vc-funnel-shadow-opacity,.16)}.vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-opacity,.92);transition:opacity .15s ease}.vc-funnel-classic-shape__highlight{fill:none;stroke:hsla(0,0%,100%,.24);stroke-width:1;vector-effect:non-scaling-stroke}.vc-funnel-classic-shape:hover .vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-hover-opacity,1)}.vc-funnel-classic-shape__name,.vc-funnel-classic-shape__value{font-family:inherit;paint-order:stroke;pointer-events:none;stroke:rgba(0,0,0,.12);stroke-linejoin:round;stroke-width:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-classic-shape__value{fill:var(--vc-funnel-inside-value-color,#fff);font-variant-numeric:tabular-nums}.vc-funnel-classic-shape__name{fill:var(--vc-funnel-inside-label-color,#fff);opacity:.78}.vc-funnel-layered-shape__divider{stroke:var(--vc-surface-bg,oklch(1 0 0))}.vc-funnel-layered-shape__badge-text,.vc-funnel-layered-shape__name,.vc-funnel-layered-shape__value{font-family:inherit;pointer-events:none;stroke:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-layered-shape__value{fill:var(--vc-funnel-value-color,var(--vc-axis-label-color,oklch(.205 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-layered-shape__badge{fill:var(--vc-funnel-badge-bg,var(--vc-surface-bg,oklch(1 0 0)));fill-opacity:var(--vc-funnel-badge-opacity,.82);stroke:var(--vc-funnel-badge-border,var(--vc-axis-line-color,oklch(.922 0 0)));stroke-opacity:.7}.vc-funnel-layered-shape__badge-text{fill:var(--vc-funnel-badge-color,var(--vc-tick-color,oklch(.556 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-badge-weight,600)}.vc-funnel-layered-shape__name{fill:var(--vc-funnel-label-color,var(--vc-tick-color,oklch(.556 0 0)));font-weight:var(--vc-funnel-label-weight,500)}.vc-status-tracker{color:var(--vc-axis-label-color,var(--ui-text-highlighted,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(--vc-tick-color,var(--ui-text-muted,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:var(--vc-legend-inset,.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)}}.vc-sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.vc-empty-state{color:var(--vc-tick-color);display:grid;font-size:var(--vc-legend-size);place-items:center}
+@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));color:var(--vc-tooltip-fg,oklch(.205 0 0));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--frosted-glass{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:color-mix(in oklab,var(--vc-tooltip-bg,oklch(1 0 0)) 70%,transparent)}.vc-tooltip--sm{border-radius:.125rem}.vc-tooltip--md{border-radius:.375rem}.vc-tooltip--lg{border-radius:.5rem}.vc-tooltip--xl{border-radius:.75rem}.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0));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__dot--square{border-radius:0}.vc-legend__dot--rounded-square{border-radius:2px}.vc-legend__dot--circle{border-radius:9999px}.vc-legend__dot--vertical-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*1.5);width:calc(var(--vc-legend-dot-size, .5rem)*.5)}.vc-legend__dot--horizontal-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*.5);width:calc(var(--vc-legend-dot-size, .5rem)*1.5)}.vc-legend__dot--circle-outline,.vc-legend__dot--rounded-square-outline{box-sizing:border-box;height:calc(var(--vc-legend-dot-size, .5rem)*1.25);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;width:calc(var(--vc-legend-dot-size, .5rem)*1.25)}.vc-legend__dot--circle-outline{border-radius:9999px}.vc-legend__dot--rounded-square-outline{border-radius:3px}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-skeleton{align-items:stretch;box-sizing:border-box;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;overflow:hidden;padding:8% 4%;position:relative;width:100%}.vc-skeleton__bars{align-items:flex-end;display:flex;gap:2%;height:100%;width:100%}.vc-skeleton__bar{background:currentColor;border-radius:2px 2px 0 0;flex:1;opacity:.14}.vc-skeleton__wave{height:100%;opacity:.14;width:100%}.vc-skeleton__ring{aspect-ratio:1;border:1.75rem solid;border-radius:9999px;height:100%;margin:auto;opacity:.14}.vc-skeleton__shimmer{animation:vc-skeleton-sweep 1.8s linear infinite;background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);inset:0;opacity:.1;position:absolute}@keyframes vc-skeleton-sweep{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.vc-skeleton__pill{align-items:center;background:var(--vc-surface-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:.375rem;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;height:-moz-fit-content;height:fit-content;inset:0;line-height:1.5;margin:auto;padding:.125rem .5rem;position:absolute;width:-moz-fit-content;width:fit-content}.vc-skeleton__spinner{animation:vc-skeleton-spin .7s linear infinite;border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:9999px;border-top:1px solid;height:.75rem;width:.75rem}@keyframes vc-skeleton-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.vc-skeleton__shimmer,.vc-skeleton__spinner{animation:none}}.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{position:relative}.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-funnel .v-charts-label-list .v-charts-label{fill:var(--vc-funnel-value-color,oklch(.205 0 0));font-size:var(--vc-funnel-value-size,.75rem);font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-classic-shape{cursor:default}.vc-funnel-classic-shape__shadow{opacity:var(--vc-funnel-shadow-opacity,.16)}.vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-opacity,.92);transition:opacity .15s ease}.vc-funnel-classic-shape__highlight{fill:none;stroke:hsla(0,0%,100%,.24);stroke-width:1;vector-effect:non-scaling-stroke}.vc-funnel-classic-shape:hover .vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-hover-opacity,1)}.vc-funnel-classic-shape__name,.vc-funnel-classic-shape__value{font-family:inherit;paint-order:stroke;pointer-events:none;stroke:rgba(0,0,0,.12);stroke-linejoin:round;stroke-width:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-classic-shape__value{fill:var(--vc-funnel-inside-value-color,#fff);font-variant-numeric:tabular-nums}.vc-funnel-classic-shape__name{fill:var(--vc-funnel-inside-label-color,#fff);opacity:.78}.vc-funnel-layered-shape__divider{stroke:var(--vc-surface-bg,oklch(1 0 0))}.vc-funnel-layered-shape__badge-text,.vc-funnel-layered-shape__name,.vc-funnel-layered-shape__value{font-family:inherit;pointer-events:none;stroke:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-layered-shape__value{fill:var(--vc-funnel-value-color,var(--vc-axis-label-color,oklch(.205 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-layered-shape__badge{fill:var(--vc-funnel-badge-bg,var(--vc-surface-bg,oklch(1 0 0)));fill-opacity:var(--vc-funnel-badge-opacity,.82);stroke:var(--vc-funnel-badge-border,var(--vc-axis-line-color,oklch(.922 0 0)));stroke-opacity:.7}.vc-funnel-layered-shape__badge-text{fill:var(--vc-funnel-badge-color,var(--vc-tick-color,oklch(.556 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-badge-weight,600)}.vc-funnel-layered-shape__name{fill:var(--vc-funnel-label-color,var(--vc-tick-color,oklch(.556 0 0)));font-weight:var(--vc-funnel-label-weight,500)}.vc-status-tracker{color:var(--vc-axis-label-color,var(--ui-text-highlighted,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(--vc-tick-color,var(--ui-text-muted,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:var(--vc-legend-inset,.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)}}.vc-sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.vc-empty-state{color:var(--vc-tick-color);display:grid;font-size:var(--vc-legend-size);place-items:center}@layer vue-chrts{.vc-map{display:flex;gap:var(--vc-legend-inset)}.vc-map__viewport{overflow:hidden;position:relative;width:100%}.vc-map__svg{display:block;height:100%;width:100%}.vc-map__svg--zoomable{cursor:grab;touch-action:none}.vc-map__svg--zoomable:active{cursor:grabbing}.vc-map__svg:focus-visible{outline:2px solid var(--vc-series-0);outline-offset:-2px}.vc-map__mark:focus-visible{filter:brightness(1.25);outline:none}.vc-map__mark:focus-visible>circle,.vc-map__mark:focus-visible>path{stroke:var(--vc-axis-label-color);stroke-width:2}.vc-map__label{fill:var(--vc-axis-label-color);font:var(--vc-tick-weight) var(--vc-tick-size) var(--vc-font-family);paint-order:stroke;pointer-events:none;stroke:var(--vc-surface-bg);stroke-width:3px}.vc-map__tooltip{max-width:min(280px,90%);pointer-events:none;position:absolute;z-index:2}.vc-map__legend{display:flex}.vc-map__controls{background:var(--vc-surface-bg);border:1px solid var(--vc-tooltip-border);border-radius:var(--vc-tooltip-radius);bottom:12px;display:flex;position:absolute;right:12px}.vc-map__controls button{background:transparent;border:0;color:var(--vc-axis-label-color);cursor:pointer;font:inherit;height:32px;width:32px}.vc-map__controls button:hover{background:var(--vc-hover-fill)}.vc-map__controls button:focus-visible{outline:2px solid var(--vc-series-0);outline-offset:-2px}}

package/dist/runtime/assets/theme.css

@@ -1 +1 @@
-@layer vue-chrts{.vue-chrts :focus,.vue-chrts :focus-visible,.vue-chrts:focus,.vue-chrts:focus-visible{outline:none}.vue-chrts{--vc-font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);--vc-series-0:var(--chart-color-0,var(--ui-primary,oklch(0.63 0.18 155)));--vc-series-1:var(--chart-color-1,var(--ui-secondary,oklch(0.62 0.19 255)));--vc-series-2:var(--chart-color-2,var(--ui-success,oklch(0.64 0.17 145)));--vc-series-3:var(--chart-color-3,var(--ui-info,oklch(0.68 0.15 235)));--vc-series-4:var(--chart-color-4,var(--ui-warning,oklch(0.75 0.16 75)));--vc-series-5:var(--chart-color-5,var(--ui-error,oklch(0.63 0.22 25)));--vc-series-6:var(--chart-color-6,oklch(0.66 0.18 305));--vc-series-7:var(--chart-color-7,oklch(0.7 0.15 195));font-family:var(--vc-font-family);--vc-grid-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-axis-line-width:1px;--vc-surface-bg:var(--ui-bg,var(--background,oklch(1 0 0)));--vc-reference-line-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-candle-up:var(--ui-success,oklch(0.696 0.17 162.48));--vc-candle-down:var(--ui-error,oklch(0.637 0.237 25.331));--vc-bg-pattern-color:var(--vc-grid-color);--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--ui-text-muted,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(--ui-text-highlighted,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(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-legend-dot-size:0.5rem;--vc-funnel-value-size:var(--vc-legend-size);--vc-funnel-value-color:var(--vc-axis-label-color);--vc-funnel-value-weight:600;--vc-funnel-label-color:var(--vc-tick-color);--vc-funnel-label-weight:500;--vc-funnel-badge-bg:var(--vc-surface-bg);--vc-funnel-badge-color:var(--vc-tick-color);--vc-funnel-badge-border:var(--vc-axis-line-color);--vc-funnel-badge-weight:600;--vc-funnel-badge-opacity:0.82;--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0))) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(1 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.205 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-tooltip-radius:var(--ui-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.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:vc-dash-march 1s linear infinite}@keyframes vc-dash-march{to{stroke-dashoffset:-6}}@media (prefers-reduced-motion:reduce){.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:none}}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-surface-bg:var(--ui-bg,var(--background,oklch(0.145 0 0)));--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.985 0 0)));--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,oklch(0.985 0 0)) 8%,transparent);--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(0.205 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.985 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.269 0 0)))}}
+@layer vue-chrts{.vue-chrts :focus,.vue-chrts :focus-visible,.vue-chrts:focus,.vue-chrts:focus-visible{outline:none}.vue-chrts{--vc-map-feature-color:var(--ui-bg-accented,var(--vc-grid-color));--vc-map-boundary-color:var(--ui-border-accented,var(--vc-surface-bg));--vc-map-dot-color:var(--ui-text-dimmed,var(--vc-tick-color));--vc-font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);--vc-series-0:var(--chart-color-0,var(--ui-primary,oklch(0.63 0.18 155)));--vc-series-1:var(--chart-color-1,var(--ui-secondary,oklch(0.62 0.19 255)));--vc-series-2:var(--chart-color-2,var(--ui-success,oklch(0.64 0.17 145)));--vc-series-3:var(--chart-color-3,var(--ui-info,oklch(0.68 0.15 235)));--vc-series-4:var(--chart-color-4,var(--ui-warning,oklch(0.75 0.16 75)));--vc-series-5:var(--chart-color-5,var(--ui-error,oklch(0.63 0.22 25)));--vc-series-6:var(--chart-color-6,oklch(0.66 0.18 305));--vc-series-7:var(--chart-color-7,oklch(0.7 0.15 195));font-family:var(--vc-font-family);--vc-grid-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-axis-line-width:1px;--vc-surface-bg:var(--ui-bg,var(--background,oklch(1 0 0)));--vc-reference-line-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-candle-up:var(--ui-success,oklch(0.696 0.17 162.48));--vc-candle-down:var(--ui-error,oklch(0.637 0.237 25.331));--vc-bg-pattern-color:var(--vc-grid-color);--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--ui-text-muted,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(--ui-text-highlighted,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(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-legend-dot-size:0.5rem;--vc-funnel-value-size:var(--vc-legend-size);--vc-funnel-value-color:var(--vc-axis-label-color);--vc-funnel-value-weight:600;--vc-funnel-label-color:var(--vc-tick-color);--vc-funnel-label-weight:500;--vc-funnel-badge-bg:var(--vc-surface-bg);--vc-funnel-badge-color:var(--vc-tick-color);--vc-funnel-badge-border:var(--vc-axis-line-color);--vc-funnel-badge-weight:600;--vc-funnel-badge-opacity:0.82;--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0))) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(1 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.205 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-tooltip-radius:var(--ui-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.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:vc-dash-march 1s linear infinite}@keyframes vc-dash-march{to{stroke-dashoffset:-6}}@media (prefers-reduced-motion:reduce){.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:none}}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-surface-bg:var(--ui-bg,var(--background,oklch(0.145 0 0)));--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.985 0 0)));--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,oklch(0.985 0 0)) 8%,transparent);--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(0.205 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.985 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.269 0 0)))}}

package/dist/runtime/components/AreaChart.vue

@@ -155,6 +155,7 @@ defineSlots();
     :x-axis-key="xAxisKey"
     :container-props="chartContainerProps"
     :percent-axis="stacked === true && percent === true"
+    :value-stacked="stacked === true"
     :frame-class="frameClass"
     skeleton-shape="wave"
     v-bind="props"

package/dist/runtime/components/BarChart.vue

@@ -207,6 +207,7 @@ defineSlots();
     :x-axis-key="xAxisKey"
     :container-props="chartContainerProps"
     :percent-axis="stacked === true && percent === true"
+    :value-stacked="stacked === true"
     :legend-colors="legendColors"
     v-bind="props"
   >

package/dist/runtime/components/DataChart.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from "vue";
+import AreaChart from "./AreaChart.vue";
+import BarChart from "./BarChart.vue";
+import LineChart from "./LineChart.vue";
+import { transform } from "../spec/transform";
+import { formatBucket, specCategories, seriesLabel, validateSpec } from "../spec/resolve";
+import { VALUE_KEY } from "../spec/types";
+const props = defineProps({
+  data: { type: Array, required: true },
+  spec: { type: Object, required: true },
+  height: { type: Number, required: false, default: 260 },
+  locale: { type: String, required: false },
+  hideLegend: { type: Boolean, required: false },
+  stacked: { type: Boolean, required: false },
+  theme: { type: Object, required: false },
+  valueFormatter: { type: Function, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
+  legendVariant: { type: String, required: false },
+  tooltipVariant: { type: String, required: false },
+  tooltipRoundness: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingLabel: { type: String, required: false }
+});
+const specError = computed(() => validateSpec(props.spec));
+const result = computed(() => {
+  if (specError.value) return { data: [], series: [], total: 0 };
+  return transform(props.data ?? [], props.spec);
+});
+const chartData = computed(
+  () => result.value.data.map((datum) => ({
+    ...datum,
+    x: formatBucket(datum.x, props.spec.transform?.interval, props.locale)
+  }))
+);
+const categories = computed(() => specCategories(result.value.series, props.spec));
+const yFormatter = computed(
+  () => props.valueFormatter ? (tick) => props.valueFormatter(tick) : void 0
+);
+const common = computed(() => ({
+  data: chartData.value,
+  height: props.height,
+  categories: categories.value,
+  xAxis: "x",
+  stacked: props.stacked,
+  hideLegend: props.hideLegend,
+  yFormatter: yFormatter.value,
+  theme: props.theme,
+  error: specError.value ?? props.error,
+  loading: props.loading,
+  loadingLabel: props.loadingLabel,
+  emptyLabel: props.emptyLabel,
+  ariaLabel: props.ariaLabel ?? props.spec.label ?? seriesLabel(VALUE_KEY, props.spec),
+  ariaDescription: props.ariaDescription,
+  legendVariant: props.legendVariant,
+  tooltipVariant: props.tooltipVariant,
+  tooltipRoundness: props.tooltipRoundness
+}));
+const barSeriesKeys = computed(() => result.value.series);
+defineExpose({ result });
+defineSlots();
+</script>
+
+<template>
+  <BarChart
+    v-if="spec.type === 'bar'"
+    v-bind="common"
+    :y-axis="barSeriesKeys"
+  >
+    <template v-if="$slots.tooltip" #tooltip="scope">
+      <slot name="tooltip" v-bind="scope" />
+    </template>
+  </BarChart>
+
+  <AreaChart v-else-if="spec.type === 'area'" v-bind="common">
+    <template v-if="$slots.tooltip" #tooltip="scope">
+      <slot name="tooltip" v-bind="scope" />
+    </template>
+  </AreaChart>
+
+  <LineChart v-else v-bind="common">
+    <template v-if="$slots.tooltip" #tooltip="scope">
+      <slot name="tooltip" v-bind="scope" />
+    </template>
+  </LineChart>
+</template>

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

@@ -0,0 +1,27 @@
+import { type SpecDatum } from "../spec/types.js";
+import type { DataChartProps } from "../types/charts.js";
+import type { TransformResult } from "../spec/transform.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<DataChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        result: import("vue").ComputedRef<TransformResult>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        tooltip?: (props: {
+            values: SpecDatum | undefined;
+        }) => unknown;
+    };
+    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/DottedMap.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import { geoGraticule10, geoPath } from "d3-geo";
+import { containsMapPoint, createMapProjection, DEFAULT_MAP_REGION, inRegion, MAP_REGIONS, mapFeatures, mapValue, projectMapPoint, regionGeometry } from "../utils/maps";
+import { filterMapCountries, generateMapDots, getPin } from "../utils/dottedMap";
+import { sampleData } from "../utils/data";
+import MapCanvas from "./internal/MapCanvas.vue";
+const props = defineProps({
+  geoJson: { type: Object, required: false },
+  mapFeatureKey: { type: String, required: false },
+  regionName: { type: String, required: false },
+  region: { type: Object, required: false },
+  countries: { type: Array, required: false },
+  pins: { type: Array, required: false },
+  mapHeight: { type: Number, required: false },
+  mapWidth: { type: Number, required: false },
+  grid: { type: String, required: false },
+  shape: { type: String, required: false },
+  dotSize: { type: Number, required: false },
+  color: { type: String, required: false },
+  countryColors: { type: Object, required: false },
+  strokeColor: { type: String, required: false },
+  strokeWidth: { type: Number, required: false },
+  strokeOpacity: { type: Number, required: false },
+  avoidOuterPins: { type: Boolean, required: false },
+  precomputedMap: { type: [String, Object], required: false },
+  defaultZoom: { type: Number, required: false },
+  showLegend: { type: Boolean, required: false },
+  legend: { type: Array, required: false },
+  maxHeight: { type: [Number, String], required: false },
+  pinColor: { type: [String, Function], required: false },
+  pinSize: { type: [Number, Function], required: false },
+  showPinLabels: { type: Boolean, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  height: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  projection: { type: [String, Function, Object], required: false },
+  fitView: { type: Boolean, required: false },
+  fitViewPadding: { type: Number, required: false },
+  padding: { type: [Number, Object], required: false },
+  disableZoom: { type: Boolean, required: false },
+  zoomFactor: { type: Number, required: false },
+  zoomExtent: { type: Array, required: false },
+  zoomOnScroll: { type: Boolean, required: false },
+  zoomDuration: { type: Number, required: false },
+  duration: { type: Number, required: false },
+  showControls: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  hideLegend: { type: Boolean, required: false },
+  categories: { type: Object, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  backgroundColor: { type: String, required: false },
+  theme: { type: Object, required: false },
+  showGraticule: { type: Boolean, required: false },
+  showSphere: { type: Boolean, required: false },
+  graticuleColor: { type: String, required: false },
+  sphereColor: { type: String, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
+  legendVariant: { type: String, required: false },
+  tooltipVariant: { type: String, required: false },
+  tooltipRoundness: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingLabel: { type: String, required: false }
+});
+defineSlots();
+const emit = defineEmits(["pin-click", "point-click", "mouseenter", "mouseleave", "zoom"]);
+const canvas = shallowRef();
+const size = shallowRef([960, typeof props.height === "number" ? props.height : 400]);
+const precomputed = computed(() => {
+  try {
+    if (!props.precomputedMap) return { map: void 0, error: void 0 };
+    const map = typeof props.precomputedMap === "string" ? JSON.parse(props.precomputedMap) : props.precomputedMap;
+    if (!(map.width > 0 && map.height > 0 && map.points)) {
+      throw new Error("Precomputed map must contain width, height, and points.");
+    }
+    return { map, error: void 0 };
+  } catch (error) {
+    return { map: void 0, error: error instanceof Error ? error.message : "Invalid precomputed map" };
+  }
+});
+const countries = computed(() => props.countries ?? precomputed.value.map?.countries ?? (props.regionName === "usa" ? ["USA"] : void 0));
+const region = computed(() => {
+  if (props.region) return props.region;
+  if (precomputed.value.map?.region) return precomputed.value.map.region;
+  if (props.regionName && props.regionName !== "world") return MAP_REGIONS[props.regionName];
+  return !countries.value?.length && !props.geoJson ? DEFAULT_MAP_REGION : void 0;
+});
+const geometry = computed(() => {
+  try {
+    return {
+      collection: filterMapCountries(mapFeatures(props.geoJson, props.mapFeatureKey), countries.value),
+      error: void 0
+    };
+  } catch (error) {
+    return {
+      collection: { type: "FeatureCollection", features: [] },
+      error: error instanceof Error ? error.message : "Invalid map geometry"
+    };
+  }
+});
+const precomputedLayout = computed(() => {
+  const map = precomputed.value.map;
+  const scale = map ? Math.min(size.value[0] / map.width, size.value[1] / map.height) : 1;
+  return {
+    scale,
+    x: map ? (size.value[0] - map.width * scale) / 2 : 0,
+    y: map ? (size.value[1] - map.height * scale) / 2 : 0
+  };
+});
+const view = computed(() => {
+  const map = precomputed.value.map;
+  const land = geometry.value.collection;
+  const fitGeometry = region.value ? regionGeometry(region.value) : land.features.length ? land : { type: "Sphere" };
+  const projection = createMapProjection(
+    props.projection ?? map?.projection ?? "mercator",
+    fitGeometry,
+    size.value[0],
+    size.value[1],
+    props,
+    region.value
+  );
+  const layout = precomputedLayout.value;
+  if (map?.scale !== void 0 && map.translate) {
+    projection.scale(map.scale * layout.scale).translate([
+      map.translate[0] * layout.scale + layout.x,
+      map.translate[1] * layout.scale + layout.y
+    ]);
+  } else if (map?.X_MIN !== void 0 && map.Y_MAX !== void 0 && map.X_RANGE) {
+    const scale = map.width * 6378137 / map.X_RANGE;
+    projection.scale(scale * layout.scale).translate([
+      -map.X_MIN * map.width / map.X_RANGE * layout.scale + layout.x,
+      map.Y_MAX / 6378137 * scale * layout.scale + layout.y
+    ]);
+  }
+  return { projection, path: geoPath(projection) };
+});
+const grid = computed(() => {
+  try {
+    const map = precomputed.value.map;
+    if (map) {
+      const layout = precomputedLayout.value;
+      const dots2 = Object.values(map.points).map((dot) => ({
+        ...dot,
+        x: dot.x * layout.scale + layout.x,
+        y: dot.y * layout.scale + layout.y
+      }));
+      return { dots: dots2, spacing: layout.scale, error: void 0 };
+    }
+    const spacing = props.mapWidth ? size.value[0] / Math.max(1, props.mapWidth) : size.value[1] / Math.max(1, props.mapHeight ?? 60);
+    const dots = generateMapDots(
+      geometry.value.collection,
+      view.value.projection,
+      size.value[0],
+      size.value[1],
+      { ...props, region: region.value }
+    );
+    return { dots, spacing, error: void 0 };
+  } catch (error) {
+    return { dots: [], spacing: 1, error: error instanceof Error ? error.message : "Invalid dotted map data" };
+  }
+});
+function hexagon(x, y, radius) {
+  return Array.from({ length: 6 }, (_, index) => {
+    const angle = Math.PI / 3 * index;
+    return `${x + Math.cos(angle) * radius},${y + Math.sin(angle) * radius}`;
+  }).join(" ");
+}
+const marks = computed(() => {
+  const spacing = grid.value.spacing;
+  const dots = grid.value.dots.map((dot, index) => {
+    const radius = (dot.svgOptions?.radius ?? props.dotSize ?? 0.3) * spacing;
+    return {
+      key: `dot-${index}`,
+      kind: "dot",
+      values: dot,
+      x: dot.x,
+      y: dot.y,
+      radius,
+      polygon: props.shape === "hexagon" ? hexagon(dot.x, dot.y, radius) : void 0,
+      color: dot.svgOptions?.color ?? props.countryColors?.[dot.countryId ?? ""] ?? props.color ?? "var(--vc-map-dot-color)",
+      stroke: dot.svgOptions?.strokeColor ?? props.strokeColor,
+      strokeWidth: (dot.svgOptions?.strokeWidth ?? props.strokeWidth ?? 0) * spacing,
+      strokeOpacity: dot.svgOptions?.strokeOpacity ?? props.strokeOpacity ?? 1,
+      label: dot.label ?? dot.countryId
+    };
+  });
+  const pins = sampleData(props.pins ?? [], props.maxDataPoints ?? 2e3).flatMap((pin, index) => {
+    const coordinates = [pin.lng, pin.lat];
+    if (!inRegion(coordinates, region.value)) return [];
+    if (props.avoidOuterPins && !containsMapPoint(geometry.value.collection, coordinates)) return [];
+    let p = projectMapPoint(view.value.projection, coordinates);
+    if (!p) return [];
+    if (precomputed.value.map) {
+      const dot = getPin(precomputed.value.map, pin);
+      const layout = precomputedLayout.value;
+      p = [dot.x * layout.scale + layout.x, dot.y * layout.scale + layout.y];
+    }
+    const label = pin.label ?? String(pin.data?.name ?? pin.data?.city ?? pin.id ?? "Location");
+    return [{
+      key: `pin-${pin.id ?? index}`,
+      kind: "pin",
+      values: pin,
+      x: p[0],
+      y: p[1],
+      radius: mapValue(props.pinSize, pin, index, pin.radius ?? (pin.svgOptions?.radius === void 0 ? 5 : pin.svgOptions.radius * spacing)),
+      color: mapValue(props.pinColor, pin, index, pin.color ?? pin.svgOptions?.color ?? "var(--vc-series-0)"),
+      stroke: pin.svgOptions?.strokeColor ?? "var(--vc-surface-bg)",
+      strokeWidth: pin.svgOptions?.strokeWidth ?? 1,
+      strokeOpacity: pin.svgOptions?.strokeOpacity ?? 1,
+      label,
+      showLabel: props.showPinLabels
+    }];
+  });
+  return [...dots, ...pins];
+});
+const categories = computed(() => props.categories ?? (props.legend ? Object.fromEntries(props.legend.map((item, index) => [String(index), { name: item.label, color: item.color }])) : void 0));
+function click(mark, event) {
+  if (mark.kind === "pin") emit("pin-click", mark.values, event);
+  else emit("point-click", event, mark.values);
+}
+defineExpose({
+  zoomIn: () => canvas.value?.zoomIn(),
+  zoomOut: () => canvas.value?.zoomOut(),
+  zoomTo: (k) => canvas.value?.zoomTo(k),
+  resetView: () => canvas.value?.resetView()
+});
+</script>
+
+<template>
+  <MapCanvas
+    ref="canvas"
+    v-bind="props"
+    :style="{ maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }"
+    :marks="marks"
+    :size="size"
+    :geometry-error="geometry.error ?? precomputed.error ?? grid.error"
+    :categories="categories"
+    :hide-legend="hideLegend || showLegend === false"
+    :zoom-factor="zoomFactor ?? defaultZoom"
+    :sphere="showSphere ? view.path({ type: 'Sphere' }) ?? void 0 : void 0"
+    :graticule="showGraticule ? view.path(geoGraticule10()) ?? void 0 : void 0"
+    :tooltip-title="tooltipTitleFormatter ? (datum) => tooltipTitleFormatter(datum) : void 0"
+    @resize="size = $event"
+    @click="click"
+    @mouseenter="(mark, event) => emit('mouseenter', mark.values, event)"
+    @mouseleave="(mark, event) => emit('mouseleave', mark.values, event)"
+    @zoom="emit('zoom', $event)"
+  >
+    <template v-if="$slots.tooltip" #tooltip="scope"><slot name="tooltip" v-bind="scope" /></template>
+    <template v-if="$slots.pin" #pin="scope"><slot name="pin" v-bind="scope" :values="scope.values" :projection="view.projection" :points="grid.dots" /></template>
+    <template v-if="$slots.dot" #dot="scope"><slot name="dot" v-bind="scope" :values="scope.values" :projection="view.projection" :points="grid.dots" /></template>
+    <template v-if="$slots.legend" #legend="scope"><slot name="legend" v-bind="scope" /></template>
+    <template v-if="$slots.default" #default="scope"><slot v-bind="scope" :projection="view.projection" :points="grid.dots" /></template>
+  </MapCanvas>
+</template>