@richardmcquiston01/dashboard-widgets-toolkit 0.1.0

package/dist/react.js

@@ -0,0 +1,1248 @@
+import { createContext, useContext, useId, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/react/card.tsx
+
+// src/core/format.ts
+var DEFAULT_CURRENCY = "USD";
+function localeArgument(locale) {
+  return locale === void 0 || typeof locale === "string" ? locale : [...locale];
+}
+function numberFormat(locale, options) {
+  try {
+    return new Intl.NumberFormat(localeArgument(locale), options);
+  } catch {
+    const { style: _style, currency: _currency, ...rest } = options;
+    return new Intl.NumberFormat(void 0, rest);
+  }
+}
+function formatValue(value, format, options = {}) {
+  if (!Number.isFinite(value)) {
+    return "\u2014";
+  }
+  const compact = options.compact ? { notation: "compact", maximumFractionDigits: 1 } : {};
+  switch (format) {
+    case "number":
+      return numberFormat(options.locale, {
+        maximumFractionDigits: 2,
+        ...compact
+      }).format(value);
+    case "currency": {
+      const currency = (options.currency ?? DEFAULT_CURRENCY).toUpperCase();
+      const formatter = numberFormat(options.locale, {
+        style: "currency",
+        currency,
+        ...compact
+      });
+      const text = formatter.format(value);
+      return formatter.resolvedOptions().style === "currency" ? text : `${text} ${currency}`;
+    }
+    case "percent":
+      return numberFormat(options.locale, {
+        style: "percent",
+        maximumFractionDigits: 1,
+        ...compact
+      }).format(value);
+  }
+}
+function shareOf(part, total) {
+  return total <= 0 ? 0 : Math.round(part / total * 100);
+}
+function percentChange(current, previous) {
+  if (previous === null || previous === void 0 || previous === 0 || !Number.isFinite(previous) || !Number.isFinite(current)) {
+    return null;
+  }
+  return (current - previous) / Math.abs(previous) * 100;
+}
+function formatPercentChange(change, locale) {
+  const digits = Math.abs(change) < 10 ? 1 : 0;
+  const rounded = Number(change.toFixed(digits));
+  if (rounded === 0) {
+    return "\xB10%";
+  }
+  return numberFormat(locale, {
+    style: "percent",
+    maximumFractionDigits: digits,
+    signDisplay: "exceptZero"
+  }).format(rounded / 100);
+}
+var DEFAULT_COMPARISON_LABEL = "previous period";
+function kpiDelta(current, previous, options = {}) {
+  const percent = percentChange(current, previous);
+  if (percent === null) {
+    return null;
+  }
+  const text = formatPercentChange(percent, options.locale);
+  const direction = text === "\xB10%" ? "flat" : percent > 0 ? "up" : "down";
+  const higherIsBetter = options.higherIsBetter ?? true;
+  const sentiment = direction === "flat" ? "neutral" : direction === "up" === higherIsBetter ? "good" : "bad";
+  return {
+    percent,
+    direction,
+    sentiment,
+    text,
+    description: `${text} vs ${options.comparisonLabel ?? DEFAULT_COMPARISON_LABEL}`
+  };
+}
+
+// src/core/scale.ts
+function niceStep(value) {
+  if (!(value > 0) || !Number.isFinite(value)) return 1;
+  const exponent = Math.floor(Math.log10(value));
+  const fraction = value / 10 ** exponent;
+  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+  return nice * 10 ** exponent;
+}
+function niceDomain(values, tickCount = 4) {
+  const finite = values.filter((v) => Number.isFinite(v));
+  let low = Math.min(0, ...finite);
+  let high = Math.max(0, ...finite);
+  if (low === high) {
+    high = 1;
+    low = 0;
+  }
+  const step = niceStep((high - low) / Math.max(1, tickCount));
+  const min = Math.floor(low / step) * step;
+  const max = Math.ceil(high / step) * step;
+  const ticks = [];
+  const count = Math.round((max - min) / step);
+  for (let index = 0; index <= count; index++) {
+    ticks.push(Number((min + index * step).toPrecision(12)));
+  }
+  return { min, max, ticks };
+}
+function labelStride(count, maxLabels = 6) {
+  return Math.max(1, Math.ceil(count / Math.max(1, maxLabels)));
+}
+
+// src/react/palette.ts
+var DEFAULT_SERIES_COLORS = [
+  "#2a78d6",
+  "#eb6834",
+  "#1baf7a",
+  "#eda100",
+  "#e87ba4",
+  "#008300",
+  "#4a3aa7",
+  "#e34948"
+];
+function seriesColor(index) {
+  const slot = Math.min(index, DEFAULT_SERIES_COLORS.length - 1);
+  return `var(--dwt-series-${slot + 1}, ${DEFAULT_SERIES_COLORS[slot] ?? "#2a78d6"})`;
+}
+var CHART_COLORS = {
+  surface: "var(--dwt-surface, #fcfcfb)",
+  grid: "var(--dwt-grid, #e1e0d9)",
+  baseline: "var(--dwt-baseline, #c3c2b7)",
+  textMuted: "var(--dwt-text-muted, #6b6a66)",
+  textPrimary: "var(--dwt-text, #0b0b0b)",
+  crosshair: "var(--dwt-crosshair, #898781)",
+  meterTrack: "var(--dwt-meter-track, #cde2fb)",
+  barTrack: "var(--dwt-bar-track, #f0efec)"
+};
+var DEFAULT_LABELS = {
+  loading: "Loading\u2026",
+  retry: "Retry",
+  viewAsTable: "View as table",
+  hide: (title) => `Hide ${title}`,
+  show: (title) => `Show ${title}`,
+  minimize: (title) => `Minimise ${title}`,
+  expand: (title) => `Expand ${title}`,
+  moveEarlier: (title) => `Move ${title} earlier`,
+  moveLater: (title) => `Move ${title} later`,
+  hiddenWidgets: "Hidden:",
+  allHidden: "Every widget is hidden. Show one from the list above.",
+  noWidgets: "No widgets to show.",
+  andMore: (count) => `and ${count} more`,
+  comparison: "previous period"
+};
+var SettingsContext = createContext({
+  locale: void 0,
+  linkTarget: void 0,
+  classNames: {},
+  labels: DEFAULT_LABELS
+});
+function WidgetSettingsProvider({
+  children,
+  ...settings
+}) {
+  return /* @__PURE__ */ jsx(
+    SettingsContext.Provider,
+    {
+      value: {
+        locale: settings.locale,
+        linkTarget: settings.linkTarget,
+        classNames: settings.classNames ?? {},
+        labels: { ...DEFAULT_LABELS, ...settings.labels }
+      },
+      children
+    }
+  );
+}
+function useWidgetSettings() {
+  return useContext(SettingsContext);
+}
+function joinClassNames(...names) {
+  return names.filter((name) => typeof name === "string" && name !== "").join(" ");
+}
+function useSlotClassName() {
+  const { classNames } = useWidgetSettings();
+  return (slot, base, ...extra) => joinClassNames(base, ...extra, classNames[slot]);
+}
+var WIDTH = 640;
+var HEIGHT = 220;
+var MARGIN = { top: 16, right: 20, bottom: 28, left: 56 };
+var INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;
+var INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;
+var MAX_BAR_WIDTH = 24;
+var BAR_GAP = 2;
+var BAR_RADIUS = 4;
+var MAX_MARKED_POINTS = 24;
+function barPath(x, y, width, height, roundedEnd) {
+  const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height));
+  const right = x + width;
+  const bottom = y + height;
+  const f = (n) => n.toFixed(2);
+  if (roundedEnd === "top") {
+    return `M${f(x)},${f(bottom)}V${f(y + r)}Q${f(x)},${f(y)} ${f(x + r)},${f(y)}H${f(right - r)}Q${f(right)},${f(y)} ${f(right)},${f(y + r)}V${f(bottom)}Z`;
+  }
+  return `M${f(x)},${f(y)}V${f(bottom - r)}Q${f(x)},${f(bottom)} ${f(x + r)},${f(bottom)}H${f(right - r)}Q${f(right)},${f(bottom)} ${f(right)},${f(bottom - r)}V${f(y)}Z`;
+}
+function buildChartModel(data) {
+  const count = Math.max(0, ...data.series.map((s) => s.points.length));
+  const labels = [];
+  for (let index = 0; index < count; index++) {
+    const label = data.series.find(
+      (s) => s.points[index] !== void 0
+    )?.points[index]?.label;
+    labels.push(label ?? "");
+  }
+  const values = data.series.map(
+    (s) => labels.map((_, index) => s.points[index]?.value ?? null)
+  );
+  const all = values.flat().filter((v) => v !== null);
+  return { labels, values, domain: niceDomain(all) };
+}
+function yFor(domain, value) {
+  const range = domain.max - domain.min || 1;
+  return MARGIN.top + INNER_HEIGHT * ((domain.max - value) / range);
+}
+function xFor(chartType, count, index) {
+  if (chartType === "bar") {
+    const slot = INNER_WIDTH / Math.max(1, count);
+    return MARGIN.left + slot * index + slot / 2;
+  }
+  return count <= 1 ? MARGIN.left + INNER_WIDTH / 2 : MARGIN.left + index / (count - 1) * INNER_WIDTH;
+}
+function hitBand(chartType, count, index) {
+  if (chartType === "bar" || count <= 1) {
+    const slot = INNER_WIDTH / Math.max(1, count);
+    return { x: MARGIN.left + slot * index, width: slot };
+  }
+  const step = INNER_WIDTH / (count - 1);
+  const left = Math.max(
+    MARGIN.left,
+    xFor("line", count, index) - step / 2
+  );
+  const right = Math.min(
+    MARGIN.left + INNER_WIDTH,
+    xFor("line", count, index) + step / 2
+  );
+  return { x: left, width: right - left };
+}
+function linePath(values, domain, count) {
+  let path = "";
+  let penDown = false;
+  values.forEach((value, index) => {
+    if (value === null) {
+      penDown = false;
+      return;
+    }
+    path += `${penDown ? "L" : "M"}${xFor("line", count, index).toFixed(2)},${yFor(domain, value).toFixed(2)}`;
+    penDown = true;
+  });
+  return path;
+}
+function areaPath(values, domain, count) {
+  if (values.some((value) => value === null) || values.length < 2) {
+    return null;
+  }
+  const baseline = yFor(
+    domain,
+    Math.max(domain.min, Math.min(0, domain.max))
+  );
+  const first = xFor("line", count, 0).toFixed(2);
+  const last = xFor("line", count, count - 1).toFixed(2);
+  return `M${first},${baseline.toFixed(2)}${linePath(values, domain, count).replace(/^M/, "L")}L${last},${baseline.toFixed(2)}Z`;
+}
+function describeChart(data, model, format) {
+  const first = model.labels[0] ?? "";
+  const last = model.labels[model.labels.length - 1] ?? "";
+  const span = model.labels.length <= 1 ? first : `from ${first} to ${last}`;
+  const parts = data.series.map((series, s) => {
+    const present = (model.values[s] ?? []).filter(
+      (v) => v !== null
+    );
+    if (present.length === 0) return `${series.name}: no values.`;
+    const latest = present[present.length - 1] ?? 0;
+    return `${series.name}: latest ${format(latest)}, high ${format(Math.max(...present))}, low ${format(Math.min(...present))}.`;
+  });
+  return `${data.chartType === "bar" ? "Bar" : "Line"} chart, ${model.labels.length} point(s) ${span}. ${parts.join(" ")}`;
+}
+function GraphWidget({
+  data,
+  title
+}) {
+  const slot = useSlotClassName();
+  const { locale, labels: text } = useWidgetSettings();
+  const id = useId();
+  const [active, setActive] = useState(null);
+  const model = buildChartModel(data);
+  const count = model.labels.length;
+  const currency = data.currency === void 0 ? {} : { currency: data.currency };
+  const format = (value) => formatValue(value, data.valueFormat, { locale, ...currency });
+  const formatTick = (value) => formatValue(value, data.valueFormat, {
+    locale,
+    compact: true,
+    ...currency
+  });
+  const chartTitle = title ?? data.series.map((s) => s.name).join(", ");
+  const description = describeChart(data, model, format);
+  const stride = labelStride(count);
+  const zeroY = yFor(
+    model.domain,
+    Math.max(model.domain.min, Math.min(0, model.domain.max))
+  );
+  const seriesCount = data.series.length;
+  const isBar = data.chartType === "bar";
+  const slotWidth = INNER_WIDTH / Math.max(1, count);
+  const barWidth = Math.max(
+    1,
+    Math.min(
+      MAX_BAR_WIDTH,
+      (slotWidth * 0.7 - BAR_GAP * (seriesCount - 1)) / Math.max(1, seriesCount)
+    )
+  );
+  const groupWidth = barWidth * seriesCount + BAR_GAP * (seriesCount - 1);
+  function handleKeyDown(event) {
+    if (count === 0) return;
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+        next = Math.min(count - 1, (active ?? -1) + 1);
+        break;
+      case "ArrowLeft":
+        next = Math.max(0, (active ?? count) - 1);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = count - 1;
+        break;
+      case "Escape":
+        next = null;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    setActive(next);
+  }
+  const activeLabel = active === null ? null : model.labels[active] ?? null;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: slot("chart", "dwt-chart", `dwt-chart--${data.chartType}`),
+      children: [
+        seriesCount >= 2 && /* @__PURE__ */ jsx("ul", { className: slot("legend", "dwt-legend"), children: data.series.map((series, s) => /* @__PURE__ */ jsxs("li", { className: "dwt-legend-item", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "10",
+              "aria-hidden": "true",
+              className: "dwt-legend-key",
+              children: isBar ? /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "3",
+                  y: "0",
+                  width: "10",
+                  height: "10",
+                  rx: "2",
+                  fill: seriesColor(s)
+                }
+              ) : /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: "1",
+                  x2: "15",
+                  y1: "5",
+                  y2: "5",
+                  stroke: seriesColor(s),
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          series.name
+        ] }, s)) }),
+        /* @__PURE__ */ jsxs("div", { className: "dwt-chart-frame", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+              className: "dwt-chart-svg",
+              role: "img",
+              "aria-labelledby": `${id}-title ${id}-desc`,
+              tabIndex: 0,
+              onKeyDown: handleKeyDown,
+              onBlur: () => setActive(null),
+              onPointerLeave: () => setActive(null),
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsx("title", { id: `${id}-title`, children: chartTitle }),
+                /* @__PURE__ */ jsx("desc", { id: `${id}-desc`, children: description }),
+                /* @__PURE__ */ jsxs("g", { className: "dwt-chart-grid", "aria-hidden": "true", children: [
+                  model.domain.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: MARGIN.left,
+                        x2: WIDTH - MARGIN.right,
+                        y1: yFor(model.domain, tick),
+                        y2: yFor(model.domain, tick),
+                        stroke: CHART_COLORS.grid,
+                        strokeWidth: 1
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: MARGIN.left - 8,
+                        y: yFor(model.domain, tick),
+                        textAnchor: "end",
+                        dominantBaseline: "middle",
+                        className: "dwt-axis-label dwt-axis-label--y",
+                        fill: CHART_COLORS.textMuted,
+                        fontSize: 11,
+                        children: formatTick(tick)
+                      }
+                    )
+                  ] }, tick)),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: MARGIN.left,
+                      x2: WIDTH - MARGIN.right,
+                      y1: zeroY,
+                      y2: zeroY,
+                      stroke: CHART_COLORS.baseline,
+                      strokeWidth: 1
+                    }
+                  ),
+                  model.labels.map(
+                    (label, index) => index % stride === 0 || index === count - 1 ? /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: xFor(data.chartType, count, index),
+                        y: HEIGHT - 8,
+                        textAnchor: !isBar && count > 1 && index === 0 ? "start" : !isBar && count > 1 && index === count - 1 ? "end" : "middle",
+                        className: "dwt-axis-label dwt-axis-label--x",
+                        fill: CHART_COLORS.textMuted,
+                        fontSize: 11,
+                        children: label
+                      },
+                      index
+                    ) : null
+                  )
+                ] }),
+                isBar ? /* @__PURE__ */ jsx("g", { className: "dwt-chart-marks", "aria-hidden": "true", children: model.labels.map((_, index) => /* @__PURE__ */ jsx(
+                  "g",
+                  {
+                    className: active !== null && active !== index ? "dwt-mark-group dwt-mark-group--dimmed" : "dwt-mark-group",
+                    opacity: active !== null && active !== index ? 0.55 : 1,
+                    children: model.values.map((values, s) => {
+                      const value = values[index] ?? null;
+                      if (value === null || value === 0) return null;
+                      const x = xFor("bar", count, index) - groupWidth / 2 + s * (barWidth + BAR_GAP);
+                      const valueY = yFor(model.domain, value);
+                      const top = Math.min(valueY, zeroY);
+                      const height = Math.abs(zeroY - valueY);
+                      return /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "dwt-bar",
+                          d: barPath(
+                            x,
+                            top,
+                            barWidth,
+                            height,
+                            value >= 0 ? "top" : "bottom"
+                          ),
+                          fill: seriesColor(s)
+                        },
+                        s
+                      );
+                    })
+                  },
+                  index
+                )) }) : /* @__PURE__ */ jsxs("g", { className: "dwt-chart-marks", "aria-hidden": "true", children: [
+                  seriesCount === 1 && (() => {
+                    const area = areaPath(
+                      model.values[0] ?? [],
+                      model.domain,
+                      count
+                    );
+                    return area === null ? null : /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: area,
+                        fill: seriesColor(0),
+                        fillOpacity: 0.1,
+                        stroke: "none"
+                      }
+                    );
+                  })(),
+                  model.values.map((values, s) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      className: "dwt-line",
+                      d: linePath(values, model.domain, count),
+                      fill: "none",
+                      stroke: seriesColor(s),
+                      strokeWidth: 2,
+                      strokeLinejoin: "round",
+                      strokeLinecap: "round"
+                    },
+                    s
+                  )),
+                  model.values.map(
+                    (values, s) => values.map((value, index) => {
+                      const isLast = index === count - 1;
+                      if (value === null) return null;
+                      if (count > MAX_MARKED_POINTS && !isLast && index !== active)
+                        return null;
+                      return /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "dwt-marker",
+                          cx: xFor("line", count, index),
+                          cy: yFor(model.domain, value),
+                          r: index === active ? 5 : 4,
+                          fill: seriesColor(s),
+                          stroke: CHART_COLORS.surface,
+                          strokeWidth: 2
+                        },
+                        `${s}-${index}`
+                      );
+                    })
+                  ),
+                  seriesCount === 1 && (() => {
+                    const last = model.values[0]?.[count - 1] ?? null;
+                    if (last === null) return null;
+                    return /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        className: "dwt-end-label",
+                        x: xFor("line", count, count - 1),
+                        y: yFor(model.domain, last) - 10,
+                        textAnchor: "end",
+                        fill: CHART_COLORS.textPrimary,
+                        fontSize: 12,
+                        fontWeight: 600,
+                        children: format(last)
+                      }
+                    );
+                  })(),
+                  active !== null && /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      className: "dwt-crosshair",
+                      x1: xFor("line", count, active),
+                      x2: xFor("line", count, active),
+                      y1: MARGIN.top,
+                      y2: MARGIN.top + INNER_HEIGHT,
+                      stroke: CHART_COLORS.crosshair,
+                      strokeWidth: 1
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("g", { className: "dwt-hit-layer", children: model.labels.map((_, index) => {
+                  const band = hitBand(data.chartType, count, index);
+                  return /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: band.x,
+                      y: MARGIN.top,
+                      width: Math.max(0, band.width),
+                      height: INNER_HEIGHT,
+                      fill: "transparent",
+                      onPointerEnter: () => setActive(index),
+                      onPointerMove: () => setActive(index)
+                    },
+                    index
+                  );
+                }) })
+              ]
+            }
+          ),
+          active !== null && activeLabel !== null && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: slot("tooltip", "dwt-tooltip"),
+              style: {
+                left: `${xFor(data.chartType, count, active) / WIDTH * 100}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "dwt-tooltip-label", children: activeLabel }),
+                /* @__PURE__ */ jsx("ul", { className: "dwt-tooltip-rows", children: data.series.map((series, s) => {
+                  const value = model.values[s]?.[active] ?? null;
+                  return /* @__PURE__ */ jsxs("li", { className: "dwt-tooltip-row", children: [
+                    /* @__PURE__ */ jsx("svg", { width: "12", height: "4", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "0",
+                        x2: "12",
+                        y1: "2",
+                        y2: "2",
+                        stroke: seriesColor(s),
+                        strokeWidth: "3",
+                        strokeLinecap: "round"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("strong", { className: "dwt-tooltip-value", children: value === null ? "\u2014" : format(value) }),
+                    seriesCount >= 2 && /* @__PURE__ */ jsx("span", { className: "dwt-tooltip-series", children: series.name })
+                  ] }, s);
+                }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("details", { className: slot("tableTwin", "dwt-table-twin"), children: [
+          /* @__PURE__ */ jsx("summary", { children: text.viewAsTable }),
+          /* @__PURE__ */ jsxs("table", { className: slot("table", "dwt-table"), children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: data.xLabel ?? "Label" }),
+              data.series.map((series, s) => /* @__PURE__ */ jsx("th", { scope: "col", className: "dwt-numeric", children: series.name }, s))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: model.labels.map((label, index) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "row", children: label }),
+              model.values.map((values, s) => {
+                const value = values[index] ?? null;
+                return /* @__PURE__ */ jsx("td", { className: "dwt-numeric", children: value === null ? "\u2014" : format(value) }, s);
+              })
+            ] }, index)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/core/url.ts
+var SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):/i;
+var IGNORED_IN_SCHEME = /[\u0000- \u007f]/g;
+function schemeOf(url) {
+  const match = SCHEME_PATTERN.exec(
+    url.replace(IGNORED_IN_SCHEME, "")
+  );
+  return match === null ? null : (match[1] ?? "").toLowerCase();
+}
+function isSafeHref(url) {
+  if (url.trim() === "") {
+    return false;
+  }
+  const scheme = schemeOf(url);
+  return scheme === null || scheme === "http" || scheme === "https" || scheme === "mailto";
+}
+function isSafeImageUrl(url) {
+  if (url.trim() === "") {
+    return false;
+  }
+  const scheme = schemeOf(url);
+  return scheme === null || scheme === "http" || scheme === "https";
+}
+function WidgetLink({
+  href,
+  className,
+  children
+}) {
+  const { linkTarget } = useWidgetSettings();
+  if (href === void 0 || !isSafeHref(href)) {
+    return /* @__PURE__ */ jsx("span", { className, children });
+  }
+  return /* @__PURE__ */ jsx("a", { href, target: linkTarget, rel: "noreferrer", className, children });
+}
+function Thumbnail({
+  url
+}) {
+  if (url === void 0 || !isSafeImageUrl(url)) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "dwt-thumbnail dwt-thumbnail--placeholder",
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "dwt-thumbnail",
+      src: url,
+      alt: "",
+      width: 36,
+      height: 36,
+      loading: "lazy",
+      decoding: "async"
+    }
+  );
+}
+function TextWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  return /* @__PURE__ */ jsxs("div", { className: slot("text", "dwt-text"), children: [
+    /* @__PURE__ */ jsx("p", { className: "dwt-figure", children: data.value }),
+    /* @__PURE__ */ jsx("p", { className: "dwt-figure-label", children: data.label })
+  ] });
+}
+var DELTA_ARROWS = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u25A0"
+};
+function KpiWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  const { locale, labels } = useWidgetSettings();
+  const value = formatValue(data.value, data.format, {
+    locale,
+    ...data.currency === void 0 ? {} : { currency: data.currency }
+  });
+  const delta = kpiDelta(data.value, data.previous, {
+    locale,
+    comparisonLabel: labels.comparison,
+    ...data.higherIsBetter === void 0 ? {} : { higherIsBetter: data.higherIsBetter }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: slot("kpi", "dwt-kpi"), children: [
+    /* @__PURE__ */ jsx("p", { className: "dwt-figure-label", children: data.label }),
+    /* @__PURE__ */ jsx("p", { className: "dwt-figure", children: value }),
+    (delta !== null || data.hint !== void 0) && /* @__PURE__ */ jsxs("p", { className: "dwt-kpi-meta", children: [
+      delta !== null && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `dwt-delta dwt-delta--${delta.sentiment} dwt-delta--${delta.direction}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dwt-delta-arrow", children: DELTA_ARROWS[delta.direction] }),
+            " ",
+            delta.text,
+            /* @__PURE__ */ jsxs("span", { className: "dwt-delta-comparison", children: [
+              " ",
+              "vs ",
+              labels.comparison
+            ] })
+          ]
+        }
+      ),
+      data.hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "dwt-hint", children: data.hint })
+    ] })
+  ] });
+}
+function GaugeWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  const { locale } = useWidgetSettings();
+  const max = data.max > 0 ? data.max : 1;
+  const percent = Math.max(0, Math.min(100, data.value / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: slot("gauge", "dwt-gauge"), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "dwt-meter",
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": data.value,
+        "aria-label": data.label,
+        style: { background: CHART_COLORS.meterTrack },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "dwt-meter-fill",
+            style: { width: `${percent}%`, background: seriesColor(0) }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("p", { className: "dwt-gauge-caption", children: [
+      /* @__PURE__ */ jsxs("span", { className: "dwt-gauge-value", children: [
+        formatValue(data.value, "number", { locale }),
+        " /",
+        " ",
+        formatValue(max, "number", { locale })
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "dwt-figure-label", children: data.label })
+    ] })
+  ] });
+}
+function TableWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  return /* @__PURE__ */ jsxs("div", { className: "dwt-table-wrap", children: [
+    /* @__PURE__ */ jsxs("table", { className: slot("table", "dwt-table"), children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: data.columns.map((column, index) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          className: column.numeric === true ? "dwt-numeric" : void 0,
+          children: column.label
+        },
+        index
+      )) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: data.rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: data.columns[cellIndex]?.numeric === true ? "dwt-numeric" : void 0,
+          children: cell.href === void 0 ? cell.text : /* @__PURE__ */ jsx(WidgetLink, { href: cell.href, className: "dwt-link", children: cell.text })
+        },
+        cellIndex
+      )) }, rowIndex)) })
+    ] }),
+    data.footer !== void 0 && /* @__PURE__ */ jsx("p", { className: "dwt-note", children: data.footer })
+  ] });
+}
+function BarListWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  const { locale } = useWidgetSettings();
+  const denominator = data.total !== void 0 && data.total > 0 ? data.total : Math.max(0, ...data.items.map((item) => item.value));
+  return /* @__PURE__ */ jsx("ul", { className: slot("barList", "dwt-bar-list"), children: data.items.map((item, index) => {
+    const width = denominator > 0 ? Math.max(0, Math.min(100, item.value / denominator * 100)) : 0;
+    const display = item.display ?? (data.total !== void 0 ? `${formatValue(item.value, "number", { locale })} (${shareOf(item.value, data.total)}%)` : formatValue(item.value, "number", { locale }));
+    return /* @__PURE__ */ jsxs("li", { className: "dwt-bar-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "dwt-bar-label", children: item.label }),
+      /* @__PURE__ */ jsx("span", { className: "dwt-bar-value", children: display }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "dwt-bar-track",
+          "aria-hidden": "true",
+          style: { background: CHART_COLORS.barTrack },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "dwt-bar-fill",
+              style: { width: `${width}%`, background: seriesColor(0) }
+            }
+          )
+        }
+      )
+    ] }, `${index}-${item.label}`);
+  }) });
+}
+function AlertListWidget({
+  data
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  if (data.items.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty"), children: data.emptyText });
+  }
+  const more = data.total - data.items.length;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("ul", { className: slot("alertList", "dwt-alert-list"), children: data.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "dwt-alert-row", children: [
+      /* @__PURE__ */ jsx(Thumbnail, { url: item.thumbnailUrl }),
+      /* @__PURE__ */ jsxs("span", { className: "dwt-alert-main", children: [
+        /* @__PURE__ */ jsx(WidgetLink, { href: item.href, className: "dwt-alert-title", children: item.title }),
+        item.detail !== void 0 && /* @__PURE__ */ jsx("span", { className: "dwt-alert-detail", children: item.detail })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "dwt-alert-value", children: item.valueLabel })
+    ] }, `${index}-${item.title}`)) }),
+    more > 0 && /* @__PURE__ */ jsx("p", { className: "dwt-note", children: labels.andMore(more) })
+  ] });
+}
+function WidgetContent({
+  data
+}) {
+  switch (data.kind) {
+    case "TEXT":
+      return /* @__PURE__ */ jsx(TextWidget, { data });
+    case "KPI":
+      return /* @__PURE__ */ jsx(KpiWidget, { data });
+    case "GAUGE":
+      return /* @__PURE__ */ jsx(GaugeWidget, { data });
+    case "TABLE":
+      return /* @__PURE__ */ jsx(TableWidget, { data });
+    case "BAR_LIST":
+      return /* @__PURE__ */ jsx(BarListWidget, { data });
+    case "ALERT_LIST":
+      return /* @__PURE__ */ jsx(AlertListWidget, { data });
+    case "GRAPH":
+      return /* @__PURE__ */ jsx(GraphWidget, { data });
+  }
+}
+function WidgetCard({
+  title,
+  description,
+  actions,
+  minimized = false,
+  onToggleMinimized,
+  status = "ok",
+  emptyText,
+  error,
+  onRetry,
+  footer,
+  size,
+  headingLevel = 2,
+  className,
+  children
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const id = useId();
+  const Heading = `h${headingLevel}`;
+  const bodyId = `${id}-body`;
+  let body;
+  switch (status) {
+    case "loading":
+      body = /* @__PURE__ */ jsx("p", { role: "status", className: slot("status", "dwt-status"), children: labels.loading });
+      break;
+    case "empty":
+      body = /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty"), children: emptyText ?? "" });
+      break;
+    case "error":
+      body = /* @__PURE__ */ jsxs("div", { role: "alert", className: slot("error", "dwt-error"), children: [
+        /* @__PURE__ */ jsx("p", { className: "dwt-error-message", children: error ?? "" }),
+        onRetry !== void 0 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button"),
+            onClick: onRetry,
+            children: labels.retry
+          }
+        )
+      ] });
+      break;
+    case "ok":
+      body = children;
+      break;
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": `${id}-title`,
+      className: slot(
+        "card",
+        "dwt-card",
+        `dwt-card--${status}`,
+        minimized && "dwt-card--minimized",
+        size !== void 0 && `dwt-card--size-${size}`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: slot("cardHeader", "dwt-card-header"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "dwt-card-heading", children: [
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                id: `${id}-title`,
+                className: slot("cardTitle", "dwt-card-title"),
+                children: title
+              }
+            ),
+            description !== void 0 && !minimized && /* @__PURE__ */ jsx("p", { className: slot("cardDescription", "dwt-card-description"), children: description })
+          ] }),
+          (actions !== void 0 || onToggleMinimized !== void 0) && /* @__PURE__ */ jsxs("div", { className: slot("cardActions", "dwt-card-actions"), children: [
+            actions,
+            onToggleMinimized !== void 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: slot("button", "dwt-button", "dwt-icon-button"),
+                "aria-expanded": !minimized,
+                "aria-controls": bodyId,
+                "aria-label": minimized ? labels.expand(title) : labels.minimize(title),
+                title: minimized ? labels.expand(title) : labels.minimize(title),
+                onClick: onToggleMinimized,
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: minimized ? "\u25B8" : "\u25BE" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: bodyId,
+            className: slot("cardBody", "dwt-card-body"),
+            hidden: minimized,
+            children: minimized ? null : body
+          }
+        ),
+        footer !== void 0 && footer !== null && !minimized && /* @__PURE__ */ jsx("div", { className: slot("cardFooter", "dwt-card-footer"), children: footer })
+      ]
+    }
+  );
+}
+function widgetTitle(widget) {
+  if (widget.status === "ok" && widget.data.kind === "ALERT_LIST" && widget.data.total > 0) {
+    return `${widget.definition.title} (${widget.data.total})`;
+  }
+  return widget.definition.title;
+}
+function ResolvedWidgetCard({
+  widget,
+  ...props
+}) {
+  const { definition } = widget;
+  return /* @__PURE__ */ jsx(
+    WidgetCard,
+    {
+      ...props,
+      title: widgetTitle(widget),
+      status: widget.status,
+      ...definition.description === void 0 ? {} : { description: definition.description },
+      ...definition.defaultSize === void 0 ? {} : { size: definition.defaultSize },
+      ...widget.status === "empty" ? { emptyText: widget.emptyText } : {},
+      ...widget.status === "error" ? { error: widget.error } : {},
+      children: widget.status === "ok" ? /* @__PURE__ */ jsx(WidgetContent, { data: widget.data }) : null
+    }
+  );
+}
+
+// src/core/layout.ts
+var EMPTY_LAYOUT = Object.freeze({
+  order: Object.freeze([]),
+  hidden: Object.freeze([]),
+  minimized: Object.freeze([])
+});
+function bySortOrder(items) {
+  return items.map((item, index) => ({ item, index })).sort(
+    (a, b) => (a.item.sortOrder ?? 0) - (b.item.sortOrder ?? 0) || a.index - b.index
+  ).map(({ item }) => item);
+}
+function visibleWidgets(definitions, layout) {
+  const hidden = new Set(layout.hidden);
+  const visible = definitions.filter((d) => !hidden.has(d.key));
+  const byKey = new Map(visible.map((d) => [d.key, d]));
+  const ordered = [];
+  for (const key of layout.order) {
+    const definition = byKey.get(key);
+    if (definition !== void 0) {
+      ordered.push(definition);
+      byKey.delete(key);
+    }
+  }
+  for (const definition of bySortOrder(visible)) {
+    if (byKey.has(definition.key)) ordered.push(definition);
+  }
+  return ordered;
+}
+function hiddenWidgets(definitions, layout) {
+  const hidden = new Set(layout.hidden);
+  return bySortOrder(definitions.filter((d) => hidden.has(d.key)));
+}
+function moveWidget(definitions, layout, key, toIndex) {
+  const current = visibleWidgets(definitions, layout).map(
+    (d) => d.key
+  );
+  const fromIndex = current.indexOf(key);
+  if (fromIndex === -1 || !Number.isInteger(toIndex) || toIndex < 0 || toIndex >= current.length || toIndex === fromIndex) {
+    return layout;
+  }
+  const next = [...current];
+  next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, key);
+  return { ...layout, order: next };
+}
+function moveWidgetBy(definitions, layout, key, offset) {
+  const current = visibleWidgets(definitions, layout).map(
+    (d) => d.key
+  );
+  const fromIndex = current.indexOf(key);
+  if (fromIndex === -1) return layout;
+  const toIndex = Math.max(
+    0,
+    Math.min(current.length - 1, fromIndex + Math.trunc(offset))
+  );
+  return moveWidget(definitions, layout, key, toIndex);
+}
+function isHidden(layout, key) {
+  return layout.hidden.includes(key);
+}
+function isMinimized(layout, key) {
+  return layout.minimized.includes(key);
+}
+function hideWidget(layout, key) {
+  if (isHidden(layout, key)) return layout;
+  return { ...layout, hidden: [...layout.hidden, key] };
+}
+function showWidget(layout, key) {
+  if (!isHidden(layout, key)) return layout;
+  return {
+    ...layout,
+    hidden: layout.hidden.filter((k) => k !== key),
+    minimized: layout.minimized.filter((k) => k !== key)
+  };
+}
+function minimizeWidget(layout, key) {
+  if (isMinimized(layout, key)) return layout;
+  return { ...layout, minimized: [...layout.minimized, key] };
+}
+function restoreWidget(layout, key) {
+  if (!isMinimized(layout, key)) return layout;
+  return { ...layout, minimized: layout.minimized.filter((k) => k !== key) };
+}
+function toggleMinimized(layout, key) {
+  return isMinimized(layout, key) ? restoreWidget(layout, key) : minimizeWidget(layout, key);
+}
+function WidgetGrid({
+  widgets,
+  onRetry,
+  headingLevel,
+  className
+}) {
+  const slot = useSlotClassName();
+  return /* @__PURE__ */ jsx("div", { className: slot("grid", "dwt-grid", className), children: widgets.map((widget) => /* @__PURE__ */ jsx(
+    ResolvedWidgetCard,
+    {
+      widget,
+      ...headingLevel === void 0 ? {} : { headingLevel },
+      ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(widget.definition.key) }
+    },
+    widget.definition.key
+  )) });
+}
+function DashboardInner({
+  widgets,
+  layout = EMPTY_LAYOUT,
+  onLayoutChange,
+  onRetry,
+  headingLevel,
+  className
+}) {
+  const slot = useSlotClassName();
+  const { labels } = useWidgetSettings();
+  const definitions = widgets.map((w) => w.definition);
+  const byKey = new Map(
+    widgets.map((w) => [w.definition.key, w])
+  );
+  const visible = visibleWidgets(definitions, layout);
+  const hidden = hiddenWidgets(definitions, layout);
+  const editable = onLayoutChange !== void 0;
+  function change(next) {
+    if (next !== layout) onLayoutChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: slot("dashboard", "dwt-dashboard", className), children: [
+    editable && hidden.length > 0 && /* @__PURE__ */ jsxs("div", { className: slot("hiddenBar", "dwt-hidden-bar"), children: [
+      /* @__PURE__ */ jsx("span", { className: "dwt-hidden-label", children: labels.hiddenWidgets }),
+      hidden.map((definition) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: slot("button", "dwt-button", "dwt-show-button"),
+          "aria-label": labels.show(definition.title),
+          onClick: () => change(showWidget(layout, definition.key)),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
+            definition.title
+          ]
+        },
+        definition.key
+      ))
+    ] }),
+    visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: slot("empty", "dwt-empty", "dwt-dashboard-empty"), children: definitions.length === 0 ? labels.noWidgets : labels.allHidden }) : /* @__PURE__ */ jsx("div", { className: slot("grid", "dwt-grid"), children: visible.map((definition, index) => {
+      const widget = byKey.get(
+        definition.key
+      );
+      if (widget === void 0) return null;
+      const key = definition.key;
+      const title = definition.title;
+      const actions = editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.moveEarlier(title),
+            title: labels.moveEarlier(title),
+            disabled: index === 0,
+            onClick: () => change(moveWidgetBy(definitions, layout, key, -1)),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.moveLater(title),
+            title: labels.moveLater(title),
+            disabled: index === visible.length - 1,
+            onClick: () => change(moveWidgetBy(definitions, layout, key, 1)),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: slot("button", "dwt-button", "dwt-icon-button"),
+            "aria-label": labels.hide(title),
+            title: labels.hide(title),
+            onClick: () => change(hideWidget(layout, key)),
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+          }
+        )
+      ] }) : void 0;
+      return /* @__PURE__ */ jsx(
+        ResolvedWidgetCard,
+        {
+          widget,
+          minimized: isMinimized(layout, key),
+          ...actions === void 0 ? {} : { actions },
+          ...editable ? {
+            onToggleMinimized: () => change(toggleMinimized(layout, key))
+          } : {},
+          ...headingLevel === void 0 ? {} : { headingLevel },
+          ...onRetry === void 0 || widget.status !== "error" ? {} : { onRetry: () => onRetry(key) }
+        },
+        key
+      );
+    }) })
+  ] });
+}
+function Dashboard({
+  locale,
+  linkTarget,
+  classNames,
+  labels,
+  ...props
+}) {
+  const parent = useWidgetSettings();
+  const resolvedLocale = locale ?? parent.locale;
+  const resolvedTarget = linkTarget ?? parent.linkTarget;
+  return /* @__PURE__ */ jsx(
+    WidgetSettingsProvider,
+    {
+      ...resolvedLocale === void 0 ? {} : { locale: resolvedLocale },
+      ...resolvedTarget === void 0 ? {} : { linkTarget: resolvedTarget },
+      classNames: { ...parent.classNames, ...classNames },
+      labels: { ...parent.labels, ...labels },
+      children: /* @__PURE__ */ jsx(DashboardInner, { ...props })
+    }
+  );
+}
+
+export { AlertListWidget, BarListWidget, DEFAULT_LABELS, DEFAULT_SERIES_COLORS, Dashboard, GaugeWidget, GraphWidget, KpiWidget, ResolvedWidgetCard, TableWidget, TextWidget, Thumbnail, WidgetCard, WidgetContent, WidgetGrid, WidgetLink, WidgetSettingsProvider, barPath, buildChartModel, describeChart, joinClassNames, seriesColor, useWidgetSettings, widgetTitle };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map