cx 26.1.3 → 26.1.4

package/src/charts/BarGraph.tsx

@@ -1,145 +1,145 @@
-/** @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 BarGraphConfig extends ColumnBarGraphBaseConfig {
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means x0 value is not read from the data array.
-    */
-   x0Field?: string | false;
-
-   /** Bar base value. Default value is `0`. */
-   x0?: NumberProp;
-
-   /** Hide the base of the bar (x0). */
-   hiddenBase?: boolean;
-
-   /** Tooltip configuration. */
-   tooltip?: any;
-}
-
-export interface BarGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
-
-export class BarGraph extends ColumnBarGraphBase {
-   declare x0Field: string | false;
-   declare x0: number;
-   declare hiddenBase: boolean;
-   declare tooltip: any;
-
-   constructor(config: BarGraphConfig) {
-      super(config);
-   }
-
-   explore(context: RenderingContext, instance: BarGraphInstance): void {
-      super.explore(context, instance);
-
-      let { data, yAxis, xAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p: any) => {
-            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
-            var y = p[this.yField];
-            var x = p[this.xField];
-
-            yAxis.acknowledge(y, data.size, data.offset);
-
-            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               xAxis.stacknowledge(data.stack, y, x0);
-               xAxis.stacknowledge(data.stack, y, x);
-            } else {
-               if (!this.hiddenBase) xAxis.acknowledge(x0);
-               xAxis.acknowledge(x);
-            }
-         });
-      }
-   }
-
-   renderGraph(context: RenderingContext, instance: BarGraphInstance): React.ReactNode {
-      var { data, yAxis, xAxis, 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 x0 = this.x0Field ? p[this.x0Field] : data.x0;
-         var y = p[this.yField];
-         var x = p[this.xField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var y1 = yAxis.map(y, offset - size / 2);
-         var y2 = yAxis.map(y, offset + size / 2);
-         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
-         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
-
-         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, "bar", 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}
-            />
-         );
-      });
-   }
-}
-
-BarGraph.prototype.baseClass = "bargraph";
-BarGraph.prototype.x0Field = false;
-BarGraph.prototype.x0 = 0;
-BarGraph.prototype.legendShape = "bar";
-BarGraph.prototype.hiddenBase = false;
-BarGraph.prototype.borderRadius = 0;
-
-Widget.alias("bargraph", BarGraph);
+/** @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 BarGraphConfig extends ColumnBarGraphBaseConfig {
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means x0 value is not read from the data array.
+    */
+   x0Field?: string | false;
+
+   /** Bar base value. Default value is `0`. */
+   x0?: NumberProp;
+
+   /** Hide the base of the bar (x0). */
+   hiddenBase?: boolean;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
+}
+
+export interface BarGraphInstance extends ColumnBarGraphBaseInstance, TooltipParentInstance {}
+
+export class BarGraph extends ColumnBarGraphBase {
+   declare x0Field: string | false;
+   declare x0: number;
+   declare hiddenBase: boolean;
+   declare tooltip: any;
+
+   constructor(config: BarGraphConfig) {
+      super(config);
+   }
+
+   explore(context: RenderingContext, instance: BarGraphInstance): void {
+      super.explore(context, instance);
+
+      let { data, yAxis, xAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p: any) => {
+            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+            var y = p[this.yField];
+            var x = p[this.xField];
+
+            yAxis.acknowledge(y, data.size, data.offset);
+
+            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               xAxis.stacknowledge(data.stack, y, x0);
+               xAxis.stacknowledge(data.stack, y, x);
+            } else {
+               if (!this.hiddenBase) xAxis.acknowledge(x0);
+               xAxis.acknowledge(x);
+            }
+         });
+      }
+   }
+
+   renderGraph(context: RenderingContext, instance: BarGraphInstance): React.ReactNode {
+      var { data, yAxis, xAxis, 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 x0 = this.x0Field ? p[this.x0Field] : data.x0;
+         var y = p[this.yField];
+         var x = p[this.xField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var y1 = yAxis.map(y, offset - size / 2);
+         var y2 = yAxis.map(y, offset + size / 2);
+         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
+         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
+
+         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, "bar", 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}
+            />
+         );
+      });
+   }
+}
+
+BarGraph.prototype.baseClass = "bargraph";
+BarGraph.prototype.x0Field = false;
+BarGraph.prototype.x0 = 0;
+BarGraph.prototype.legendShape = "bar";
+BarGraph.prototype.hiddenBase = false;
+BarGraph.prototype.borderRadius = 0;
+
+Widget.alias("bargraph", BarGraph);

package/src/charts/BubbleGraph.scss

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