cx 25.11.1 → 26.0.1

package/package.json

@@ -1,11 +1,35 @@
 {
    "name": "cx",
-   "version": "25.11.1",
+   "version": "26.0.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
-   "main": "index.js",
-   "jsnext:main": "src/index.js",
+   "exports": {
+      "./data/": "./build/data/",
+      "./data": "./build/data/index.js",
+      "./util/": "./build/util/",
+      "./util": "./build/util/index.js",
+      "./widgets/": "./build/widgets/",
+      "./widgets": "./build/widgets/index.js",
+      "./ui/": "./build/ui/",
+      "./ui": "./build/ui/index.js",
+      "./hooks/": "./build/hooks/",
+      "./hooks": "./build/hooks/index.js",
+      "./svg/": "./build/svg/",
+      "./svg": "./build/svg/index.js",
+      "./charts/": "./build/charts/",
+      "./charts": "./build/charts/index.js",
+      "./jsx-runtime": "./build/jsx-runtime.js",
+      "./jsx-runtime.js": "./build/jsx-runtime.js",
+      "./src/": "./src/",
+      "./build/": "./build/",
+      "./locale/": "./build/locale/",
+      "./manifest.js": "./dist/manifest.js"
+   },
+   "sideEffects": false,
    "scripts": {
-      "build": "node build/index"
+      "build": "node build",
+      "compile": "tsc -p tsconfig.compile.json",
+      "check-types": "tsc --noEmit",
+      "test": "ts-mocha -p tsconfig.mocha.json"
    },
    "author": "Codaxy",
    "license": "MIT",
@@ -14,6 +38,7 @@
    },
    "homepage": "https://cxjs.io",
    "dependencies": {
+      "@types/route-parser": "^0.1.7",
       "intl-io": "^0.4.4",
       "route-parser": "^0.0.5"
    },
@@ -27,6 +52,15 @@
       "url": "git@github.com:codaxy/cxjs.git"
    },
    "devDependencies": {
-      "react-test-renderer": "^18.3.1"
+      "@types/jest": "^30.0.0",
+      "@types/mocha": "^10.0.10",
+      "@types/node": "^22.10.2",
+      "@types/react-dom": "^18.3.1",
+      "@types/react-test-renderer": "^18.3.1",
+      "react-test-renderer": "^18.3.1",
+      "ts-mocha": "^11.1.0",
+      "ts-node": "^10.9.2",
+      "tsconfig-paths": "^4.2.0",
+      "typescript": "^5.9.3"
    }
 }

package/src/charts/Bar.scss

@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-bar(
    $name: 'bar',
    $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}-rect {
       stroke-width: 1px;

package/src/charts/Bar.ts

@@ -0,0 +1,114 @@
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarBase, ColumnBarBaseConfig, ColumnBarBaseInstance } from "./ColumnBarBase";
+import { Rect } from "../svg/util/Rect";
+import { isDefined } from "../util/isDefined";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp } from "../ui/Prop";
+
+export interface BarConfig extends ColumnBarBaseConfig {
+   /** Base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Size (height) of the bar in axis units. */
+   size?: NumberProp;
+
+   /** Set to true to auto calculate size and offset. Available only if the y axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Alias for size. */
+   height?: number;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+}
+
+export class Bar extends ColumnBarBase {
+   declare x0: number;
+   declare size: number;
+   declare autoSize: boolean;
+   declare height: number;
+   declare hiddenBase: boolean;
+
+   constructor(config: BarConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (isDefined(this.height)) this.size = this.height;
+
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            x0: undefined,
+            size: undefined,
+            autoSize: undefined,
+         },
+         ...args,
+      );
+   }
+
+   checkValid(data: any): boolean {
+      return data.y != null && data.x != null && data.x0 != null;
+   }
+
+   explore(context: RenderingContext, instance: ColumnBarBaseInstance): void {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         yAxis.acknowledge(data.y, data.size, data.offset);
+
+         if (data.autoSize) yAxis.book(data.y, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            xAxis.stacknowledge(data.stack, data.y, data.x0);
+            xAxis.stacknowledge(data.stack, data.y, data.x);
+         } else {
+            if (!this.hiddenBase) xAxis.acknowledge(data.x0);
+            xAxis.acknowledge(data.x);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance: ColumnBarBaseInstance): Rect {
+      let { data } = instance;
+      var { offset, size } = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
+         offset = (size / count) * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+
+      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
+      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
+      var y1 = instance.yAxis.map(data.y, offset - size / 2);
+      var y2 = instance.yAxis.map(data.y, offset + size / 2);
+
+      var bounds = new Rect({
+         l: Math.min(x1, x2),
+         r: Math.max(x1, x2),
+         t: Math.min(y1, y2),
+         b: Math.max(y1, y2),
+      });
+
+      return bounds;
+   }
+}
+
+Bar.prototype.baseClass = "bar";
+Bar.prototype.x0 = 0;
+Bar.prototype.size = 1;
+Bar.prototype.autoSize = false;
+Bar.prototype.legendShape = "bar";
+Bar.prototype.hiddenBase = false;
+
+Widget.alias("bar", Bar);

package/src/charts/BarGraph.scss

@@ -1,11 +1,12 @@
+@use "sass:map";
 
 @mixin cx-bargraph(
    $name: 'bargraph',
    $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}-bar {
       stroke-width: 1px;

package/src/charts/BarGraph.tsx

@@ -0,0 +1,145 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase, ColumnBarGraphBaseConfig, ColumnBarGraphBaseInstance } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+
+export interface BarGraphConfig extends ColumnBarGraphBaseConfig {
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means x0 value is not read from the data array.
+    */
+   x0Field?: string | false;
+
+   /** Bar base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface BarGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
+
+export class BarGraph extends ColumnBarGraphBase {
+   declare x0Field: string | false;
+   declare x0: number;
+   declare hiddenBase: boolean;
+   declare tooltip: any;
+
+   constructor(config: BarGraphConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: BarGraphInstance): void {
+      super.explore(context, instance);
+
+      let { data, yAxis, xAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p: any) => {
+            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+            var y = p[this.yField];
+            var x = p[this.xField];
+
+            yAxis.acknowledge(y, data.size, data.offset);
+
+            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               xAxis.stacknowledge(data.stack, y, x0);
+               xAxis.stacknowledge(data.stack, y, x);
+            } else {
+               if (!this.hiddenBase) xAxis.acknowledge(x0);
+               xAxis.acknowledge(x);
+            }
+         });
+      }
+   }
+
+   renderGraph(context: RenderingContext, instance: BarGraphInstance): React.ReactNode {
+      var { data, yAxis, xAxis, store } = instance;
+
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p: any, i: number) => {
+         var { offset, size } = data;
+
+         var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+         var y = p[this.yField];
+         var x = p[this.xField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var y1 = yAxis.map(y, offset - size / 2);
+         var y2 = yAxis.map(y, offset + size / 2);
+         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
+         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
+
+         var color = this.colorIndexField ? p[this.colorIndexField as string] : data.colorIndex;
+         var state: Record<string, any> = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove: ((e: React.MouseEvent) => void) | undefined,
+            mleave: ((e: React.MouseEvent) => void) | undefined;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "bar", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+BarGraph.prototype.baseClass = "bargraph";
+BarGraph.prototype.x0Field = false;
+BarGraph.prototype.x0 = 0;
+BarGraph.prototype.legendShape = "bar";
+BarGraph.prototype.hiddenBase = false;
+BarGraph.prototype.borderRadius = 0;
+
+Widget.alias("bargraph", BarGraph);

package/src/charts/BubbleGraph.scss

@@ -1,11 +1,13 @@
 
+@use "sass:map";
+
 @mixin cx-bubblegraph(
    $name: 'bubblegraph',
    $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);
 
    .#{$block}#{$name} {
    }

package/src/charts/BubbleGraph.tsx

@@ -0,0 +1,165 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Selection, SimpleSelection } from "../ui/selection/Selection";
+import type { KeySelection } from "../ui/selection/KeySelection";
+import type { PropertySelection } from "../ui/selection/PropertySelection";
+import { CSS } from "../ui/CSS";
+import { isArray } from "../util/isArray";
+import { Instance } from "../ui/Instance";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, StyleProp, DataRecord } from "../ui/Prop";
+import { Create } from "../util/Component";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface BubbleGraphConfig extends WidgetConfig {
+   /** Data array for the bubbles. */
+   data?: Prop<DataRecord[]>;
+
+   /** Default bubble radius. Default is 10. */
+   bubbleRadius?: number;
+
+   /** Style object applied to all bubbles. */
+   bubbleStyle?: StyleProp;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+
+   /** Name of the field in data objects that contains x values. Default is 'x'. */
+   xField?: string;
+
+   /** Name of the field in data objects that contains y values. Default is 'y'. */
+   yField?: string;
+
+   /** Name of the field in data objects that contains radius values. Default is 'r'. */
+   rField?: string;
+
+   /** Selection configuration. */
+   selection?: Create<typeof Selection> | Create<typeof KeySelection> | Create<typeof PropertySelection> | Create<typeof SimpleSelection>;
+}
+
+export interface BubbleGraphInstance extends Instance {
+   axes: { [key: string]: any };
+}
+
+export class BubbleGraph extends Widget<BubbleGraphConfig> {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare rField: string;
+   declare bubbleRadius: number;
+   declare selection: Selection;
+   declare data?: Prop<DataRecord[]>;
+
+   constructor(config?: BubbleGraphConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         ...args,
+         {
+            data: undefined,
+            bubbleRadius: undefined,
+            bubbleStyle: {
+               structured: true,
+            },
+         },
+         selection,
+      );
+   }
+
+   init() {
+      this.selection = Selection.create(this.selection as Create<typeof Selection>, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   explore(context: ChartRenderingContext, instance: BubbleGraphInstance) {
+      instance.axes = context.axes!;
+      super.explore(context, instance);
+      var { data } = instance;
+      const d = data as any;
+      if (isArray(d.data)) {
+         d.data.forEach((p: DataRecord) => {
+            instance.axes[this.xAxis].acknowledge(p[this.xField]);
+            instance.axes[this.yAxis].acknowledge(p[this.yField]);
+         });
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: BubbleGraphInstance) {
+      super.prepare?.(context, instance);
+      if (instance.axes[this.xAxis].shouldUpdate || (instance.axes as any)[this.yAxis].shouldUpdate)
+         instance.markShouldUpdate(context);
+   }
+
+   render(context: ChartRenderingContext, instance: BubbleGraphInstance, key: string): CxChild {
+      var { data } = instance;
+      return (
+         <g key={key} className={(data as any).classNames}>
+            {this.renderData(context, instance)}
+         </g>
+      );
+   }
+
+   renderData(context: ChartRenderingContext, instance: BubbleGraphInstance): any {
+      var { data, axes, store } = instance;
+      const d = data as any;
+
+      var xAxis = (axes as any)[this.xAxis];
+      var yAxis = (axes as any)[this.yAxis];
+
+      return (
+         isArray(d.data) &&
+         d.data.map((p: DataRecord, i: number) => {
+            var selected = this.selection && this.selection.isSelected(store, p, i);
+            var classes = CSS.element(this.baseClass, "bubble", {
+               selected: selected,
+            });
+            return (
+               <circle
+                  key={i}
+                  className={classes}
+                  cx={xAxis.map(p[this.xField])}
+                  cy={yAxis.map(p[this.yField])}
+                  r={(p as any)[this.rField] || d.bubbleRadius}
+                  style={(p as any).style || d.bubbleStyle}
+                  onClick={(e) => {
+                     this.onBubbleClick(e, instance, i);
+                  }}
+               />
+            );
+         })
+      );
+   }
+
+   onBubbleClick(e: React.MouseEvent, instance: BubbleGraphInstance, index: number) {
+      const { data, store } = instance;
+      const d = data as any;
+      var bubble = d.data[index];
+      this.selection.select(store, bubble, index, {
+         toggle: e.ctrlKey,
+      });
+   }
+}
+
+BubbleGraph.prototype.baseClass = "bubblegraph";
+BubbleGraph.prototype.xAxis = "x";
+BubbleGraph.prototype.yAxis = "y";
+
+BubbleGraph.prototype.xField = "x";
+BubbleGraph.prototype.yField = "y";
+BubbleGraph.prototype.rField = "r";
+
+BubbleGraph.prototype.bubbleRadius = 10;
+
+Widget.alias("bubble-graph", BubbleGraph);

package/src/charts/Chart.ts

@@ -0,0 +1,108 @@
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
+import type { NumericAxis } from "./axis/NumericAxis";
+import type { CategoryAxis } from "./axis/CategoryAxis";
+import type { TimeAxis } from "./axis/TimeAxis";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Create } from "../util/Component";
+
+/** Typed context interface for chart-related context properties */
+export interface ChartRenderingContext extends SvgRenderingContext {
+   axes?: Record<string, any>;
+}
+
+export interface ChartConfig extends BoundedObjectConfig {
+   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
+   axes?: Record<
+      string,
+      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
+   >;
+
+   /** Put axes over data series. */
+   axesOnTop?: boolean;
+}
+
+export interface ChartInstance extends BoundedObjectInstance {
+   calculators: Record<string, any>;
+   axes: Record<string, any>;
+}
+
+export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
+   declare axes: Record<string, any>;
+   declare axesOnTop: boolean;
+
+   constructor(config?: ChartConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+
+      if (!this.axes) this.axes = {};
+
+      for (let axis in this.axes) {
+         this.axes[axis] = Axis.create(this.axes[axis]);
+      }
+   }
+
+   explore(context: ChartRenderingContext, instance: ChartInstance): void {
+      instance.calculators = { ...context.axes };
+
+      context.push("axes", instance.calculators);
+      instance.axes = {};
+
+      //axes need to be registered before children to be processed first
+      for (let axis in this.axes) {
+         let axisInstance = instance.getChild(context, this.axes[axis]);
+         if (axisInstance.scheduleExploreIfVisible(context)) {
+            instance.axes[axis] = axisInstance;
+            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.push("axes", instance.calculators);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+      super.prepareCleanup(context, instance);
+   }
+
+   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
+      let axes = [];
+      for (let k in instance.axes) {
+         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
+      }
+
+      let result = [];
+
+      if (!this.axesOnTop) result.push(axes);
+
+      result.push(this.renderChildren(context, instance));
+
+      if (this.axesOnTop) result.push(axes);
+
+      return result;
+   }
+}
+
+Chart.prototype.anchors = "0 1 1 0";
+Chart.prototype.styled = true;
+Chart.prototype.isPureContainer = true;
+Chart.prototype.axesOnTop = false;
+
+Widget.alias("chart", Chart);