cx 26.2.1 → 26.2.3

package/src/charts/LegendEntry.scss

@@ -1,29 +1,35 @@
-@use "sass:map";
-
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: 5px;
-      gap: 5px;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: #eee;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@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-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,25 +1,28 @@
-@use "sass:map";
-
-@mixin cx-linegraph(
-   $name: 'linegraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: gray;
-      stroke-width: 2px;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: 0.5;
-   }
-}
-
-@if (cx-should-include('cx/charts/LineGraph')) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@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-linegraph($name: "linegraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}

package/src/charts/Marker.scss

@@ -1,18 +1,20 @@
-
+@use "sass:math";
 @use "sass:map";
+@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-marker(
-   $name: 'marker',
-   $besm: $cx-besm
-) {
+@mixin cx-marker($name: "marker", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-shape {
-      fill: rgb(128, 128, 128);
-      stroke: rgb(128, 128, 128);
-      stroke-width: 1px;
+      fill: $cx-default-chart-marker-color;
+      stroke: $cx-default-chart-marker-color;
+      stroke-width: $cx-default-chart-marker-stroke-width;
 
       .#{$state}draggable-x > & {
          cursor: ew-resize;
@@ -39,6 +41,6 @@
    }
 }
 
-@if (cx-should-include('cx/charts/Marker')) {
+@if (cx-should-include("cx/charts/Marker")) {
    @include cx-marker();
-}
+}

package/src/charts/Marker.tsx

@@ -31,16 +31,17 @@ import {
   BooleanProp,
   StringProp,
   StructuredProp,
+  Prop,
 } from "../ui/Prop";
 import { Instance } from "../ui/Instance";
 import type { ChartRenderingContext } from "./Chart";
 
 export interface MarkerConfig extends BoundedObjectConfig {
   /** The `x` value binding or expression. */
-  x?: NumberProp | StringProp;
+  x?: Prop<number | string | Date | null>;
 
   /** The `y` value binding or expression. */
-  y?: NumberProp | StringProp;
+  y?: Prop<number | string | Date | null>;
 
   /** Used to indicate if the data should affect axis span. */
   affectsAxes?: boolean;

package/src/charts/MarkerLine.scss

@@ -1,20 +1,23 @@
+@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 *;
 
 @use "sass:map";
 
-@mixin cx-markerline(
-   $name: 'markerline',
-   $besm: $cx-besm
-) {
+@mixin cx-markerline($name: "markerline", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-line {
-      stroke: rgb(128, 128, 128);
-      stroke-width: 1px;
+      stroke: $cx-default-chart-marker-color;
+      stroke-width: $cx-default-chart-markerline-stroke-width;
    }
 }
 
-@if (cx-should-include('cx/charts/MarkerLine')) {
+@if (cx-should-include("cx/charts/MarkerLine")) {
    @include cx-markerline();
-}
+}

package/src/charts/MarkerLine.tsx

@@ -1,214 +1,233 @@
 /** @jsxImportSource react */
 
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import {
+  BoundedObject,
+  BoundedObjectConfig,
+  BoundedObjectInstance,
+} from "../svg/BoundedObject";
 import { VDOM } from "../ui/Widget";
 import { isDefined } from "../util/isDefined";
 import { Rect } from "../svg/util/Rect";
 import { RenderingContext } from "../ui/RenderingContext";
-import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import { NumberProp, BooleanProp, StringProp, Prop } from "../ui/Prop";
 import type { ChartRenderingContext } from "./Chart";
 
 export interface MarkerLineConfig extends BoundedObjectConfig {
-   /** X coordinate for vertical line. */
-   x?: NumberProp;
+  /** X coordinate for vertical line. */
+  x?: Prop<string | number | Date | null>;
 
-   /** Y coordinate for horizontal line. */
-   y?: NumberProp;
+  /** Y coordinate for horizontal line. */
+  y?: Prop<string | number | Date | null>;
 
-   /** Starting X coordinate. */
-   x1?: NumberProp;
+  /** Starting X coordinate. */
+  x1?: Prop<string | number | Date | null>;
 
-   /** Starting Y coordinate. */
-   y1?: NumberProp;
+  /** Starting Y coordinate. */
+  y1?: Prop<string | number | Date | null>;
 
-   /** Ending X coordinate. */
-   x2?: NumberProp;
+  /** Ending X coordinate. */
+  x2?: Prop<string | number | Date | null>;
 
-   /** Ending Y coordinate. */
-   y2?: NumberProp;
+  /** Ending Y coordinate. */
+  y2?: Prop<string | number | Date | null>;
 
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: NumberProp;
+  /** Index of a color from the standard palette of colors. 0-15. */
+  colorIndex?: NumberProp;
 
-   /** Used to indicate if the line is active or not. */
-   active?: BooleanProp;
+  /** Used to indicate if the line is active or not. */
+  active?: BooleanProp;
 
-   /** Name of the line as it will appear in the legend. */
-   name?: StringProp;
+  /** Name of the line as it will appear in the legend. */
+  name?: StringProp;
 
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: StringProp;
+  /** Name of the legend to be used. Default is `legend`. */
+  legend?: StringProp;
 
-   /** Name of the horizontal axis. Default value is `x`. */
-   xAxis?: string;
+  /** 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 vertical axis. Default value is `y`. */
+  yAxis?: string;
 
-   /** Set to `false` to prevent the line from affecting axis bounds. */
-   affectsAxes?: boolean;
+  /** Set to `false` to prevent the line from affecting axis bounds. */
+  affectsAxes?: boolean;
 
-   /** Action to perform on legend item click. Default is `auto`. */
-   legendAction?: string;
+  /** Action to perform on legend item click. Default is `auto`. */
+  legendAction?: string;
 }
 
 export interface MarkerLineInstance extends BoundedObjectInstance {
-   xAxis: any;
-   yAxis: any;
-   x1: number;
-   y1: number;
-   x2: number;
-   y2: number;
+  xAxis: any;
+  yAxis: any;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
 }
 
 export class MarkerLine extends BoundedObject {
-   declare baseClass: string;
-   declare xAxis: string;
-   declare yAxis: string;
-   declare legend: string;
-   declare legendAction: string;
-   declare affectsAxes: boolean;
-   declare x: number;
-   declare y: number;
-   declare x1: number;
-   declare x2: number;
-   declare y1: number;
-   declare y2: number;
-
-   constructor(config: MarkerLineConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (isDefined(this.x)) this.x1 = this.x2 = this.x;
-
-      if (isDefined(this.y)) this.y1 = this.y2 = this.y;
-
-      super.init();
-   }
-
-   declareData(...args: any[]): void {
-      super.declareData(...args, {
-         x1: undefined,
-         y1: undefined,
-         x2: undefined,
-         y2: undefined,
-         colorIndex: undefined,
-         active: true,
-         name: undefined,
-         legend: undefined
-      });
-   }
-
-   explore(context: RenderingContext, instance: MarkerLineInstance): void {
-      let { data } = instance;
-
-      let xAxis = (instance.xAxis = context.axes[this.xAxis]);
-      let yAxis = (instance.yAxis = context.axes[this.yAxis]);
+  declare baseClass: string;
+  declare xAxis: string;
+  declare yAxis: string;
+  declare legend: string;
+  declare legendAction: string;
+  declare affectsAxes: boolean;
+  declare x: number;
+  declare y: number;
+  declare x1: number;
+  declare x2: number;
+  declare y1: number;
+  declare y2: number;
+
+  constructor(config: MarkerLineConfig) {
+    super(config);
+  }
+
+  init(): void {
+    if (isDefined(this.x)) this.x1 = this.x2 = this.x;
+
+    if (isDefined(this.y)) this.y1 = this.y2 = this.y;
+
+    super.init();
+  }
+
+  declareData(...args: any[]): void {
+    super.declareData(...args, {
+      x1: undefined,
+      y1: undefined,
+      x2: undefined,
+      y2: undefined,
+      colorIndex: undefined,
+      active: true,
+      name: undefined,
+      legend: undefined,
+    });
+  }
+
+  explore(context: RenderingContext, instance: MarkerLineInstance): void {
+    let { data } = instance;
+
+    let xAxis = (instance.xAxis = context.axes[this.xAxis]);
+    let yAxis = (instance.yAxis = context.axes[this.yAxis]);
+
+    if (data.active) {
+      if (this.affectsAxes) {
+        if (data.x1 != null) xAxis.acknowledge(data.x1);
+
+        if (data.x2 != null) xAxis.acknowledge(data.x2);
+
+        if (data.y1 != null) yAxis.acknowledge(data.y1);
+
+        if (data.y2 != null) yAxis.acknowledge(data.y2);
+      }
 
-      if (data.active) {
-         if (this.affectsAxes) {
-            if (data.x1 != null) xAxis.acknowledge(data.x1);
+      super.explore(context, instance);
+    }
+  }
 
-            if (data.x2 != null) xAxis.acknowledge(data.x2);
+  prepare(context: RenderingContext, instance: MarkerLineInstance): void {
+    let { data, xAxis, yAxis } = instance;
 
-            if (data.y1 != null) yAxis.acknowledge(data.y1);
+    if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
+      instance.markShouldUpdate(context);
 
-            if (data.y2 != null) yAxis.acknowledge(data.y2);
-         }
+    super.prepare(context, instance);
 
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context: RenderingContext, instance: MarkerLineInstance): void {
-      let { data, xAxis, yAxis } = instance;
-
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
-
-      super.prepare(context, instance);
-
-      if (data.name && data.legend && context.addLegendEntry)
-         context.addLegendEntry(data.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            style: data.style,
-            shape: "line",
-            onClick: (e: MouseEvent) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   calculateBounds(context: RenderingContext, instance: MarkerLineInstance): Rect {
-      let { data, xAxis, yAxis } = instance;
-      let bounds = super.calculateBounds(context, instance);
-
-      let x1 = bounds.l,
-         x2 = bounds.r,
-         y1 = bounds.t,
-         y2 = bounds.b;
-
-      if (data.x1 != null) x1 = xAxis.map(data.x1);
-
-      if (data.x2 != null) x2 = xAxis.map(data.x2);
-
-      if (data.y1 != null) y1 = yAxis.map(data.y1);
-
-      if (data.y2 != null) y2 = yAxis.map(data.y2);
-
-      bounds.l = Math.min(x1, x2);
-      bounds.t = Math.min(y1, y2);
-      bounds.r = Math.max(x1, x2);
-      bounds.b = Math.max(y1, y2);
-
-      instance.x1 = x1;
-      instance.x2 = x2;
-      instance.y1 = y1;
-      instance.y2 = y2;
-
-      return bounds;
-   }
-
-   onLegendClick(e: MouseEvent, instance: MarkerLineInstance): void {
-      let allActions = this.legendAction == "auto";
-      let { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   render(context: RenderingContext, instance: MarkerLineInstance, key: string): React.ReactNode {
-      let { data, x1, x2, y1, y2 } = instance;
-
-      if (!data.active || data.x1 === null || data.x2 === null || data.y1 === null || data.y2 === null) return null;
-
-      let stateMods: Record<string, boolean> = {
-         ["color-" + data.colorIndex]: data.colorIndex != null,
-      };
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(this.baseClass, "line", stateMods)}
-               style={data.style}
-               x1={x1}
-               y1={y1}
-               x2={x2}
-               y2={y2}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
+    if (data.name && data.legend && context.addLegendEntry)
+      context.addLegendEntry(data.legend, {
+        name: data.name,
+        active: data.active,
+        colorIndex: data.colorIndex,
+        style: data.style,
+        shape: "line",
+        onClick: (e: MouseEvent) => {
+          this.onLegendClick(e, instance);
+        },
+      });
+  }
+
+  calculateBounds(
+    context: RenderingContext,
+    instance: MarkerLineInstance,
+  ): Rect {
+    let { data, xAxis, yAxis } = instance;
+    let bounds = super.calculateBounds(context, instance);
+
+    let x1 = bounds.l,
+      x2 = bounds.r,
+      y1 = bounds.t,
+      y2 = bounds.b;
+
+    if (data.x1 != null) x1 = xAxis.map(data.x1);
+
+    if (data.x2 != null) x2 = xAxis.map(data.x2);
+
+    if (data.y1 != null) y1 = yAxis.map(data.y1);
+
+    if (data.y2 != null) y2 = yAxis.map(data.y2);
+
+    bounds.l = Math.min(x1, x2);
+    bounds.t = Math.min(y1, y2);
+    bounds.r = Math.max(x1, x2);
+    bounds.b = Math.max(y1, y2);
+
+    instance.x1 = x1;
+    instance.x2 = x2;
+    instance.y1 = y1;
+    instance.y2 = y2;
+
+    return bounds;
+  }
+
+  onLegendClick(e: MouseEvent, instance: MarkerLineInstance): void {
+    let allActions = this.legendAction == "auto";
+    let { data } = instance;
+    if (allActions || this.legendAction == "toggle")
+      instance.set("active", !data.active);
+  }
+
+  render(
+    context: RenderingContext,
+    instance: MarkerLineInstance,
+    key: string,
+  ): React.ReactNode {
+    let { data, x1, x2, y1, y2 } = instance;
+
+    if (
+      !data.active ||
+      data.x1 === null ||
+      data.x2 === null ||
+      data.y1 === null ||
+      data.y2 === null
+    )
+      return null;
+
+    let stateMods: Record<string, boolean> = {
+      ["color-" + data.colorIndex]: data.colorIndex != null,
+    };
+
+    return (
+      <g key={key} className={data.classNames}>
+        <line
+          className={this.CSS.element(this.baseClass, "line", stateMods)}
+          style={data.style}
+          x1={x1}
+          y1={y1}
+          x2={x2}
+          y2={y2}
+        />
+        {this.renderChildren(context, instance)}
+      </g>
+    );
+  }
 }
 
-MarkerLine.prototype.xAxis = 'x';
-MarkerLine.prototype.yAxis = 'y';
-MarkerLine.prototype.anchors = '0 1 1 0';
-MarkerLine.prototype.baseClass = 'markerline';
-MarkerLine.prototype.legend = 'legend';
-MarkerLine.prototype.legendAction = 'auto';
+MarkerLine.prototype.xAxis = "x";
+MarkerLine.prototype.yAxis = "y";
+MarkerLine.prototype.anchors = "0 1 1 0";
+MarkerLine.prototype.baseClass = "markerline";
+MarkerLine.prototype.legend = "legend";
+MarkerLine.prototype.legendAction = "auto";
 MarkerLine.prototype.affectsAxes = true;
 
-BoundedObject.alias('marker-line', MarkerLine);
-
+BoundedObject.alias("marker-line", MarkerLine);

package/src/charts/PieChart.scss

@@ -1,29 +1,32 @@
+@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 *;
 
 @use "sass:map";
 
-@mixin cx-pieslice(
-   $name: 'pieslice',
-   $besm: $cx-besm
-) {
+@mixin cx-pieslice($name: "pieslice", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-slice {
       stroke-width: 0;
-      fill: #eee;
-      stroke: #ccc;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
 
       &.#{$state}selectable {
          cursor: pointer;
       }
 
       &.#{$state}selected {
-         stroke-width: 2px;
+         stroke-width: $cx-default-chart-selected-stroke-width;
       }
    }
 }
 
-@if (cx-should-include('cx/charts/PieSlice')) {
+@if (cx-should-include("cx/charts/PieSlice")) {
    @include cx-pieslice();
-}
+}