cx 26.2.2 → 26.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.2.2",
+  "version": "26.2.4",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/Bar.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-bar(
-   $name: 'bar',
-   $besm: $cx-besm
-) {
+@mixin cx-bar($name: "bar", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      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/Bar')) {
+@if (cx-should-include("cx/charts/Bar")) {
    @include cx-bar();
-}
+}

package/src/charts/BarGraph.scss

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

package/src/charts/BubbleGraph.scss

@@ -1,10 +1,13 @@
+@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-bubblegraph(
-   $name: 'bubblegraph',
-   $besm: $cx-besm
-) {
+@mixin cx-bubblegraph($name: "bubblegraph", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -13,7 +16,7 @@
    }
 
    .#{$element}#{$name}-bubble {
-      fill: rgb(128, 128, 128);
+      fill: $cx-default-chart-marker-color;
       opacity: 0.5;
 
       &:hover {
@@ -22,11 +25,11 @@
 
       &.#{$state}selected {
          stroke: black;
-         stroke-width: 2px;
+         stroke-width: $cx-default-chart-selected-stroke-width;
       }
    }
 }
 
-@if (cx-should-include('cx/charts/BubbleGraph')) {
+@if (cx-should-include("cx/charts/BubbleGraph")) {
    @include cx-bubblegraph();
-}
+}

package/src/charts/Chart.ts

@@ -39,10 +39,12 @@ export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
    init(): void {
       super.init();
 
-      if (!this.axes) this.axes = {};
+      // Clone axes to avoid mutating the original config
+      let axesConfig = this.axes || {};
+      this.axes = {};
 
-      for (let axis in this.axes) {
-         this.axes[axis] = Axis.create(this.axes[axis]);
+      for (let axis in axesConfig) {
+         this.axes[axis] = Axis.create(axesConfig[axis]);
       }
    }
 

package/src/charts/Column.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-column(
-   $name: 'column',
-   $besm: $cx-besm
-) {
+@mixin cx-column($name: "column", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$element}#{$name}-rect {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      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/Column')) {
+@if (cx-should-include("cx/charts/Column")) {
    @include cx-column();
-}
+}