nuxt-charts 3.0.0-beta.4 → 3.1.0

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>

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

@@ -0,0 +1,45 @@
+import type { DottedMapProps, MapDot, MapPin, MapZoom, MapMarkSlot, MapOverlaySlot, DottedMapTooltipSlot } from "../types/maps.js";
+type __VLS_Slots = {
+    tooltip?: (props: DottedMapTooltipSlot) => unknown;
+    pin?: (props: MapMarkSlot<MapPin> & {
+        points: MapDot[];
+    }) => unknown;
+    dot?: (props: MapMarkSlot<MapDot> & {
+        points: MapDot[];
+    }) => unknown;
+    legend?: (props: {
+        items: Array<{
+            value: string;
+            color?: string;
+        }>;
+    }) => unknown;
+    default?: (props: MapOverlaySlot & {
+        points: MapDot[];
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<DottedMapProps, {
+    zoomIn: () => void | undefined;
+    zoomOut: () => void | undefined;
+    zoomTo: (k: number) => void | undefined;
+    resetView: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mouseenter: (values: MapPin | MapDot, event: MouseEvent | FocusEvent) => any;
+    mouseleave: (values: MapPin | MapDot, event: MouseEvent | FocusEvent) => any;
+    zoom: (transform: MapZoom) => any;
+    "pin-click": (pin: MapPin, event: MouseEvent | KeyboardEvent) => any;
+    "point-click": (event: MouseEvent | KeyboardEvent, point: MapDot) => any;
+}, string, import("vue").PublicProps, Readonly<DottedMapProps> & Readonly<{
+    onMouseenter?: ((values: MapPin | MapDot, event: MouseEvent | FocusEvent) => any) | undefined;
+    onMouseleave?: ((values: MapPin | MapDot, event: MouseEvent | FocusEvent) => any) | undefined;
+    onZoom?: ((transform: MapZoom) => any) | undefined;
+    "onPin-click"?: ((pin: MapPin, event: MouseEvent | KeyboardEvent) => any) | undefined;
+    "onPoint-click"?: ((event: MouseEvent | KeyboardEvent, point: MapDot) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FunnelChart.vue

@@ -64,8 +64,8 @@ const stages = computed(() => {
     name,
     value,
     formattedValue: props.valueFormatter?.(value, sourceIndex),
-    fill: cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`,
-    color: cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`
+    fill: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`,
+    color: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`
   }));
 });
 const accessibleRows = computed(() => stages.value.map((stage) => ({ label: stage.name, values: [{ label: "Value", value: stage.formattedValue ?? stage.value }] })));

package/dist/runtime/components/LineChart.vue

@@ -109,6 +109,7 @@ defineSlots();
     :frame-class="frameClass"
     skeleton-shape="wave"
     v-bind="props"
+    :value-stacked="stacked === true"
   >
     <!--
       Built with `h()` so the filter lands in the SVG namespace and the

package/dist/runtime/components/MetricChart.vue

@@ -0,0 +1,322 @@
+<script setup>
+import { computed, ref, useId, watch } from "vue";
+import DataChart from "./DataChart.vue";
+import { transform } from "../spec/transform";
+import { formatBucket, seriesLabel } from "../spec/resolve";
+import { toCsv } from "../spec/csv";
+import {
+  DEFAULT_RANGES,
+  formatChange,
+  formatMetricValue,
+  metricDelta,
+  metricSpec,
+  resolveRange
+} from "../spec/metric";
+const props = defineProps({
+  data: { type: Array, required: true },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  x: { type: String, required: true },
+  y: { type: String, required: false },
+  series: { type: String, required: false },
+  aggregate: { type: String, required: false, default: "sum" },
+  interval: { type: String, required: false },
+  compare: { type: String, required: false },
+  type: { type: String, required: false, default: "line" },
+  format: { type: String, required: false, default: "number" },
+  currency: { type: String, required: false, default: "EUR" },
+  locale: { type: String, required: false },
+  formatOptions: { type: null, required: false },
+  valueFormatter: { type: Function, required: false },
+  inverseSentiment: { type: Boolean, required: false },
+  ranges: { type: Array, required: false },
+  range: { type: String, required: false },
+  window: { type: Object, required: false },
+  anchor: { type: [String, Number, Date], required: false },
+  height: { type: Number, required: false, default: 220 },
+  stacked: { type: Boolean, required: false },
+  hideLegend: { type: Boolean, required: false },
+  theme: { type: Object, required: false },
+  showTable: { type: Boolean, required: false },
+  exportable: { type: Boolean, required: false },
+  exportFilename: { type: String, required: false },
+  hideValue: { type: Boolean, 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 rangeModel = defineModel("range", { type: null, ...{ default: void 0 } });
+const emit = defineEmits(["update:window", "export"]);
+const ranges = computed(() => props.ranges ?? DEFAULT_RANGES);
+const activeRange = computed(() => {
+  const list = ranges.value;
+  if (!list.length) return void 0;
+  return list.find((range) => range.key === rangeModel.value) ?? list[1] ?? list[0];
+});
+const window = computed(() => {
+  if (props.window) return props.window;
+  const range = activeRange.value;
+  if (!range) return void 0;
+  return resolveRange(range, props.anchor);
+});
+watch(window, (value) => {
+  if (value) emit("update:window", value);
+}, { immediate: true });
+const interval = computed(() => props.interval ?? activeRange.value?.interval ?? "day");
+const spec = computed(
+  () => metricSpec({
+    type: props.type,
+    x: props.x,
+    y: props.y,
+    series: props.series,
+    aggregate: props.aggregate,
+    interval: interval.value,
+    compare: props.compare,
+    // With no ranges and no explicit window, the metric covers all of history:
+    // an empty range would filter every row out, which reads as "no data" when
+    // the truth is "no window was asked for".
+    range: window.value ?? { from: "0000-01-01", to: "9999-12-31" },
+    label: props.title
+  })
+);
+const result = computed(() => transform(props.data ?? [], spec.value));
+const formatValue = computed(() => {
+  if (props.valueFormatter) return props.valueFormatter;
+  return (value) => formatMetricValue(value, {
+    format: props.format,
+    currency: props.currency,
+    locale: props.locale,
+    options: props.formatOptions
+  });
+});
+const headline = computed(() => {
+  const { total, data, series } = result.value;
+  const aggregate = props.aggregate;
+  if (aggregate === "sum" || aggregate === "count") return total;
+  const primary = series.find((key) => key !== "compare");
+  if (!primary) return total;
+  const values = data.map((datum) => datum[primary]).filter((value) => typeof value === "number");
+  if (!values.length) return 0;
+  if (aggregate === "min") return Math.min(...values);
+  if (aggregate === "max") return Math.max(...values);
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+});
+const headlineText = computed(() => formatValue.value(headline.value));
+const delta = computed(() => {
+  const change = result.value.change;
+  const text = formatChange(change, props.locale);
+  if (text === void 0) return void 0;
+  return { text, ...metricDelta(change, props.inverseSentiment) };
+});
+const compareLabel = computed(
+  () => props.compare === "previous-year" ? "vs previous year" : "vs previous period"
+);
+const absoluteChange = computed(() => {
+  const { total, compareTotal } = result.value;
+  if (compareTotal === void 0) return void 0;
+  const difference = total - compareTotal;
+  const sign = difference > 0 ? "+" : difference < 0 ? "\u2212" : "";
+  return `${sign}${formatValue.value(Math.abs(difference))}`;
+});
+const isEmpty = computed(
+  () => !props.loading && !props.error && result.value.data.length === 0
+);
+const showingTable = ref(false);
+const tableColumns = computed(
+  () => result.value.series.map((key) => ({ key, label: seriesLabel(key, spec.value) }))
+);
+const tableRows = computed(
+  () => result.value.data.map((datum) => ({
+    x: formatBucket(datum.x, interval.value, props.locale),
+    values: result.value.series.map((key) => {
+      const value = datum[key];
+      return typeof value === "number" ? formatValue.value(value) : "\u2014";
+    })
+  }))
+);
+function slugify(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "metric";
+}
+function exportCsv() {
+  const headers = Object.fromEntries(
+    tableColumns.value.map((column) => [column.key, column.label])
+  );
+  const csv = toCsv(result.value.data, result.value.series, headers, props.x);
+  emit("export", csv);
+  if (typeof document === "undefined") return;
+  const blob = new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = props.exportFilename ?? `${slugify(props.title ?? "metric")}.csv`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+const titleId = useId();
+const valueId = useId();
+const valueLabel = computed(() => {
+  const parts = [props.title, headlineText.value].filter(Boolean);
+  if (delta.value) {
+    const direction = delta.value.direction === "up" ? "up" : delta.value.direction === "down" ? "down" : "unchanged";
+    parts.push(`${direction} ${delta.value.text} ${compareLabel.value}`);
+  }
+  return parts.join(", ");
+});
+defineExpose({ result, spec, exportCsv });
+defineSlots();
+</script>
+
+<template>
+  <section
+    class="vc-metric"
+    :aria-labelledby="title ? titleId : void 0"
+    :aria-busy="loading ? 'true' : void 0"
+  >
+    <header class="vc-metric__header">
+      <slot name="header">
+        <div class="vc-metric__heading">
+          <h3 v-if="title" :id="titleId" class="vc-metric__title">{{ title }}</h3>
+          <p v-if="description" class="vc-metric__description">{{ description }}</p>
+        </div>
+
+        <slot
+          name="value"
+          :value="headline"
+          :formatted="headlineText"
+          :change="result.change"
+        >
+          <div v-if="!hideValue" class="vc-metric__value-row">
+            <!--
+              The skeleton stands in for the number rather than showing a stale
+              or zero total while data is in flight: a headline that renders
+              "€0" and then jumps is worse than one that visibly waits.
+            -->
+            <div v-if="loading" class="vc-metric__value-skeleton" aria-hidden="true" />
+            <template v-else>
+              <p :id="valueId" class="vc-metric__value" :aria-label="valueLabel">
+                {{ headlineText }}
+              </p>
+              <p
+                v-if="delta"
+                class="vc-metric__delta"
+                :data-sentiment="delta.sentiment"
+                aria-hidden="true"
+              >
+                <span class="vc-metric__delta-arrow">{{
+                  delta.direction === "up" ? "\u2191" : delta.direction === "down" ? "\u2193" : "\u2192"
+                }}</span>
+                <span>{{ delta.text }}</span>
+                <span v-if="absoluteChange" class="vc-metric__delta-absolute">({{ absoluteChange }})</span>
+                <span class="vc-metric__delta-label">{{ compareLabel }}</span>
+              </p>
+            </template>
+          </div>
+        </slot>
+      </slot>
+    </header>
+
+    <!--
+      The table replaces the chart rather than sitting beside it, so the two
+      never disagree about how much vertical space the card takes — a card that
+      grows on toggle shoves everything below it down the page.
+    -->
+    <div v-if="showingTable" class="vc-metric__table-wrap" :style="{ minHeight: `${height}px` }">
+      <table class="vc-metric__table">
+        <caption class="vc-sr-only">{{ title ?? "Metric data" }}</caption>
+        <thead>
+          <tr>
+            <th scope="col">{{ x }}</th>
+            <th v-for="column in tableColumns" :key="column.key" scope="col">{{ column.label }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in tableRows" :key="index">
+            <th scope="row">{{ row.x }}</th>
+            <td v-for="(value, column) in row.values" :key="column">{{ value }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <DataChart
+      v-else
+      :data="data"
+      :spec="spec"
+      :height="height"
+      :locale="locale"
+      :stacked="stacked"
+      :hide-legend="hideLegend ?? (!compare && !series)"
+      :theme="theme"
+      :value-formatter="formatValue"
+      :loading="loading"
+      :loading-label="loadingLabel"
+      :error="error"
+      :empty-label="emptyLabel"
+      :aria-label="ariaLabel ?? title"
+      :aria-description="ariaDescription ?? (delta ? valueLabel : void 0)"
+      :accessible-data-table="accessibleDataTable"
+      :max-data-points="maxDataPoints"
+      :legend-variant="legendVariant"
+      :tooltip-variant="tooltipVariant"
+      :tooltip-roundness="tooltipRoundness"
+    />
+
+    <footer v-if="ranges.length || showTable || exportable || $slots.actions" class="vc-metric__footer">
+      <!--
+        A radiogroup rather than a row of buttons: the ranges are one mutually
+        exclusive choice, and that is what lets a screen reader announce
+        "30D, selected, 2 of 4" instead of four unrelated buttons.
+      -->
+      <div
+        v-if="ranges.length && !window"
+        class="vc-metric__ranges"
+        role="radiogroup"
+        aria-label="Time range"
+      >
+        <button
+          v-for="range in ranges"
+          :key="range.key"
+          type="button"
+          role="radio"
+          class="vc-metric__range"
+          :aria-checked="range.key === activeRange?.key"
+          :aria-label="range.title ?? range.label"
+          :data-active="range.key === activeRange?.key ? 'true' : void 0"
+          @click="rangeModel = range.key"
+        >
+          {{ range.label }}
+        </button>
+      </div>
+
+      <div class="vc-metric__actions">
+        <slot name="actions" />
+        <button
+          v-if="showTable"
+          type="button"
+          class="vc-metric__action"
+          :aria-pressed="showingTable"
+          @click="showingTable = !showingTable"
+        >
+          {{ showingTable ? "Chart" : "Table" }}
+        </button>
+        <button
+          v-if="exportable"
+          type="button"
+          class="vc-metric__action"
+          :disabled="isEmpty"
+          @click="exportCsv"
+        >
+          Export
+        </button>
+      </div>
+    </footer>
+  </section>
+</template>