cx 26.0.6 → 26.0.8

package/build/charts/Bar.scss

@@ -0,0 +1,29 @@
+
+@use "sass:map";
+
+@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;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Bar')) {
+   @include cx-bar();
+}

package/build/charts/BarGraph.scss

@@ -0,0 +1,29 @@
+@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();
+}

package/build/charts/BubbleGraph.scss

@@ -0,0 +1,32 @@
+
+@use "sass:map";
+
+@mixin cx-bubblegraph(
+   $name: 'bubblegraph',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+   }
+
+   .#{$element}#{$name}-bubble {
+      fill: rgb(128, 128, 128);
+      opacity: 0.5;
+
+      &:hover {
+         opacity: 0.75;
+      }
+
+      &.#{$state}selected {
+         stroke: black;
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/BubbleGraph')) {
+   @include cx-bubblegraph();
+}

package/build/charts/Column.scss

@@ -0,0 +1,29 @@
+
+@use "sass:map";
+
+@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;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Column')) {
+   @include cx-column();
+}

package/build/charts/ColumnGraph.scss

@@ -0,0 +1,30 @@
+
+@use "sass:map";
+
+@mixin cx-columngraph(
+   $name: 'columngraph',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-column {
+      stroke-width: 1px;
+      fill: #eee;
+      stroke: #ccc;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+
+@if (cx-should-include('cx/charts/ColumnGraph')) {
+   @include cx-columngraph();
+}

package/build/charts/Gridlines.scss

@@ -0,0 +1,25 @@
+
+@use "sass:map";
+
+@mixin cx-gridlines(
+   $name: 'gridlines',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      shape-rendering: crispEdges;
+
+      path {
+         stroke: rgba(128, 128, 128, 0.15);
+         fill: none;
+         stroke-width: 1;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Gridlines')) {
+   @include cx-gridlines();
+}

package/build/charts/Legend.scss

@@ -0,0 +1,50 @@
+@use "sass:map";
+
+@mixin cx-legend($name: "legend", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 5px 10px;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      gap: 5px;
+      font-size: smaller;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: rgba(128, 128, 128, 0.1);
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/build/charts/LegendEntry.scss

@@ -0,0 +1,29 @@
+@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();
+}

package/build/charts/LineGraph.d.ts

@@ -4,6 +4,7 @@ import { Instance } from "../ui/Instance";
 import { RenderingContext } from "../ui/RenderingContext";
 import { NumberProp, BooleanProp, StringProp, RecordsProp, StyleProp } from "../ui/Prop";
 import type { ChartRenderingContext } from "./Chart";
+import { ClassProp } from "../ui/Prop";
 interface LinePoint {
     x: number;
     y: number;
@@ -60,6 +61,16 @@ export interface LineGraphConfig extends WidgetConfig {
     legendAction?: string;
     /** Shape to use in legend. */
     legendShape?: string;
+    /**
+     * Additional CSS classes to be applied to the field.
+     * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+     */
+    class?: ClassProp;
+    /**
+     * Additional CSS classes to be applied to the field.
+     * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+     */
+    className?: ClassProp;
 }
 export interface LineGraphInstance extends Instance {
     xAxis: any;

package/build/charts/LineGraph.js

@@ -250,4 +250,5 @@ LineGraph.prototype.stack = "stack";
 LineGraph.prototype.hiddenBase = false;
 LineGraph.prototype.smooth = false;
 LineGraph.prototype.smoothingRatio = 0.05;
+LineGraph.prototype.styled = true;
 Widget.alias("line-graph", LineGraph);

package/build/charts/LineGraph.scss

@@ -0,0 +1,25 @@
+@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();
+}

package/build/charts/Marker.scss

@@ -0,0 +1,44 @@
+
+@use "sass:map";
+
+@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;
+
+      .#{$state}draggable-x > & {
+         cursor: ew-resize;
+         touch-action: none;
+      }
+
+      .#{$state}draggable-y > & {
+         cursor: ns-resize;
+         touch-action: none;
+      }
+
+      .#{$state}draggable-xy > & {
+         cursor: move;
+         touch-action: none;
+      }
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &.#{$state}hidden {
+         visibility: hidden;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Marker')) {
+   @include cx-marker();
+}

package/build/charts/MarkerLine.scss

@@ -0,0 +1,20 @@
+
+@use "sass:map";
+
+@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;
+   }
+}
+
+@if (cx-should-include('cx/charts/MarkerLine')) {
+   @include cx-markerline();
+}

package/build/charts/PieChart.scss

@@ -0,0 +1,29 @@
+
+@use "sass:map";
+
+@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;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/PieSlice')) {
+   @include cx-pieslice();
+}

package/build/charts/Range.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+
+@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;
+   }
+}
+
+@if (cx-should-include('cx/charts/Range')) {
+   @include cx-range();
+}

package/build/charts/RangeMarker.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+
+@mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-path {
+      stroke: $range-marker-color;
+      fill: none;
+      stroke-width: 1px;
+   }
+}
+
+@if (cx-should-include("cx/charts/RangeMarker")) {
+   @include cx-rangemarker();
+}

package/build/charts/ScatterGraph.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+
+
+@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: rgb(128, 128, 128);
+      opacity: 0.8;
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/ScatterGraph')) {
+   @include cx-scattergraph();
+}

package/build/charts/Swimlane.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+
+@mixin cx-swimlane($name: "swimlane", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-lane {
+      fill: $lane-color;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/charts/Swimlane")) {
+   @include cx-swimlane();
+}

package/build/charts/Swimlanes.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+
+@mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-lane {
+      fill: $lane-color;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/charts/Swimlanes")) {
+   @include cx-swimlanes();
+}

package/build/charts/axis/Axis.scss

@@ -0,0 +1,23 @@
+
+@mixin cxb-axis() {
+   shape-rendering: crispEdges;
+}
+
+@mixin cxe-axis-ticks() {
+   stroke: $cx-axis-ticks-stroke;
+   stroke-width: 1px;
+}
+
+@mixin cxe-axis-line() {
+   stroke: $cx-axis-line-stroke;
+   stroke-width: 1px;
+}
+
+@mixin cxe-axis-label() {
+   font-size: smaller;
+   fill: currentColor;
+}
+
+@mixin cxe-axis-label-offset() {
+   visibility: hidden;
+}

package/build/charts/axis/CategoryAxis.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+
+@mixin cx-categoryaxis(
+   $name: 'categoryaxis',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-axis();
+   }
+
+   .#{$element}#{$name}-ticks {
+      @include cxe-axis-ticks();
+   }
+
+   .#{$element}#{$name}-line {
+      @include cxe-axis-line();
+   }
+
+   .#{$element}#{$name}-label {
+      @include cxe-axis-label();
+   }
+
+   .#{$element}#{$name}-label-offset {
+      @include cxe-axis-label-offset();
+   }
+}
+
+@if (cx-should-include('cx/charts/CategoryAxis')) {
+   @include cx-categoryaxis();
+}

package/build/charts/axis/NumericAxis.scss

@@ -0,0 +1,35 @@
+
+@use "sass:map";
+
+@mixin cx-numericaxis(
+   $name: 'numericaxis',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-axis();
+   }
+
+   .#{$element}#{$name}-ticks {
+      @include cxe-axis-ticks();
+   }
+
+   .#{$element}#{$name}-line {
+      @include cxe-axis-line();
+   }
+
+   .#{$element}#{$name}-label {
+      @include cxe-axis-label();
+   }
+
+   .#{$element}#{$name}-label-offset {
+      @include cxe-axis-label-offset();
+   }
+}
+
+@if (cx-should-include('cx/charts/NumericAxis')) {
+   @include cx-numericaxis();
+}

package/build/charts/axis/TimeAxis.scss

@@ -0,0 +1,34 @@
+@use "sass:map";
+
+@mixin cx-timeaxis(
+   $name: 'timeaxis',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-axis();
+   }
+
+   .#{$element}#{$name}-ticks {
+      @include cxe-axis-ticks();
+   }
+
+   .#{$element}#{$name}-line {
+      @include cxe-axis-line();
+   }
+
+   .#{$element}#{$name}-label {
+      @include cxe-axis-label();
+   }
+
+   .#{$element}#{$name}-label-offset {
+      @include cxe-axis-label-offset();
+   }
+}
+
+@if (cx-should-include('cx/charts/TimeAxis')) {
+   @include cx-timeaxis();
+}

package/build/charts/axis/index.scss

@@ -0,0 +1,5 @@
+
+@import 'Axis';
+@import "NumericAxis";
+@import "CategoryAxis";
+@import "TimeAxis";

package/build/charts/axis/variables.scss

@@ -0,0 +1,3 @@
+
+$cx-axis-line-stroke: rgba(128, 128, 128, 0.2) !default;
+$cx-axis-ticks-stroke: rgba(128, 128, 128, 0.3) !default;

package/build/charts/index.scss

@@ -0,0 +1,22 @@
+@import "axis/index";
+
+@import "PieChart";
+@import "Legend";
+@import "LegendEntry";
+@import "Gridlines";
+@import "Swimlanes";
+@import "Column";
+@import "Bar";
+@import "LineGraph";
+@import "ColumnGraph";
+@import "BarGraph";
+@import "ScatterGraph";
+@import "BubbleGraph";
+@import "Marker";
+@import "MarkerLine";
+@import "Range";
+@import "RangeMarker";
+@import "Swimlane";
+
+//define last for higher priority
+@import "palette";