cx 25.11.1 → 26.0.2

package/src/charts/RangeMarker.tsx

@@ -0,0 +1,233 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Widget, VDOM } from "../ui/Widget";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface RangeMarkerConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: NumberProp;
+
+   /** The `y` value binding or expression. */
+   y?: NumberProp;
+
+   /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
+   shape?: StringProp;
+
+   /** Switch to vertical mode. */
+   vertical?: BooleanProp;
+
+   /** Size of the range marker. */
+   size?: NumberProp;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the range marker. */
+   lineStyle?: StyleProp;
+
+   /** Class object applied to the range marker. */
+   lineClass?: StringProp;
+
+   /** Size of vertical or horizontal caps. */
+   capSize?: NumberProp;
+
+   /** Inflate the range marker. */
+   inflate?: NumberProp;
+
+   /** Set to `true` to allow the range marker to affect axis bounds. */
+   affectsAxes?: boolean;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+}
+
+export interface RangeMarkerInstance extends BoundedObjectInstance {
+   axes: Record<string, any>;
+   xAxis: any;
+   yAxis: any;
+}
+
+export class RangeMarker extends BoundedObject {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare shape: string;
+   declare vertical: boolean;
+   declare size: number;
+   declare laneOffset: number;
+   declare capSize: number;
+   declare inflate: number;
+   declare affectsAxes: boolean;
+   declare lineStyle: any;
+
+   constructor(config: RangeMarkerConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         x: undefined,
+         y: undefined,
+         shape: undefined,
+         vertical: undefined,
+         size: undefined,
+         laneOffset: undefined,
+         lineStyle: { structured: true },
+         lineClass: { structured: true },
+         capSize: undefined,
+         inflate: undefined,
+      });
+   }
+
+   init(): void {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: RangeMarkerInstance): void {
+      instance.axes = context.axes;
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: RangeMarkerInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      if (this.affectsAxes) {
+         if (xAxis && data.x != null) xAxis.acknowledge(data.x, 0, 0);
+         if (yAxis && data.y != null) yAxis.acknowledge(data.y, 0, 0);
+      }
+
+      super.explore(context, instance);
+   }
+
+   calculateBounds(context: RenderingContext, instance: RangeMarkerInstance): Rect {
+      let { data, xAxis, yAxis } = instance;
+
+      let l: number, r: number, t: number, b: number;
+
+      if (data.x == null || data.y == null) {
+         return super.calculateBounds(context, instance);
+      }
+
+      if (!this.vertical) {
+         l = xAxis.map(data.x, data.laneOffset - data.size / 2) - data.inflate;
+         r = xAxis.map(data.x, data.laneOffset + data.size / 2) + data.inflate;
+         t = b = yAxis.map(data.y);
+         if (data.shape == "max") {
+            b += data.capSize;
+         } else if (data.shape == "min") {
+            t -= data.capSize;
+         }
+      } else {
+         l = r = xAxis.map(data.x);
+         t = yAxis.map(data.y, data.laneOffset - data.size / 2) + data.inflate;
+         b = yAxis.map(data.y, data.laneOffset + data.size / 2) - data.inflate;
+         if (data.shape == "max") {
+            l -= data.capSize;
+         } else if (data.shape == "min") {
+            r += data.capSize;
+         }
+      }
+
+      return new Rect({
+         l,
+         r,
+         t,
+         b,
+      });
+   }
+
+   prepare(context: RenderingContext, instance: RangeMarkerInstance): void {
+      super.prepare(context, instance);
+   }
+
+   render(context: RenderingContext, instance: RangeMarkerInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      let { CSS, baseClass } = this;
+      let { bounds, shape } = data;
+
+      let path = "";
+      if (this.vertical) {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+         }
+      } else {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.b} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               break;
+         }
+      }
+
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            <path
+               d={path}
+               className={CSS.expand(CSS.element(baseClass, "path"), data.lineClass)}
+               style={data.lineStyle}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+RangeMarker.prototype.baseClass = "rangemarker";
+RangeMarker.prototype.xAxis = "x";
+RangeMarker.prototype.yAxis = "y";
+
+RangeMarker.prototype.shape = "line";
+RangeMarker.prototype.vertical = false;
+RangeMarker.prototype.size = 1;
+RangeMarker.prototype.laneOffset = 0;
+RangeMarker.prototype.capSize = 5;
+RangeMarker.prototype.inflate = 0;
+RangeMarker.prototype.affectsAxes = true;
+
+Widget.alias("range-marker", RangeMarker);

package/src/charts/ScatterGraph.scss

@@ -1,11 +1,13 @@
+@use "sass:map";
+
 
 @mixin cx-scattergraph(
    $name: 'scattergraph',
    $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);
 
    .#{$element}#{$name}-shape {
       fill: rgb(128, 128, 128);

package/src/charts/ScatterGraph.tsx

@@ -0,0 +1,245 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { CSS } from "../ui/CSS";
+import { getShape } from "./shapes";
+import { isArray } from "../util/isArray";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { BooleanProp, NumberProp, StringProp, RecordsProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface ScatterGraphConfig extends WidgetConfig {
+   /** Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: RecordsProp;
+
+   /** Size of the scatter points. */
+   size?: NumberProp;
+
+   /** Shape of the scatter points. Default is `circle`. */
+   shape?: StringProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   /** Name of the property which holds the size value. */
+   sizeField?: string | false;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   /** Action to perform on legend item click. Default is `auto`. */
+   legendAction?: string;
+
+   /** Selection configuration. */
+   selection?: any;
+}
+
+export interface ScatterGraphInstance extends Instance {
+   xAxis: any;
+   yAxis: any;
+   colorMap: any;
+}
+
+export class ScatterGraph extends Widget {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare sizeField: string | false;
+   declare size: number;
+   declare shape: string;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare selection: Selection;
+   declare data: any;
+
+   constructor(config: ScatterGraphConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         ...args,
+         {
+            data: undefined,
+            size: undefined,
+            shape: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            active: true,
+         },
+         selection,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: ScatterGraphInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: ChartRenderingContext, instance: ScatterGraphInstance): void {
+      super.explore(context, instance);
+
+      var xAxis = (instance.xAxis = context.axes![this.xAxis]);
+      var yAxis = (instance.yAxis = context.axes![this.yAxis]);
+
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (data.active && isArray(data.data)) {
+         data.data.forEach((p: any) => {
+            xAxis.acknowledge(p[this.xField]);
+            yAxis.acknowledge(p[this.yField]);
+         });
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ScatterGraphInstance): void {
+      var { data, xAxis, yAxis, colorMap } = instance;
+
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (colorMap && data.name) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            style: data.style,
+            shape: data.shape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+
+      if (data.active) {
+         if (context.pointReducer && isArray(data.data)) {
+            data.data.forEach((p: any, index: number) => {
+               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+            });
+         }
+      }
+   }
+
+   onLegendClick(e: MouseEvent, instance: ScatterGraphInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context: RenderingContext, instance: ScatterGraphInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {this.renderData(context, instance)}
+         </g>
+      );
+   }
+
+   renderData(context: RenderingContext, instance: ScatterGraphInstance): React.ReactNode {
+      var { data, xAxis, yAxis, store } = instance;
+
+      if (!data.active) return null;
+
+      var shape = getShape(data.shape);
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return (
+         isArray(data.data) &&
+         data.data.map((p: any, i: number) => {
+            var classes = CSS.element(this.baseClass, "shape", {
+               selected: isSelected(p, i),
+               selectable: !this.selection.isDummy,
+               [`color-${data.colorIndex}`]: data.colorIndex != null,
+            });
+
+            var cx = xAxis.map(p[this.xField]),
+               cy = yAxis.map(p[this.yField]),
+               size = this.sizeField ? p[this.sizeField as string] : data.size;
+
+            return shape(cx, cy, size, {
+               key: i,
+               className: classes,
+               style: p.style || data.style,
+               onClick: (e: React.MouseEvent) => {
+                  this.handleItemClick(e, instance, i);
+               },
+            });
+         })
+      );
+   }
+
+   handleItemClick(e: React.MouseEvent, { data, store }: ScatterGraphInstance, index: number): void {
+      var bubble = data.data[index];
+      this.selection.select(store, bubble, index, {
+         toggle: e.ctrlKey,
+      });
+   }
+}
+
+ScatterGraph.prototype.baseClass = "scattergraph";
+ScatterGraph.prototype.xAxis = "x";
+ScatterGraph.prototype.yAxis = "y";
+
+ScatterGraph.prototype.xField = "x";
+ScatterGraph.prototype.yField = "y";
+ScatterGraph.prototype.sizeField = false;
+ScatterGraph.prototype.shape = "circle";
+
+ScatterGraph.prototype.size = 10;
+ScatterGraph.prototype.legend = "legend";
+ScatterGraph.prototype.legendAction = "auto";
+ScatterGraph.prototype.styled = true;
+
+Widget.alias("scatter-graph", ScatterGraph);

package/src/charts/Swimlane.scss

@@ -1,7 +1,9 @@
+@use "sass:map";
+
 @mixin cx-swimlane($name: "swimlane", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $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);
 
    .#{$element}#{$name}-lane {
       fill: $lane-color;

package/src/charts/Swimlane.tsx

@@ -0,0 +1,195 @@
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface SwimlaneConfig extends BoundedObjectConfig {
+   /** The `x` value binding or expression. */
+   x?: Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Prop<string | number>;
+
+   /** Represents a swimlane size. */
+   size?: NumberProp;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: NumberProp;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export interface SwimlaneInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+   bounds?: Rect;
+}
+
+export class Swimlane extends BoundedObject<SwimlaneConfig, SwimlaneInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+   declare size: number;
+   declare laneOffset: number;
+   declare vertical: boolean;
+   declare laneStyle: any;
+   declare CSS: any;
+
+   constructor(config?: SwimlaneConfig) {
+      super(config);
+   }
+
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         size: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+         vertical: undefined,
+         x: undefined,
+         y: undefined,
+      });
+   }
+
+   explore(context: ChartRenderingContext, instance: SwimlaneInstance) {
+      let { data } = instance;
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+
+      const d = data as any;
+      if (d.vertical) {
+         instance.xAxis.acknowledge(d.x, d.size, d.laneOffset);
+      } else {
+         instance.yAxis.acknowledge(d.y, d.size, d.laneOffset);
+      }
+   }
+
+   prepare(context: RenderingContext, instance: SwimlaneInstance) {
+      super.prepare(context, instance);
+      instance.bounds = this.calculateRect(instance);
+      instance.cache("bounds", instance.bounds);
+      if (!instance.bounds.isEqual((instance.cached as any).bounds)) instance.markShouldUpdate(context);
+
+      context.push("parentRect", instance.bounds);
+   }
+
+   calculateRect(instance: SwimlaneInstance): Rect {
+      var { data } = instance;
+      const d = data as any;
+      var { size, laneOffset } = d;
+      let bounds: Rect;
+
+      if (d.vertical) {
+         var x1 = instance.xAxis.map(d.x, laneOffset - size / 2);
+         var x2 = instance.xAxis.map(d.x, laneOffset + size / 2);
+         bounds = new Rect({
+            l: Math.min(x1, x2),
+            r: Math.max(x1, x2),
+            t: d.bounds.t,
+            b: d.bounds.b,
+         });
+      } else {
+         var y1 = instance.yAxis.map(d.y, laneOffset - size / 2);
+         var y2 = instance.yAxis.map(d.y, laneOffset + size / 2);
+         bounds = new Rect({
+            l: d.bounds.l,
+            r: d.bounds.r,
+            t: Math.min(y1, y2),
+            b: Math.max(y1, y2),
+         });
+      }
+
+      return bounds;
+   }
+
+   render(context: RenderingContext, instance: SwimlaneInstance, key: string): CxChild {
+      let { data, xAxis, yAxis, bounds } = instance;
+      let { CSS, baseClass } = this;
+      const d = data as any;
+
+      let axis = this.vertical ? xAxis : yAxis;
+      if (!axis) return null;
+
+      let min: number, max: number, valueFunction: (value: any, offset: number) => [any, number];
+      if (axis.scale) {
+         min = axis.scale.min;
+         max = axis.scale.max;
+         let clamp = (value: number): [number, number] => [Math.max(min, Math.min(max, value)), 0];
+         valueFunction = (value, offset) => clamp(value + offset);
+      } else if (axis.valueList) {
+         min = 0;
+         max = axis.valueList.length;
+         valueFunction = (value, offset) => [axis.valueList[value], offset];
+      }
+      if (!(min! < max!)) return null;
+
+      let rectClass = CSS.element(baseClass, "lane");
+
+      if (this.vertical) {
+         let c1 = axis.map(...valueFunction!(d.x, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.x, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  height={bounds!.b - bounds!.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      } else {
+         let c1 = axis.map(...valueFunction!(d.y, -d.size / 2 + d.laneOffset));
+         let c2 = axis.map(...valueFunction!(d.y, +d.size / 2 + d.laneOffset));
+         return (
+            <g key={key} className={d.classNames}>
+               <rect
+                  key={key}
+                  x={bounds!.l}
+                  y={bounds!.t}
+                  width={bounds!.r - bounds!.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={d.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      }
+   }
+}
+
+Swimlane.prototype.xAxis = "x";
+Swimlane.prototype.yAxis = "y";
+Swimlane.prototype.anchors = "0 1 1 0";
+Swimlane.prototype.baseClass = "swimlane";
+Swimlane.prototype.size = 0.5;
+Swimlane.prototype.laneOffset = 0;
+Swimlane.prototype.vertical = false;
+
+BoundedObject.alias("swimlane", Swimlane);