cx 26.4.0 → 26.4.2

package/src/charts/RangeMarker.tsx

@@ -1,250 +1,250 @@
-/** @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,
-  Prop,
-} from "../ui/Prop";
-import type { ChartRenderingContext } from "./Chart";
-
-export interface RangeMarkerConfig extends BoundedObjectConfig {
-  /** The `x` value binding or expression. */
-  x?: Prop<number | string | null>;
-
-  /** The `y` value binding or expression. */
-  y?: Prop<number | string | null>;
-
-  /** 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);
+/** @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,
+  Prop,
+} from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface RangeMarkerConfig extends BoundedObjectConfig {
+  /** The `x` value binding or expression. */
+  x?: Prop<number | string | null>;
+
+  /** The `y` value binding or expression. */
+  y?: Prop<number | string | null>;
+
+  /** 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,27 +1,27 @@
-@use "sass:map";
-@use "sass:math";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-scattergraph($name: "scattergraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-marker-color;
-      stroke-width: $cx-default-chart-marker-stroke-width;
-      opacity: 0.8;
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/ScatterGraph")) {
-   @include cx-scattergraph();
-}
+@use "sass:map";
+@use "sass:math";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-scattergraph($name: "scattergraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-marker-color;
+      stroke-width: $cx-default-chart-marker-stroke-width;
+      opacity: 0.8;
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/ScatterGraph")) {
+   @include cx-scattergraph();
+}