cx 26.3.9 → 26.4.0

package/src/charts/palette.scss

@@ -1,77 +1,77 @@
-// Use root entry points to get configured values
-@use "../variables" as *;
-@use "../util/scss/calc.scss" as *;
-@use "sass:map";
-@use "sass:list";
-
-@mixin cx-palette(
-   $palette-colors: $cx-default-palette-colors,
-   $palette-fill-whiten: $cx-default-palette-fill-whiten,
-   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
-   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
-   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
-   $palette-fill-blacken: $cx-default-palette-fill-blacken,
-   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
-   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
-   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
-   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
-   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   @for $i from 1 through list.length($palette-colors) {
-      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
-
-      .#{$state}color-#{$i - 1} {
-         $fill: cx-darken(cx-lighten($c, $palette-fill-whiten), $palette-fill-blacken);
-         $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
-         fill: $fill;
-         stroke: $stroke;
-         background: $fill;
-         border-color: $stroke;
-
-         &.#{$state}selectable:hover,
-         &.#{$state}selectable.#{$state}hover,
-         .#{$state}color-root:hover &,
-         .#{$state}color-root.#{$state}hover & {
-            $fill: cx-darken(cx-lighten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
-            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
-            fill: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-
-         &.#{$state}selected,
-         &.#{$state}selected:hover,
-         &.#{$state}selected.#{$state}hover,
-         .#{$state}color-root.#{$state}selected &,
-         .#{$state}color-root.#{$state}selected:hover &,
-         .#{$state}color-root.#{$state}selected.#{$state}hover & {
-            $fill: cx-darken(cx-lighten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
-            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
-            fill: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-
-         &.#{$state}disabled,
-         .#{$state}color-root.#{$state}disabled & {
-            $fill: cx-darken(cx-lighten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
-            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
-            fill: $fill;
-            stroke: $stroke;
-            background: $fill;
-            border-color: $stroke;
-         }
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/palette")) {
-   @include cx-palette();
-}
+// Use root entry points to get configured values
+@use "../variables" as *;
+@use "../util/scss/calc.scss" as *;
+@use "sass:map";
+@use "sass:list";
+
+@mixin cx-palette(
+   $palette-colors: $cx-default-palette-colors,
+   $palette-fill-whiten: $cx-default-palette-fill-whiten,
+   $palette-fill-hover-whiten: $cx-default-palette-fill-hover-whiten,
+   $palette-fill-selected-whiten: $cx-default-palette-fill-selected-whiten,
+   $palette-fill-disabled-whiten: $cx-default-palette-fill-disabled-whiten,
+   $palette-fill-blacken: $cx-default-palette-fill-blacken,
+   $palette-fill-hover-blacken: $cx-default-palette-fill-hover-blacken,
+   $palette-fill-selected-blacken: $cx-default-palette-fill-selected-blacken,
+   $palette-fill-disabled-blacken: $cx-default-palette-fill-disabled-blacken,
+   $palette-stroke-whiten: $cx-default-palette-stroke-whiten,
+   $palette-stroke-blacken: $cx-default-palette-stroke-blacken,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   @for $i from 1 through list.length($palette-colors) {
+      $c: list.nth($palette-colors, 1 + (($i - 1) * 1) % list.length($palette-colors));
+
+      .#{$state}color-#{$i - 1} {
+         $fill: cx-darken(cx-lighten($c, $palette-fill-whiten), $palette-fill-blacken);
+         $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+         fill: $fill;
+         stroke: $stroke;
+         background: $fill;
+         border-color: $stroke;
+
+         &.#{$state}selectable:hover,
+         &.#{$state}selectable.#{$state}hover,
+         .#{$state}color-root:hover &,
+         .#{$state}color-root.#{$state}hover & {
+            $fill: cx-darken(cx-lighten($c, $palette-fill-hover-whiten), $palette-fill-hover-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}selected,
+         &.#{$state}selected:hover,
+         &.#{$state}selected.#{$state}hover,
+         .#{$state}color-root.#{$state}selected &,
+         .#{$state}color-root.#{$state}selected:hover &,
+         .#{$state}color-root.#{$state}selected.#{$state}hover & {
+            $fill: cx-darken(cx-lighten($c, $palette-fill-selected-whiten), $palette-fill-selected-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+
+         &.#{$state}disabled,
+         .#{$state}color-root.#{$state}disabled & {
+            $fill: cx-darken(cx-lighten($c, $palette-fill-disabled-whiten), $palette-fill-disabled-blacken);
+            $stroke: cx-darken(cx-lighten($fill, $palette-stroke-whiten), $palette-stroke-blacken);
+            fill: $fill;
+            stroke: $stroke;
+            background: $fill;
+            border-color: $stroke;
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/palette")) {
+   @include cx-palette();
+}

package/src/charts/palette.variables.scss

@@ -1,23 +1,23 @@
-//https://www.materialui.co/colors
-//normal:200 900
-//hover:100 700
-//selected: 300 900
-//disabled: 0 100
-
-$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
-   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
-   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
-   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
-
-$cx-default-palette-fill-whiten: 60% !default;
-$cx-default-palette-fill-hover-whiten: 50% !default;
-$cx-default-palette-fill-selected-whiten: 20% !default;
-$cx-default-palette-fill-disabled-whiten: 90% !default;
-
-$cx-default-palette-fill-blacken: 0% !default;
-$cx-default-palette-fill-hover-blacken: 0% !default;
-$cx-default-palette-fill-selected-blacken: 0% !default;
-$cx-default-palette-fill-disabled-blacken: 0% !default;
-
-$cx-default-palette-stroke-whiten: 0% !default;
-$cx-default-palette-stroke-blacken: 10% !default;
+//https://www.materialui.co/colors
+//normal:200 900
+//hover:100 700
+//selected: 300 900
+//disabled: 0 100
+
+$cx-default-palette-colors: rgba(244, 67, 54, 1) rgba(233, 30, 99, 1) rgba(156, 39, 176, 1) rgba(103, 58, 183, 1)
+   rgba(63, 81, 181, 1) rgba(33, 150, 243, 1) rgba(3, 169, 244, 1) rgba(0, 188, 212, 1) rgba(0, 150, 136, 1)
+   rgba(76, 175, 80, 1) rgba(139, 195, 74, 1) rgba(205, 220, 57, 1) rgba(255, 235, 59, 1) rgba(255, 193, 7, 1)
+   rgba(255, 152, 0, 1) rgba(255, 87, 34, 1) !default;
+
+$cx-default-palette-fill-whiten: 60% !default;
+$cx-default-palette-fill-hover-whiten: 50% !default;
+$cx-default-palette-fill-selected-whiten: 20% !default;
+$cx-default-palette-fill-disabled-whiten: 90% !default;
+
+$cx-default-palette-fill-blacken: 0% !default;
+$cx-default-palette-fill-hover-blacken: 0% !default;
+$cx-default-palette-fill-selected-blacken: 0% !default;
+$cx-default-palette-fill-disabled-blacken: 0% !default;
+
+$cx-default-palette-stroke-whiten: 0% !default;
+$cx-default-palette-stroke-blacken: 10% !default;

package/src/charts/shapes.tsx

@@ -1,86 +1,86 @@
-/** @jsxImportSource react */
-
-import { VDOM } from "../ui/Widget";
-import { debug } from "../util/Debug";
-import { Config } from "../ui/Prop";
-
-export type ShapeRender = (
-   cx: number,
-   cy: number,
-   size: number,
-   props?: Config,
-   options?: Config
-) => React.ReactElement;
-
-var shapes: { [key: string]: ShapeRender } = {};
-var warnings: { [key: string]: boolean } = {};
-
-export function registerShape(name: string, callback: ShapeRender): void {
-   shapes[name] = callback;
-}
-
-export function getShape(shapeName: string): ShapeRender {
-   if (shapes[shapeName]) return shapes[shapeName];
-
-   if (!warnings[shapeName]) {
-      warnings[shapeName] = true;
-      debug(`Unknown shape '${shapeName}'. Using square instead.`);
-   }
-
-   return shapes["square"];
-}
-
-export function getAvailableShapes(): string[] {
-   return Object.keys(shapes);
-}
-
-export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
-}
-registerShape("circle", circle);
-
-export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
-}
-registerShape("square", square);
-registerShape("rect", square);
-
-export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
-}
-registerShape("bar", bar);
-
-export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
-}
-registerShape("column", column);
-
-export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
-}
-registerShape("line", line);
-registerShape("hline", line);
-
-export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 0.9;
-   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
-}
-registerShape("vline", vline);
-
-export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
-   size *= 1.29;
-   var d = "";
-   var cos = Math.cos(Math.PI / 6);
-   var sin = Math.sin(Math.PI / 6);
-   d += `M ${cx} ${cy - size / 2} `;
-   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
-   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
-   d += `Z`;
-   return <path {...props} d={d} />;
-}
-
-registerShape("triangle", triangle);
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { debug } from "../util/Debug";
+import { Config } from "../ui/Prop";
+
+export type ShapeRender = (
+   cx: number,
+   cy: number,
+   size: number,
+   props?: Config,
+   options?: Config
+) => React.ReactElement;
+
+var shapes: { [key: string]: ShapeRender } = {};
+var warnings: { [key: string]: boolean } = {};
+
+export function registerShape(name: string, callback: ShapeRender): void {
+   shapes[name] = callback;
+}
+
+export function getShape(shapeName: string): ShapeRender {
+   if (shapes[shapeName]) return shapes[shapeName];
+
+   if (!warnings[shapeName]) {
+      warnings[shapeName] = true;
+      debug(`Unknown shape '${shapeName}'. Using square instead.`);
+   }
+
+   return shapes["square"];
+}
+
+export function getAvailableShapes(): string[] {
+   return Object.keys(shapes);
+}
+
+export function circle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   return <circle {...props} cx={cx} cy={cy} r={size / 2} />;
+}
+registerShape("circle", circle);
+
+export function square(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 2} width={size} height={size} />;
+}
+registerShape("square", square);
+registerShape("rect", square);
+
+export function bar(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 2} y={cy - size / 4} width={size} height={size / 2} />;
+}
+registerShape("bar", bar);
+
+export function column(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <rect {...props} x={cx - size / 4} y={cy - size / 2} width={size / 2} height={size} />;
+}
+registerShape("column", column);
+
+export function line(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} />;
+}
+registerShape("line", line);
+registerShape("hline", line);
+
+export function vline(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 0.9;
+   return <line {...props} x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} />;
+}
+registerShape("vline", vline);
+
+export function triangle(cx: number, cy: number, size: number, props?: Config, options?: Config): React.ReactElement {
+   size *= 1.29;
+   var d = "";
+   var cos = Math.cos(Math.PI / 6);
+   var sin = Math.sin(Math.PI / 6);
+   d += `M ${cx} ${cy - size / 2} `;
+   d += `L ${cx + (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `L ${cx - (cos * size) / 2} ${cy + (sin * size) / 2} `;
+   d += `Z`;
+   return <path {...props} d={d} />;
+}
+
+registerShape("triangle", triangle);

package/src/charts/variables.scss

@@ -1,53 +1,53 @@
-@forward "axis/variables";
-@forward "palette.variables";
-@use "sass:map";
-
-@use "../util/scss/include.scss" as *;
-
-$cx-default-swimlanes-lane-background-color: #f1f1f1 !default;
-$cx-default-range-marker-color: #696969 !default;
-$cx-default-chart-gridline-color: rgba(128, 128, 128, 0.15) !default;
-
-// Shape defaults (bars, columns, pie slices)
-$cx-default-chart-shape-fill-color: #eee !default;
-$cx-default-chart-shape-stroke-color: #ccc !default;
-$cx-default-chart-shape-stroke-width: 1px !default;
-$cx-default-chart-selected-stroke-width: 2px !default;
-
-// Line defaults
-$cx-default-chart-line-stroke-color: gray !default;
-$cx-default-chart-line-stroke-width: 2px !default;
-$cx-default-chart-area-opacity: 0.5 !default;
-
-// Marker defaults (markers, scatter, bubble)
-$cx-default-chart-marker-color: rgb(128, 128, 128) !default;
-$cx-default-chart-marker-stroke-width: 1px !default;
-$cx-default-chart-markerline-stroke-width: 1px !default;
-
-// Range defaults
-$cx-default-chart-range-fill-color: lightgray !default;
-$cx-default-chart-range-opacity: 0.3 !default;
-
-// Legend defaults
-$cx-default-chart-legend-font-size: smaller !default;
-$cx-default-chart-legend-padding: 5px !default;
-$cx-default-chart-legend-gap: 5px 10px !default;
-$cx-default-chart-legend-entry-gap: 5px !default;
-$cx-default-chart-legend-shape-color: rgba(128, 128, 128, 0.1) !default;
-$cx-default-chart-legend-shape-stroke-width: 1px !default;
-
-@include cx-register-dependencies(
-   (
-      "cx/charts/Bar": "cx/charts/palette",
-      "cx/charts/BarGraph": "cx/charts/palette",
-      "cx/charts/Column": "cx/charts/palette",
-      "cx/charts/ColumnGraph": "cx/charts/palette",
-      "cx/charts/LineGraph": "cx/charts/palette",
-      "cx/charts/ColorMap": "cx/charts/palette",
-      "cx/charts/ScatterGraph": "cx/charts/palette",
-      "cx/charts/BubbleGraph": "cx/charts/palette",
-      "cx/charts/MarkerLine": "cx/charts/palette",
-      "cx/charts/Marker": "cx/charts/palette",
-      "cx/charts/PieChart": "cx/charts/palette",
-   )
-);
+@forward "axis/variables";
+@forward "palette.variables";
+@use "sass:map";
+
+@use "../util/scss/include.scss" as *;
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1 !default;
+$cx-default-range-marker-color: #696969 !default;
+$cx-default-chart-gridline-color: rgba(128, 128, 128, 0.15) !default;
+
+// Shape defaults (bars, columns, pie slices)
+$cx-default-chart-shape-fill-color: #eee !default;
+$cx-default-chart-shape-stroke-color: #ccc !default;
+$cx-default-chart-shape-stroke-width: 1px !default;
+$cx-default-chart-selected-stroke-width: 2px !default;
+
+// Line defaults
+$cx-default-chart-line-stroke-color: gray !default;
+$cx-default-chart-line-stroke-width: 2px !default;
+$cx-default-chart-area-opacity: 0.5 !default;
+
+// Marker defaults (markers, scatter, bubble)
+$cx-default-chart-marker-color: rgb(128, 128, 128) !default;
+$cx-default-chart-marker-stroke-width: 1px !default;
+$cx-default-chart-markerline-stroke-width: 1px !default;
+
+// Range defaults
+$cx-default-chart-range-fill-color: lightgray !default;
+$cx-default-chart-range-opacity: 0.3 !default;
+
+// Legend defaults
+$cx-default-chart-legend-font-size: smaller !default;
+$cx-default-chart-legend-padding: 5px !default;
+$cx-default-chart-legend-gap: 5px 10px !default;
+$cx-default-chart-legend-entry-gap: 5px !default;
+$cx-default-chart-legend-shape-color: rgba(128, 128, 128, 0.1) !default;
+$cx-default-chart-legend-shape-stroke-width: 1px !default;
+
+@include cx-register-dependencies(
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+   )
+);