cx 26.4.0 → 26.4.1

package/src/charts/ColumnBarBase.tsx

@@ -1,309 +1,309 @@
-/** @jsxImportSource react */
-
-import { VDOM } from "../ui/Widget";
-import { StyledContainerBase, StyledContainerConfig } from "../ui/Container";
-import {
-  tooltipMouseMove,
-  tooltipMouseLeave,
-  TooltipParentInstance,
-} from "../widgets/overlay/tooltip-ops";
-import { Selection } from "../ui/selection/Selection";
-import { withHoverSync } from "../ui/HoverSync";
-import { Prop, BooleanProp, NumberProp, StringProp } from "../ui/Prop";
-import { Instance } from "../ui/Instance";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Rect } from "../svg/util/Rect";
-import type { ChartRenderingContext } from "./Chart";
-
-export interface ColumnBarBaseConfig extends StyledContainerConfig {
-  /** The `x` value binding or expression. */
-  x?: Prop<string | number | null>;
-
-  /** The `y` value binding or expression. */
-  y?: Prop<string | number | null>;
-
-  disabled?: BooleanProp;
-
-  /** 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;
-
-  /** 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;
-
-  /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-  stack?: StringProp;
-
-  /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-  offset?: NumberProp;
-
-  /** Border radius of the column/bar. */
-  borderRadius?: NumberProp;
-
-  /**
-   * 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`.
-   */
-  xAxis?: string;
-
-  /**
-   * 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`.
-   */
-  yAxis?: 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;
-
-  /** A value used to identify the group of components participating in hover effect synchronization. */
-  hoverChannel?: string;
-
-  /** A value used to uniquely identify the record within the hover sync group. */
-  hoverId?: StringProp | NumberProp;
-
-  /** Hide the bar/column rect. Used for stacked series where only top bar should be visible. */
-  hidden?: BooleanProp;
-
-  selection?: any;
-
-  tooltip?: any;
-}
-
-export interface ColumnBarBaseInstance extends Instance, TooltipParentInstance {
-  axes: Record<string, any>;
-  xAxis: any;
-  yAxis: any;
-  hoverSync: any;
-  colorMap: any;
-  bounds: Rect;
-}
-
-export class ColumnBarBase extends StyledContainerBase<ColumnBarBaseConfig> {
-  declare baseClass: string;
-  declare xAxis: string;
-  declare yAxis: string;
-  declare offset: number;
-  declare legend: string | false;
-  declare legendAction: string;
-  declare active: boolean;
-  declare stacked: boolean;
-  declare stack: string;
-  declare legendShape: string;
-  declare hoverChannel: string;
-  declare borderRadius: number;
-  declare hidden: boolean;
-  declare selection: Selection;
-  declare tooltip: any;
-
-  constructor(config: ColumnBarBaseConfig) {
-    super(config);
-  }
-
-  init(): void {
-    this.selection = Selection.create(this.selection);
-    super.init();
-  }
-
-  declareData(...args: any[]): any {
-    var selection = this.selection.configureWidget(this);
-
-    return super.declareData(
-      selection,
-      {
-        x: undefined,
-        y: undefined,
-        style: { structured: true },
-        class: { structured: true },
-        className: { structured: true },
-        disabled: undefined,
-        colorIndex: undefined,
-        colorMap: undefined,
-        colorName: undefined,
-        name: undefined,
-        active: true,
-        stacked: undefined,
-        stack: undefined,
-        offset: undefined,
-        hoverId: undefined,
-        borderRadius: undefined,
-        hidden: undefined,
-      },
-      ...args,
-    );
-  }
-
-  prepareData(
-    context: ChartRenderingContext,
-    instance: ColumnBarBaseInstance,
-  ): void {
-    instance.axes = context.axes!;
-    instance.xAxis = context.axes![this.xAxis];
-    instance.yAxis = context.axes![this.yAxis];
-    instance.hoverSync = context.hoverSync;
-    var { data } = instance;
-    data.valid = this.checkValid(data);
-    if (!data.colorName && data.name) data.colorName = data.name;
-    super.prepareData(context, instance);
-  }
-
-  checkValid(data: any): boolean {
-    return true;
-  }
-
-  prepare(
-    context: ChartRenderingContext,
-    instance: ColumnBarBaseInstance,
-  ): void {
-    let { data, colorMap } = instance;
-
-    if (colorMap && data.colorName) {
-      data.colorIndex = colorMap.map(data.colorName);
-      if (instance.cache("colorIndex", data.colorIndex))
-        instance.markShouldUpdate(context);
-    }
-
-    if (!data.valid) return;
-
-    if (data.active) {
-      instance.bounds = this.calculateRect(instance);
-      instance.cache("bounds", instance.bounds);
-      if (!instance.bounds.isEqual(instance.cached.bounds))
-        instance.markShouldUpdate(context);
-
-      context.push("parentRect", instance.bounds);
-      if (instance.xAxis.shouldUpdate || instance.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);
-        },
-      });
-  }
-
-  prepareCleanup(
-    context: ChartRenderingContext,
-    instance: ColumnBarBaseInstance,
-  ): void {
-    let { data } = instance;
-    if (data.valid && data.active) context.pop("parentRect");
-  }
-
-  onLegendClick(e: MouseEvent, instance: ColumnBarBaseInstance): void {
-    var allActions = this.legendAction == "auto";
-    var { data } = instance;
-    if (allActions || this.legendAction == "toggle")
-      if (instance.set("active", !data.active)) return;
-
-    if (allActions || this.legendAction == "select")
-      this.handleClick(e, instance);
-  }
-
-  calculateRect(instance: ColumnBarBaseInstance): Rect {
-    throw new Error("Abstract method.");
-  }
-
-  render(
-    context: RenderingContext,
-    instance: ColumnBarBaseInstance,
-    key: string,
-  ): React.ReactNode {
-    let { data, bounds } = instance;
-
-    if (!data.active || !data.valid) return null;
-
-    return withHoverSync(
-      key,
-      instance.hoverSync,
-      this.hoverChannel,
-      data.hoverId,
-      ({ hover, onMouseMove, onMouseLeave, key }: any) => {
-        var stateMods: Record<string, any> = {
-          selected: this.selection.isInstanceSelected(instance),
-          disabled: data.disabled,
-          selectable: !this.selection.isDummy,
-          ["color-" + data.colorIndex]: data.colorIndex != null,
-          hover,
-        };
-
-        return (
-          <g className={data.classNames} key={key}>
-            {!data.hidden && (
-              <rect
-                className={this.CSS.element(this.baseClass, "rect", stateMods)}
-                style={data.style}
-                x={bounds.l}
-                y={bounds.t}
-                width={bounds.width()}
-                height={bounds.height()}
-                rx={data.borderRadius}
-                onMouseMove={(e) => {
-                  onMouseMove(e, instance);
-                  tooltipMouseMove(e, instance, this.tooltip);
-                }}
-                onMouseLeave={(e) => {
-                  onMouseLeave(e, instance);
-                  tooltipMouseLeave(e, instance, this.tooltip);
-                }}
-                onClick={(e) => {
-                  this.handleClick(e, instance);
-                }}
-              />
-            )}
-            {this.renderChildren(context, instance)}
-          </g>
-        );
-      },
-    );
-  }
-
-  handleClick(
-    e: MouseEvent | React.MouseEvent,
-    instance: ColumnBarBaseInstance,
-  ): void {
-    if (!this.selection.isDummy) {
-      this.selection.selectInstance(instance, {
-        toggle: e.ctrlKey,
-      });
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  }
-}
-
-ColumnBarBase.prototype.xAxis = "x";
-ColumnBarBase.prototype.yAxis = "y";
-ColumnBarBase.prototype.offset = 0;
-ColumnBarBase.prototype.legend = "legend";
-ColumnBarBase.prototype.legendAction = "auto";
-ColumnBarBase.prototype.active = true;
-ColumnBarBase.prototype.stacked = false;
-ColumnBarBase.prototype.stack = "stack";
-ColumnBarBase.prototype.legendShape = "rect";
-ColumnBarBase.prototype.styled = true;
-ColumnBarBase.prototype.hoverChannel = "default";
-ColumnBarBase.prototype.borderRadius = 0;
-ColumnBarBase.prototype.hidden = false;
+/** @jsxImportSource react */
+
+import { VDOM } from "../ui/Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import {
+  tooltipMouseMove,
+  tooltipMouseLeave,
+  TooltipParentInstance,
+} from "../widgets/overlay/tooltip-ops";
+import { Selection } from "../ui/selection/Selection";
+import { withHoverSync } from "../ui/HoverSync";
+import { Prop, BooleanProp, NumberProp, StringProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Rect } from "../svg/util/Rect";
+import type { ChartRenderingContext } from "./Chart";
+
+export interface ColumnBarBaseConfig extends StyledContainerConfig {
+  /** The `x` value binding or expression. */
+  x?: Prop<string | number | null>;
+
+  /** The `y` value binding or expression. */
+  y?: Prop<string | number | null>;
+
+  disabled?: BooleanProp;
+
+  /** 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;
+
+  /** 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;
+
+  /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+  stack?: StringProp;
+
+  /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+  offset?: NumberProp;
+
+  /** Border radius of the column/bar. */
+  borderRadius?: NumberProp;
+
+  /**
+   * 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`.
+   */
+  xAxis?: string;
+
+  /**
+   * 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`.
+   */
+  yAxis?: 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;
+
+  /** A value used to identify the group of components participating in hover effect synchronization. */
+  hoverChannel?: string;
+
+  /** A value used to uniquely identify the record within the hover sync group. */
+  hoverId?: StringProp | NumberProp;
+
+  /** Hide the bar/column rect. Used for stacked series where only top bar should be visible. */
+  hidden?: BooleanProp;
+
+  selection?: any;
+
+  tooltip?: any;
+}
+
+export interface ColumnBarBaseInstance extends Instance, TooltipParentInstance {
+  axes: Record<string, any>;
+  xAxis: any;
+  yAxis: any;
+  hoverSync: any;
+  colorMap: any;
+  bounds: Rect;
+}
+
+export class ColumnBarBase extends StyledContainerBase<ColumnBarBaseConfig> {
+  declare baseClass: string;
+  declare xAxis: string;
+  declare yAxis: string;
+  declare offset: number;
+  declare legend: string | false;
+  declare legendAction: string;
+  declare active: boolean;
+  declare stacked: boolean;
+  declare stack: string;
+  declare legendShape: string;
+  declare hoverChannel: string;
+  declare borderRadius: number;
+  declare hidden: boolean;
+  declare selection: Selection;
+  declare tooltip: any;
+
+  constructor(config: ColumnBarBaseConfig) {
+    super(config);
+  }
+
+  init(): void {
+    this.selection = Selection.create(this.selection);
+    super.init();
+  }
+
+  declareData(...args: any[]): any {
+    var selection = this.selection.configureWidget(this);
+
+    return super.declareData(
+      selection,
+      {
+        x: undefined,
+        y: undefined,
+        style: { structured: true },
+        class: { structured: true },
+        className: { structured: true },
+        disabled: undefined,
+        colorIndex: undefined,
+        colorMap: undefined,
+        colorName: undefined,
+        name: undefined,
+        active: true,
+        stacked: undefined,
+        stack: undefined,
+        offset: undefined,
+        hoverId: undefined,
+        borderRadius: undefined,
+        hidden: undefined,
+      },
+      ...args,
+    );
+  }
+
+  prepareData(
+    context: ChartRenderingContext,
+    instance: ColumnBarBaseInstance,
+  ): void {
+    instance.axes = context.axes!;
+    instance.xAxis = context.axes![this.xAxis];
+    instance.yAxis = context.axes![this.yAxis];
+    instance.hoverSync = context.hoverSync;
+    var { data } = instance;
+    data.valid = this.checkValid(data);
+    if (!data.colorName && data.name) data.colorName = data.name;
+    super.prepareData(context, instance);
+  }
+
+  checkValid(data: any): boolean {
+    return true;
+  }
+
+  prepare(
+    context: ChartRenderingContext,
+    instance: ColumnBarBaseInstance,
+  ): void {
+    let { data, colorMap } = instance;
+
+    if (colorMap && data.colorName) {
+      data.colorIndex = colorMap.map(data.colorName);
+      if (instance.cache("colorIndex", data.colorIndex))
+        instance.markShouldUpdate(context);
+    }
+
+    if (!data.valid) return;
+
+    if (data.active) {
+      instance.bounds = this.calculateRect(instance);
+      instance.cache("bounds", instance.bounds);
+      if (!instance.bounds.isEqual(instance.cached.bounds))
+        instance.markShouldUpdate(context);
+
+      context.push("parentRect", instance.bounds);
+      if (instance.xAxis.shouldUpdate || instance.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);
+        },
+      });
+  }
+
+  prepareCleanup(
+    context: ChartRenderingContext,
+    instance: ColumnBarBaseInstance,
+  ): void {
+    let { data } = instance;
+    if (data.valid && data.active) context.pop("parentRect");
+  }
+
+  onLegendClick(e: MouseEvent, instance: ColumnBarBaseInstance): void {
+    var allActions = this.legendAction == "auto";
+    var { data } = instance;
+    if (allActions || this.legendAction == "toggle")
+      if (instance.set("active", !data.active)) return;
+
+    if (allActions || this.legendAction == "select")
+      this.handleClick(e, instance);
+  }
+
+  calculateRect(instance: ColumnBarBaseInstance): Rect {
+    throw new Error("Abstract method.");
+  }
+
+  render(
+    context: RenderingContext,
+    instance: ColumnBarBaseInstance,
+    key: string,
+  ): React.ReactNode {
+    let { data, bounds } = instance;
+
+    if (!data.active || !data.valid) return null;
+
+    return withHoverSync(
+      key,
+      instance.hoverSync,
+      this.hoverChannel,
+      data.hoverId,
+      ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+        var stateMods: Record<string, any> = {
+          selected: this.selection.isInstanceSelected(instance),
+          disabled: data.disabled,
+          selectable: !this.selection.isDummy,
+          ["color-" + data.colorIndex]: data.colorIndex != null,
+          hover,
+        };
+
+        return (
+          <g className={data.classNames} key={key}>
+            {!data.hidden && (
+              <rect
+                className={this.CSS.element(this.baseClass, "rect", stateMods)}
+                style={data.style}
+                x={bounds.l}
+                y={bounds.t}
+                width={bounds.width()}
+                height={bounds.height()}
+                rx={data.borderRadius}
+                onMouseMove={(e) => {
+                  onMouseMove(e, instance);
+                  tooltipMouseMove(e, instance, this.tooltip);
+                }}
+                onMouseLeave={(e) => {
+                  onMouseLeave(e, instance);
+                  tooltipMouseLeave(e, instance, this.tooltip);
+                }}
+                onClick={(e) => {
+                  this.handleClick(e, instance);
+                }}
+              />
+            )}
+            {this.renderChildren(context, instance)}
+          </g>
+        );
+      },
+    );
+  }
+
+  handleClick(
+    e: MouseEvent | React.MouseEvent,
+    instance: ColumnBarBaseInstance,
+  ): void {
+    if (!this.selection.isDummy) {
+      this.selection.selectInstance(instance, {
+        toggle: e.ctrlKey,
+      });
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+}
+
+ColumnBarBase.prototype.xAxis = "x";
+ColumnBarBase.prototype.yAxis = "y";
+ColumnBarBase.prototype.offset = 0;
+ColumnBarBase.prototype.legend = "legend";
+ColumnBarBase.prototype.legendAction = "auto";
+ColumnBarBase.prototype.active = true;
+ColumnBarBase.prototype.stacked = false;
+ColumnBarBase.prototype.stack = "stack";
+ColumnBarBase.prototype.legendShape = "rect";
+ColumnBarBase.prototype.styled = true;
+ColumnBarBase.prototype.hoverChannel = "default";
+ColumnBarBase.prototype.borderRadius = 0;
+ColumnBarBase.prototype.hidden = false;