nuxt-charts 3.0.0 → 3.1.0

package/dist/runtime/components/TopoJSONMap.vue

@@ -0,0 +1,273 @@
+<script setup>
+import { computed, nextTick, shallowRef, watch } from "vue";
+import { geoGraticule10, geoPath } from "d3-geo";
+import { createMapProjection, mapCountryId, mapFeatures, mapValue, projectMapPoint } from "../utils/maps";
+import { sampleData } from "../utils/data";
+import MapCanvas from "./internal/MapCanvas.vue";
+const props = defineProps({
+  topoJson: { type: Object, required: false },
+  geoJson: { type: Object, required: false },
+  mapFeatureKey: { type: String, required: false },
+  featureId: { type: [String, Function], required: false },
+  data: { type: Object, required: false },
+  areaColor: { type: [String, Function], required: false },
+  areaCursor: { type: [String, Function], required: false },
+  areaStroke: { type: [String, Function], required: false },
+  areaStrokeWidth: { type: [Number, Function], required: false },
+  value: { type: Function, required: false, skipCheck: true },
+  colorScale: { type: Function, required: false },
+  colorRange: { type: Array, required: false },
+  valueDomain: { type: Array, required: false },
+  pointColor: { type: [String, Function], required: false },
+  pointSize: { type: [Number, Function], required: false },
+  pointRadius: { type: [Number, Function], required: false },
+  pointStrokeColor: { type: [String, Function], required: false },
+  pointStrokeWidth: { type: [Number, Function], required: false },
+  pointCursor: { type: [String, Function], required: false },
+  pointLabel: { type: [String, Function], required: false },
+  showPointLabels: { type: Boolean, required: false },
+  linkColor: { type: [String, Function], required: false },
+  linkWidth: { type: [Number, Function], required: false },
+  linkCursor: { type: [String, Function], required: false },
+  linkDasharray: { type: [String, Function], required: false },
+  linkCurve: { type: String, required: false },
+  linkCurvature: { type: Number, required: false },
+  mapFitToPoints: { type: Boolean, required: false },
+  zoomOnClick: { type: Boolean, required: false },
+  heatmapMode: { type: Boolean, required: false },
+  heatmapModeBlurStdDeviation: { type: Number, required: false },
+  heatmapModeZoomLevelThreshold: { type: Number, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  yFormatter: { 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(["feature-click", "point-click", "link-click", "mouseenter", "mouseleave", "zoom"]);
+const canvas = shallowRef();
+const size = shallowRef([960, typeof props.height === "number" ? props.height : 400]);
+const geometry = computed(() => {
+  try {
+    return { collection: mapFeatures(props.geoJson ?? props.topoJson, props.mapFeatureKey), error: void 0 };
+  } catch (error) {
+    return {
+      collection: { type: "FeatureCollection", features: [] },
+      error: error instanceof Error ? error.message : "Invalid map geometry"
+    };
+  }
+});
+const view = computed(() => {
+  const collection = geometry.value.collection;
+  const projection = createMapProjection(
+    props.projection,
+    collection.features.length ? collection : { type: "Sphere" },
+    size.value[0],
+    size.value[1],
+    props
+  );
+  return { projection, path: geoPath(projection) };
+});
+const path = computed(() => view.value.path);
+const areas = computed(() => {
+  const rows = new Map((props.data?.areas ?? []).map((area) => [String(area.id), area]));
+  return geometry.value.collection.features.map((feature, index) => {
+    const properties = feature.properties ?? {};
+    const id = typeof props.featureId === "function" ? props.featureId(feature) : props.featureId ? properties[props.featureId] : mapCountryId(feature, index);
+    const aliases = props.featureId !== void 0 ? [id] : [
+      id,
+      properties.iso_a2,
+      properties.iso_a3,
+      properties.iso_n3,
+      properties.iso_n3 == null ? void 0 : Number(properties.iso_n3),
+      properties.ISO_A2,
+      properties.ISO_A3,
+      properties.name
+    ];
+    const row = aliases.map((key) => rows.get(String(key))).find(Boolean);
+    return { ...properties, ...row, id: row?.id ?? id, properties, feature };
+  });
+});
+function areaValue(area) {
+  const value = typeof props.value === "function" ? props.value(area) : props.value ? area[props.value] : area.value;
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+const domain = computed(() => {
+  if (props.valueDomain) return props.valueDomain;
+  const values = areas.value.map(areaValue).filter((value) => value !== void 0);
+  return values.length ? [Math.min(...values), Math.max(...values)] : [0, 1];
+});
+function areaColor(area, index) {
+  if (props.areaColor !== void 0) return mapValue(props.areaColor, area, index, "var(--vc-map-feature-color)");
+  if (area.color) return area.color;
+  const value = areaValue(area);
+  if (value === void 0) return "var(--vc-map-feature-color)";
+  if (props.colorScale) return props.colorScale(value);
+  const t = domain.value[0] === domain.value[1] ? 1 : Math.max(0, Math.min(1, (value - domain.value[0]) / (domain.value[1] - domain.value[0])));
+  const [low, high] = props.colorRange ?? ["var(--vc-map-feature-color)", "var(--vc-series-0)"];
+  return `color-mix(in srgb, ${high} ${Math.round(t * 100)}%, ${low})`;
+}
+const projectedPoints = computed(() => sampleData(props.data?.points ?? [], props.maxDataPoints ?? 2e3).flatMap((point, index) => {
+  const coordinates = projectMapPoint(view.value.projection, [point.longitude, point.latitude], path.value);
+  return coordinates ? [{ point, index, coordinates }] : [];
+}));
+const marks = computed(() => {
+  const features = areas.value.flatMap((area, index) => {
+    const d = path.value(area.feature);
+    return d ? [{
+      key: `feature-${index}`,
+      kind: "feature",
+      values: area,
+      path: d,
+      color: areaColor(area, index),
+      stroke: mapValue(props.areaStroke, area, index, "var(--vc-map-boundary-color)"),
+      strokeWidth: mapValue(props.areaStrokeWidth, area, index, 0.6),
+      cursor: mapValue(props.areaCursor, area, index, "pointer"),
+      label: String(area.name ?? area.properties.name ?? area.id)
+    }] : [];
+  });
+  const pointsById = new Map((props.data?.points ?? []).map((point) => [String(point.id), point]));
+  const links = sampleData(props.data?.links ?? [], props.maxDataPoints ?? 2e3).flatMap((link, index) => {
+    const source = typeof link.source === "object" ? link.source : pointsById.get(String(link.source));
+    const target = typeof link.target === "object" ? link.target : pointsById.get(String(link.target));
+    if (!source || !target) return [];
+    const start = [source.longitude, source.latitude];
+    const end = [target.longitude, target.latitude];
+    if (![...start, ...end].every(Number.isFinite) || Math.abs(start[1]) > 90 || Math.abs(end[1]) > 90) return [];
+    let d = null;
+    if (!props.linkCurve || props.linkCurve === "geodesic") d = path.value({ type: "LineString", coordinates: [start, end] });
+    else {
+      const a = projectMapPoint(view.value.projection, start);
+      const b = projectMapPoint(view.value.projection, end);
+      if (!a || !b) return [];
+      const curve = props.linkCurvature ?? 0.2;
+      d = props.linkCurve === "straight" ? `M${a}L${b}` : `M${a}Q${(a[0] + b[0]) / 2 - (b[1] - a[1]) * curve},${(a[1] + b[1]) / 2 + (b[0] - a[0]) * curve} ${b}`;
+    }
+    if (!d) return [];
+    const color = mapValue(props.linkColor, link, index, link.color ?? target.color ?? "var(--vc-series-0)");
+    return [{
+      key: `link-${index}`,
+      kind: "link",
+      values: link,
+      path: d,
+      color,
+      stroke: color,
+      strokeWidth: mapValue(props.linkWidth, link, index, link.width ?? 1.5),
+      dasharray: mapValue(props.linkDasharray, link, index, ""),
+      cursor: mapValue(props.linkCursor, link, index, "pointer"),
+      label: link.label ?? `${source.label ?? source.id} \u2192 ${target.label ?? target.id}`
+    }];
+  });
+  const points = projectedPoints.value.map(({ point, index, coordinates }) => ({
+    key: `point-${point.id}`,
+    kind: "point",
+    values: point,
+    x: coordinates[0],
+    y: coordinates[1],
+    radius: mapValue(props.pointRadius ?? props.pointSize, point, index, point.radius ?? 5),
+    color: mapValue(props.pointColor, point, index, point.color ?? "var(--vc-series-0)"),
+    stroke: mapValue(props.pointStrokeColor, point, index, "var(--vc-surface-bg)"),
+    strokeWidth: mapValue(props.pointStrokeWidth, point, index, 1.5),
+    cursor: mapValue(props.pointCursor, point, index, "pointer"),
+    label: mapValue(props.pointLabel, point, index, point.label ?? String(point.id)),
+    showLabel: props.showPointLabels
+  }));
+  return [...features, ...links, ...points];
+});
+function fitToPoints(points = props.data?.points ?? []) {
+  const positions = points.flatMap((point) => {
+    const projected = projectMapPoint(view.value.projection, [point.longitude, point.latitude], path.value);
+    return projected ? [projected] : [];
+  });
+  if (!positions.length) return;
+  canvas.value?.fitBounds([[Math.min(...positions.map((p) => p[0])), Math.min(...positions.map((p) => p[1]))], [Math.max(...positions.map((p) => p[0])), Math.max(...positions.map((p) => p[1]))]]);
+}
+function zoomToFeature(id) {
+  const area = areas.value.find((area2) => String(area2.id) === String(id) || String(area2.feature.id) === String(id));
+  if (area) canvas.value?.fitBounds(path.value.bounds(area.feature));
+}
+function click(mark, event) {
+  if (mark.kind === "feature") {
+    emit("feature-click", mark.values, event);
+    if (props.zoomOnClick) zoomToFeature(mark.values.id);
+  }
+  if (mark.kind === "point") {
+    emit("point-click", mark.values, event);
+    if (props.zoomOnClick) fitToPoints([mark.values]);
+  }
+  if (mark.kind === "link") emit("link-click", mark.values, event);
+}
+watch([() => props.mapFitToPoints, projectedPoints, size], async () => {
+  await nextTick();
+  if (props.mapFitToPoints) fitToPoints();
+}, { immediate: true });
+defineExpose({
+  zoomIn: () => canvas.value?.zoomIn(),
+  zoomOut: () => canvas.value?.zoomOut(),
+  zoomTo: (k) => canvas.value?.zoomTo(k),
+  resetView: () => canvas.value?.resetView(),
+  fitToPoints,
+  zoomToFeature
+});
+</script>
+
+<template>
+  <MapCanvas
+    ref="canvas"
+    v-bind="props"
+    :marks="marks"
+    :size="size"
+    :geometry-error="geometry.error"
+    :sphere="showSphere ? path({ type: 'Sphere' }) ?? void 0 : void 0"
+    :graticule="showGraticule ? path(geoGraticule10()) ?? void 0 : void 0"
+    :tooltip-title="tooltipTitleFormatter ? (datum) => tooltipTitleFormatter(datum) : void 0"
+    :tooltip-value="yFormatter ? (value) => yFormatter(value) : void 0"
+    :heatmap="heatmapMode"
+    :heatmap-blur="heatmapModeBlurStdDeviation"
+    :heatmap-threshold="heatmapModeZoomLevelThreshold"
+    @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.feature" #feature="scope"><slot name="feature" v-bind="scope" :values="scope.values" :projection="view.projection" /></template>
+    <template v-if="$slots.point" #point="scope"><slot name="point" v-bind="scope" :values="scope.values" :projection="view.projection" /></template>
+    <template v-if="$slots.link" #link="scope"><slot name="link" v-bind="scope" :values="scope.values" :projection="view.projection" /></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" /></template>
+  </MapCanvas>
+</template>

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

@@ -0,0 +1,45 @@
+import type { MapArea, MapPoint, MapLink, MapFeature, TopoJSONMapProps, MapZoom, MapMarkSlot, MapOverlaySlot, MapTooltipSlot } from "../types/maps.js";
+declare const __VLS_export: <A extends MapArea = MapArea, P extends MapPoint = MapPoint, L extends MapLink<P> = MapLink<P>>(__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<TopoJSONMapProps<A, P, L> & {
+        onMouseenter?: ((values: P | L | MapFeature<A>, event: MouseEvent | FocusEvent) => any) | undefined;
+        onMouseleave?: ((values: P | L | MapFeature<A>, event: MouseEvent | FocusEvent) => any) | undefined;
+        onZoom?: ((transform: MapZoom) => any) | undefined;
+        "onPoint-click"?: ((values: P, event: MouseEvent | KeyboardEvent) => any) | undefined;
+        "onFeature-click"?: ((values: MapFeature<A>, event: MouseEvent | KeyboardEvent) => any) | undefined;
+        "onLink-click"?: ((values: L, event: MouseEvent | KeyboardEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P_1;
+    } ? P_1 : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        zoomIn: () => void | undefined;
+        zoomOut: () => void | undefined;
+        zoomTo: (k: number) => void | undefined;
+        resetView: () => void | undefined;
+        fitToPoints: (points?: P[]) => void;
+        zoomToFeature: (id: string | number) => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        tooltip?: (props: MapTooltipSlot<A, P, L>) => unknown;
+        feature?: (props: MapMarkSlot<MapFeature<A>>) => unknown;
+        point?: (props: MapMarkSlot<P>) => unknown;
+        link?: (props: MapMarkSlot<L>) => unknown;
+        legend?: (props: {
+            items: Array<{
+                value: string;
+                color?: string;
+            }>;
+        }) => unknown;
+        default?: (props: MapOverlaySlot) => unknown;
+    };
+    emit: ((evt: "mouseenter", values: P | L | MapFeature<A>, event: MouseEvent | FocusEvent) => void) & ((evt: "mouseleave", values: P | L | MapFeature<A>, event: MouseEvent | FocusEvent) => void) & ((evt: "zoom", transform: MapZoom) => void) & ((evt: "point-click", values: P, event: MouseEvent | KeyboardEvent) => void) & ((evt: "feature-click", values: MapFeature<A>, event: MouseEvent | KeyboardEvent) => void) & ((evt: "link-click", values: L, event: MouseEvent | KeyboardEvent) => void);
+}>) => 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/internal/CartesianFrame.vue

@@ -13,6 +13,7 @@ import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../../ut
 import {
   AXIS_TICK_MARGIN,
   equidistantCategoryTicks,
+  niceTickValues,
   resolveAxisProps,
   resolveYAxes,
   resolveXAxisHeight,
@@ -21,7 +22,7 @@ import {
   toTickFormatter,
   toTickProp
 } from "../../utils/axis";
-import { categoriesToSeries } from "../../utils/categories";
+import { categoriesToSeries, normalizeAxisId } from "../../utils/categories";
 import { toAxisDomain, toCssProperties } from "../../utils/style";
 import { axisTickVars, resolveHoverRadius, resolveHoverVisible, themeToVars } from "../../utils/theme";
 import ChartTooltip from "./ChartTooltip.vue";
@@ -87,7 +88,8 @@ const props = defineProps({
   frameClass: { type: String, required: false },
   legendColors: { type: Object, required: false },
   skeletonShape: { type: String, required: false },
-  percentAxis: { type: Boolean, required: false }
+  percentAxis: { type: Boolean, required: false },
+  valueStacked: { type: Boolean, required: false }
 });
 const numericKeys = computed(() => Object.keys(props.categories));
 const normalizedData = computed(() => normalizeNumericRows(props.data, numericKeys.value));
@@ -177,10 +179,77 @@ const yAxisTitle = computed(
 const isCategoryYAxis = computed(
   () => layout.value === "vertical" && props.xAxisKey !== void 0
 );
+function sampleLabelsFor(keys, format, explicitTicks, domain) {
+  const toLabel = (value, index) => format ? String(format(value, index)) : String(value);
+  if (explicitTicks?.length) return explicitTicks.map((tick, i) => toLabel(Number(tick), i));
+  if (!keys.length || !chartData.value.length) return void 0;
+  let min = 0;
+  let max = 0;
+  for (const row of chartData.value) {
+    const record = row;
+    let positive = 0;
+    let negative = 0;
+    for (const key of keys) {
+      const value = Number(record[key]);
+      if (!Number.isFinite(value)) continue;
+      if (props.valueStacked) {
+        if (value >= 0) positive += value;
+        else negative += value;
+      } else {
+        positive = Math.max(positive, value);
+        negative = Math.min(negative, value);
+      }
+    }
+    max = Math.max(max, positive);
+    min = Math.min(min, negative);
+  }
+  if (domain) {
+    min = domain[0];
+    max = domain[1];
+  }
+  const ticks = niceTickValues(min, max);
+  return ticks.length ? ticks.map(toLabel) : void 0;
+}
+const seriesKeysByAxis = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const series of categoriesToSeries(props.categories)) {
+    const id = normalizeAxisId(series.yAxisId);
+    const keys = map.get(id);
+    if (keys) keys.push(series.dataKey);
+    else map.set(id, [series.dataKey]);
+  }
+  return map;
+});
+const valueAxisSampleLabels = computed(() => {
+  if (isCategoryYAxis.value || props.percentAxis) return void 0;
+  return sampleLabelsFor(
+    numericKeys.value,
+    valueFormatter.value,
+    layout.value === "vertical" ? xAxis.value.ticks : yAxis.value.ticks,
+    yAxisDomain.value
+  );
+});
 const xAxisHeight = computed(() => resolveXAxisHeight({ hasTitle: !!xAxisTitle.value }));
 const yAxisWidth = computed(
-  () => resolveYAxisWidth({ hasTitle: !!yAxisTitle.value, isCategoryAxis: isCategoryYAxis.value })
+  () => resolveYAxisWidth({
+    hasTitle: !!yAxisTitle.value,
+    isCategoryAxis: isCategoryYAxis.value,
+    sampleLabels: valueAxisSampleLabels.value,
+    tickMargin: AXIS_TICK_MARGIN.y
+  })
 );
+function widthForAxis(axis) {
+  if (props.percentAxis) {
+    return resolveYAxisWidth({ hasTitle: !!axis.label, isCategoryAxis: false });
+  }
+  const keys = seriesKeysByAxis.value.get(normalizeAxisId(axis.id)) ?? [];
+  return resolveYAxisWidth({
+    hasTitle: !!axis.label,
+    isCategoryAxis: false,
+    sampleLabels: sampleLabelsFor(keys, axis.tickFormatter, axis.ticks, axis.domain),
+    tickMargin: AXIS_TICK_MARGIN.y
+  });
+}
 const rootStyle = computed(() => ({
   ...themeToVars(props.theme),
   ...axisTickVars("x", xAxis.value.tick),
@@ -350,7 +419,7 @@ const resolvedYAxes = computed(() => {
         :y-axis-id="axis.id"
         :orientation="axis.orientation"
         :hide="axis.hide"
-        :width="yAxisWidth"
+        :width="widthForAxis(axis)"
         :tick="toTickProp(axis.tick)"
         :tick-margin="AXIS_TICK_MARGIN.y"
         :tick-line="axis.tickLine ? yTickLineProp : false"

package/dist/runtime/components/internal/CartesianFrame.vue.d.ts

@@ -33,6 +33,11 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * ticks read as percentages rather than as raw fractions.
          */
         percentAxis?: boolean;
+        /**
+         * Series are summed into one stack, so the value axis runs to the stacked
+         * total rather than the largest single series. Only affects axis sizing.
+         */
+        valueStacked?: boolean;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/internal/ChartAccessibility.vue.d.ts

@@ -14,8 +14,8 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     label: string;
     description: string;
-    rows: AccessibleRow[];
     showTable: boolean;
+    rows: AccessibleRow[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/internal/CubeBarShape.vue.d.ts

@@ -21,10 +21,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     width: number;
     height: number;
     fill: string;
+    x: number | null;
     radius: number;
     background: CubeColumnBand | null;
     emptyColor: string;
-    x: number | null;
     y: number | null;
     gap: number;
     preferredSize: number;