cx 26.1.3 → 26.1.5

package/src/charts/ColumnBarGraphBase.tsx

@@ -1,229 +1,229 @@
-/** @jsxImportSource react */
-
-import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
-import { Instance } from "../ui/Instance";
-import { RenderingContext } from "../ui/RenderingContext";
-import { NumberProp, BooleanProp, StringProp, RecordsProp } from "../ui/Prop";
-import type { ChartRenderingContext } from "./Chart";
-
-export interface ColumnBarGraphBaseConfig extends WidgetConfig {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values.
-    */
-   data?: RecordsProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: StringProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: NumberProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: NumberProp;
-
-   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: BooleanProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: BooleanProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: NumberProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: StringProp;
-
-   /** Column/bar base value for y axis. */
-   y0?: NumberProp;
-
-   /** Column/bar base value for x axis. */
-   x0?: NumberProp;
-
-   /** Name of the horizontal axis. Default value is `x`. */
-   xAxis?: string;
-
-   /** Name of the vertical axis. Default value is `y`. */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   colorIndexField?: boolean | string;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Selection configuration. */
-   selection?: any;
-
-   onClick?: (e: MouseEvent, instance: Instance, point: any, index: number) => void | false;
-}
-
-export interface ColumnBarGraphBaseInstance extends Instance {
-   xAxis: any;
-   yAxis: any;
-   colorMap: any;
-}
-
-export class ColumnBarGraphBase extends Widget<ColumnBarGraphBaseConfig> {
-   declare baseClass: string;
-   declare xAxis: string;
-   declare yAxis: string;
-   declare xField: string;
-   declare yField: string;
-   declare colorIndexField: boolean | string;
-   declare size: number;
-   declare legend: string | false;
-   declare legendAction: string;
-   declare legendShape: string;
-   declare stack: string;
-   declare stacked: boolean;
-   declare autoSize: number | boolean;
-   declare offset: number;
-   declare borderRadius: number;
-   declare selection: Selection;
-   declare data: any;
-   declare onClick: ColumnBarGraphBaseConfig["onClick"];
-
-   constructor(config?: ColumnBarGraphBaseConfig) {
-      super(config);
-   }
-
-   init(): void {
-      this.selection = Selection.create(this.selection, {
-         records: this.data,
-      });
-      super.init();
-   }
-
-   declareData(...args: any[]): void {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         selection,
-         {
-            data: undefined,
-            colorIndex: undefined,
-            colorMap: undefined,
-            colorName: undefined,
-            name: undefined,
-            size: undefined,
-            offset: undefined,
-            y0: undefined,
-            x0: undefined,
-            autoSize: undefined,
-            active: true,
-            stacked: undefined,
-            stack: undefined,
-            borderRadius: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: ColumnBarGraphBaseInstance): void {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
-      instance.xAxis = context.axes![this.xAxis];
-      instance.yAxis = context.axes![this.yAxis];
-
-      var { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      super.explore(context, instance);
-   }
-
-   prepare(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
-      let { data, colorMap, xAxis, yAxis } = instance;
-
-      if (colorMap && data.name) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            onClick: (e: MouseEvent) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   onLegendClick(e: MouseEvent, instance: ColumnBarGraphBaseInstance): void {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   render(context: RenderingContext, instance: ColumnBarGraphBaseInstance, key: string): React.ReactNode {
-      var { data } = instance;
-      return (
-         <g key={key} className={data.classNames}>
-            {data.active && this.renderGraph(context, instance)}
-         </g>
-      );
-   }
-
-   renderGraph(context: RenderingContext, instance: ColumnBarGraphBaseInstance): React.ReactNode {
-      throw new Error("Abstract method");
-   }
-
-   handleClick(e: React.MouseEvent, instance: ColumnBarGraphBaseInstance, point: any, index: number): void {
-      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
-
-      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
-   }
-}
-
-ColumnBarGraphBase.prototype.xAxis = "x";
-ColumnBarGraphBase.prototype.yAxis = "y";
-ColumnBarGraphBase.prototype.xField = "x";
-ColumnBarGraphBase.prototype.yField = "y";
-ColumnBarGraphBase.prototype.colorIndexField = false;
-ColumnBarGraphBase.prototype.size = 1;
-ColumnBarGraphBase.prototype.legend = "legend";
-ColumnBarGraphBase.prototype.legendAction = "auto";
-ColumnBarGraphBase.prototype.legendShape = "rect";
-ColumnBarGraphBase.prototype.stack = "stack";
-ColumnBarGraphBase.prototype.stacked = false;
-ColumnBarGraphBase.prototype.autoSize = 0;
-ColumnBarGraphBase.prototype.offset = 0;
-ColumnBarGraphBase.prototype.styled = true;
-ColumnBarGraphBase.prototype.borderRadius = 0;
+/** @jsxImportSource react */
+
+import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, RecordsProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface ColumnBarGraphBaseConfig extends WidgetConfig {
+   /**
+    * Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: RecordsProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: StringProp;
+
+   /** Size (width) of the column in axis units. */
+   size?: NumberProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: NumberProp;
+
+   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: BooleanProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: BooleanProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: NumberProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: StringProp;
+
+   /** Column/bar base value for y axis. */
+   y0?: NumberProp;
+
+   /** Column/bar base value for x axis. */
+   x0?: NumberProp;
+
+   /** Name of the horizontal axis. Default value is `x`. */
+   xAxis?: string;
+
+   /** Name of the vertical axis. Default value is `y`. */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   colorIndexField?: boolean | string;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** Selection configuration. */
+   selection?: any;
+
+   onClick?: (e: MouseEvent, instance: Instance, point: any, index: number) => void | false;
+}
+
+export interface ColumnBarGraphBaseInstance extends Instance {
+   xAxis: any;
+   yAxis: any;
+   colorMap: any;
+}
+
+export class ColumnBarGraphBase extends Widget<ColumnBarGraphBaseConfig> {
+   declare baseClass: string;
+   declare xAxis: string;
+   declare yAxis: string;
+   declare xField: string;
+   declare yField: string;
+   declare colorIndexField: boolean | string;
+   declare size: number;
+   declare legend: string | false;
+   declare legendAction: string;
+   declare legendShape: string;
+   declare stack: string;
+   declare stacked: boolean;
+   declare autoSize: number | boolean;
+   declare offset: number;
+   declare borderRadius: number;
+   declare selection: Selection;
+   declare data: any;
+   declare onClick: ColumnBarGraphBaseConfig["onClick"];
+
+   constructor(config?: ColumnBarGraphBaseConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.selection = Selection.create(this.selection, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   declareData(...args: any[]): void {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         selection,
+         {
+            data: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            size: undefined,
+            offset: undefined,
+            y0: undefined,
+            x0: undefined,
+            autoSize: undefined,
+            active: true,
+            stacked: undefined,
+            stack: undefined,
+            borderRadius: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      instance.xAxis = context.axes![this.xAxis];
+      instance.yAxis = context.axes![this.yAxis];
+
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: ChartRenderingContext, instance: ColumnBarGraphBaseInstance): void {
+      let { data, colorMap, xAxis, yAxis } = instance;
+
+      if (colorMap && data.name) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            onClick: (e: MouseEvent) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   onLegendClick(e: MouseEvent, instance: ColumnBarGraphBaseInstance): void {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context: RenderingContext, instance: ColumnBarGraphBaseInstance, key: string): React.ReactNode {
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {data.active && this.renderGraph(context, instance)}
+         </g>
+      );
+   }
+
+   renderGraph(context: RenderingContext, instance: ColumnBarGraphBaseInstance): React.ReactNode {
+      throw new Error("Abstract method");
+   }
+
+   handleClick(e: React.MouseEvent, instance: ColumnBarGraphBaseInstance, point: any, index: number): void {
+      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
+
+      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
+   }
+}
+
+ColumnBarGraphBase.prototype.xAxis = "x";
+ColumnBarGraphBase.prototype.yAxis = "y";
+ColumnBarGraphBase.prototype.xField = "x";
+ColumnBarGraphBase.prototype.yField = "y";
+ColumnBarGraphBase.prototype.colorIndexField = false;
+ColumnBarGraphBase.prototype.size = 1;
+ColumnBarGraphBase.prototype.legend = "legend";
+ColumnBarGraphBase.prototype.legendAction = "auto";
+ColumnBarGraphBase.prototype.legendShape = "rect";
+ColumnBarGraphBase.prototype.stack = "stack";
+ColumnBarGraphBase.prototype.stacked = false;
+ColumnBarGraphBase.prototype.autoSize = 0;
+ColumnBarGraphBase.prototype.offset = 0;
+ColumnBarGraphBase.prototype.styled = true;
+ColumnBarGraphBase.prototype.borderRadius = 0;

package/src/charts/ColumnGraph.scss

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