@omnitend/dashboard-for-laravel 0.41.1 → 0.42.0

package/README.md

@@ -150,7 +150,8 @@ await form.delete("/api/users/1", options);
 form.processing; // boolean
 form.errors; // ValidationErrors
 form.hasErrors; // computed boolean
-form.recentlySuccessful; // boolean
+form.recentlySuccessful; // boolean (clears after 1.5s)
+form.wasSuccessful;      // boolean (latest submit succeeded; until the next submit)
 
 // Form methods
 form.reset(); // Reset to initial values

package/dist/charts.js

@@ -1,158 +1,176 @@
-import { ref as p, getCurrentScope as I, onScopeDispose as j, computed as h, defineComponent as v, openBlock as y, createElementBlock as C, createVNode as _, unref as d } from "vue";
-import { Bar as T, Line as W, Doughnut as Z } from "vue-chartjs";
-import { Chart as q, registerables as z } from "chart.js";
-const F = (o) => !!o && typeof o == "object" && !Array.isArray(o);
-function x(o, e) {
-  const t = { ...o };
-  for (const [r, n] of Object.entries(e))
-    F(n) && F(t[r]) ? t[r] = x(t[r], n) : t[r] = n;
-  return t;
+import { ref as g, getCurrentScope as I, onScopeDispose as T, computed as m, defineComponent as x, openBlock as _, createElementBlock as k, createVNode as D, unref as u } from "vue";
+import { Bar as W, Line as j, Doughnut as G } from "vue-chartjs";
+import { Chart as Z, registerables as q } from "chart.js";
+const w = (t) => !!t && typeof t == "object" && !Array.isArray(t);
+function S(t, e) {
+  const r = { ...t };
+  for (const [n, a] of Object.entries(e))
+    w(a) && w(r[n]) ? r[n] = S(r[n], a) : r[n] = a;
+  return r;
 }
-let L = !1;
+let B = !1;
 function $() {
-  L || (q.register(...z), L = !0);
+  B || (Z.register(...q), B = !0);
 }
-const V = [
-  ["--dx-chart-1", "#2563eb"],
-  // blue
-  ["--dx-chart-2", "#65a30d"],
+const z = [
+  ["--dx-chart-1", "#7fd7fd"],
+  // sky
+  ["--dx-chart-2", "#7bf25a"],
   // lime
-  ["--dx-chart-3", "#7c3aed"],
-  // violet
-  ["--dx-chart-4", "#0d9488"],
-  // teal
-  ["--dx-chart-5", "#ea580c"],
-  // orange
-  ["--dx-chart-6", "#0891b2"],
-  // cyan
-  ["--dx-chart-7", "#d97706"],
-  // amber
-  ["--dx-chart-8", "#db2777"]
-  // pink
-];
-function M(o) {
-  return typeof document > "u" || typeof getComputedStyle > "u" ? null : o ?? document.documentElement;
+  ["--dx-chart-3", "#e46ab9"],
+  // magenta
+  ["--dx-chart-4", "#d6e86a"],
+  // lime-yellow
+  ["--dx-chart-5", "#b9a3f0"],
+  // lavender
+  ["--dx-chart-6", "#efd574"],
+  // butter
+  ["--dx-chart-7", "#9fb4ff"],
+  // periwinkle
+  ["--dx-chart-8", "#f7a072"]
+  // peach
+], H = [
+  ["--dx-chart-line-1", "#5590aa"],
+  ["--dx-chart-line-2", "#4d9839"],
+  ["--dx-chart-line-3", "#d161a9"],
+  ["--dx-chart-line-4", "#848f41"],
+  ["--dx-chart-line-5", "#907fbb"],
+  ["--dx-chart-line-6", "#99884a"],
+  ["--dx-chart-line-7", "#7686be"],
+  ["--dx-chart-line-8", "#ba7956"]
+], J = ["--dx-chart-edge", "#121419"];
+function O(t) {
+  return typeof document > "u" || typeof getComputedStyle > "u" ? null : t ?? document.documentElement;
+}
+function K(t) {
+  return A(z, t);
+}
+function Q(t) {
+  return A(H, t);
 }
-function G(o) {
-  const e = M(o);
-  if (e === null)
-    return V.map(([, r]) => r);
-  const t = getComputedStyle(e);
-  return V.map(([r, n]) => t.getPropertyValue(r).trim() || n);
+function U(t) {
+  return A([J], t)[0];
 }
-function O(o, e, t) {
-  const r = M(t);
-  return r === null ? e : getComputedStyle(r).getPropertyValue(o).trim() || e;
+function A(t, e) {
+  const r = O(e);
+  if (r === null)
+    return t.map(([, a]) => a);
+  const n = getComputedStyle(r);
+  return t.map(([a, l]) => n.getPropertyValue(a).trim() || l);
 }
-const b = p(0);
-let m = null, g = 0;
-function P() {
-  return typeof document > "u" || typeof MutationObserver > "u" || I() === void 0 || (g += 1, m === null && (m = new MutationObserver(() => {
-    b.value += 1;
-  }), m.observe(document.documentElement, {
+function F(t, e, r) {
+  const n = O(r);
+  return n === null ? e : getComputedStyle(n).getPropertyValue(t).trim() || e;
+}
+const y = g(0);
+let f = null, C = 0;
+function M() {
+  return typeof document > "u" || typeof MutationObserver > "u" || I() === void 0 || (C += 1, f === null && (f = new MutationObserver(() => {
+    y.value += 1;
+  }), f.observe(document.documentElement, {
     attributes: !0,
     attributeFilter: ["data-bs-theme"],
     subtree: !0
-  })), j(() => {
-    g -= 1, g === 0 && m !== null && (m.disconnect(), m = null);
-  })), b;
+  })), T(() => {
+    C -= 1, C === 0 && f !== null && (f.disconnect(), f = null);
+  })), y;
 }
-function R(o, e) {
-  const t = o.replace(/^#/, "");
-  if (/^[0-9a-f]{6}$/i.test(t)) {
-    const n = parseInt(t.slice(0, 2), 16), l = parseInt(t.slice(2, 4), 16), s = parseInt(t.slice(4, 6), 16);
-    return `rgba(${n}, ${l}, ${s}, ${e})`;
+function P(t, e) {
+  const r = t.replace(/^#/, "");
+  if (/^[0-9a-f]{6}$/i.test(r)) {
+    const a = parseInt(r.slice(0, 2), 16), l = parseInt(r.slice(2, 4), 16), s = parseInt(r.slice(4, 6), 16);
+    return `rgba(${a}, ${l}, ${s}, ${e})`;
   }
-  const r = o.match(/^rgba?\(([^)]+)\)$/);
-  if (r) {
-    const [n, l, s] = r[1].split(",").map((u) => u.trim());
-    return `rgba(${n}, ${l}, ${s}, ${e})`;
+  const n = t.match(/^rgba?\(([^)]+)\)$/);
+  if (n) {
+    const [a, l, s] = n[1].split(",").map((c) => c.trim());
+    return `rgba(${a}, ${l}, ${s}, ${e})`;
   }
-  return o;
+  return t;
 }
-function B(o, e, t, r) {
-  const n = new Intl.NumberFormat(r, {
+function E(t, e, r, n) {
+  const a = new Intl.NumberFormat(n, {
     maximumFractionDigits: 2
-  }).format(o);
-  return e === "currency" ? `${t}${n}` : e === "percent" ? `${n}%` : n;
+  }).format(t);
+  return e === "currency" ? `${r}${a}` : e === "percent" ? `${a}%` : a;
 }
-function X(o) {
+function R(t) {
   const {
     valueFormat: e,
-    currencySymbol: t = "£",
-    locale: r,
-    showLegend: n = !1,
+    currencySymbol: r = "£",
+    locale: n,
+    showLegend: a = !1,
     hasValueAxis: l = !0,
     scope: s
-  } = o, u = R(
-    O("--bs-border-color", "#dee2e6", s),
+  } = t, c = P(
+    F("--bs-border-color", "#dee2e6", s),
     0.6
-  ), a = O("--bs-secondary-color", "#6c757d", s), i = {
+  ), d = F("--bs-secondary-color", "#6c757d", s), h = {
     responsive: !0,
     maintainAspectRatio: !1,
     plugins: {
-      legend: { display: n, labels: { color: a } },
+      legend: { display: a, labels: { color: d } },
       tooltip: {
         callbacks: {
-          label: (c) => {
-            var w, A;
-            const f = ((w = c.parsed) == null ? void 0 : w.y) ?? c.parsed ?? c.raw, D = typeof f == "number" ? f : Number(f), S = Number.isFinite(D) ? B(D, e, t, r) : String(f), k = ((A = c.dataset) == null ? void 0 : A.label) ?? c.label ?? "";
-            return k ? `${k}: ${S}` : S;
+          label: (o) => {
+            var L, V;
+            const i = ((L = o.parsed) == null ? void 0 : L.y) ?? o.parsed ?? o.raw, b = typeof i == "number" ? i : Number(i), v = Number.isFinite(b) ? E(b, e, r, n) : String(i), p = ((V = o.dataset) == null ? void 0 : V.label) ?? o.label ?? "";
+            return p ? `${p}: ${v}` : v;
           }
         }
       }
     }
   };
-  return l && (i.scales = {
+  return l && (h.scales = {
     x: {
       grid: { display: !1 },
-      border: { color: u },
-      ticks: { color: a }
+      border: { color: c },
+      ticks: { color: d }
     },
     y: {
       beginAtZero: !0,
-      grid: { color: u, drawBorder: !1 },
+      grid: { color: c, drawBorder: !1 },
       border: { display: !1 },
       ticks: {
-        color: a,
-        callback: (c) => B(Number(c), e, t, r)
+        color: d,
+        callback: (o) => E(Number(o), e, r, n)
       }
     }
-  }), i;
+  }), h;
 }
-function E(o, e, t, r) {
-  const n = G(r), l = o.length === 1;
-  return o.map((s, u) => {
-    const a = { ...s }, i = n[u % n.length];
-    return e === "doughnut" ? (a.backgroundColor === void 0 && (a.backgroundColor = Array.from(
-      { length: t },
-      (c, f) => n[f % n.length]
-    )), a) : e === "line" ? (a.borderColor === void 0 && (a.borderColor = i), a.backgroundColor === void 0 && (a.backgroundColor = R(i, 0.15)), a.tension === void 0 && (a.tension = 0.3), a.fill === void 0 && (a.fill = !0), a.pointRadius === void 0 && (a.pointRadius = 2), a) : (a.backgroundColor === void 0 && (a.backgroundColor = l && t > 1 ? Array.from({ length: t }, () => i) : i), a.borderRadius === void 0 && (a.borderRadius = 4), a);
+function N(t, e, r, n) {
+  const a = K(n), l = Q(n), s = U(n), c = t.length === 1;
+  return t.map((d, h) => {
+    const o = { ...d }, i = a[h % a.length], b = l[h % l.length];
+    return e === "doughnut" ? (o.backgroundColor === void 0 && (o.backgroundColor = Array.from(
+      { length: r },
+      (v, p) => a[p % a.length]
+    )), o.borderColor === void 0 && (o.borderColor = s), o.borderWidth === void 0 && (o.borderWidth = 1), o) : e === "line" ? (o.borderColor === void 0 && (o.borderColor = b), o.backgroundColor === void 0 && (o.backgroundColor = P(i, 0.35)), o.pointBackgroundColor === void 0 && (o.pointBackgroundColor = i), o.pointBorderColor === void 0 && (o.pointBorderColor = b), o.tension === void 0 && (o.tension = 0.3), o.fill === void 0 && (o.fill = !0), o.pointRadius === void 0 && (o.pointRadius = 2), o) : (o.backgroundColor === void 0 && (o.backgroundColor = c && r > 1 ? Array.from({ length: r }, () => i) : i), o.borderColor === void 0 && (o.borderColor = s), o.borderWidth === void 0 && (o.borderWidth = 1), o.borderRadius === void 0 && (o.borderRadius = 4), o);
   });
 }
-function N(o, e, t) {
-  const r = P(), n = h(() => (r.value, {
+function X(t, e, r) {
+  const n = M(), a = m(() => (n.value, {
     labels: e.labels,
-    datasets: E(
+    datasets: N(
       e.datasets,
-      o,
+      t,
       e.labels.length,
-      t.value
+      r.value
     )
-  })), l = h(() => (r.value, x(
-    X({
+  })), l = m(() => (n.value, S(
+    R({
       valueFormat: e.valueFormat,
       currencySymbol: e.currencySymbol,
       locale: e.locale,
       showLegend: e.showLegend ?? e.datasets.length > 1,
       hasValueAxis: !0,
-      scope: t.value
+      scope: r.value
     }),
     e.options ?? {}
   )));
-  return { chartData: n, mergedOptions: l };
+  return { chartData: a, mergedOptions: l };
 }
-const Q = /* @__PURE__ */ v({
+const oe = /* @__PURE__ */ x({
   __name: "DXBarChart",
   props: {
     labels: {},
@@ -163,21 +181,21 @@ const Q = /* @__PURE__ */ v({
     locale: {},
     showLegend: { type: Boolean, default: void 0 }
   },
-  setup(o) {
+  setup(t) {
     $();
-    const e = o, t = p(null), { chartData: r, mergedOptions: n } = N("bar", e, t);
-    return (l, s) => (y(), C("div", {
+    const e = t, r = g(null), { chartData: n, mergedOptions: a } = X("bar", e, r);
+    return (l, s) => (_(), k("div", {
       ref_key: "host",
-      ref: t,
+      ref: r,
       class: "dx-chart"
     }, [
-      _(d(T), {
-        data: d(r),
-        options: d(n)
+      D(u(W), {
+        data: u(n),
+        options: u(a)
       }, null, 8, ["data", "options"])
     ], 512));
   }
-}), U = /* @__PURE__ */ v({
+}), re = /* @__PURE__ */ x({
   __name: "DXLineChart",
   props: {
     labels: {},
@@ -188,21 +206,21 @@ const Q = /* @__PURE__ */ v({
     locale: {},
     showLegend: { type: Boolean, default: void 0 }
   },
-  setup(o) {
+  setup(t) {
     $();
-    const e = o, t = p(null), { chartData: r, mergedOptions: n } = N("line", e, t);
-    return (l, s) => (y(), C("div", {
+    const e = t, r = g(null), { chartData: n, mergedOptions: a } = X("line", e, r);
+    return (l, s) => (_(), k("div", {
       ref_key: "host",
-      ref: t,
+      ref: r,
       class: "dx-chart"
     }, [
-      _(d(W), {
-        data: d(r),
-        options: d(n)
+      D(u(j), {
+        data: u(n),
+        options: u(a)
       }, null, 8, ["data", "options"])
     ], 512));
   }
-}), Y = /* @__PURE__ */ v({
+}), ne = /* @__PURE__ */ x({
   __name: "DXDoughnutChart",
   props: {
     labels: {},
@@ -214,35 +232,35 @@ const Q = /* @__PURE__ */ v({
     locale: {},
     showLegend: { type: Boolean, default: void 0 }
   },
-  setup(o) {
+  setup(t) {
     $();
-    const e = o, t = p(null), r = P(), n = h(
+    const e = t, r = g(null), n = M(), a = m(
       () => e.datasets ?? [{ data: e.data ?? [] }]
-    ), l = h(() => (r.value, {
+    ), l = m(() => (n.value, {
       labels: e.labels,
-      datasets: E(
-        n.value,
+      datasets: N(
+        a.value,
         "doughnut",
         e.labels.length,
-        t.value
+        r.value
       )
-    })), s = h(() => (r.value, x(
-      X({
+    })), s = m(() => (n.value, S(
+      R({
         valueFormat: e.valueFormat,
         currencySymbol: e.currencySymbol,
         locale: e.locale,
         showLegend: e.showLegend ?? !0,
         hasValueAxis: !1,
-        scope: t.value
+        scope: r.value
       }),
       e.options ?? {}
     )));
-    return (u, a) => (y(), C("div", {
+    return (c, d) => (_(), k("div", {
       ref_key: "host",
-      ref: t,
+      ref: r,
       class: "dx-chart"
     }, [
-      _(d(Z), {
+      D(u(G), {
         data: l.value,
         options: s.value
       }, null, 8, ["data", "options"])
@@ -250,8 +268,8 @@ const Q = /* @__PURE__ */ v({
   }
 });
 export {
-  Q as DXBarChart,
-  Y as DXDoughnutChart,
-  U as DXLineChart
+  oe as DXBarChart,
+  ne as DXDoughnutChart,
+  re as DXLineChart
 };
 //# sourceMappingURL=charts.js.map

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/useThemedChart.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\nimport { getCurrentScope, onScopeDispose, ref, type Ref } from \"vue\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.\n// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours\n// are dark AA \"emphasis\" shades (too muted for series), and status colours\n// shouldn't impersonate \"series 2\". Fallbacks mirror the shipped theme so\n// charts still render without the CSS (SSR / tests / a consumer who didn't\n// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test\n// that parses the Sass source (charts.test.ts), which is why this is exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#2563eb\"], // blue\n    [\"--dx-chart-2\", \"#65a30d\"], // lime\n    [\"--dx-chart-3\", \"#7c3aed\"], // violet\n    [\"--dx-chart-4\", \"#0d9488\"], // teal\n    [\"--dx-chart-5\", \"#ea580c\"], // orange\n    [\"--dx-chart-6\", \"#0891b2\"], // cyan\n    [\"--dx-chart-7\", \"#d97706\"], // amber\n    [\"--dx-chart-8\", \"#db2777\"], // pink\n];\n\n/**\n * The element whose computed style the theme variables are read from.\n *\n * Bootstrap 5.3 allows `data-bs-theme` on ANY container, not just `<html>` — a\n * dark card on a light page is a supported pattern. Reading the variables off\n * `document.documentElement` therefore gives a *nested* scope the wrong palette\n * (#161), so every resolver takes the chart's own container and only falls back\n * to the root when it has none (SSR, a caller outside a component).\n */\nfunction themeScope(scope?: Element | null): Element | null {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return null;\n    }\n    if (scope !== undefined && scope !== null) return scope;\n    return document.documentElement;\n}\n\n/**\n * Resolve the themed categorical palette.\n *\n * @param scope The chart's container element; its computed style decides which\n *   `data-bs-theme` scope applies. Omit (or pass null) to read the document\n *   root — the pre-#161 behaviour, kept so the exported signature stays\n *   backward compatible.\n */\nexport function getPalette(scope?: Element | null): string[] {\n    const host = themeScope(scope);\n    if (host === null) {\n        return PALETTE_VARS.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(host);\n    return PALETTE_VARS.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string, scope?: Element | null): string {\n    const host = themeScope(scope);\n    if (host === null) {\n        return fallback;\n    }\n    const value = getComputedStyle(host).getPropertyValue(name).trim();\n    return value || fallback;\n}\n\n// ---------------------------------------------------------------------------\n// Colour-mode reactivity (#161)\n//\n// The palette lives in CSS variables, which Vue cannot track: a computed that\n// calls getPalette() depends only on the props it also reads, so flipping\n// `data-bs-theme` repaints the page but leaves every MOUNTED chart on the old\n// palette until a prop changes or it remounts. One shared MutationObserver\n// bumps a version ref that the chart computeds read, which re-resolves the\n// variables. `subtree: true` because the attribute can sit on any container,\n// and `attributeFilter` keeps the observer from firing on unrelated mutations.\n// ---------------------------------------------------------------------------\n\nconst colorModeVersion = ref(0);\nlet colorModeObserver: MutationObserver | null = null;\nlet colorModeWatchers = 0;\n\n/**\n * A version ref that increments whenever a `data-bs-theme` attribute changes\n * anywhere in the document. Read it inside a computed that resolves theme\n * variables to make that computed re-run on a colour-mode switch.\n *\n * The observer is started on first use and disconnected when the last consumer's\n * effect scope is disposed, so nothing leaks after the charts unmount. Called\n * outside an effect scope (or without a DOM) it is a no-op returning a static\n * ref — there would be no teardown hook to disconnect the observer.\n */\nexport function useColorModeVersion(): Ref<number> {\n    if (\n        typeof document === \"undefined\" ||\n        typeof MutationObserver === \"undefined\" ||\n        getCurrentScope() === undefined\n    ) {\n        return colorModeVersion;\n    }\n\n    colorModeWatchers += 1;\n    if (colorModeObserver === null) {\n        colorModeObserver = new MutationObserver(() => {\n            colorModeVersion.value += 1;\n        });\n        colorModeObserver.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"data-bs-theme\"],\n            subtree: true,\n        });\n    }\n\n    onScopeDispose(() => {\n        colorModeWatchers -= 1;\n        if (colorModeWatchers === 0 && colorModeObserver !== null) {\n            colorModeObserver.disconnect();\n            colorModeObserver = null;\n        }\n    });\n\n    return colorModeVersion;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n    /** The chart's container element — decides which `data-bs-theme` scope the\n     *  grid/tick colours resolve against (#161). Defaults to the document root. */\n    scope?: Element | null;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n        scope,\n    } = args;\n\n    const gridColor = withAlpha(\n        themeColor(\"--bs-border-color\", \"#dee2e6\", scope),\n        0.6,\n    );\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\", scope);\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed\n * stroke + translucent fill. Doughnut/pie: one colour per slice.\n *\n * `scope` is the chart's container element; the palette is resolved from its\n * computed style so a nested `data-bs-theme` container themes correctly (#161).\n * Omit it to resolve against the document root.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n    scope?: Element | null,\n): any[] {\n    const palette = getPalette(scope);\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = color;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.15);\n            }\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","import { computed, type ComputedRef, type Ref } from \"vue\";\nimport type { ChartData, ChartDataset, ChartOptions } from \"chart.js\";\nimport {\n    baseOptions,\n    applyPalette,\n    mergeOptions,\n    useColorModeVersion,\n    type ChartValueFormat,\n} from \"./chartTheme\";\n\n/**\n * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).\n * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they\n * render and the palette kind — everything else (theming, option-merge,\n * legend-default) is identical, and lived duplicated in both SFCs (#135).\n */\nexport interface ThemedChartProps<TType extends \"bar\" | \"line\"> {\n    /** X-axis category labels. */\n    labels: string[];\n    /** Chart.js datasets. Colours are themed when a dataset omits them. */\n    datasets: ChartDataset<TType>[];\n    /** Chart.js options; deep-merged over the themed defaults. */\n    options?: ChartOptions<TType>;\n    /** Format value-axis ticks and tooltips. */\n    valueFormat?: ChartValueFormat;\n    /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n    currencySymbol?: string;\n    /** Locale for number formatting. */\n    locale?: string;\n    /** Show the legend (default: only when there is more than one dataset). */\n    showLegend?: boolean;\n}\n\n/**\n * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the\n * data-viz palette to un-coloured datasets and deep-merges the consumer's\n * `options` over the dashboard-friendly defaults. Pass the reactive `props`\n * object (property access stays reactive inside the computeds).\n *\n * `host` is the chart's own container element (a template ref). It is BOTH the\n * `data-bs-theme` scope the palette resolves against and — being a ref read\n * inside the computeds — the trigger that re-themes once it is populated on\n * mount, since the first render happens before a template ref exists (#161).\n */\nexport function useThemedChart<TType extends \"bar\" | \"line\">(\n    type: TType,\n    props: ThemedChartProps<TType>,\n    host: Ref<HTMLElement | null>,\n): {\n    chartData: ComputedRef<ChartData<TType>>;\n    mergedOptions: ComputedRef<ChartOptions<TType>>;\n} {\n    // Bumped by a MutationObserver on every `data-bs-theme` change; read below\n    // so the CSS-variable palette — invisible to Vue's reactivity — is\n    // re-resolved when the colour mode flips under a mounted chart.\n    const colorModeVersion = useColorModeVersion();\n\n    const chartData = computed(() => {\n        void colorModeVersion.value;\n        return {\n            labels: props.labels,\n            datasets: applyPalette(\n                props.datasets,\n                type,\n                props.labels.length,\n                host.value,\n            ),\n        } as ChartData<TType>;\n    });\n\n    const mergedOptions = computed(() => {\n        void colorModeVersion.value;\n        return mergeOptions(\n            baseOptions({\n                valueFormat: props.valueFormat,\n                currencySymbol: props.currencySymbol,\n                locale: props.locale,\n                showLegend: props.showLegend ?? props.datasets.length > 1,\n                hasValueAxis: true,\n                scope: host.value,\n            }),\n            props.options ?? {},\n        ) as ChartOptions<TType>;\n    });\n\n    return { chartData, mergedOptions };\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Bar } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"bar\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"bar\", props, host);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Line } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"line\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"line\", props, host);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  useColorModeVersion,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card. Reading the ref\n// inside the computeds also re-themes on mount, when the first (pre-ref) render\n// had to fall back to the document root (#161). DXDoughnutChart doesn't share\n// `useThemedChart` (its data shape differs), so the wiring is repeated here.\nconst host = ref<HTMLElement | null>(null);\n\n// Bumped by a MutationObserver on every `data-bs-theme` change; read below so\n// the CSS-variable palette — invisible to Vue's reactivity — is re-resolved\n// when the colour mode flips under a mounted chart.\nconst colorModeVersion = useColorModeVersion();\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => {\n  void colorModeVersion.value;\n  return {\n    labels: props.labels,\n    datasets: applyPalette(\n      resolvedDatasets.value,\n      \"doughnut\",\n      props.labels.length,\n      host.value,\n    ),\n  };\n});\n\nconst mergedOptions = computed(() => {\n  void colorModeVersion.value;\n  return mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n      scope: host.value,\n    }),\n    props.options ?? {},\n  );\n});\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","themeScope","scope","getPalette","host","fallback","styles","name","themeColor","colorModeVersion","ref","colorModeObserver","colorModeWatchers","useColorModeVersion","getCurrentScope","onScopeDispose","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","single","dataset","index","next","_","i","useThemedChart","type","props","chartData","computed","mergedOptions","__props","_createElementBlock","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}
+{"version":3,"file":"charts.js","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/useThemedChart.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\nimport { getCurrentScope, onScopeDispose, ref, type Ref } from \"vue\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// light, vivid fills in a fixed, CVD-validated order, published as\n// --dx-chart-1..8. Deliberately NOT read from the semantic --bs-* colours\n// (#141). Fallbacks mirror the shipped theme so charts still render without\n// the CSS (SSR / tests / a consumer who didn't import it). Sync with\n// theme.scss is enforced by a test that parses the Sass source\n// (charts.test.ts), which is why these lists are exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#7fd7fd\"], // sky\n    [\"--dx-chart-2\", \"#7bf25a\"], // lime\n    [\"--dx-chart-3\", \"#e46ab9\"], // magenta\n    [\"--dx-chart-4\", \"#d6e86a\"], // lime-yellow\n    [\"--dx-chart-5\", \"#b9a3f0\"], // lavender\n    [\"--dx-chart-6\", \"#efd574\"], // butter\n    [\"--dx-chart-7\", \"#9fb4ff\"], // periwinkle\n    [\"--dx-chart-8\", \"#f7a072\"], // peach\n];\n\n// The line/point shade for each slot (`$dx-chart-line-palette`): the fill\n// darkened to 3.5:1 on white, so a line stroke or point outline clears WCAG\n// 1.4.11 non-text contrast where the light fill alone would not. Same order.\nexport const LINE_PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-line-1\", \"#5590aa\"],\n    [\"--dx-chart-line-2\", \"#4d9839\"],\n    [\"--dx-chart-line-3\", \"#d161a9\"],\n    [\"--dx-chart-line-4\", \"#848f41\"],\n    [\"--dx-chart-line-5\", \"#907fbb\"],\n    [\"--dx-chart-line-6\", \"#99884a\"],\n    [\"--dx-chart-line-7\", \"#7686be\"],\n    [\"--dx-chart-line-8\", \"#ba7956\"],\n];\n\n// The 1px outline on bars and doughnut segments (`$dx-chart-edge`): it carries\n// the non-text contrast for the light fills. Dark mode remaps it to the dark\n// body colour.\nexport const EDGE_VAR: [string, string] = [\"--dx-chart-edge\", \"#121419\"];\n\n/**\n * The element whose computed style the theme variables are read from.\n *\n * Bootstrap 5.3 allows `data-bs-theme` on ANY container, not just `<html>` — a\n * dark card on a light page is a supported pattern. Reading the variables off\n * `document.documentElement` therefore gives a *nested* scope the wrong palette\n * (#161), so every resolver takes the chart's own container and only falls back\n * to the root when it has none (SSR, a caller outside a component).\n */\nfunction themeScope(scope?: Element | null): Element | null {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return null;\n    }\n    if (scope !== undefined && scope !== null) return scope;\n    return document.documentElement;\n}\n\n/**\n * Resolve the themed categorical palette.\n *\n * @param scope The chart's container element; its computed style decides which\n *   `data-bs-theme` scope applies. Omit (or pass null) to read the document\n *   root — the pre-#161 behaviour, kept so the exported signature stays\n *   backward compatible.\n */\nexport function getPalette(scope?: Element | null): string[] {\n    return resolveVars(PALETTE_VARS, scope);\n}\n\n/**\n * Resolve the themed line/point shades (`--dx-chart-line-1..8`), slot for slot\n * with getPalette(). Same scope rules as getPalette().\n */\nexport function getLinePalette(scope?: Element | null): string[] {\n    return resolveVars(LINE_PALETTE_VARS, scope);\n}\n\n/** Resolve the bar/segment edge colour (`--dx-chart-edge`). */\nexport function getEdgeColor(scope?: Element | null): string {\n    return resolveVars([EDGE_VAR], scope)[0];\n}\n\nfunction resolveVars(vars: Array<[string, string]>, scope?: Element | null): string[] {\n    const host = themeScope(scope);\n    if (host === null) {\n        return vars.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(host);\n    return vars.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string, scope?: Element | null): string {\n    const host = themeScope(scope);\n    if (host === null) {\n        return fallback;\n    }\n    const value = getComputedStyle(host).getPropertyValue(name).trim();\n    return value || fallback;\n}\n\n// ---------------------------------------------------------------------------\n// Colour-mode reactivity (#161)\n//\n// The palette lives in CSS variables, which Vue cannot track: a computed that\n// calls getPalette() depends only on the props it also reads, so flipping\n// `data-bs-theme` repaints the page but leaves every MOUNTED chart on the old\n// palette until a prop changes or it remounts. One shared MutationObserver\n// bumps a version ref that the chart computeds read, which re-resolves the\n// variables. `subtree: true` because the attribute can sit on any container,\n// and `attributeFilter` keeps the observer from firing on unrelated mutations.\n// ---------------------------------------------------------------------------\n\nconst colorModeVersion = ref(0);\nlet colorModeObserver: MutationObserver | null = null;\nlet colorModeWatchers = 0;\n\n/**\n * A version ref that increments whenever a `data-bs-theme` attribute changes\n * anywhere in the document. Read it inside a computed that resolves theme\n * variables to make that computed re-run on a colour-mode switch.\n *\n * The observer is started on first use and disconnected when the last consumer's\n * effect scope is disposed, so nothing leaks after the charts unmount. Called\n * outside an effect scope (or without a DOM) it is a no-op returning a static\n * ref — there would be no teardown hook to disconnect the observer.\n */\nexport function useColorModeVersion(): Ref<number> {\n    if (\n        typeof document === \"undefined\" ||\n        typeof MutationObserver === \"undefined\" ||\n        getCurrentScope() === undefined\n    ) {\n        return colorModeVersion;\n    }\n\n    colorModeWatchers += 1;\n    if (colorModeObserver === null) {\n        colorModeObserver = new MutationObserver(() => {\n            colorModeVersion.value += 1;\n        });\n        colorModeObserver.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"data-bs-theme\"],\n            subtree: true,\n        });\n    }\n\n    onScopeDispose(() => {\n        colorModeWatchers -= 1;\n        if (colorModeWatchers === 0 && colorModeObserver !== null) {\n            colorModeObserver.disconnect();\n            colorModeObserver = null;\n        }\n    });\n\n    return colorModeVersion;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n    /** The chart's container element — decides which `data-bs-theme` scope the\n     *  grid/tick colours resolve against (#161). Defaults to the document root. */\n    scope?: Element | null;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n        scope,\n    } = args;\n\n    const gridColor = withAlpha(\n        themeColor(\"--bs-border-color\", \"#dee2e6\", scope),\n        0.6,\n    );\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\", scope);\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Each property is filled in only when the caller left it undefined.\n * Bar: one fill per dataset (or per bar for a single dataset), with a 1px\n * edge outline. Line: the slot's darker line shade for the stroke and point\n * outlines, the fill for point centres, and a 35% fill wash under the line.\n * Doughnut/pie: one fill per slice, with a 1px edge outline.\n *\n * `scope` is the chart's container element; the palette is resolved from its\n * computed style so a nested `data-bs-theme` container themes correctly (#161).\n * Omit it to resolve against the document root.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n    scope?: Element | null,\n): any[] {\n    const palette = getPalette(scope);\n    const linePalette = getLinePalette(scope);\n    const edge = getEdgeColor(scope);\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n        const lineColor = linePalette[index % linePalette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            if (next.borderColor === undefined) next.borderColor = edge;\n            if (next.borderWidth === undefined) next.borderWidth = 1;\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = lineColor;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.35);\n            }\n            if (next.pointBackgroundColor === undefined) next.pointBackgroundColor = color;\n            if (next.pointBorderColor === undefined) next.pointBorderColor = lineColor;\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderColor === undefined) next.borderColor = edge;\n        if (next.borderWidth === undefined) next.borderWidth = 1;\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","import { computed, type ComputedRef, type Ref } from \"vue\";\nimport type { ChartData, ChartDataset, ChartOptions } from \"chart.js\";\nimport {\n    baseOptions,\n    applyPalette,\n    mergeOptions,\n    useColorModeVersion,\n    type ChartValueFormat,\n} from \"./chartTheme\";\n\n/**\n * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).\n * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they\n * render and the palette kind — everything else (theming, option-merge,\n * legend-default) is identical, and lived duplicated in both SFCs (#135).\n */\nexport interface ThemedChartProps<TType extends \"bar\" | \"line\"> {\n    /** X-axis category labels. */\n    labels: string[];\n    /** Chart.js datasets. Colours are themed when a dataset omits them. */\n    datasets: ChartDataset<TType>[];\n    /** Chart.js options; deep-merged over the themed defaults. */\n    options?: ChartOptions<TType>;\n    /** Format value-axis ticks and tooltips. */\n    valueFormat?: ChartValueFormat;\n    /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n    currencySymbol?: string;\n    /** Locale for number formatting. */\n    locale?: string;\n    /** Show the legend (default: only when there is more than one dataset). */\n    showLegend?: boolean;\n}\n\n/**\n * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the\n * data-viz palette to un-coloured datasets and deep-merges the consumer's\n * `options` over the dashboard-friendly defaults. Pass the reactive `props`\n * object (property access stays reactive inside the computeds).\n *\n * `host` is the chart's own container element (a template ref). It is BOTH the\n * `data-bs-theme` scope the palette resolves against and — being a ref read\n * inside the computeds — the trigger that re-themes once it is populated on\n * mount, since the first render happens before a template ref exists (#161).\n */\nexport function useThemedChart<TType extends \"bar\" | \"line\">(\n    type: TType,\n    props: ThemedChartProps<TType>,\n    host: Ref<HTMLElement | null>,\n): {\n    chartData: ComputedRef<ChartData<TType>>;\n    mergedOptions: ComputedRef<ChartOptions<TType>>;\n} {\n    // Bumped by a MutationObserver on every `data-bs-theme` change; read below\n    // so the CSS-variable palette — invisible to Vue's reactivity — is\n    // re-resolved when the colour mode flips under a mounted chart.\n    const colorModeVersion = useColorModeVersion();\n\n    const chartData = computed(() => {\n        void colorModeVersion.value;\n        return {\n            labels: props.labels,\n            datasets: applyPalette(\n                props.datasets,\n                type,\n                props.labels.length,\n                host.value,\n            ),\n        } as ChartData<TType>;\n    });\n\n    const mergedOptions = computed(() => {\n        void colorModeVersion.value;\n        return mergeOptions(\n            baseOptions({\n                valueFormat: props.valueFormat,\n                currencySymbol: props.currencySymbol,\n                locale: props.locale,\n                showLegend: props.showLegend ?? props.datasets.length > 1,\n                hasValueAxis: true,\n                scope: host.value,\n            }),\n            props.options ?? {},\n        ) as ChartOptions<TType>;\n    });\n\n    return { chartData, mergedOptions };\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8 fills, a 1px --dx-chart-edge outline) applied\n  and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Bar } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"bar\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"bar\", props, host);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-line-1..8 stroke and point outline,\n  --dx-chart-1..8 point centre and translucent area fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Line } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"line\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"line\", props, host);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice, a 1px --dx-chart-edge outline, and\n  dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  useColorModeVersion,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card. Reading the ref\n// inside the computeds also re-themes on mount, when the first (pre-ref) render\n// had to fall back to the document root (#161). DXDoughnutChart doesn't share\n// `useThemedChart` (its data shape differs), so the wiring is repeated here.\nconst host = ref<HTMLElement | null>(null);\n\n// Bumped by a MutationObserver on every `data-bs-theme` change; read below so\n// the CSS-variable palette — invisible to Vue's reactivity — is re-resolved\n// when the colour mode flips under a mounted chart.\nconst colorModeVersion = useColorModeVersion();\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => {\n  void colorModeVersion.value;\n  return {\n    labels: props.labels,\n    datasets: applyPalette(\n      resolvedDatasets.value,\n      \"doughnut\",\n      props.labels.length,\n      host.value,\n    ),\n  };\n});\n\nconst mergedOptions = computed(() => {\n  void colorModeVersion.value;\n  return mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n      scope: host.value,\n    }),\n    props.options ?? {},\n  );\n});\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","LINE_PALETTE_VARS","EDGE_VAR","themeScope","scope","getPalette","resolveVars","getLinePalette","getEdgeColor","vars","host","fallback","styles","name","themeColor","colorModeVersion","ref","colorModeObserver","colorModeWatchers","useColorModeVersion","getCurrentScope","onScopeDispose","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","linePalette","edge","single","dataset","index","next","lineColor","_","i","useThemedChart","type","props","chartData","computed","mergedOptions","__props","_createElementBlock","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}