cx 26.4.0 → 26.4.2

package/src/charts/ScatterGraph.tsx

@@ -1,245 +1,245 @@
-/** @jsxImportSource react */
-
-import { CSS } from "../ui/CSS";
-import { Instance } from "../ui/Instance";
-import { BooleanProp, NumberProp, RecordsProp, StringProp } from "../ui/Prop";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
-import { isArray } from "../util/isArray";
-import type { ChartRenderingContext } from "./Chart";
-import { getShape } from "./shapes";
-
-export interface ScatterGraphConfig extends WidgetConfig, WidgetStyleConfig {
-   /** 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);
+/** @jsxImportSource react */
+
+import { CSS } from "../ui/CSS";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, NumberProp, RecordsProp, StringProp } from "../ui/Prop";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { isArray } from "../util/isArray";
+import type { ChartRenderingContext } from "./Chart";
+import { getShape } from "./shapes";
+
+export interface ScatterGraphConfig extends WidgetConfig, WidgetStyleConfig {
+   /** 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,19 +1,19 @@
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "./variables" as *;
-
-@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);
-
-   .#{$element}#{$name}-lane {
-      fill: $lane-color;
-      stroke: none;
-   }
-}
-
-@if (cx-should-include("cx/charts/Swimlane")) {
-   @include cx-swimlane();
-}
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
+
+@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);
+
+   .#{$element}#{$name}-lane {
+      fill: $lane-color;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/charts/Swimlane")) {
+   @include cx-swimlane();
+}