cx 26.4.2 → 26.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.4.2",
+  "version": "26.4.3",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      stroke-width: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-bar {
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/BarGraph")) {
+   @include cx-bargraph();
+}

package/src/charts/Legend.scss

@@ -1,57 +1,57 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: $cx-default-chart-legend-gap;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      font-size: $cx-default-chart-legend-font-size;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-legend-shape-color;
-      stroke-width: $cx-default-chart-legend-shape-stroke-width;
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legend($name: "legend", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.scss

@@ -1,35 +1,35 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-shape-fill-color;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,28 +1,28 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: $cx-default-chart-line-stroke-color;
-      stroke-width: $cx-default-chart-line-stroke-width;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: $cx-default-chart-area-opacity;
-   }
-}
-
-@if (cx-should-include("cx/charts/LineGraph")) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}

package/src/charts/helpers/SnapPointFinder.ts

@@ -1,136 +1,136 @@
-import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
-import { AccessorChain } from "../../data/createAccessorModelProxy";
-
-export interface SnapAccumulator extends PointReducerAccumulator {
-   cursor: {
-      x: number | null;
-      y: number | null;
-      mapped: boolean;
-      mappedX?: number | null;
-      mappedY?: number | null;
-   };
-   dist: number;
-   snapX: any;
-   snapY: any;
-   snapRecord?: any;
-   xAxis: any;
-   yAxis: any;
-}
-
-export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
-   xAxis?: any;
-   yAxis?: any;
-}
-
-export interface SnapPointFinderConfig extends PointReducerConfig {
-   /** Cursor X value. */
-   cursorX?: NumberProp;
-
-   /** Cursor Y value */
-   cursorY?: NumberProp;
-
-   /** A binding used to receive the x value of the nearest point.*/
-   snapX?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
-
-   /** A binding used to receive the y value of the nearest point. */
-   snapY?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
-
-   /** A binding used to receive the record prop */
-   snapRecord?: Prop<DataRecord>;
-
-   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
-   maxDistance?: number;
-
-   /** A function used to convert x values into numeric format. Commonly used with dates. */
-   convertX?: (value: number | string) => number;
-
-   /** A function used to convert y values into numeric format. Commonly used with dates. */
-   convertY?: (value: number | string) => number;
-
-   /** Name of the x-axis. Default is 'x'. */
-   xAxis?: string;
-
-   /** Name of the y-axis. Default is 'y'. */
-   yAxis?: string;
-}
-
-export class SnapPointFinder extends PointReducer<SnapAccumulator> {
-   declare maxDistance: number;
-   declare convertX: (value: any) => number;
-   declare convertY: (value: any) => number;
-   declare xAxis: string;
-   declare yAxis: string;
-
-   constructor(config?: SnapPointFinderConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
-      instance.xAxis = (context.axes as any)?.[this.xAxis];
-      instance.yAxis = (context.axes as any)?.[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
-      const d = data as any;
-      acc.cursor = {
-         x: d.cursorX,
-         y: d.cursorY,
-         mapped: false,
-      };
-      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-      acc.xAxis = xAxis;
-      acc.yAxis = yAxis;
-   };
-
-   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
-      let { xAxis, yAxis, cursor } = acc;
-
-      if (!cursor.mapped) {
-         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
-         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
-         cursor.mapped = true;
-      }
-
-      let d: number | null = null;
-      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
-      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
-
-      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
-      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   };
-
-   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
-      instance.set("snapX", acc.snapX);
-      instance.set("snapY", acc.snapY);
-      instance.set("snapRecord", acc.snapRecord);
-   };
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
-SnapPointFinder.prototype.convertX = (x) => x;
-SnapPointFinder.prototype.convertY = (y) => y;
-SnapPointFinder.prototype.xAxis = "x";
-SnapPointFinder.prototype.yAxis = "y";
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface SnapAccumulator extends PointReducerAccumulator {
+   cursor: {
+      x: number | null;
+      y: number | null;
+      mapped: boolean;
+      mappedX?: number | null;
+      mappedY?: number | null;
+   };
+   dist: number;
+   snapX: any;
+   snapY: any;
+   snapRecord?: any;
+   xAxis: any;
+   yAxis: any;
+}
+
+export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export interface SnapPointFinderConfig extends PointReducerConfig {
+   /** Cursor X value. */
+   cursorX?: NumberProp;
+
+   /** Cursor Y value */
+   cursorY?: NumberProp;
+
+   /** A binding used to receive the x value of the nearest point.*/
+   snapX?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the y value of the nearest point. */
+   snapY?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the record prop */
+   snapRecord?: Prop<DataRecord>;
+
+   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /** A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export class SnapPointFinder extends PointReducer<SnapAccumulator> {
+   declare maxDistance: number;
+   declare convertX: (value: any) => number;
+   declare convertY: (value: any) => number;
+   declare xAxis: string;
+   declare yAxis: string;
+
+   constructor(config?: SnapPointFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
+      instance.xAxis = (context.axes as any)?.[this.xAxis];
+      instance.yAxis = (context.axes as any)?.[this.yAxis];
+      super.explore(context, instance);
+   }
+
+   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
+      const d = data as any;
+      acc.cursor = {
+         x: d.cursorX,
+         y: d.cursorY,
+         mapped: false,
+      };
+      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+      acc.xAxis = xAxis;
+      acc.yAxis = yAxis;
+   };
+
+   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
+      let { xAxis, yAxis, cursor } = acc;
+
+      if (!cursor.mapped) {
+         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
+         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
+         cursor.mapped = true;
+      }
+
+      let d: number | null = null;
+      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
+      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
+
+      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
+      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   };
+
+   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   };
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;
+SnapPointFinder.prototype.xAxis = "x";
+SnapPointFinder.prototype.yAxis = "y";