cx 26.7.5 → 26.8.0

package/src/charts/axis/NumericScale.ts

@@ -0,0 +1,290 @@
+import { Stack } from "./Stack";
+import { isNumber } from "../../util/isNumber";
+import { Console } from "../../util/Console";
+
+export class NumericScale {
+   min: number;
+   max: number;
+   snapToTicks: number;
+   tickDivisions: number[][];
+   minLabelDistance: number;
+   minLabelTickSize: number;
+   minTickDistance: number;
+   minTickStep: number;
+   tickSizes: number[];
+   normalized: boolean;
+   inverted: boolean;
+   minValue?: number;
+   maxValue?: number;
+   minValuePadded: number;
+   maxValuePadded: number;
+   stacks: Record<string, Stack>;
+   lowerDeadZone: number;
+   upperDeadZone: number;
+   origin: number;
+   scale: { factor: number; min: number; max: number; minPadding: number; maxPadding: number };
+   a: number;
+   b: number;
+   shouldUpdate: boolean;
+
+   reset(
+      min: number,
+      max: number,
+      snapToTicks: number,
+      tickDivisions: number[][],
+      minTickDistance: number,
+      minTickStep: number,
+      minLabelDistance: number,
+      minLabelTickSize: number,
+      normalized: boolean,
+      inverted: boolean,
+      lowerDeadZone: number,
+      upperDeadZone: number,
+   ): void {
+      this.min = min;
+      this.max = max;
+      this.snapToTicks = snapToTicks;
+      this.tickDivisions = tickDivisions;
+      this.minLabelDistance = minLabelDistance;
+      this.minLabelTickSize = minLabelTickSize;
+      this.minTickDistance = minTickDistance;
+      this.minTickStep = minTickStep;
+      this.tickSizes = [];
+      this.normalized = normalized;
+      this.inverted = inverted;
+      delete this.minValue;
+      delete this.maxValue;
+      this.stacks = {};
+      this.lowerDeadZone = lowerDeadZone || 0;
+      this.upperDeadZone = upperDeadZone || 0;
+   }
+
+   map(v: number, offset: number = 0): number {
+      return this.origin + (v + offset - this.scale.min + this.scale.minPadding) * this.scale.factor;
+   }
+
+   decodeValue(n: number): number {
+      return n;
+   }
+
+   encodeValue(v: number): number {
+      return v;
+   }
+
+   constrainValue(v: number): number {
+      return Math.max(this.scale.min, Math.min(this.scale.max, v));
+   }
+
+   trackValue(v: number, offset: number = 0, constrain: boolean = false): number {
+      let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
+      if (constrain) value = this.constrainValue(value);
+      return value;
+   }
+
+   hash(): any {
+      let r: any = {
+         origin: this.origin,
+         factor: this.scale.factor,
+         min: this.scale.min,
+         max: this.scale.max,
+         minPadding: this.scale.minPadding,
+         maxPadding: this.scale.maxPadding,
+      };
+      r.stacks = Object.keys(this.stacks)
+         .map((s) => this.stacks[s].info?.join(","))
+         .join(":");
+      return r;
+   }
+
+   isSame(x: any): boolean {
+      let hash = this.hash();
+      let same = x && !Object.keys(hash).some((k) => x[k] !== hash[k]);
+      this.shouldUpdate = !same;
+      return same;
+   }
+
+   measure(a: number, b: number): void {
+      this.a = a;
+      this.b = b;
+
+      if (this.minValue != null && this.min == null) this.min = this.minValue;
+      if (this.maxValue != null && this.max == null) this.max = this.maxValue;
+
+      for (let s in this.stacks) {
+         let info = this.stacks[s].measure(this.normalized);
+         let [min, max] = info;
+         if (this.min == null || min < this.min) this.min = min;
+         if (this.max == null || max > this.max) this.max = max;
+         this.stacks[s].info = info;
+      }
+
+      if (this.min == null) this.min = 0;
+      if (this.max == null) this.max = this.normalized ? 1 : 100;
+
+      if (this.min == this.max) {
+         if (this.min == 0) {
+            this.min = -1;
+            this.max = 1;
+         } else {
+            let delta = Math.abs(this.min) * 0.1;
+            this.min -= delta;
+            this.max += delta;
+         }
+      }
+
+      this.origin = this.inverted ? this.b : this.a;
+
+      this.scale = this.getScale();
+
+      this.calculateTicks();
+   }
+
+   getScale(tickSizes?: number[]): { factor: number; min: number; max: number; minPadding: number; maxPadding: number } {
+      let { min, max } = this;
+      let smin = min;
+      let smax = max;
+
+      let tickSize;
+      if (tickSizes && isNumber(this.snapToTicks) && tickSizes.length > 0) {
+         tickSize = tickSizes[Math.min(tickSizes.length - 1, this.snapToTicks)];
+         smin = Math.floor(smin / tickSize) * tickSize;
+         smax = Math.ceil(smax / tickSize) * tickSize;
+      } else {
+         if (this.minValue === min) smin = this.minValuePadded;
+         if (this.maxValue === max) smax = this.maxValuePadded;
+      }
+
+      let minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
+      let maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
+
+      let sign = this.b > this.a ? 1 : -1;
+
+      let factor =
+         smin < smax
+            ? (Math.abs(this.b - this.a) - this.lowerDeadZone - this.upperDeadZone) /
+              (smax - smin + minPadding + maxPadding)
+            : 0;
+
+      if (factor < 0) factor = 0;
+
+      if (factor > 0 && (this.lowerDeadZone > 0 || this.upperDeadZone > 0)) {
+         while (factor * (min - smin) < this.lowerDeadZone) smin -= this.lowerDeadZone / factor;
+
+         while (factor * (smax - max) < this.upperDeadZone) smax += this.upperDeadZone / factor;
+
+         if (tickSize! > 0 && isNumber(this.snapToTicks)) {
+            smin = Math.floor(smin / tickSize!) * tickSize!;
+            smax = Math.ceil(smax / tickSize!) * tickSize!;
+            minPadding = this.minValue === min ? Math.max(0, smin - this.minValuePadded) : 0;
+            maxPadding = this.maxValue === max ? Math.max(0, this.maxValuePadded - smax) : 0;
+         }
+
+         factor = smin < smax ? Math.abs(this.b - this.a) / (smax - smin + minPadding + maxPadding) : 0;
+      }
+
+      return {
+         factor: sign * (this.inverted ? -factor : factor),
+         min: smin,
+         max: smax,
+         minPadding,
+         maxPadding,
+      };
+   }
+
+   acknowledge(value: number, width: number = 0, offset: number = 0): void {
+      if (value == null) return;
+
+      if (this.minValue == null || value < this.minValue) {
+         this.minValue = value;
+         this.minValuePadded = value + offset - width / 2;
+      }
+      if (this.maxValue == null || value > this.maxValue) {
+         this.maxValue = value;
+         this.maxValuePadded = value + offset + width / 2;
+      }
+   }
+
+   getStack(name: string): Stack {
+      let s = this.stacks[name];
+      if (!s) s = this.stacks[name] = new Stack();
+      return s;
+   }
+
+   stacknowledge(name: string, ordinal: any, value: any): any {
+      return this.getStack(name).acknowledge(ordinal, value);
+   }
+
+   stack(name: string, ordinal: any, value: any): number | null {
+      let v = this.getStack(name).stack(ordinal, value);
+      return v != null ? this.map(v) : null;
+   }
+
+   findTickSize(minPxDist: number): number | undefined {
+      return this.tickSizes.find((a) => a >= this.minLabelTickSize && a * Math.abs(this.scale.factor) >= minPxDist);
+   }
+
+   getTickSizes(): number[] {
+      return this.tickSizes;
+   }
+
+   calculateTicks(): void {
+      let dist = this.minLabelDistance / Math.abs(this.scale.factor);
+      let unit = Math.pow(10, Math.floor(Math.log10(dist)));
+
+      let bestLabelDistance = Infinity;
+      let bestTicks: number[] = [];
+      let bestScale = this.scale;
+
+      for (let i = 0; i < this.tickDivisions.length; i++) {
+         let divs = this.tickDivisions[i];
+         let tickSizes = divs.filter((ts) => ts >= this.minTickStep).map((ts) => ts * unit);
+         let scale = this.getScale(tickSizes);
+         tickSizes.forEach((size, level) => {
+            let labelDistance = size * Math.abs(scale.factor);
+            if (labelDistance >= this.minLabelDistance && labelDistance < bestLabelDistance) {
+               bestScale = scale;
+               bestTicks = tickSizes;
+               bestLabelDistance = labelDistance;
+            }
+         });
+      }
+      this.scale = bestScale;
+      this.tickSizes = bestTicks.filter(
+         (ts) => ts >= this.minTickStep && ts * Math.abs(bestScale.factor) >= this.minTickDistance,
+      );
+      if (this.tickSizes.length > 0) {
+         let max = this.tickSizes[this.tickSizes.length - 1];
+         this.tickSizes.push(2 * max);
+         this.tickSizes.push(5 * max);
+         this.tickSizes.push(10 * max);
+         let min = this.tickSizes[0];
+         let minDist = min * Math.abs(bestScale.factor);
+         if (min / 10 >= this.minTickStep && minDist / 10 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 10);
+         else if (min / 5 >= this.minTickStep && minDist / 5 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 5);
+         else if (min / 2 >= this.minTickStep && minDist / 2 >= this.minTickDistance) this.tickSizes.splice(0, 0, min / 2);
+      }
+   }
+
+   getTicks(tickSizes: number[]): number[][] {
+      return tickSizes.map((size) => {
+         let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
+         let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
+         let result: number[] = [];
+         for (let i = start; i <= end; i++) result.push(i * size + 0);
+         return result;
+      });
+   }
+
+   mapGridlines(): number[] {
+      let size = this.tickSizes[0];
+      let start = Math.ceil((this.scale.min - this.scale.minPadding) / size);
+      let end = Math.floor((this.scale.max + this.scale.maxPadding) / size);
+      let result: number[] = [];
+      for (let i = start; i <= end; i++) result.push(this.map(i * size));
+      return result;
+   }
+
+   book(): void {
+      Console.warn("NumericAxis does not support the autoSize flag for column and bar graphs.");
+   }
+}

package/src/widgets/grid/Grid.sorting.spec.tsx

@@ -0,0 +1,188 @@
+import assert from "assert";
+import { Store } from "../../data/Store";
+import { Grid } from "./Grid";
+import { bind } from "../../ui/bind";
+import { computable } from "../../data/computable";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
+
+// priorities 1, 2, 10 sort differently as numbers (1, 2, 10) than their
+// "P{priority}" labels do as strings (P1, P10, P2), which makes the sort key
+// precedence (sortValue > sortField > value > field) observable in the output
+let records = [
+   { id: 1, priority: 2 },
+   { id: 2, priority: 10 },
+   { id: 3, priority: 1 },
+];
+
+function textOf(node: any): string {
+   if (node == null) return "";
+   if (typeof node == "string") return node;
+   if (Array.isArray(node)) return node.map(textOf).join("");
+   return textOf(node.children);
+}
+
+function findAll(node: any, predicate: (el: any) => boolean, result: any[] = []): any[] {
+   if (node == null || typeof node == "string") return result;
+   if (Array.isArray(node)) {
+      node.forEach((child) => findAll(child, predicate, result));
+      return result;
+   }
+   if (predicate(node)) result.push(node);
+   findAll(node.children, predicate, result);
+   return result;
+}
+
+function getRenderedLabels(component: any): string[] {
+   let tds = findAll(component.toJSON(), (el) => el.type == "td");
+   return tds.map(textOf);
+}
+
+async function clickHeader(component: any, text: string) {
+   let th = component.root.findAllByType("th").find((t: any) => thText(t) == text);
+   assert.ok(th, `Header cell "${text}" not found`);
+   await act(async () => {
+      th.props.onClick({ preventDefault() {}, stopPropagation() {} });
+   });
+}
+
+function thText(th: any): string {
+   return th.children.map((c: any) => (typeof c == "string" ? c : "")).join("");
+}
+
+describe("Grid sorting precedence", () => {
+   it("sorts by sortField instead of the displayed value when both are set", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P2", "P10"]);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P10", "P2", "P1"]);
+   });
+
+   it("sortValue takes precedence over sortField", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     sortValue: computable("$record.priority", (p: number) => -p),
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P10", "P2", "P1"]);
+   });
+
+   it("sorts by the displayed value when no sortField is set", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     field: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P10", "P2"]);
+   });
+
+   it("applies sortField precedence to sorters restored from sortField/sortDirection bindings", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               sortField={bind("sortField")}
+               sortDirection={bind("sortDirection")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({
+         data: { records, sortField: "priority", sortDirection: "ASC" },
+      });
+      const component = await createTestRenderer(store, widget);
+
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P2", "P10"]);
+   });
+
+   it("marks only the clicked column as sorted", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+                  {
+                     header: "Label",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+
+      let ths = component.root.findAllByType("th");
+      let sorted = ths.filter((th: any) => (th.props.className || "").includes("sorted-asc"));
+      assert.strictEqual(sorted.length, 1);
+      assert.strictEqual(thText(sorted[0]), "Priority");
+   });
+});

package/src/widgets/grid/Grid.tsx

@@ -241,7 +241,16 @@ export interface GridColumnConfig {
    children?: ChildNode | ChildNode[];
    key?: string;
    pad?: boolean;
+   /**
+    * Record field used for sorting instead of `field` or the displayed `value`.
+    * Use it when the column displays a computed value but should sort by raw data.
+    * Sort key precedence: `sortValue` > `sortField` > `value` > `field`.
+    */
    sortField?: string;
+   /**
+    * Selector (binding, template, expression or computable) used for sorting instead
+    * of `field`, `sortField` or the displayed `value`. Takes the highest precedence.
+    */
    sortValue?: Prop<any>;
    style?: StyleProp;
    trimWhitespace?: boolean;
@@ -919,10 +928,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
       let sortField = null;
 
-      if (isDefined(this.sortField) && isDefined(this.sortDirection)) {
+      // rebuild sorters from the sortField/sortDirection bindings only if a sort field
+      // is actually set; sorts identified by a value selector (columns without a field)
+      // live in data.sorters/state.sorters and cannot round-trip through a field name
+      if (isDefined(this.sortField) && isDefined(this.sortDirection) && data.sortField) {
          let sorter = {
             field: data.sortField,
-            direction: data.sortDirection,
+            direction: data.sortDirection || "ASC",
          };
          sortField = data.sortField;
          data.sorters = [sorter];
@@ -939,11 +951,17 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       }
 
       if (sortField) {
-         for (let l = 1; l < 10; l++) {
+         for (let l = 0; l < 10; l++) {
             let line = instance.row[`line${l}`];
-            let sortColumn = line && line.columns && line.columns.find((c: any) => c.field == sortField);
+            let sortColumn =
+               line && line.columns && line.columns.find((c: any) => (c.sortField || c.field) == sortField);
             if (sortColumn) {
-               data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
+               // precedence: sortValue > sortField > value > field
+               data.sorters[0].value = isDefined(sortColumn.sortValue)
+                  ? sortColumn.sortValue
+                  : sortColumn.sortField
+                    ? undefined
+                    : sortColumn.value;
                data.sorters[0].comparer = sortColumn.comparer;
                data.sorters[0].sortOptions = sortColumn.sortOptions;
                break;
@@ -1307,8 +1325,24 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
                   if (hdwidget.sortable && header.widget.allowSorting) {
                      mods.push("sortable");
-                     if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
-                        mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
+                     let sorter = data.sorters && data.sorters[0];
+                     let sortColumnField = hdwidget.sortField || hdwidget.field;
+                     let sortColumnValue = isDefined(hdwidget.sortValue)
+                        ? hdwidget.sortValue
+                        : hdwidget.sortField
+                          ? undefined
+                          : hdwidget.value;
+                     // a sort is identified by its (field, value selector) pair, so columns
+                     // sorting by the same field through different value selectors don't both match
+                     let sorted =
+                        sorter &&
+                        !!sorter.direction &&
+                        (sortColumnField
+                           ? sorter.field == sortColumnField
+                           : !sorter.field && isDefined(sortColumnValue)) &&
+                        sorter.value === sortColumnValue;
+                     if (sorted) {
+                        mods.push("sorted-" + sorter.direction.toLowerCase());
                         sortIcon = <DropDownIcon className={CSS.element(baseClass, "column-sort-icon")} />;
                      }
                   }
@@ -1481,17 +1515,18 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       let header = column.components[`header${headerLine + 1}`];
 
       let field = column.sortField || column.field;
-      let value = column.sortValue || column.value;
+      // precedence: sortValue > sortField > value > field; the comparer prefers value
+      // over field, so value must not be attached when an explicit sortField is set
+      let value = isDefined(column.sortValue) ? column.sortValue : column.sortField ? undefined : column.value;
       let comparer = column.comparer;
       let sortOptions = column.sortOptions;
 
-      if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
+      if (header && header.allowSorting && column.sortable && (field || isDefined(value))) {
          let direction = column.primarySortDirection ?? "ASC";
-         if (
-            isNonEmptyArray(data.sorters) &&
-            ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
-               (!!value && data.sorters[0].value == value))
-         ) {
+         // the column matches the active sorter only if both the field and the value
+         // selector are the same; two columns may sort by the same field through
+         // different value selectors and represent different sorts
+         if (isNonEmptyArray(data.sorters) && data.sorters[0].field == field && data.sorters[0].value === value) {
             if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
             else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
                direction = "ASC";