cx 26.1.1 → 26.1.3

package/src/charts/ColumnGraph.tsx

@@ -1,153 +1,153 @@
-/** @jsxImportSource react */
-
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarGraphBase, ColumnBarGraphBaseConfig, ColumnBarGraphBaseInstance } from "./ColumnBarGraphBase";
-import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
-import { isArray } from "../util/isArray";
-import { RenderingContext } from "../ui/RenderingContext";
-import { NumberProp } from "../ui/Prop";
-
-export interface ColumnGraphConfig extends ColumnBarGraphBaseConfig {
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means y0 value is not read from the data array.
-    */
-   y0Field?: string | false;
-
-   /** Column base value. Default value is `0`. */
-   y0?: NumberProp;
-
-   /** Hide the base of the column (y0). */
-   hiddenBase?: boolean;
-
-   /** Tooltip configuration. */
-   tooltip?: any;
-}
-
-export interface ColumnGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
-
-export class ColumnGraph extends ColumnBarGraphBase {
-   declare y0Field: string | false;
-   declare y0: number;
-   declare hiddenBase: boolean;
-   declare tooltip: any;
-
-   constructor(config: ColumnGraphConfig) {
-      super(config);
-   }
-
-   explore(context: RenderingContext, instance: ColumnGraphInstance): void {
-      super.explore(context, instance);
-
-      let { data, xAxis, yAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p: any, index: number) => {
-            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-            var x = p[this.xField];
-            var y = p[this.yField];
-
-            xAxis.acknowledge(x, data.size, data.offset);
-
-            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               yAxis.stacknowledge(data.stack, x, y0);
-               yAxis.stacknowledge(data.stack, x, y);
-            } else {
-               if (!this.hiddenBase) yAxis.acknowledge(y0);
-               yAxis.acknowledge(y);
-            }
-         });
-      }
-   }
-
-   prepare(context: RenderingContext, instance: ColumnGraphInstance): void {
-      super.prepare(context, instance);
-      let { data } = instance;
-      if (context.pointReducer && isArray(data.data)) {
-         data.data.forEach((p: any, index: number) => {
-            context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
-         });
-      }
-   }
-
-   renderGraph(context: RenderingContext, instance: ColumnGraphInstance): React.ReactNode {
-      var { data, xAxis, yAxis, store } = instance;
-      if (!isArray(data.data)) return false;
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p: any, i: number) => {
-         var { offset, size } = data;
-
-         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-         var x = p[this.xField];
-         var y = p[this.yField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var x1 = xAxis.map(x, offset - size / 2);
-         var x2 = xAxis.map(x, offset + size / 2);
-         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
-         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
-
-         var color = this.colorIndexField ? p[this.colorIndexField as string] : data.colorIndex;
-         var state: Record<string, any> = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null,
-         };
-
-         let mmove: ((e: React.MouseEvent) => void) | undefined,
-            mleave: ((e: React.MouseEvent) => void) | undefined;
-
-         if (this.tooltip) {
-            mmove = (e) =>
-               tooltipMouseMove(e, instance, this.tooltip, {
-                  target: (e.target as any).parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-            mleave = (e) =>
-               tooltipMouseLeave(e, instance, this.tooltip, {
-                  target: (e.target as any).parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-         }
-
-         return (
-            <rect
-               key={i}
-               className={this.CSS.element(this.baseClass, "column", state)}
-               onClick={(e) => {
-                  this.handleClick(e, instance, p, i);
-               }}
-               x={Math.min(x1, x2)}
-               y={Math.min(y1, y2)}
-               width={Math.abs(x2 - x1)}
-               height={Math.abs(y2 - y1)}
-               style={data.style}
-               onMouseMove={mmove}
-               onMouseLeave={mleave}
-               rx={data.borderRadius}
-            />
-         );
-      });
-   }
-}
-
-ColumnGraph.prototype.baseClass = "columngraph";
-ColumnGraph.prototype.y0Field = false;
-ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = "column";
-ColumnGraph.prototype.hiddenBase = false;
-
-Widget.alias("columngraph", ColumnGraph);
+/** @jsxImportSource react */
+
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase, ColumnBarGraphBaseConfig, ColumnBarGraphBaseInstance } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave, TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+
+export interface ColumnGraphConfig extends ColumnBarGraphBaseConfig {
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means y0 value is not read from the data array.
+    */
+   y0Field?: string | false;
+
+   /** Column base value. Default value is `0`. */
+   y0?: NumberProp;
+
+   /** Hide the base of the column (y0). */
+   hiddenBase?: boolean;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface ColumnGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
+
+export class ColumnGraph extends ColumnBarGraphBase {
+   declare y0Field: string | false;
+   declare y0: number;
+   declare hiddenBase: boolean;
+   declare tooltip: any;
+
+   constructor(config: ColumnGraphConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: ColumnGraphInstance): void {
+      super.explore(context, instance);
+
+      let { data, xAxis, yAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p: any, index: number) => {
+            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+            var x = p[this.xField];
+            var y = p[this.yField];
+
+            xAxis.acknowledge(x, data.size, data.offset);
+
+            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               yAxis.stacknowledge(data.stack, x, y0);
+               yAxis.stacknowledge(data.stack, x, y);
+            } else {
+               if (!this.hiddenBase) yAxis.acknowledge(y0);
+               yAxis.acknowledge(y);
+            }
+         });
+      }
+   }
+
+   prepare(context: RenderingContext, instance: ColumnGraphInstance): void {
+      super.prepare(context, instance);
+      let { data } = instance;
+      if (context.pointReducer && isArray(data.data)) {
+         data.data.forEach((p: any, index: number) => {
+            context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+         });
+      }
+   }
+
+   renderGraph(context: RenderingContext, instance: ColumnGraphInstance): React.ReactNode {
+      var { data, xAxis, yAxis, store } = instance;
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p: any, i: number) => {
+         var { offset, size } = data;
+
+         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+         var x = p[this.xField];
+         var y = p[this.yField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var x1 = xAxis.map(x, offset - size / 2);
+         var x2 = xAxis.map(x, offset + size / 2);
+         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
+         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
+
+         var color = this.colorIndexField ? p[this.colorIndexField as string] : data.colorIndex;
+         var state: Record<string, any> = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove: ((e: React.MouseEvent) => void) | undefined,
+            mleave: ((e: React.MouseEvent) => void) | undefined;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: (e.target as any).parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "column", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+ColumnGraph.prototype.baseClass = "columngraph";
+ColumnGraph.prototype.y0Field = false;
+ColumnGraph.prototype.y0 = 0;
+ColumnGraph.prototype.legendShape = "column";
+ColumnGraph.prototype.hiddenBase = false;
+
+Widget.alias("columngraph", ColumnGraph);

package/src/charts/Grid.ts

@@ -1,5 +1,5 @@
-import { Gridlines } from "./Gridlines";
-
-export const Grid = Gridlines;
-
-console.log("charts/Grid module is deprecated. Use Gridlines instead.");
+import { Gridlines } from "./Gridlines";
+
+export const Grid = Gridlines;
+
+console.log("charts/Grid module is deprecated. Use Gridlines instead.");

package/src/charts/Gridlines.scss

@@ -1,25 +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();
+
+@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/src/charts/Gridlines.tsx

@@ -1,88 +1,88 @@
-/** @jsxImportSource react */
-
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
-import { VDOM } from "../ui/Widget";
-import { RenderingContext, CxChild } from "../ui/RenderingContext";
-import type { ChartRenderingContext } from "./Chart";
-
-export interface GridlinesConfig extends BoundedObjectConfig {
-   /**
-    * 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`.
-    * Set to `false` to hide the grid lines in x direction.
-    */
-   xAxis?: string | boolean;
-
-   /**
-    * 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`.
-    * Set to `false` to hide the grid lines in y direction.
-    */
-   yAxis?: string | boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
-   baseClass?: string;
-}
-
-export interface GridlinesInstance extends BoundedObjectInstance {
-   xAxis?: any;
-   yAxis?: any;
-}
-
-export class Gridlines extends BoundedObject<GridlinesConfig, GridlinesInstance> {
-   declare xAxis: string;
-   declare yAxis: string;
-   declare anchors: string;
-   declare baseClass: string;
-
-   constructor(config?: GridlinesConfig) {
-      super(config);
-   }
-
-   explore(context: ChartRenderingContext, instance: GridlinesInstance) {
-      super.explore(context, instance);
-      instance.xAxis = context.axes?.[this.xAxis];
-      instance.yAxis = context.axes?.[this.yAxis];
-   }
-
-   prepare(context: ChartRenderingContext, instance: GridlinesInstance) {
-      super.prepare(context, instance);
-      let { xAxis, yAxis } = instance;
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
-   }
-
-   render(context: RenderingContext, instance: GridlinesInstance, key: string): CxChild {
-      let { data, xAxis, yAxis } = instance;
-      let { bounds } = data as any;
-      let path = "",
-         xTicks: number[],
-         yTicks: number[];
-
-      if (xAxis) {
-         xTicks = xAxis.mapGridlines();
-         xTicks.forEach((x) => {
-            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
-         });
-      }
-
-      if (yAxis) {
-         yTicks = yAxis.mapGridlines();
-         yTicks.forEach((y) => {
-            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
-         });
-      }
-
-      return (
-         <g key={key} className={(data as any).classNames}>
-            <path style={(data as any).style} d={path} />
-         </g>
-      );
-   }
-}
-
-Gridlines.prototype.xAxis = "x";
-Gridlines.prototype.yAxis = "y";
-Gridlines.prototype.anchors = "0 1 1 0";
-Gridlines.prototype.baseClass = "gridlines";
-
-BoundedObject.alias("gridlines", Gridlines);
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { VDOM } from "../ui/Widget";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface GridlinesConfig extends BoundedObjectConfig {
+   /**
+    * 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`.
+    * Set to `false` to hide the grid lines in x direction.
+    */
+   xAxis?: string | boolean;
+
+   /**
+    * 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`.
+    * Set to `false` to hide the grid lines in y direction.
+    */
+   yAxis?: string | boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
+   baseClass?: string;
+}
+
+export interface GridlinesInstance extends BoundedObjectInstance {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export class Gridlines extends BoundedObject<GridlinesConfig, GridlinesInstance> {
+   declare xAxis: string;
+   declare yAxis: string;
+   declare anchors: string;
+   declare baseClass: string;
+
+   constructor(config?: GridlinesConfig) {
+      super(config);
+   }
+
+   explore(context: ChartRenderingContext, instance: GridlinesInstance) {
+      super.explore(context, instance);
+      instance.xAxis = context.axes?.[this.xAxis];
+      instance.yAxis = context.axes?.[this.yAxis];
+   }
+
+   prepare(context: ChartRenderingContext, instance: GridlinesInstance) {
+      super.prepare(context, instance);
+      let { xAxis, yAxis } = instance;
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
+   }
+
+   render(context: RenderingContext, instance: GridlinesInstance, key: string): CxChild {
+      let { data, xAxis, yAxis } = instance;
+      let { bounds } = data as any;
+      let path = "",
+         xTicks: number[],
+         yTicks: number[];
+
+      if (xAxis) {
+         xTicks = xAxis.mapGridlines();
+         xTicks.forEach((x) => {
+            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
+         });
+      }
+
+      if (yAxis) {
+         yTicks = yAxis.mapGridlines();
+         yTicks.forEach((y) => {
+            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
+         });
+      }
+
+      return (
+         <g key={key} className={(data as any).classNames}>
+            <path style={(data as any).style} d={path} />
+         </g>
+      );
+   }
+}
+
+Gridlines.prototype.xAxis = "x";
+Gridlines.prototype.yAxis = "y";
+Gridlines.prototype.anchors = "0 1 1 0";
+Gridlines.prototype.baseClass = "gridlines";
+
+BoundedObject.alias("gridlines", Gridlines);

package/src/charts/Legend.scss

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