@pythia-software/query-table-ui 0.9.5 → 0.9.6

package/README.md

@@ -379,6 +379,54 @@ status indicators an accessible label on their wrapper.
 
 ## Mobile behavior
 
+### Responsive target sizing
+
+Set the public, unitless `--qt-touch-target-scale` CSS custom property to
+configure the **added** touch-target size in the bundled theme:
+
+| Value | Target sizing |
+| --- | --- |
+| `1` (default, including when unset) | Existing responsive enlargement |
+| `0.5` | Half the added size |
+| `0` | Desktop target sizing with the responsive layout |
+
+```css
+/* Scope to a host wrapper containing the builder, table and metrics. */
+.pharos-query-table {
+  --qt-touch-target-scale: 0.5;
+}
+```
+
+For each enlarged dimension, the theme uses
+`desktop + (responsive - desktop) * scale`. A desktop 24px button that normally
+grows to 44px therefore becomes 34px at `0.5`. Each control uses its own desktop
+baseline, including its line box, padding and borders; collapse controls, chips,
+picker rows and editor buttons have different baselines. Narrow and coarse
+pointer rules use the final responsive size once, so matching both does not
+compound the enlargement. Use a number from `0` to `1`, without a unit.
+
+The setting covers query actions/chips, table cells/actions, picker and menu
+rows, selection actions, saved-query controls, JSON controls, and select,
+property and metric editor controls. Content remains a lower bound: wrapped
+labels, icons, native controls and the retained mobile input fonts can require
+more room than the scaled minimum. Existing responsive size reductions stay
+compact. Layout widths, wrapping, sheets, scrolling, focus behavior, drag/touch
+actions, breakpoints and input font sizes are independent of the factor.
+
+Use `:root` for an application-wide setting, or a wrapper for independent
+instances. Built-in portaled menus, pickers, dialogs and sheets inherit the
+setting from their trigger/overlay anchor through the same theme propagation
+as the palette, including live ancestor `class`, `style` and `data-theme`
+changes. Keep standalone overlays beneath that wrapper in the React tree (and
+their anchor within it). Host-owned portals and controls with custom styling
+must propagate/apply their own sizing. `QueryBuilder`'s `compact` prop controls
+clause presentation separately.
+
+Run `npm run test:touch-targets` with `npm run demo` running to check relative
+sizing, scoped portal updates and interactions in Chromium and WebKit.
+
+### Responsive layout and interactions
+
 The bundled theme keeps the table as a horizontally scrollable grid on narrow
 screens so columns remain comparable. Narrow screens (up to 760px) and short,
 touch-based landscape viewports use a mobile interaction model:

package/dist/index.js

@@ -8472,6 +8472,7 @@ import {
 } from "react";
 import {
   MAX_AGGREGATIONS,
+  MAX_METRIC_WINDOW_PERIODS,
   METRIC_FUNCTIONS as METRIC_FUNCTIONS2,
   aggOpsForField,
   compileFormula,
@@ -9812,6 +9813,7 @@ function MetricCard({
           buckets.length > clause.display.maxGroups ? " plus Other" : "",
           "."
         ] }),
+        (clause.window || clause.share) && /* @__PURE__ */ jsx31("p", { className: "qt-metric-note", children: seriesNote(clause) }),
         !!result?.hiddenGroups && clause.minCount !== void 0 && /* @__PURE__ */ jsxs27("p", { className: "qt-metric-note", children: [
           result.hiddenGroups.toLocaleString(),
           " ",
@@ -9833,6 +9835,23 @@ function MetricCard({
     }
   );
 }
+function seriesNote(clause) {
+  const unit = clause.dateGrouping?.interval ?? "interval", window2 = clause.window;
+  const parts = [];
+  if (window2) {
+    const span = window2.periods === "all" ? `from the first ${unit}` : `over the trailing ${window2.periods} ${unit}s`;
+    parts.push(
+      window2.reduce === "mean" ? `Mean per ${unit} ${span}` : `Total ${span}`
+    );
+    if (window2.periods !== "all" && window2.partial !== "include")
+      parts.push("shorter windows at the start have no value");
+  }
+  if (clause.share)
+    parts.push(
+      clause.share === "group0" ? `${parts.length ? "as a share" : "Share"} of each ${clause.dateGrouping ? unit : "first group"}'s total` : `${parts.length ? "as a share" : "Share"} of the total`
+    );
+  return `${parts.join("; ")}.`;
+}
 function BigNumber({
   bucket,
   fmt,
@@ -10508,12 +10527,26 @@ function MetricsEditor({
       const index = name === void 0 ? -1 : groupBy.indexOf(name);
       return index < 0 ? [] : [{ ...s, key: `group${index}` }];
     });
+    const dated = selected.dateGrouping?.field === groupBy[0];
+    const share = groupBy.length >= (selected.share === "group0" ? 2 : 1) ? selected.share : void 0;
     patch(selected.id, {
       groupBy,
       ...sort ? { sort } : {},
-      dateGrouping: selected.dateGrouping?.field === groupBy[0] ? selected.dateGrouping : void 0
+      dateGrouping: dated ? selected.dateGrouping : void 0,
+      window: dated ? selected.window : void 0,
+      share,
+      ...shareDisplay(selected.share, share)
     });
   }
+  function shareDisplay(previous, next) {
+    if (next && !previous && !chosen.format)
+      return { display: { ...chosen, format: SHARE_FORMAT } };
+    if (!next && previous && sameFormat(chosen.format, SHARE_FORMAT)) {
+      const { format: _format, ...display2 } = chosen;
+      return { display: display2 };
+    }
+    return {};
+  }
   function changeSize(key, raw) {
     if (!selected || !Number.isFinite(raw)) return;
     const layout = {
@@ -10526,7 +10559,12 @@ function MetricsEditor({
   }
   function changeDisplay(kind) {
     if (!selected) return;
-    const next = { display: { ...chosen, kind } };
+    const single = !["box", "histogram", "scatter"].includes(kind);
+    const display2 = !single && shareDisplay(selected.share, void 0).display || chosen;
+    const next = {
+      display: { ...display2, kind },
+      ...single ? {} : { window: void 0, share: void 0 }
+    };
     setFormatTarget(kind === "scatter" || kind === "histogram" ? "x" : "value");
     if (selected.sort)
       next.sort = selected.sort.filter(
@@ -11507,7 +11545,10 @@ function MetricsEditor({
                                 value: selected.dateGrouping?.interval ?? "exact",
                                 onChange: (e) => {
                                   if (e.target.value === "exact") {
-                                    patch(selected.id, { dateGrouping: void 0 });
+                                    patch(selected.id, {
+                                      dateGrouping: void 0,
+                                      window: void 0
+                                    });
                                     return;
                                   }
                                   const interval = e.target.value;
@@ -11642,6 +11683,25 @@ function MetricsEditor({
                             ] }),
                             /* @__PURE__ */ jsx33("p", { className: "qt-metric-help", children: "Direct counts and sums use 0 for empty dates. Averages, ratios, and other expressions have no value." })
                           ] }),
+                          /* @__PURE__ */ jsxs28("label", { className: "qt-metric-date-toggle", children: [
+                            /* @__PURE__ */ jsx33(
+                              "input",
+                              {
+                                type: "checkbox",
+                                "aria-label": "Whole intervals only",
+                                disabled: !selected.dateGrouping,
+                                checked: selected.dateGrouping?.partialIntervals === "exclude",
+                                onChange: (e) => {
+                                  const { partialIntervals: _partial, ...rest } = selected.dateGrouping;
+                                  patch(selected.id, {
+                                    dateGrouping: e.target.checked ? { ...rest, partialIntervals: "exclude" } : rest
+                                  });
+                                }
+                              }
+                            ),
+                            "Whole intervals only"
+                          ] }),
+                          /* @__PURE__ */ jsx33("p", { className: "qt-metric-help", children: "Leave out intervals the date filters cut short and the interval still in progress." }),
                           /* @__PURE__ */ jsx33("p", { className: "qt-metric-help", children: "Calendar boundaries and custom dates use the grouping timezone. Weeks begin Monday." })
                         ] }),
                         /* @__PURE__ */ jsxs28(
@@ -11664,6 +11724,18 @@ function MetricsEditor({
                       ]
                     }
                   ),
+                  selected.groupBy.length > 0 && !["box", "histogram", "scatter"].includes(chosen.kind) && /* @__PURE__ */ jsx33(
+                    MetricSeriesSettings,
+                    {
+                      clause: selected,
+                      fields,
+                      settings: settingsState("Window & share"),
+                      onChange: (values) => patch(selected.id, {
+                        ...values,
+                        ..."share" in values ? shareDisplay(selected.share, values.share) : {}
+                      })
+                    }
+                  ),
                   /* @__PURE__ */ jsxs28(
                     Settings,
                     {
@@ -12567,6 +12639,167 @@ function Settings({
     }
   );
 }
+var SHARE_FORMAT = { kind: "percent", decimals: 1 };
+var sameFormat = (a, b) => !!a && JSON.stringify(a) === JSON.stringify(b);
+var windowOf = (periods, mean, partial) => ({
+  periods,
+  ...mean ? { reduce: "mean" } : {},
+  ...partial ? { partial: "include" } : {}
+});
+function MetricSeriesSettings({
+  clause,
+  fields,
+  settings,
+  onChange
+}) {
+  const { window: window2, share, dateGrouping } = clause;
+  const first = fields.find((f) => f.name === clause.groupBy[0])?.label ?? clause.groupBy[0];
+  const unit = dateGrouping?.interval ?? "interval";
+  const mode = !window2 ? "none" : window2.periods === "all" ? "all" : "trailing";
+  const setWindow = (next) => onChange({
+    window: next,
+    ...next && dateGrouping && !dateGrouping.includeEmpty ? { dateGrouping: { ...dateGrouping, includeEmpty: true } } : {},
+    // A share of the total cannot be windowed, and its option is hidden.
+    ...next && share === "total" ? { share: void 0 } : {}
+  });
+  const summary = [
+    !window2 ? "" : window2.periods === "all" ? "Running" : `Trailing ${window2.periods} ${unit}s`,
+    window2?.reduce === "mean" ? `mean per ${unit}` : "",
+    share === "group0" ? `share of each ${dateGrouping ? unit : first}` : share === "total" ? "share of total" : ""
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs28(
+    Settings,
+    {
+      title: "Window & share",
+      ...settings,
+      summary: summary || "Values as computed",
+      children: [
+        dateGrouping && /* @__PURE__ */ jsxs28(Fragment20, { children: [
+          /* @__PURE__ */ jsxs28("label", { children: [
+            "Window",
+            /* @__PURE__ */ jsxs28(
+              "select",
+              {
+                "aria-label": "Window",
+                value: mode,
+                onChange: (e) => setWindow(
+                  e.target.value === "none" ? void 0 : windowOf(
+                    e.target.value === "all" ? "all" : window2 && window2.periods !== "all" ? window2.periods : 7,
+                    window2?.reduce === "mean",
+                    // A running value has no partial windows.
+                    e.target.value !== "all" && window2?.partial === "include"
+                  )
+                ),
+                children: [
+                  /* @__PURE__ */ jsx33("option", { value: "none", children: "None" }),
+                  /* @__PURE__ */ jsxs28("option", { value: "trailing", children: [
+                    "Trailing ",
+                    unit,
+                    "s"
+                  ] }),
+                  /* @__PURE__ */ jsxs28("option", { value: "all", children: [
+                    "Running from the first ",
+                    unit
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          window2 && window2.periods !== "all" && /* @__PURE__ */ jsxs28("label", { children: [
+            `${unit[0].toUpperCase()}${unit.slice(1)}s per window`,
+            /* @__PURE__ */ jsx33(
+              "input",
+              {
+                "aria-label": "Window length",
+                type: "number",
+                min: 2,
+                max: MAX_METRIC_WINDOW_PERIODS,
+                value: window2.periods,
+                onChange: (e) => {
+                  const n = e.currentTarget.valueAsNumber;
+                  if (Number.isInteger(n) && n >= 2 && n <= MAX_METRIC_WINDOW_PERIODS)
+                    setWindow({ ...window2, periods: n });
+                }
+              }
+            )
+          ] }),
+          window2 && /* @__PURE__ */ jsxs28(Fragment20, { children: [
+            /* @__PURE__ */ jsxs28("label", { children: [
+              "Combine",
+              /* @__PURE__ */ jsxs28(
+                "select",
+                {
+                  "aria-label": "Combine window",
+                  value: window2.reduce ?? "total",
+                  onChange: (e) => setWindow(
+                    windowOf(
+                      window2.periods,
+                      e.target.value === "mean",
+                      window2.partial === "include"
+                    )
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx33("option", { value: "total", children: "Total over the window" }),
+                    /* @__PURE__ */ jsxs28("option", { value: "mean", children: [
+                      "Mean per ",
+                      unit
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            window2.periods !== "all" && /* @__PURE__ */ jsxs28("label", { className: "qt-metric-date-toggle", children: [
+              /* @__PURE__ */ jsx33(
+                "input",
+                {
+                  type: "checkbox",
+                  "aria-label": "Show partial windows",
+                  checked: window2.partial === "include",
+                  onChange: (e) => setWindow(
+                    windowOf(
+                      window2.periods,
+                      window2.reduce === "mean",
+                      e.target.checked
+                    )
+                  )
+                }
+              ),
+              "Show windows that start before the range"
+            ] }),
+            /* @__PURE__ */ jsxs28("p", { className: "qt-metric-help", children: [
+              "A total evaluates the metric over every row in the window, so ratios and averages pool their parts. A mean per ",
+              unit,
+              " ",
+              "averages a single sum, count or distinct count."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs28("label", { children: [
+          "Show values as",
+          /* @__PURE__ */ jsxs28(
+            "select",
+            {
+              "aria-label": "Show values as",
+              value: share ?? "values",
+              onChange: (e) => onChange({
+                share: e.target.value === "values" ? void 0 : e.target.value
+              }),
+              children: [
+                /* @__PURE__ */ jsx33("option", { value: "values", children: "Values" }),
+                clause.groupBy.length > 1 && /* @__PURE__ */ jsxs28("option", { value: "group0", children: [
+                  "Share of each ",
+                  dateGrouping ? unit : first
+                ] }),
+                !window2 && /* @__PURE__ */ jsx33("option", { value: "total", children: "Share of all groups" })
+              ]
+            }
+          )
+        ] }),
+        share && /* @__PURE__ */ jsx33("p", { className: "qt-metric-help", children: "Divides each group by a total of the same sum or count, including groups past the group limit." })
+      ]
+    }
+  );
+}
 function MetricFormatControls({
   format,
   onChange,