cx 26.2.1 → 26.2.3

package/src/charts/PieLabel.tsx

@@ -1,104 +1,122 @@
 /** @jsxImportSource react */
 
 import { VDOM } from "../ui/Widget";
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import {
+  BoundedObject,
+  BoundedObjectConfig,
+  BoundedObjectInstance,
+} from "../svg/BoundedObject";
 import { Rect } from "../svg/util/Rect";
 import { parseStyle } from "../util/parseStyle";
 import { RenderingContext } from "../ui/RenderingContext";
 import { NumberProp, StringProp, StyleProp } from "../ui/Prop";
 
 export interface PieLabelConfig extends BoundedObjectConfig {
-   /** Distance from the pie center. Default is `100`. */
-   distance?: NumberProp;
+  /** Distance from the pie center. Default is `100`. */
+  distance?: NumberProp;
 
-   /** Style for the connecting line. */
-   lineStyle?: StyleProp;
+  /** Style for the connecting line. */
+  lineStyle?: StyleProp;
 
-   /** Stroke color for the connecting line. */
-   lineStroke?: StringProp;
+  /** Stroke color for the connecting line. */
+  lineStroke?: StringProp;
 
-   /** CSS class for the connecting line. */
-   lineClass?: StringProp;
+  /** CSS class for the connecting line. */
+  lineClass?: StringProp;
 
-   /** Color index for the connecting line. */
-   lineColorIndex?: NumberProp;
+  /** Color index for the connecting line. */
+  lineColorIndex?: NumberProp;
 }
 
 export interface PieLabelInstance extends BoundedObjectInstance {
-   originalBounds: Rect;
-   actualBounds: Rect;
-   parentRect: Rect;
+  originalBounds: Rect;
+  actualBounds: Rect;
+  parentRect: Rect;
 }
 
 export class PieLabel extends BoundedObject {
-   declare baseClass: string;
-   declare distance: number;
-   declare lineStyle: any;
-
-   constructor(config: PieLabelConfig) {
-      super(config);
-   }
-
-   init(): void {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args: any[]): void {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context: RenderingContext, instance: PieLabelInstance): Rect {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context: RenderingContext, instance: PieLabelInstance): void {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context: RenderingContext, instance: PieLabelInstance): void {
-      context.pop("textDirection");
-   }
-
-   render(context: RenderingContext, instance: PieLabelInstance, key: string): React.ReactNode {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex,
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
+  declare baseClass: string;
+  declare distance: number;
+  declare lineStyle: any;
+
+  constructor(config: PieLabelConfig) {
+    super(config);
+  }
+
+  init(): void {
+    this.lineStyle = parseStyle(this.lineStyle);
+    super.init();
+  }
+
+  declareData(...args: any[]): void {
+    super.declareData(...args, {
+      distance: undefined,
+      lineStyle: { structured: true },
+      lineStroke: undefined,
+      lineClass: { structured: true },
+      lineColorIndex: undefined,
+    });
+  }
+
+  calculateBounds(context: RenderingContext, instance: PieLabelInstance): Rect {
+    var { data } = instance;
+    var bounds = Rect.add(
+      Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset),
+      data.margin,
+    );
+    instance.originalBounds = bounds;
+    instance.actualBounds = context.placePieLabel(bounds, data.distance);
+    return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+  }
+
+  prepare(context: RenderingContext, instance: PieLabelInstance): void {
+    super.prepare(context, instance);
+    if (!context.registerPieLabel)
+      throw new Error(
+        "PieLabel components are allowed only within PieLabelsContainer components.",
       );
-   }
+    let right = instance.parentRect.r > instance.parentRect.l;
+    context.push("textDirection", right ? "right" : "left");
+    context.registerPieLabel(instance);
+  }
+
+  prepareCleanup(context: RenderingContext, instance: PieLabelInstance): void {
+    context.pop("textDirection");
+    super.prepareCleanup(context, instance);
+  }
+
+  render(
+    context: RenderingContext,
+    instance: PieLabelInstance,
+    key: string,
+  ): React.ReactNode {
+    let { originalBounds, actualBounds, data } = instance;
+
+    return (
+      <g key={key} className={data.classNames}>
+        <line
+          className={this.CSS.element(
+            this.baseClass,
+            "line",
+            data.lineColorIndex != null && "color-" + data.lineColorIndex,
+          )}
+          x1={
+            actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l
+          }
+          y1={(actualBounds.t + actualBounds.b) / 2}
+          x2={(originalBounds.l + originalBounds.r) / 2}
+          y2={(originalBounds.t + originalBounds.b) / 2}
+          stroke={data.lineStroke}
+          style={data.lineStyle}
+        />
+        <g
+          transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}
+        >
+          {this.renderChildren(context, instance)}
+        </g>
+      </g>
+    );
+  }
 }
 
 PieLabel.prototype.distance = 100;

package/src/charts/Range.scss

@@ -1,20 +1,23 @@
 @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-range(
-   $name: 'range',
-   $besm: $cx-besm
-) {
+@mixin cx-range($name: "range", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
       stroke-width: 0;
-      fill-opacity: 0.3;
-      fill: lightgray;
+      fill-opacity: $cx-default-chart-range-opacity;
+      fill: $cx-default-chart-range-fill-color;
    }
 }
 
-@if (cx-should-include('cx/charts/Range')) {
+@if (cx-should-include("cx/charts/Range")) {
    @include cx-range();
-}
+}

package/src/charts/RangeMarker.tsx

@@ -1,221 +1,238 @@
 /** @jsxImportSource react */
 
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+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 {
+  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?: NumberProp;
+  /** The `x` value binding or expression. */
+  x?: Prop<number | string | null>;
 
-   /** The `y` value binding or expression. */
-   y?: NumberProp;
+  /** 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;
+  /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
+  shape?: StringProp;
 
-   /** Switch to vertical mode. */
-   vertical?: BooleanProp;
+  /** Switch to vertical mode. */
+  vertical?: BooleanProp;
 
-   /** Size of the range marker. */
-   size?: NumberProp;
+  /** Size of the range marker. */
+  size?: NumberProp;
 
-   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: 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;
+  /** Style object applied to the range marker. */
+  lineStyle?: StyleProp;
 
-   /** Class object applied to the range marker. */
-   lineClass?: StringProp;
+  /** Class object applied to the range marker. */
+  lineClass?: StringProp;
 
-   /** Size of vertical or horizontal caps. */
-   capSize?: NumberProp;
+  /** Size of vertical or horizontal caps. */
+  capSize?: NumberProp;
 
-   /** Inflate the range marker. */
-   inflate?: NumberProp;
+  /** Inflate the range marker. */
+  inflate?: NumberProp;
 
-   /** Set to `true` to allow the range marker to affect axis bounds. */
-   affectsAxes?: boolean;
+  /** 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 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;
+  /**
+   * 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;
+  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);
+  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;
       }
-
-      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);
+    } 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;
       }
-
-      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;
       }
-
-      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;
-         }
+    } 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>
-      );
-   }
+    }
+
+    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";