@richardmcquiston01/dashboard-widgets-toolkit 0.14.0 → 0.15.0

package/dist/react.cjs

@@ -837,6 +837,8 @@ var DEFAULT_LABELS = {
   widthDefault: "Default",
   widthOption: (width, share) => `${width} of 12 (${share})`,
   optionsFlexible: "Grow to fill empty space in the row",
+  optionsViewField: "View",
+  viewDefault: (viewLabel) => `${viewLabel} (default)`,
   optionsDeclared: "Data",
   apply: "Apply",
   cancel: "Cancel",
@@ -1974,6 +1976,282 @@ function isWidgetVisibleTo(definition, roles) {
   return definition.roles.some((role) => roles.includes(role));
 }
 
+// src/core/payload.ts
+var WIDGET_KINDS = [
+  "TEXT",
+  "KPI",
+  "GAUGE",
+  "TABLE",
+  "BAR_LIST",
+  "ALERT_LIST",
+  "GRAPH"
+];
+function isWidgetKind(value) {
+  return typeof value === "string" && WIDGET_KINDS.includes(value);
+}
+var VALUE_FORMATS = ["number", "currency", "percent"];
+var MAX_GRAPH_SERIES = 8;
+var DEFAULT_EMPTY_TEXT = "Nothing to show yet.";
+function isWidgetEmptyState(payload) {
+  return "empty" in payload && payload.empty === true;
+}
+function emptyTextFor(payload) {
+  if (isWidgetEmptyState(payload)) {
+    return payload.text;
+  }
+  switch (payload.kind) {
+    case "TABLE":
+      return payload.rows.length === 0 ? DEFAULT_EMPTY_TEXT : null;
+    case "BAR_LIST":
+      return payload.items.length === 0 ? DEFAULT_EMPTY_TEXT : null;
+    case "ALERT_LIST":
+      return payload.items.length === 0 ? payload.emptyText : null;
+    case "GRAPH":
+      return payload.series.every((series) => series.points.length === 0) ? DEFAULT_EMPTY_TEXT : null;
+    case "TEXT":
+    case "KPI":
+    case "GAUGE":
+      return null;
+  }
+}
+
+// src/core/views.ts
+var BASE_VIEW_KEY = "base";
+var VIEW_CONVERSIONS = {
+  tableToBarList: { from: "TABLE", to: "BAR_LIST" },
+  tableToGraph: { from: "TABLE", to: "GRAPH" },
+  barListToTable: { from: "BAR_LIST", to: "TABLE" },
+  graphToTable: { from: "GRAPH", to: "TABLE" },
+  barListToGraph: { from: "BAR_LIST", to: "GRAPH" }
+};
+var KIND_LABELS = {
+  TEXT: "Text",
+  KPI: "Number",
+  GAUGE: "Gauge",
+  TABLE: "Table",
+  BAR_LIST: "Bars",
+  ALERT_LIST: "List",
+  GRAPH: "Chart"
+};
+function kindLabel(kind) {
+  return KIND_LABELS[kind];
+}
+function hasViews(item) {
+  return item.views !== void 0 && item.views.length > 0;
+}
+function findView(item, key) {
+  return item.views?.find((view) => view.key === key);
+}
+function viewChoices(item) {
+  if (!hasViews(item)) return [];
+  return [
+    {
+      key: BASE_VIEW_KEY,
+      label: item.baseViewLabel ?? kindLabel(item.kind),
+      kind: item.kind
+    },
+    ...(item.views ?? []).map(({ key, label, kind }) => ({
+      key,
+      label,
+      kind
+    }))
+  ];
+}
+function isKnownView(item, key) {
+  return key !== void 0 && (key === BASE_VIEW_KEY || findView(item, key) !== void 0);
+}
+function effectiveViewKey(item, chosen) {
+  if (!hasViews(item)) return BASE_VIEW_KEY;
+  if (isKnownView(item, chosen)) return chosen;
+  if (isKnownView(item, item.defaultView)) return item.defaultView;
+  return BASE_VIEW_KEY;
+}
+function cellValue2(cell) {
+  const value = cell?.value;
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function columnName(table, index) {
+  return table.columns[index]?.label ?? `#${index + 1}`;
+}
+function checkColumn(table, index, field, context) {
+  if (!Number.isInteger(index) || index < 0 || index >= table.columns.length) {
+    return `${context.where}: ${field} column ${index} does not exist (the table has ${table.columns.length} columns, numbered from 0).`;
+  }
+  return void 0;
+}
+function numericColumn(table, index, context) {
+  const numbers = [];
+  for (const [rowIndex, row] of table.rows.entries()) {
+    const value = cellValue2(row[index]);
+    if (value === void 0) {
+      return err(
+        `${context.where}: row ${rowIndex + 1}, column ${index + 1} ("${columnName(table, index)}") has no numeric value. Add value to the cells.`
+      );
+    }
+    numbers.push(value);
+  }
+  return ok(numbers);
+}
+function tableToBarList(table, conversion, context) {
+  const bad = checkColumn(table, conversion.label, "label", context) ?? checkColumn(table, conversion.value, "value", context);
+  if (bad !== void 0) return err(bad);
+  const numbers = numericColumn(table, conversion.value, context);
+  if (!numbers.ok) return numbers;
+  const items = table.rows.map((row, index) => ({
+    label: row[conversion.label]?.text ?? "",
+    value: numbers.value[index],
+    display: row[conversion.value]?.text ?? String(numbers.value[index])
+  }));
+  return ok({ kind: "BAR_LIST", items });
+}
+function tableToGraph(table, conversion, context) {
+  if (conversion.values.length === 0 || conversion.values.length > MAX_GRAPH_SERIES) {
+    return err(
+      `${context.where}: a chart needs 1 to ${MAX_GRAPH_SERIES} series columns, got ${conversion.values.length}.`
+    );
+  }
+  let bad = checkColumn(
+    table,
+    conversion.label,
+    "label",
+    context
+  );
+  for (const index of conversion.values) {
+    bad ??= checkColumn(table, index, "series", context);
+  }
+  if (bad !== void 0) return err(bad);
+  const series = [];
+  for (const index of conversion.values) {
+    const numbers = numericColumn(table, index, context);
+    if (!numbers.ok) return numbers;
+    series.push({
+      name: columnName(table, index),
+      points: table.rows.map((row, rowIndex) => ({
+        label: row[conversion.label]?.text ?? "",
+        value: numbers.value[rowIndex]
+      }))
+    });
+  }
+  return ok({
+    kind: "GRAPH",
+    series,
+    chartType: conversion.chartType,
+    valueFormat: conversion.valueFormat ?? "number",
+    ...conversion.currency === void 0 ? {} : { currency: conversion.currency },
+    xLabel: columnName(table, conversion.label)
+  });
+}
+function barListToTable(list, conversion) {
+  return ok({
+    kind: "TABLE",
+    columns: [
+      { label: conversion.labelHeading ?? "Name" },
+      { label: conversion.valueHeading ?? "Value", numeric: true }
+    ],
+    rows: list.items.map((item) => [
+      { text: item.label },
+      { text: item.display ?? String(item.value), value: item.value }
+    ])
+  });
+}
+function graphToTable(graph, context) {
+  const first = graph.series[0];
+  if (first === void 0)
+    return err(`${context.where}: the chart has no series.`);
+  const format = {
+    ...graph.currency === void 0 ? {} : { currency: graph.currency },
+    ...context.locale === void 0 ? {} : { locale: context.locale }
+  };
+  return ok({
+    kind: "TABLE",
+    columns: [
+      { label: graph.xLabel ?? "Label" },
+      ...graph.series.map((series) => ({ label: series.name, numeric: true }))
+    ],
+    rows: first.points.map((point, index) => [
+      { text: point.label },
+      ...graph.series.map((series) => {
+        const value = series.points[index]?.value;
+        return value === void 0 ? { text: "\u2014" } : { text: formatValue(value, graph.valueFormat, format), value };
+      })
+    ])
+  });
+}
+function barListToGraph(list, conversion) {
+  return ok({
+    kind: "GRAPH",
+    series: [
+      {
+        name: conversion.seriesName ?? "Value",
+        points: list.items.map((item) => ({
+          label: item.label,
+          value: item.value
+        }))
+      }
+    ],
+    chartType: conversion.chartType,
+    valueFormat: conversion.valueFormat ?? "number",
+    ...conversion.currency === void 0 ? {} : { currency: conversion.currency }
+  });
+}
+function convertView(widgetKey, view, data, options = {}) {
+  const conversion = view.convert;
+  const context = {
+    where: `Widget ${JSON.stringify(widgetKey)} view ${JSON.stringify(view.key)}`,
+    ...options.locale === void 0 ? {} : { locale: options.locale }
+  };
+  const expected = VIEW_CONVERSIONS[conversion.type]?.from;
+  if (expected === void 0) {
+    return err(
+      `${context.where}: unknown conversion type ${JSON.stringify(conversion.type)}.`
+    );
+  }
+  if (data.kind !== expected) {
+    return err(
+      `${context.where}: ${conversion.type} reads a ${expected} payload, but the widget returned ${data.kind}.`
+    );
+  }
+  switch (conversion.type) {
+    case "tableToBarList":
+      return tableToBarList(data, conversion, context);
+    case "tableToGraph":
+      return tableToGraph(data, conversion, context);
+    case "barListToTable":
+      return barListToTable(data, conversion);
+    case "graphToTable":
+      return graphToTable(data, context);
+    case "barListToGraph":
+      return barListToGraph(data, conversion);
+  }
+}
+function applyView(widget, chosen, options = {}) {
+  const key = effectiveViewKey(widget.definition, chosen);
+  const view = findView(widget.definition, key);
+  if (view === void 0) return widget;
+  const definition = {
+    ...widget.definition,
+    kind: view.kind
+  };
+  if (widget.status === "loading") return { ...widget, definition };
+  if (widget.status === "empty") return { ...widget, definition };
+  if (widget.status === "error") return { ...widget, definition };
+  const converted = convertView(
+    widget.definition.key,
+    view,
+    widget.data,
+    options
+  );
+  if (!converted.ok) {
+    return {
+      definition,
+      status: "error",
+      error: converted.error,
+      ...widget.options === void 0 ? {} : { options: widget.options }
+    };
+  }
+  return { ...widget, definition, data: converted.value };
+}
+
 // src/core/settings.ts
 var MAX_WIDGET_TITLE_LENGTH = 80;
 var MAX_COLUMN_LIST = 100;
@@ -2001,6 +2279,7 @@ function parseOne(raw) {
   const width = raw["width"];
   const flexible = raw["flexible"];
   const options = raw["options"];
+  const view = raw["view"];
   const cleanTitle = typeof title === "string" ? title.trim().slice(0, MAX_WIDGET_TITLE_LENGTH) : "";
   const chosen = {};
   if (isRecord(options)) {
@@ -2013,7 +2292,8 @@ function parseOne(raw) {
     ...cleanTitle === "" ? {} : { title: cleanTitle },
     ...isWidgetWidth(width) ? { width } : {},
     ...typeof flexible === "boolean" ? { flexible } : {},
-    ...Object.keys(chosen).length === 0 ? {} : { options: chosen }
+    ...Object.keys(chosen).length === 0 ? {} : { options: chosen },
+    ...typeof view === "string" && view !== "" && view.length <= 80 ? { view } : {}
   };
   return Object.keys(settings).length === 0 ? void 0 : settings;
 }
@@ -2081,12 +2361,18 @@ function effectiveDefinitions(definitions, layout, options = {}) {
 }
 function sameSettings(a, b) {
   if (a === b) return true;
-  return a?.title === b?.title && a?.width === b?.width && a?.flexible === b?.flexible && sameOptionValues(a?.options ?? {}, b?.options ?? {});
+  return a?.title === b?.title && a?.width === b?.width && a?.flexible === b?.flexible && a?.view === b?.view && sameOptionValues(a?.options ?? {}, b?.options ?? {});
 }
 function setWidgetSettings(layout, key, patch) {
   const before = layout.settings?.[key];
   const draft = { ...before };
-  for (const field of ["title", "width", "flexible", "options"]) {
+  for (const field of [
+    "title",
+    "width",
+    "flexible",
+    "options",
+    "view"
+  ]) {
     if (!(field in patch)) continue;
     const value = patch[field];
     if (value === void 0) {
@@ -2790,7 +3076,8 @@ function draftFrom(settings) {
     title: settings?.title ?? "",
     width: settings?.width,
     flexible: settings?.flexible,
-    options: settings?.options ?? {}
+    options: settings?.options ?? {},
+    view: settings?.view
   };
 }
 function storedDefault(option) {
@@ -2815,7 +3102,9 @@ function patchFrom(definition, draft) {
     title: title === "" ? void 0 : title,
     width: draft.width,
     flexible: draft.flexible === void 0 || draft.flexible === isFlexible(definition) ? void 0 : draft.flexible,
-    options: Object.keys(options).length === 0 ? void 0 : options
+    options: Object.keys(options).length === 0 ? void 0 : options,
+    // Choosing the author's own default view again clears the setting.
+    view: draft.view === void 0 || draft.view === effectiveViewKey(definition, void 0) ? void 0 : draft.view
   };
 }
 function patchKey(patch) {
@@ -2823,13 +3112,20 @@ function patchKey(patch) {
   for (const key of Object.keys(patch.options ?? {}).sort()) {
     options[key] = patch.options[key];
   }
-  return JSON.stringify([patch.title, patch.width, patch.flexible, options]);
+  return JSON.stringify([
+    patch.title,
+    patch.width,
+    patch.flexible,
+    options,
+    patch.view
+  ]);
 }
 var EMPTY_PATCH = {
   title: void 0,
   width: void 0,
   flexible: void 0,
-  options: void 0
+  options: void 0,
+  view: void 0
 };
 function WidgetOptionsDialog({
   definition,
@@ -2867,6 +3163,7 @@ function WidgetOptionsDialog({
   const canRevert = baselineKey !== void 0 && baselineKey !== savedKey;
   const canReset = savedKey !== patchKey(EMPTY_PATCH);
   const range = widthRange(definition);
+  const views = viewChoices(definition);
   const effectiveFlexible = draft.flexible ?? isFlexible(definition);
   function requestClose() {
     if (confirming !== void 0) {
@@ -2992,6 +3289,21 @@ function WidgetOptionsDialog({
               ),
               labels.optionsFlexible
             ] }),
+            views.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dwt-options-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${baseId}-view`, children: labels.optionsViewField }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "select",
+                {
+                  id: `${baseId}-view`,
+                  value: effectiveViewKey(definition, draft.view),
+                  onChange: (event) => {
+                    const value = event.target.value;
+                    setDraft((current) => ({ ...current, view: value }));
+                  },
+                  children: views.map((view) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: view.key, children: view.key === effectiveViewKey(definition, void 0) ? labels.viewDefault(view.label) : view.label }, view.key))
+                }
+              )
+            ] }),
             (definition.options?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "dwt-options-group", children: [
               /* @__PURE__ */ jsxRuntime.jsx("legend", { children: labels.optionsDeclared }),
               (definition.options ?? []).map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3971,10 +4283,13 @@ function DashboardInner({
   className
 }) {
   const slot = useSlotClassName();
-  const { labels } = useWidgetSettings();
+  const { labels, locale } = useWidgetSettings();
   const effectiveWidgets = widgets.map((w) => {
-    const settings = savedLayout.settings?.[w.definition.key];
-    return settings === void 0 || !overrideLocks && isOptionsLocked(w.definition) ? w : { ...w, definition: applySettings(w.definition, settings) };
+    const settings = !overrideLocks && isOptionsLocked(w.definition) ? void 0 : savedLayout.settings?.[w.definition.key];
+    const styled = settings === void 0 ? w : { ...w, definition: applySettings(w.definition, settings) };
+    return applyView(styled, settings?.view, {
+      ...locale === void 0 ? {} : { locale }
+    });
   });
   const definitions = effectiveWidgets.map(
     (w) => overrideLocks ? withoutLock(w.definition) : w.definition
@@ -4819,45 +5134,6 @@ function useStoredLayout(options) {
   };
 }
 
-// src/core/payload.ts
-var WIDGET_KINDS = [
-  "TEXT",
-  "KPI",
-  "GAUGE",
-  "TABLE",
-  "BAR_LIST",
-  "ALERT_LIST",
-  "GRAPH"
-];
-function isWidgetKind(value) {
-  return typeof value === "string" && WIDGET_KINDS.includes(value);
-}
-var VALUE_FORMATS = ["number", "currency", "percent"];
-var MAX_GRAPH_SERIES = 8;
-var DEFAULT_EMPTY_TEXT = "Nothing to show yet.";
-function isWidgetEmptyState(payload) {
-  return "empty" in payload && payload.empty === true;
-}
-function emptyTextFor(payload) {
-  if (isWidgetEmptyState(payload)) {
-    return payload.text;
-  }
-  switch (payload.kind) {
-    case "TABLE":
-      return payload.rows.length === 0 ? DEFAULT_EMPTY_TEXT : null;
-    case "BAR_LIST":
-      return payload.items.length === 0 ? DEFAULT_EMPTY_TEXT : null;
-    case "ALERT_LIST":
-      return payload.items.length === 0 ? payload.emptyText : null;
-    case "GRAPH":
-      return payload.series.every((series) => series.points.length === 0) ? DEFAULT_EMPTY_TEXT : null;
-    case "TEXT":
-    case "KPI":
-    case "GAUGE":
-      return null;
-  }
-}
-
 // src/core/validate.ts
 var MAX_REPORTED_PROBLEMS = 10;
 function describeType2(value) {