cx 26.0.1 → 26.0.2

package/build/charts/MarkerLine.d.ts

@@ -0,0 +1,65 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+export interface MarkerLineConfig extends BoundedObjectConfig {
+    /** X coordinate for vertical line. */
+    x?: NumberProp;
+    /** Y coordinate for horizontal line. */
+    y?: NumberProp;
+    /** Starting X coordinate. */
+    x1?: NumberProp;
+    /** Starting Y coordinate. */
+    y1?: NumberProp;
+    /** Ending X coordinate. */
+    x2?: NumberProp;
+    /** Ending Y coordinate. */
+    y2?: NumberProp;
+    /** Index of a color from the standard palette of colors. 0-15. */
+    colorIndex?: NumberProp;
+    /** Used to indicate if the line is active or not. */
+    active?: BooleanProp;
+    /** Name of the line as it will appear in the legend. */
+    name?: StringProp;
+    /** Name of the legend to be used. Default is `legend`. */
+    legend?: StringProp;
+    /** Name of the horizontal axis. Default value is `x`. */
+    xAxis?: string;
+    /** Name of the vertical axis. Default value is `y`. */
+    yAxis?: string;
+    /** Set to `false` to prevent the line from affecting axis bounds. */
+    affectsAxes?: boolean;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+}
+export interface MarkerLineInstance extends BoundedObjectInstance {
+    xAxis: any;
+    yAxis: any;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+export declare class MarkerLine extends BoundedObject {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    legend: string;
+    legendAction: string;
+    affectsAxes: boolean;
+    x: number;
+    y: number;
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+    constructor(config: MarkerLineConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    explore(context: RenderingContext, instance: MarkerLineInstance): void;
+    prepare(context: RenderingContext, instance: MarkerLineInstance): void;
+    calculateBounds(context: RenderingContext, instance: MarkerLineInstance): Rect;
+    onLegendClick(e: MouseEvent, instance: MarkerLineInstance): void;
+    render(context: RenderingContext, instance: MarkerLineInstance, key: string): React.ReactNode;
+}

package/build/charts/MarkerLine.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { isDefined } from "../util/isDefined";
+export class MarkerLine extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        if (isDefined(this.x))
+            this.x1 = this.x2 = this.x;
+        if (isDefined(this.y))
+            this.y1 = this.y2 = this.y;
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            x1: undefined,
+            y1: undefined,
+            x2: undefined,
+            y2: undefined,
+            colorIndex: undefined,
+            active: true,
+            name: undefined,
+            legend: undefined
+        });
+    }
+    explore(context, instance) {
+        let { data } = instance;
+        let xAxis = (instance.xAxis = context.axes[this.xAxis]);
+        let yAxis = (instance.yAxis = context.axes[this.yAxis]);
+        if (data.active) {
+            if (this.affectsAxes) {
+                if (data.x1 != null)
+                    xAxis.acknowledge(data.x1);
+                if (data.x2 != null)
+                    xAxis.acknowledge(data.x2);
+                if (data.y1 != null)
+                    yAxis.acknowledge(data.y1);
+                if (data.y2 != null)
+                    yAxis.acknowledge(data.y2);
+            }
+            super.explore(context, instance);
+        }
+    }
+    prepare(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
+            instance.markShouldUpdate(context);
+        super.prepare(context, instance);
+        if (data.name && data.legend && context.addLegendEntry)
+            context.addLegendEntry(data.legend, {
+                name: data.name,
+                active: data.active,
+                colorIndex: data.colorIndex,
+                style: data.style,
+                shape: "line",
+                onClick: (e) => {
+                    this.onLegendClick(e, instance);
+                },
+            });
+    }
+    calculateBounds(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        let bounds = super.calculateBounds(context, instance);
+        let x1 = bounds.l, x2 = bounds.r, y1 = bounds.t, y2 = bounds.b;
+        if (data.x1 != null)
+            x1 = xAxis.map(data.x1);
+        if (data.x2 != null)
+            x2 = xAxis.map(data.x2);
+        if (data.y1 != null)
+            y1 = yAxis.map(data.y1);
+        if (data.y2 != null)
+            y2 = yAxis.map(data.y2);
+        bounds.l = Math.min(x1, x2);
+        bounds.t = Math.min(y1, y2);
+        bounds.r = Math.max(x1, x2);
+        bounds.b = Math.max(y1, y2);
+        instance.x1 = x1;
+        instance.x2 = x2;
+        instance.y1 = y1;
+        instance.y2 = y2;
+        return bounds;
+    }
+    onLegendClick(e, instance) {
+        let allActions = this.legendAction == "auto";
+        let { data } = instance;
+        if (allActions || this.legendAction == "toggle")
+            instance.set("active", !data.active);
+    }
+    render(context, instance, key) {
+        let { data, x1, x2, y1, y2 } = instance;
+        if (!data.active || data.x1 === null || data.x2 === null || data.y1 === null || data.y2 === null)
+            return null;
+        let stateMods = {
+            ["color-" + data.colorIndex]: data.colorIndex != null,
+        };
+        return (_jsxs("g", { className: data.classNames, children: [_jsx("line", { className: this.CSS.element(this.baseClass, "line", stateMods), style: data.style, x1: x1, y1: y1, x2: x2, y2: y2 }), this.renderChildren(context, instance)] }, key));
+    }
+}
+MarkerLine.prototype.xAxis = 'x';
+MarkerLine.prototype.yAxis = 'y';
+MarkerLine.prototype.anchors = '0 1 1 0';
+MarkerLine.prototype.baseClass = 'markerline';
+MarkerLine.prototype.legend = 'legend';
+MarkerLine.prototype.legendAction = 'auto';
+MarkerLine.prototype.affectsAxes = true;
+BoundedObject.alias('marker-line', MarkerLine);

package/build/charts/MouseTracker.d.ts

@@ -0,0 +1,34 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { NumberProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+export interface MouseTrackerConfig extends BoundedObjectConfig {
+    /** The binding that is used to store the mouse x coordinate. */
+    x?: NumberProp;
+    /** The binding that is used to store the mouse y coordinate. */
+    y?: NumberProp;
+    /** Base CSS class to be applied to the element. Defaults to `mousetracker`. */
+    baseClass?: string;
+    /** Name of the x-axis. Default is 'x'. */
+    xAxis?: string;
+    /** Name of the y-axis. Default is 'y'. */
+    yAxis?: string;
+}
+export interface MouseTrackerInstance extends BoundedObjectInstance, TooltipParentInstance {
+    xAxis?: any;
+    yAxis?: any;
+}
+export declare class MouseTracker extends BoundedObject<MouseTrackerConfig, MouseTrackerInstance> {
+    xAxis: string;
+    yAxis: string;
+    anchors: string;
+    baseClass: string;
+    constructor(config?: MouseTrackerConfig);
+    declareData(...args: any[]): void;
+    explore(context: ChartRenderingContext, instance: MouseTrackerInstance): void;
+    render(context: RenderingContext, instance: MouseTrackerInstance, key: string): CxChild;
+    handleMouseMove(e: React.MouseEvent, instance: MouseTrackerInstance): void;
+    handleMouseLeave(e: React.MouseEvent, instance: MouseTrackerInstance): void;
+}

package/build/charts/MouseTracker.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { closest } from "../util/DOM";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+export class MouseTracker extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        return super.declareData(...args, {
+            x: undefined,
+            y: undefined,
+        });
+    }
+    explore(context, instance) {
+        instance.xAxis = context.axes?.[this.xAxis];
+        instance.yAxis = context.axes?.[this.yAxis];
+        super.explore(context, instance);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        let { bounds } = data;
+        if (!bounds.valid())
+            return null;
+        return (_jsxs("g", { className: data.classNames, onMouseMove: (e) => {
+                this.handleMouseMove(e, instance);
+            }, onMouseLeave: (e) => {
+                this.handleMouseLeave(e, instance);
+            }, children: [_jsx("rect", { x: bounds.l, y: bounds.t, width: bounds.width(), height: bounds.height(), fill: "transparent", strokeWidth: "0" }), this.renderChildren(context, instance)] }, key));
+    }
+    handleMouseMove(e, instance) {
+        let { xAxis, yAxis } = instance;
+        let svgEl = closest(e.target, (el) => el.tagName == "svg");
+        let bounds = getTopLevelBoundingClientRect(svgEl);
+        if (xAxis)
+            instance.set("x", xAxis.trackValue(e.clientX - bounds.left));
+        if (yAxis)
+            instance.set("y", yAxis.trackValue(e.clientY - bounds.top));
+        tooltipMouseMove(e, instance, instance.widget.tooltip);
+    }
+    handleMouseLeave(e, instance) {
+        let { xAxis, yAxis } = instance;
+        tooltipMouseLeave(e, instance, instance.widget.tooltip);
+        if (xAxis)
+            instance.set("x", null);
+        if (yAxis)
+            instance.set("y", null);
+    }
+}
+MouseTracker.prototype.xAxis = "x";
+MouseTracker.prototype.yAxis = "y";
+MouseTracker.prototype.anchors = "0 1 1 0";
+MouseTracker.prototype.baseClass = "mousetracker";

package/build/charts/Pie.d.ts

@@ -0,0 +1,4 @@
+import { PieChart, PieSlice } from "./PieChart";
+export declare const Pie: typeof PieChart & {
+    Slice: typeof PieSlice;
+};

package/build/charts/Pie.js

@@ -0,0 +1,5 @@
+import { PieChart, PieSlice } from "./PieChart";
+import { debug } from "../util/Debug";
+debug("The Pie class is deprecated. Please use PieChart instead.");
+export const Pie = PieChart;
+Pie.Slice = PieSlice;

package/build/charts/PieChart.d.ts

@@ -0,0 +1,158 @@
+/** @jsxImportSource react */
+import { Container, StyledContainerConfig } from "../ui/Container";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Selection, SimpleSelection } from "../ui/selection/Selection";
+import type { KeySelection } from "../ui/selection/KeySelection";
+import type { PropertySelection } from "../ui/selection/PropertySelection";
+import { TooltipParentInstance } from "../widgets/overlay/tooltip-ops";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import { CreateConfig } from "../util/Component";
+export interface PieChartConfig extends BoundedObjectConfig {
+    /** Total angle of the pie chart in degrees. Default is `360`. */
+    angle?: NumberProp;
+    /** Starting angle in degrees. Default is `0`. */
+    startAngle?: NumberProp;
+    /** Set to `true` for clockwise direction. */
+    clockwise?: BooleanProp;
+    /** Gap between slices in pixels. Default is `0`. */
+    gap?: NumberProp;
+}
+export interface PieChartInstance extends BoundedObjectInstance {
+    pie: PieCalculator;
+}
+export declare class PieChart extends BoundedObject {
+    angle: number;
+    startAngle: number;
+    gap: number;
+    constructor(config: PieChartConfig);
+    declareData(...args: any[]): void;
+    explore(context: RenderingContext, instance: PieChartInstance): void;
+    exploreCleanup(context: RenderingContext, instance: PieChartInstance): void;
+    prepare(context: RenderingContext, instance: PieChartInstance): void;
+}
+interface PieStack {
+    total: number;
+    r0s: number[] | null;
+    r0ps: number[] | null;
+    gap: number;
+    angleFactor: number;
+    lastAngle: number;
+}
+export interface PieSegment {
+    startAngle: number;
+    endAngle: number;
+    angle: number;
+    midAngle: number;
+    gap: number;
+    cx: number;
+    cy: number;
+    R: number;
+    ox?: number;
+    oy?: number;
+    radiusMultiplier?: number;
+}
+declare class PieCalculator {
+    angleTotal: number;
+    startAngle: number;
+    clockwise: boolean;
+    gap: number;
+    stacks: Record<string, PieStack>;
+    cx: number;
+    cy: number;
+    R: number;
+    shouldUpdate: boolean;
+    reset(angle: number, startAngle: number, clockwise: boolean, gap: number): void;
+    acknowledge(stack: string, value: number, r: number, r0: number, percentageRadius: boolean): void;
+    hash(): Record<string, any>;
+    measure(rect: Rect): void;
+    map(stack: string, value: number, r: number, r0: number, percentageRadius: boolean): PieSegment;
+}
+export interface PieSliceConfig extends StyledContainerConfig {
+    /** Used to indicate if a slice is active or not. Inactive slices are not rendered. */
+    active?: BooleanProp;
+    /** Inner radius of the slice. Default is `0`. */
+    r0?: NumberProp;
+    /** Outer radius of the slice. Default is `50`. */
+    r?: NumberProp;
+    /** 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;
+    /** Offset of the slice from the center. */
+    offset?: NumberProp;
+    /** Value represented by the slice. */
+    value?: NumberProp;
+    /** Set to `true` to disable the slice. */
+    disabled?: BooleanProp;
+    /** Inner radius for point calculations. */
+    innerPointRadius?: NumberProp;
+    /** Outer radius for point calculations. */
+    outerPointRadius?: NumberProp;
+    /** Name of the item as it will appear in the legend. */
+    name?: StringProp;
+    /** Stack name. Default is `stack`. */
+    stack?: StringProp;
+    /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+    legend?: StringProp;
+    /** ID used for hover synchronization. */
+    hoverId?: StringProp;
+    /** Border radius for rounded corners. */
+    br?: NumberProp;
+    /** Alias for br (border radius). */
+    borderRadius?: number;
+    /** Text to display in the legend. */
+    legendDisplayText?: StringProp;
+    /** Set to `true` to use percentage-based radius. Default is `true`. */
+    percentageRadius?: boolean;
+    /** Shape to use in legend. Default is `circle`. */
+    legendShape?: string;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+    /** Hover channel for hover synchronization. Default is `default`. */
+    hoverChannel?: string;
+    /** Selection configuration. */
+    selection?: CreateConfig<typeof Selection> | CreateConfig<typeof KeySelection> | CreateConfig<typeof PropertySelection> | CreateConfig<typeof SimpleSelection>;
+    /** Tooltip configuration. */
+    tooltip?: any;
+}
+export interface PieSliceInstance extends Instance, TooltipParentInstance {
+    pie: PieCalculator;
+    valid: boolean;
+    colorMap: any;
+    hoverSync: any;
+    segment: PieSegment;
+    bounds: Rect;
+}
+export declare class PieSlice extends Container {
+    baseClass: string;
+    offset: number;
+    r0: number;
+    r: number;
+    percentageRadius: boolean;
+    legend: string;
+    active: boolean;
+    stack: string;
+    legendAction: string;
+    legendShape: string;
+    hoverChannel: string;
+    br: number;
+    borderRadius: number;
+    selection: Selection;
+    tooltip: any;
+    constructor(config: PieSliceConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: PieSliceInstance): void;
+    explore(context: RenderingContext, instance: PieSliceInstance): void;
+    prepare(context: RenderingContext, instance: PieSliceInstance): void;
+    prepareCleanup(context: RenderingContext, instance: PieSliceInstance): void;
+    onLegendClick(e: MouseEvent | React.MouseEvent, instance: PieSliceInstance): void;
+    render(context: RenderingContext, instance: PieSliceInstance, key: string): React.ReactNode;
+    handleClick(e: React.MouseEvent, instance: PieSliceInstance): void;
+}
+export {};