nuxt-charts 3.0.0 → 3.1.0

package/dist/runtime/utils/dottedMap.js

@@ -0,0 +1,69 @@
+import { geoBounds, geoContains, geoPath } from "d3-geo";
+import { createMapProjection, DEFAULT_MAP_REGION, inRegion, mapCountryId, mapFeatures, projectMapPoint, regionGeometry } from "./maps.js";
+export function filterMapCountries(collection, countries) {
+  if (!countries?.length) return collection;
+  const selected = new Set(countries.map((code) => code.toUpperCase()));
+  return { type: "FeatureCollection", features: collection.features.filter((feature, index) => [mapCountryId(feature, index), feature.properties?.iso_a2, feature.properties?.iso_a3, feature.properties?.name].some((id) => selected.has(String(id).toUpperCase()))) };
+}
+export function generateMapDots(collection, projection, width, height, options) {
+  if (!projection.invert) throw new Error("DottedMap requires an invertible projection.");
+  const spacing = options.mapWidth ? width / Math.max(1, options.mapWidth) : height / Math.max(1, options.mapHeight ?? 60);
+  const rowHeight = options.grid === "diagonal" ? spacing * Math.sqrt(3) / 2 : spacing;
+  const path = geoPath(projection);
+  const countries = collection.features.map((feature, index) => ({ feature, id: mapCountryId(feature, index), bounds: geoBounds(feature) }));
+  const dots = [];
+  for (let row = 0, y = rowHeight / 2; y < height; row++, y += rowHeight) {
+    const offset = options.grid === "diagonal" && row % 2 ? spacing / 2 : 0;
+    for (let x = spacing / 2 + offset; x < width; x += spacing) {
+      const coordinates = projection.invert([x, y]);
+      if (!coordinates?.every(Number.isFinite) || !inRegion(coordinates, options.region)) continue;
+      const projected = projectMapPoint(projection, coordinates, path);
+      if (!projected || Math.hypot(projected[0] - x, projected[1] - y) > spacing / 2) continue;
+      const country = countries.find(({ bounds: [[west, south], [east, north]], feature }) => coordinates[1] >= south && coordinates[1] <= north && (west <= east ? coordinates[0] >= west && coordinates[0] <= east : coordinates[0] >= west || coordinates[0] <= east) && geoContains(feature, coordinates));
+      if (country) dots.push({ x, y, lng: coordinates[0], lat: coordinates[1], countryId: country.id, label: String(country.feature.properties?.name ?? country.id) });
+    }
+  }
+  return dots;
+}
+export function getMap(options = {}) {
+  const collection = filterMapCountries(mapFeatures(options.geoJson ?? options.geojsonWorld, options.mapFeatureKey), options.countries);
+  if (!collection.features.length) throw new Error("No map features matched. Check your country codes or geometry.");
+  const region = options.region ?? (!options.countries?.length && !options.geoJson && !options.geojsonWorld ? DEFAULT_MAP_REGION : void 0);
+  const geometry = region ? regionGeometry(region) : collection;
+  const preview = createMapProjection(options.projection ?? "mercator", geometry, 1e3, 500, { padding: 0 }, region);
+  const [[x0, y0], [x1, y1]] = geoPath(preview).bounds(geometry);
+  const ratio = (x1 - x0) / (y1 - y0);
+  const width = options.width ?? options.mapWidth ?? Math.max(1, Math.round((options.height ?? options.mapHeight ?? 60) * ratio));
+  const height = options.height ?? options.mapHeight ?? Math.max(1, Math.round(width / ratio));
+  const projection = createMapProjection(options.projection ?? "mercator", geometry, width, height, { padding: 0 }, region);
+  const dots = generateMapDots(collection, projection, width, height, { mapWidth: width, mapHeight: height, region, grid: options.grid });
+  return { width, height, points: Object.fromEntries(dots.map((dot) => [`${dot.x};${dot.y}`, dot])), region, countries: options.countries, grid: options.grid ?? "vertical", projection: options.projection ?? "mercator", scale: projection.scale(), translate: projection.translate() };
+}
+export function getPin(map, pin) {
+  if (map.X_MIN !== void 0 && map.Y_MAX !== void 0 && map.X_RANGE && map.Y_RANGE) {
+    const radians = Math.PI / 180;
+    const earthRadius = 6378137;
+    const rawX = map.width * (pin.lng * radians * earthRadius - map.X_MIN) / map.X_RANGE;
+    const rawY = map.height * (map.Y_MAX - Math.log(Math.tan(Math.PI / 4 + pin.lat * radians / 2)) * earthRadius) / map.Y_RANGE;
+    const step = map.ystep ?? (map.grid === "diagonal" ? Math.sqrt(3) / 2 : 1);
+    const row2 = Math.round(rawY / step);
+    const offset2 = map.grid === "diagonal" && row2 % 2 === 0 ? 0.5 : 0;
+    const x2 = Math.round(rawX - offset2) + offset2;
+    const y2 = row2 * step;
+    const lng = (x2 / map.width * map.X_RANGE + map.X_MIN) / earthRadius / radians;
+    const lat = (2 * Math.atan(Math.exp((map.Y_MAX - y2 / map.height * map.Y_RANGE) / earthRadius)) - Math.PI / 2) / radians;
+    return { ...pin, x: x2, y: y2, lat, lng };
+  }
+  const geometry = map.scale !== void 0 ? { type: "Sphere" } : map.region ? regionGeometry(map.region) : filterMapCountries(mapFeatures(), map.countries);
+  const projection = createMapProjection(map.projection ?? "mercator", geometry, map.width, map.height, { padding: 0 }, map.region);
+  if (map.scale !== void 0 && map.translate) projection.scale(map.scale).translate(map.translate);
+  const point = projectMapPoint(projection, [pin.lng, pin.lat]);
+  if (!point) throw new Error("Pin coordinates cannot be projected onto this map.");
+  const rowHeight = map.grid === "diagonal" ? Math.sqrt(3) / 2 : 1;
+  const row = Math.round((point[1] - rowHeight / 2) / rowHeight);
+  const offset = map.grid === "diagonal" && row % 2 ? 0.5 : 0;
+  const x = Math.round(point[0] - 0.5 - offset) + 0.5 + offset;
+  const y = row * rowHeight + rowHeight / 2;
+  const coordinates = projection.invert?.([x, y]);
+  return { ...pin, x, y, lat: coordinates?.[1] ?? pin.lat, lng: coordinates?.[0] ?? pin.lng };
+}

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

@@ -0,0 +1,33 @@
+import type { GeoProjection, GeoPermissibleObjects } from "d3-geo";
+import type { Feature, FeatureCollection, MultiPolygon } from "geojson";
+import type { MapAccessor, MapBaseProps, MapGeometry, MapProjection, MapRegion, MapRegionName } from "../types/maps.js";
+import type { MapInteractionKind } from "../types/maps.js";
+export interface MapMark {
+    key: string;
+    kind: MapInteractionKind;
+    values: Record<string, unknown>;
+    path?: string;
+    x?: number;
+    y?: number;
+    radius?: number;
+    polygon?: string;
+    color: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    dasharray?: string;
+    cursor?: string;
+    label?: string;
+    showLabel?: boolean;
+}
+export declare const MAP_REGIONS: Record<Exclude<MapRegionName, "world">, MapRegion>;
+export declare const DEFAULT_MAP_REGION: MapRegion;
+export declare function mapValue<T, V>(accessor: MapAccessor<T, V> | undefined, datum: T, index: number, fallback: V): V;
+export declare function mapFeatures(source?: MapGeometry, objectName?: string): FeatureCollection;
+export declare function regionGeometry(region: MapRegion): MultiPolygon;
+export declare function inRegion(coordinates: [number, number], region?: MapRegion): boolean;
+export declare function createMapProjection(option: MapProjection | undefined, geometry: GeoPermissibleObjects, width: number, height: number, props: Pick<MapBaseProps, "fitView" | "fitViewPadding" | "padding">, region?: MapRegion): GeoProjection;
+/** Use the projection stream for point visibility: orthographic's back face must be clipped. */
+export declare function projectMapPoint(projection: GeoProjection, coordinates: [number, number], path?: import("d3-geo").GeoPath<any, GeoPermissibleObjects>): [number, number] | undefined;
+export declare function mapCountryId(feature: Feature, index: number): string;
+export declare function containsMapPoint(collection: FeatureCollection, coordinates: [number, number]): boolean;

package/dist/runtime/utils/maps.js

@@ -0,0 +1,77 @@
+import { geoAlbersUsa, geoArea, geoContains, geoEqualEarth, geoEquirectangular, geoMercator, geoNaturalEarth1, geoOrthographic, geoPath } from "d3-geo";
+import { feature } from "topojson-client";
+import world from "../data/world.json";
+export const MAP_REGIONS = {
+  usa: { lat: { min: 24, max: 50 }, lng: { min: -125, max: -66 } },
+  europe: { lat: { min: 34, max: 72 }, lng: { min: -25, max: 45 } },
+  asia: { lat: { min: -10, max: 55 }, lng: { min: 60, max: 150 } },
+  oceania: { lat: { min: -50, max: 0 }, lng: { min: 110, max: 180 } }
+};
+export const DEFAULT_MAP_REGION = { lat: { min: -60, max: 85 }, lng: { min: -180, max: 180 } };
+export function mapValue(accessor, datum, index, fallback) {
+  return typeof accessor === "function" ? accessor(datum, index) : accessor ?? fallback;
+}
+function normalizeGeometry(geometry) {
+  if (!geometry) return null;
+  if (geometry.type === "GeometryCollection") return { ...geometry, geometries: geometry.geometries.map((g) => normalizeGeometry(g)) };
+  if (geometry.type !== "Polygon" && geometry.type !== "MultiPolygon") return geometry;
+  const orient = (rings) => rings.map((ring, index) => {
+    const large = geoArea({ type: "Polygon", coordinates: [ring] }) > 2 * Math.PI;
+    return large === (index === 0) ? [...ring].reverse() : ring;
+  });
+  return geometry.type === "Polygon" ? { ...geometry, coordinates: orient(geometry.coordinates) } : { ...geometry, coordinates: geometry.coordinates.map(orient) };
+}
+export function mapFeatures(source, objectName) {
+  const input = source ?? world;
+  let collection;
+  if (input.type === "Topology") {
+    const topology = input;
+    const name = objectName ?? (topology.objects.countries ? "countries" : topology.objects.land ? "land" : Object.keys(topology.objects)[0]);
+    const object = name ? topology.objects[name] : void 0;
+    if (!object) throw new Error(`TopoJSON object "${name ?? ""}" was not found. Set mapFeatureKey to an object in your topology.`);
+    const converted = feature(topology, object);
+    collection = converted.type === "FeatureCollection" ? converted : { type: "FeatureCollection", features: [converted] };
+  } else if (input.type === "FeatureCollection") collection = input;
+  else if (input.type === "Feature") collection = { type: "FeatureCollection", features: [input] };
+  else collection = { type: "FeatureCollection", features: [{ type: "Feature", properties: {}, geometry: input }] };
+  return { type: "FeatureCollection", features: collection.features.filter((f) => f.geometry).map((f) => ({ ...f, geometry: normalizeGeometry(f.geometry) })) };
+}
+export function regionGeometry(region) {
+  const polygons = [];
+  const end = region.lng.max < region.lng.min ? region.lng.max + 360 : region.lng.max;
+  for (let left = region.lng.min; left < end; left += 30) {
+    const right = Math.min(left + 30, end);
+    polygons.push([[[left, region.lat.min], [left, region.lat.max], [right, region.lat.max], [right, region.lat.min], [left, region.lat.min]]]);
+  }
+  return { type: "MultiPolygon", coordinates: polygons };
+}
+export function inRegion(coordinates, region) {
+  if (!region) return true;
+  const [lng, lat] = coordinates;
+  const longitude = region.lng.min <= region.lng.max ? lng >= region.lng.min && lng <= region.lng.max : lng >= region.lng.min || lng <= region.lng.max;
+  return longitude && lat >= region.lat.min && lat <= region.lat.max;
+}
+export function createMapProjection(option, geometry, width, height, props, region) {
+  const names = { mercator: geoMercator, equalEarth: geoEqualEarth, naturalEarth: geoNaturalEarth1, equirectangular: geoEquirectangular, orthographic: geoOrthographic, albersUsa: geoAlbersUsa };
+  const projection = typeof option === "string" ? names[option]() : typeof option === "function" ? "stream" in option ? option : option() : geoNaturalEarth1();
+  if (region && region.lng.min > region.lng.max && (option === void 0 || typeof option === "string")) projection.rotate([-(region.lng.min + region.lng.max + 360) / 2, 0]);
+  if (props.fitView !== false) {
+    const padding = props.padding;
+    const base = typeof padding === "number" ? padding : props.fitViewPadding ?? 12;
+    const sides = typeof padding === "object" ? padding : {};
+    projection.fitExtent([[sides.left ?? base, sides.top ?? base], [Math.max(base + 1, width - (sides.right ?? base)), Math.max(base + 1, height - (sides.bottom ?? base))]], geometry);
+  }
+  return projection;
+}
+export function projectMapPoint(projection, coordinates, path = geoPath(projection)) {
+  if (!coordinates.every(Number.isFinite) || Math.abs(coordinates[1]) > 90) return;
+  const point = projection(coordinates);
+  if (!point?.every(Number.isFinite) || !path({ type: "Point", coordinates })) return;
+  return point;
+}
+export function mapCountryId(feature2, index) {
+  return String(feature2.id ?? feature2.properties?.iso_a3 ?? feature2.properties?.ISO_A3 ?? feature2.properties?.name ?? index);
+}
+export function containsMapPoint(collection, coordinates) {
+  return collection.features.some((f) => geoContains(f, coordinates));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-charts",
-  "version": "3.0.0",
-  "description": "Beautiful chart components for Nuxt (vccs engine) — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick, Status Tracker",
+  "version": "3.1.0",
+  "description": "Beautiful chart and D3 map components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick, Status Tracker, Dotted Map, TopoJSON Map",
   "license": "MIT",
   "author": "Dennis Adriaansen <adriaansendennis@gmail.com>",
   "homepage": "https://nuxtcharts.com",
@@ -39,6 +39,16 @@
       "types": "./dist/runtime/enums.d.ts",
       "import": "./dist/runtime/enums.js",
       "default": "./dist/runtime/enums.js"
+    },
+    "./spec": {
+      "types": "./dist/runtime/spec/index.d.ts",
+      "import": "./dist/runtime/spec/index.js",
+      "default": "./dist/runtime/spec/index.js"
+    },
+    "./maps": {
+      "types": "./dist/runtime/maps.d.ts",
+      "import": "./dist/runtime/maps.js",
+      "default": "./dist/runtime/maps.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -47,7 +57,14 @@
     "dist"
   ],
   "dependencies": {
+    "@types/d3-geo": "^3.1.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/topojson-specification": "^1.0.5",
+    "d3-geo": "^3.1.1",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "motion-v": "^2.3.0",
+    "topojson-client": "^3.1.0",
     "vccs": "^0.5.0"
   },
   "devDependencies": {
@@ -59,7 +76,10 @@
     "@nuxt/schema": "^4.3.0",
     "@nuxt/test-utils": "^4.2.0",
     "@tailwindcss/vite": "^4.2.2",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-zoom": "^3.0.8",
     "@types/node": "latest",
+    "@types/topojson-client": "^3.1.5",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.4.11",
     "eslint": "^9.39.2",
@@ -73,7 +93,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "next"
   },
   "scripts": {
     "dev": "nuxi dev playground",