nuxt-charts 3.0.0 → 3.1.0

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/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>

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

@@ -0,0 +1,54 @@
+import type { MetricChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(MetricChartProps<T> & {
+        /**
+         * Selected range key.
+         *
+         * `v-model:range` is optional: without it the component keeps its own
+         * selection, so a metric card works as a drop-in without the host having to
+         * own state it does not care about. With it, several cards can share one
+         * selection — which is what the eventual `MetricGrid` will use.
+         */
+        range?: string | undefined;
+    }) & {
+        "onUpdate:window"?: ((window: {
+            from: string;
+            to: string;
+        }) => any) | undefined;
+        onExport?: ((csv: string) => any) | undefined;
+        "onUpdate:range"?: ((value: string | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        result: import("vue").ComputedRef<import("../spec/transform.js").TransformResult>;
+        spec: import("vue").ComputedRef<import("../spec/types.js").ChartSpec>;
+        exportCsv: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Replaces the whole header (title, description, value, delta). */
+        header?: () => unknown;
+        /** Replaces the headline value and its delta only. */
+        value?: (props: {
+            value: number;
+            formatted: string;
+            change: number | undefined;
+        }) => unknown;
+        /** Extra controls in the footer, beside the table and export buttons. */
+        actions?: () => unknown;
+    };
+    emit: (((evt: "update:window", window: {
+        from: string;
+        to: string;
+    }) => void) & ((evt: "export", csv: string) => void)) & ((event: "update:range", value: string | undefined) => 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];
+}) & {};