cx 25.10.1 → 26.0.1

package/src/charts/axis/index.scss

@@ -1,5 +1,5 @@
-
-@import 'Axis';
-@import "NumericAxis";
-@import "CategoryAxis";
-@import "TimeAxis";
+
+@import 'Axis';
+@import "NumericAxis";
+@import "CategoryAxis";
+@import "TimeAxis";

package/src/charts/axis/index.ts

@@ -0,0 +1,4 @@
+export * from "./Axis";
+export * from "./NumericAxis";
+export * from "./CategoryAxis";
+export * from "./TimeAxis";

package/src/charts/axis/variables.scss

@@ -1,3 +1,3 @@
-
-$cx-axis-line-stroke: rgba(128, 128, 128, 0.2) !default;
+
+$cx-axis-line-stroke: rgba(128, 128, 128, 0.2) !default;
 $cx-axis-ticks-stroke: rgba(128, 128, 128, 0.3) !default;

package/src/charts/helpers/MinMaxFinder.ts

@@ -0,0 +1,66 @@
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { Bind, StructuredProp } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface MinMaxAccumulator extends PointReducerAccumulator {
+   params: any;
+   min: { x: any; y: any; p?: any };
+   max: { x: any; y: any; p?: any };
+}
+
+export interface MinMaxFinderConfig extends PointReducerConfig {
+   /** A binding used to receive the x value of the point with the minimum value */
+   minX?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the y value of the point with the minimum value */
+   minY?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the x value of the point with the maximum value */
+   maxX?: Bind | AccessorChain<number>;
+
+   /** A binding used to receive the y value of the point with the maximum value */
+   maxY?: Bind | AccessorChain<number>;
+
+   /** An object used for filtering data points. Available as accumulator.params inside the onMap function. */
+   params?: StructuredProp;
+}
+
+/** Find minimum and maximum points of a point series */
+export class MinMaxFinder extends PointReducer<MinMaxAccumulator> {
+   constructor(config?: MinMaxFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         minX: undefined,
+         minY: undefined,
+         maxX: undefined,
+         maxY: undefined,
+         params: {
+            structured: true,
+         },
+      });
+   }
+
+   onInitAccumulator = (acc: MinMaxAccumulator, { data }: PointReducerInstance<MinMaxAccumulator>) => {
+      acc.params = (data as any).params;
+      acc.min = { x: null, y: null };
+      acc.max = { x: null, y: null };
+   };
+
+   onMap = (acc: MinMaxAccumulator, x: any, y: any, name: string, p: any) => {
+      if (y != null && (acc.max.y == null || acc.max.y < y)) acc.max = { x, y, p };
+
+      if (y != null && (acc.min.y == null || acc.min.y > y)) acc.min = { x, y, p };
+   };
+
+   onReduce = (acc: MinMaxAccumulator, instance: PointReducerInstance<MinMaxAccumulator>) => {
+      instance.set("minX", acc.min.x);
+      instance.set("minY", acc.min.y);
+      instance.set("minRecord", acc.min.p);
+      instance.set("maxX", acc.max.x);
+      instance.set("maxY", acc.max.y);
+      instance.set("maxRecord", acc.max.p);
+   };
+}

package/src/charts/helpers/PointReducer.ts

@@ -0,0 +1,135 @@
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { DataRecord, StructuredProp } from "../../ui/Prop";
+
+export type PointReducerFunction = (
+   x: any,
+   y: any,
+   name: string,
+   data: any,
+   array?: any[],
+   index?: number
+) => void;
+
+export interface PointReducerAccumulator {
+   [key: string]: any;
+}
+
+export interface PointReducerInstance<TAccumulator extends PointReducerAccumulator = PointReducerAccumulator>
+   extends Instance {
+   resetAccumulator: () => void;
+   pointFilter?: (x: any, y: any, name: string, data: any, array?: any[], index?: number) => boolean;
+   accumulator?: TAccumulator;
+   parentPointTracker?: PointReducerFunction;
+   pointReducer?: PointReducerFunction;
+   write?: () => void;
+}
+
+export interface PointReducerConfig extends PureContainerConfig {
+   /** A callback function used to initialize the accumulator. */
+   onInitAccumulator?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+
+   /** A callback function used to collect information about all data points. */
+   onMap?:
+      | string
+      | ((accumulator: DataRecord, x?: any, y?: any, name?: string, data?: any, array?: any[], index?: number) => void);
+
+   /** A callback function used to process accumulated information and write results. */
+   onReduce?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+
+   /** Parameters that trigger filter predicate re-creation. */
+   filterParams?: StructuredProp;
+
+   /** A callback function used to create a predicate for filtering points. */
+   onCreatePointFilter?:
+      | string
+      | ((
+           filterParams: any,
+           instance: Instance
+        ) => (x: number, y: number, name: string, data: any, array?: any[], index?: number) => boolean);
+}
+
+export class PointReducer<
+   TAccumulator extends PointReducerAccumulator = PointReducerAccumulator,
+> extends PureContainerBase<PointReducerConfig, PointReducerInstance<TAccumulator>> {
+   declare onCreatePointFilter?: PointReducerConfig["onCreatePointFilter"];
+   // These can be either config properties (string/function) or overridden methods in subclasses
+   declare onInitAccumulator?: (acc: TAccumulator, instance: PointReducerInstance<TAccumulator>) => void;
+   declare onMap?: (
+      acc: TAccumulator,
+      x: any,
+      y: any,
+      name: string,
+      data?: any,
+      array?: any[],
+      index?: number
+   ) => void;
+   declare onReduce?: (acc: TAccumulator, instance: PointReducerInstance<TAccumulator>) => void;
+
+   constructor(config?: PointReducerConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         filterParams: {
+            structured: true,
+         },
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      super.prepareData(context, instance);
+
+      instance.resetAccumulator = () => {
+         let accumulator = {} as TAccumulator;
+         if (this.onInitAccumulator) {
+            instance.invoke("onInitAccumulator", accumulator, instance);
+            instance.accumulator = accumulator;
+         }
+      };
+
+      if (this.onCreatePointFilter)
+         instance.pointFilter = instance.invoke(
+            "onCreatePointFilter",
+            (instance.data as any).filterParams,
+            instance
+         ) as PointReducerInstance<TAccumulator>["pointFilter"];
+   }
+
+   explore(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      instance.resetAccumulator();
+
+      let parentPointReducer = context.pointReducer as PointReducerFunction | undefined;
+      instance.parentPointTracker = parentPointReducer;
+
+      let pointFilter = instance.pointFilter;
+      let accumulator = instance.accumulator;
+      let onMap = this.onMap && instance.getCallback("onMap");
+      instance.pointReducer = (x, y, name, data, array, index) => {
+         if (!pointFilter || pointFilter(x, y, name, data, array, index))
+            onMap?.(accumulator, x, y, name, data, array, index);
+         if (parentPointReducer) parentPointReducer(x, y, name, data, array, index);
+      };
+      instance.write = () => {
+         if (this.onReduce) instance.invoke("onReduce", accumulator, instance);
+      };
+
+      context.push("pointReducer", instance.pointReducer);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.pop("pointReducer");
+   }
+
+   prepare(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.push("pointReducer", instance.pointReducer);
+   }
+
+   prepareCleanup(context: RenderingContext, instance: PointReducerInstance<TAccumulator>) {
+      context.pop("pointReducer");
+      instance.write?.();
+   }
+}

package/src/charts/helpers/SnapPointFinder.ts

@@ -0,0 +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> | AccessorChain<string>;
+
+   /** A binding used to receive the y value of the nearest point. */
+   snapY?: Bind | AccessorChain<number> | AccessorChain<string>;
+
+   /** 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";

package/src/charts/helpers/ValueAtFinder.ts

@@ -0,0 +1,72 @@
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { NumberProp, StringProp, Bind } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface ValueAtAccumulator extends PointReducerAccumulator {
+   at: number;
+   left?: { x: number; y: number; d: number };
+   right?: { x: number; y: number; d: number };
+}
+
+export interface ValueAtFinderConfig extends PointReducerConfig {
+   /** X axis probe value. */
+   at?: NumberProp | StringProp;
+
+   /** A binding used to receive the measured y axis value */
+   value?: Bind | AccessorChain<number>;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convert?: (value: number | string) => number;
+}
+
+/** Calculate value at a given point on the graph */
+export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
+   declare convert: (value: any) => number;
+
+   constructor(config?: ValueAtFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         at: undefined,
+         value: undefined,
+      });
+   }
+
+   onInitAccumulator = (acc: ValueAtAccumulator, { data }: PointReducerInstance<ValueAtAccumulator>) => {
+      acc.at = this.convert((data as any).at);
+   };
+
+   onMap = (acc: ValueAtAccumulator, x: any, y: any, name: string) => {
+      let cx = this.convert(x);
+      let d = cx - acc.at;
+      if (d <= 0 && (!acc.left || acc.left.d < d)) {
+         acc.left = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+      if (d >= 0 && (!acc.right || acc.right.d > d)) {
+         acc.right = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+   };
+
+   onReduce = (acc: ValueAtAccumulator, instance: PointReducerInstance<ValueAtAccumulator>) => {
+      let y: number | null = null;
+      if (acc.left && acc.right) {
+         if (acc.left.x == acc.right.x) y = acc.left.y;
+         else if (acc.left.y != null && acc.right.y != null) {
+            y = acc.left.y + ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) / (acc.right.x - acc.left.x);
+         }
+      }
+      instance.set("value", y);
+   };
+}
+
+ValueAtFinder.prototype.convert = (x) => x;

package/src/charts/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from "./PointReducer";
+export * from "./MinMaxFinder";
+export * from "./SnapPointFinder";
+export * from "./ValueAtFinder";

package/src/charts/index.scss

@@ -1,22 +1,22 @@
-@import "axis/index";
-
-@import "PieChart";
-@import "Legend";
-@import "LegendEntry";
-@import "Gridlines";
-@import "Swimlanes";
-@import "Column";
-@import "Bar";
-@import "LineGraph";
-@import "ColumnGraph";
-@import "BarGraph";
-@import "ScatterGraph";
-@import "BubbleGraph";
-@import "Marker";
-@import "MarkerLine";
-@import "Range";
-@import "RangeMarker";
-@import "Swimlane";
-
-//define last for higher priority
-@import "palette";
+@import "axis/index";
+
+@import "PieChart";
+@import "Legend";
+@import "LegendEntry";
+@import "Gridlines";
+@import "Swimlanes";
+@import "Column";
+@import "Bar";
+@import "LineGraph";
+@import "ColumnGraph";
+@import "BarGraph";
+@import "ScatterGraph";
+@import "BubbleGraph";
+@import "Marker";
+@import "MarkerLine";
+@import "Range";
+@import "RangeMarker";
+@import "Swimlane";
+
+//define last for higher priority
+@import "palette";

package/src/charts/palette.scss

@@ -3,6 +3,8 @@
 //hover:100 700
 //selected: 300 900
 //disabled: 0 100
+@use "sass:map";
+@use "sass:list";
 
 $cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
    rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
@@ -36,12 +38,12 @@ $cx-default-palette-stroke-blacken: 10% !default;
    $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
-   @for $i from 1 through length($palette-colors) {
-      $c: nth($palette-colors, 1 + (($i - 1) * 1) % length($palette-colors));
+   @for $i from 1 through list.length($palette-colors) {
+      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
 
       .#{$state}color-#{$i - 1} {
          $fill: cx-blacken(cx-whiten($c, $palette-fill-whiten), $palette-fill-blacken);

package/src/charts/shapes.tsx

@@ -0,0 +1,86 @@
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { debug } from "../util/Debug";
+import { Config } from "../ui/Prop";
+
+export type ShapeRender = (
+   cx: number,
+   cy: number,
+   size: number,
+   props?: Config,
+   options?: Config
+) => React.ReactElement;
+
+var shapes: { [key: string]: ShapeRender } = {};
+var warnings: { [key: string]: boolean } = {};
+
+export function registerShape(name: string, callback: ShapeRender): void {
+   shapes[name] = callback;
+}
+
+export function getShape(shapeName: string): ShapeRender {
+   if (shapes[shapeName]) return shapes[shapeName];
+
+   if (!warnings[shapeName]) {
+      warnings[shapeName] = true;
+      debug(`Unknown shape '${shapeName}'. Using square instead.`);
+   }
+
+   return shapes["square"];
+}
+
+export function getAvailableShapes(): string[] {
+   return Object.keys(shapes);
+}
+
+export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+}
+registerShape("circle", circle);
+
+export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+}
+registerShape("square", square);
+registerShape("rect", square);
+
+export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+}
+registerShape("bar", bar);
+
+export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+}
+registerShape("column", column);
+
+export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+}
+registerShape("line", line);
+registerShape("hline", line);
+
+export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+}
+registerShape("vline", vline);
+
+export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 1.29;
+   var d = "";
+   var cos = Math.cos(Math.PI / 6);
+   var sin = Math.sin(Math.PI / 6);
+   d += `M ${cx} ${cy - size / 2} `;
+   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `Z`;
+   return <path {...props} d={d} />;
+}
+
+registerShape("triangle", triangle);

package/src/charts/variables.scss

@@ -1,9 +1,10 @@
+@use "sass:map";
 @import "axis/variables";
 
 $cx-default-swimlanes-lane-background-color: #f1f1f1;
 $cx-default-range-marker-color: #696969;
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/charts/Bar": "cx/charts/palette",