cx 26.3.10 → 26.4.0

package/src/charts/BubbleGraph.tsx

@@ -1,165 +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);
+/** @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

@@ -1,110 +1,110 @@
-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();
-
-      // Clone axes to avoid mutating the original config
-      let axesConfig = this.axes || {};
-      this.axes = {};
-
-      for (let axis in axesConfig) {
-         this.axes[axis] = Axis.create(axesConfig[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);
+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();
+
+      // Clone axes to avoid mutating the original config
+      let axesConfig = this.axes || {};
+      this.axes = {};
+
+      for (let axis in axesConfig) {
+         this.axes[axis] = Axis.create(axesConfig[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);