cx 26.0.1 → 26.0.2

package/build/charts/Gridlines.d.ts

@@ -0,0 +1,34 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+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 declare class Gridlines extends BoundedObject<GridlinesConfig, GridlinesInstance> {
+    xAxis: string;
+    yAxis: string;
+    anchors: string;
+    baseClass: string;
+    constructor(config?: GridlinesConfig);
+    explore(context: ChartRenderingContext, instance: GridlinesInstance): void;
+    prepare(context: ChartRenderingContext, instance: GridlinesInstance): void;
+    render(context: RenderingContext, instance: GridlinesInstance, key: string): CxChild;
+}

package/build/charts/Gridlines.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+export class Gridlines extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    explore(context, instance) {
+        super.explore(context, instance);
+        instance.xAxis = context.axes?.[this.xAxis];
+        instance.yAxis = context.axes?.[this.yAxis];
+    }
+    prepare(context, instance) {
+        super.prepare(context, instance);
+        let { xAxis, yAxis } = instance;
+        if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
+            instance.markShouldUpdate(context);
+    }
+    render(context, instance, key) {
+        let { data, xAxis, yAxis } = instance;
+        let { bounds } = data;
+        let path = "", xTicks, yTicks;
+        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 (_jsx("g", { className: data.classNames, children: _jsx("path", { style: data.style, d: path }) }, key));
+    }
+}
+Gridlines.prototype.xAxis = "x";
+Gridlines.prototype.yAxis = "y";
+Gridlines.prototype.anchors = "0 1 1 0";
+Gridlines.prototype.baseClass = "gridlines";
+BoundedObject.alias("gridlines", Gridlines);

package/build/charts/Legend.d.ts

@@ -0,0 +1,73 @@
+/** @jsxImportSource react */
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { RenderingContext } from "../ui/RenderingContext";
+import { StringProp, StyleProp, BooleanProp } from "../ui/Prop";
+export interface LegendEntryData {
+    name: string;
+    displayText?: string;
+    active?: boolean;
+    colorIndex?: number;
+    disabled?: boolean;
+    selected?: boolean;
+    style?: any;
+    shape?: string;
+    shapeSize?: number;
+    hoverSync?: any;
+    hoverChannel?: string;
+    hoverId?: any;
+    onClick?: (e: MouseEvent) => void;
+    value?: number;
+}
+export interface LegendConfig extends HtmlElementConfig {
+    /** Name of the legend. Default is `legend`. */
+    name?: string;
+    /** Default shape to use for all entries. */
+    shape?: StringProp;
+    /** Style applied to each entry. */
+    entryStyle?: StyleProp;
+    /** CSS class applied to each entry. */
+    entryClass?: StringProp;
+    /** Style applied to the value display. */
+    valueStyle?: StyleProp;
+    /** CSS class applied to the value display. */
+    valueClass?: StringProp;
+    /** Set to `true` to show values next to legend entries. */
+    showValues?: BooleanProp;
+    /** Format used for displaying values. Default is `s`. */
+    valueFormat?: string;
+    /** Set to `true` for vertical layout. */
+    vertical?: boolean;
+    /** Size of the shape in pixels. Default is `18`. */
+    shapeSize?: number;
+    /** Size of the SVG container in pixels. Default is `20`. */
+    svgSize?: number;
+}
+export interface LegendInstance extends HtmlElementInstance {
+    legends: Record<string, {
+        entries: LegendEntryData[];
+        names: Record<string, LegendEntryData>;
+    }>;
+}
+export declare class Legend extends HtmlElement {
+    baseClass: string;
+    name: string;
+    vertical: boolean;
+    shapeSize: number;
+    shape: string | null;
+    svgSize: number;
+    showValues: boolean;
+    valueFormat: string;
+    entryStyle: any;
+    valueStyle: any;
+    static Scope: typeof PureContainer;
+    constructor(config: LegendConfig);
+    declareData(...args: any[]): void;
+    init(): void;
+    prepareData(context: RenderingContext, instance: LegendInstance): void;
+    isValidHtmlAttribute(attrName: string): string | false;
+    explore(context: RenderingContext, instance: LegendInstance): void;
+    renderChildren(context: RenderingContext, instance: LegendInstance): React.ReactNode[];
+    renderShape(entry: LegendEntryData, legendEntriesShape: string | null | undefined): React.ReactNode;
+}
+export declare const LegendScope: typeof PureContainer;

package/build/charts/Legend.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isNonEmptyArray } from "../util/isNonEmptyArray";
+import { parseStyle } from "../util/parseStyle";
+import { withHoverSync } from "../ui/HoverSync";
+import { Format } from "../util/Format";
+export class Legend extends HtmlElement {
+    static Scope;
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            shape: undefined,
+            entryStyle: { structured: true },
+            entryClass: { structured: true },
+            valueStyle: { structured: true },
+            valueClass: { structured: true },
+            showValues: undefined,
+        });
+    }
+    init() {
+        this.entryStyle = parseStyle(this.entryStyle);
+        this.valueStyle = parseStyle(this.valueStyle);
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = Object.assign(data.stateMods || {}, {
+            vertical: this.vertical,
+        });
+        super.prepareData(context, instance);
+    }
+    isValidHtmlAttribute(attrName) {
+        switch (attrName) {
+            case "shapeSize":
+            case "svgSize":
+            case "shape":
+            case "entryStyle":
+            case "entryClass":
+            case "valueStyle":
+            case "valueClass":
+            case "showValues":
+            case "valueFormat":
+                return false;
+            default:
+                return super.isValidHtmlAttribute(attrName);
+        }
+    }
+    explore(context, instance) {
+        if (!context.legends)
+            context.legends = {};
+        instance.legends = context.legends;
+        context.addLegendEntry = (legendName, entry) => {
+            if (!legendName)
+                return;
+            //case when all legends are scoped and new entry is added outside the scope
+            if (!context.legends)
+                return;
+            let legend = context.legends[legendName];
+            if (!legend)
+                legend = context.legends[legendName] = {
+                    entries: [],
+                    names: {},
+                };
+            if (!legend.names[entry.name]) {
+                legend.entries.push(entry);
+                legend.names[entry.name] = entry;
+            }
+        };
+        super.explore(context, instance);
+    }
+    renderChildren(context, instance) {
+        const CSS = this.CSS;
+        let entries = instance.legends[this.name] && instance.legends[this.name].entries, list;
+        let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
+        let valueFormatter = Format.parse(this.valueFormat);
+        let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : undefined;
+        let entryTextClass = CSS.element(this.baseClass, "entry-text");
+        if (isNonEmptyArray(entries)) {
+            list = entries.map((e, i) => withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (_jsxs("div", { className: CSS.expand(CSS.element(this.baseClass, "entry", {
+                    "color-root": true,
+                    hover,
+                    disabled: e.disabled,
+                    selected: e.selected,
+                }), entryClass), style: entryStyle, onClick: e.onClick, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [this.renderShape(e, shape), _jsx("div", { className: entryTextClass, children: e.displayText || e.name }), this.showValues && (_jsx("div", { className: valueClasses, style: valueStyle, children: valueFormatter(e.value) }))] }, i))));
+        }
+        return [list, super.renderChildren(context, instance)];
+    }
+    renderShape(entry, legendEntriesShape) {
+        const className = this.CSS.element(this.baseClass, "shape", {
+            [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+        });
+        const shape = getShape(legendEntriesShape || entry.shape || "square");
+        // if the entry has a custom fill or stroke set, use it for both values
+        let style = { ...entry.style };
+        style.fill = style.fill ?? style.stroke;
+        style.stroke = style.stroke ?? style.fill;
+        return (_jsx("svg", { className: this.CSS.element(this.baseClass, "svg"), style: {
+                width: `${this.svgSize}px`,
+                height: `${this.svgSize}px`,
+            }, children: shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+                style,
+                className,
+            }) }));
+    }
+}
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+Legend.prototype.showValues = false;
+Legend.prototype.valueFormat = "s";
+Widget.alias("legend", Legend);
+Legend.Scope = class extends PureContainer {
+    explore(context, instance) {
+        context.push("legends", (instance.legends = {}));
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("legends");
+    }
+    prepare(context, instance) {
+        context.push("legends", instance.legends);
+    }
+    prepareCleanup(context, instance) {
+        context.pop("legends");
+    }
+};
+export const LegendScope = Legend.Scope;

package/build/charts/LegendEntry.d.ts

@@ -0,0 +1,60 @@
+/** @jsxImportSource react */
+import { Selection } from "../ui/selection/Selection";
+import { Container, ContainerConfig } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+export interface LegendEntryConfig extends ContainerConfig {
+    /** Set to `true` if the entry is selected. */
+    selected?: BooleanProp;
+    /** Shape to display. Default is `square`. */
+    shape?: StringProp;
+    /** 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 entry. */
+    name?: StringProp;
+    /** Used to indicate if an entry is active or not. */
+    active?: BooleanProp;
+    /** Size of the shape in pixels. Default is `18`. */
+    size?: NumberProp;
+    /** Horizontal border radius. */
+    rx?: NumberProp;
+    /** Vertical border radius. */
+    ry?: NumberProp;
+    /** Text content of the entry. */
+    text?: StringProp;
+    /** Action to perform on click. Default is `auto`. */
+    legendAction?: string;
+    /** Size of the SVG container in pixels. Default is `20`. */
+    svgSize?: number;
+    /** Selection configuration. */
+    selection?: any;
+    /** Click event handler. */
+    onClick?: (e: React.MouseEvent, instance: Instance) => void | false;
+}
+export interface LegendEntryInstance extends Instance {
+    colorMap: any;
+}
+export declare class LegendEntry extends Container {
+    baseClass: string;
+    shape: string;
+    legendAction: string;
+    size: number;
+    svgSize: number;
+    selection: Selection;
+    text: string;
+    onClick: LegendEntryConfig["onClick"];
+    constructor(config: LegendEntryConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: LegendEntryInstance): void;
+    explore(context: RenderingContext, instance: LegendEntryInstance): void;
+    prepare(context: RenderingContext, instance: LegendEntryInstance): void;
+    handleClick(e: React.MouseEvent, instance: LegendEntryInstance): void;
+    render(context: RenderingContext, instance: LegendEntryInstance, key: string): React.ReactNode;
+    renderShape(instance: LegendEntryInstance): React.ReactNode;
+}

package/build/charts/LegendEntry.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+import { Container } from "../ui/Container";
+export class LegendEntry extends Container {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.selection = Selection.create(this.selection);
+        super.init();
+    }
+    declareData(...args) {
+        var selection = this.selection.configureWidget(this);
+        super.declareData(...args, selection, {
+            selected: undefined,
+            shape: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            active: true,
+            size: undefined,
+            rx: undefined,
+            ry: undefined,
+            text: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        if (data.name && !data.colorName)
+            data.colorName = data.name;
+        super.prepareData(context, instance);
+    }
+    explore(context, instance) {
+        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, instance) {
+        var { data, colorMap } = instance;
+        if (colorMap && data.colorName) {
+            data.colorIndex = colorMap.map(data.colorName);
+            if (instance.cache("colorIndex", data.colorIndex))
+                instance.markShouldUpdate(context);
+        }
+    }
+    handleClick(e, instance) {
+        if (this.onClick && instance.invoke("onClick", e, instance) === false)
+            return;
+        e.stopPropagation();
+        var any = this.legendAction == "auto";
+        if (any || this.legendAction == "toggle")
+            if (instance.set("active", !instance.data.active))
+                return;
+        if ((any || this.legendAction == "select") && !this.selection.isDummy)
+            this.selection.selectInstance(instance);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+        return (_jsxs("div", { className: data.classNames, style: data.style, onMouseDown: stopPropagation, onClick: (e) => {
+                this.handleClick(e, instance);
+            }, children: [this.renderShape(instance), content != null && _jsx("div", { children: content })] }, key));
+    }
+    renderShape(instance) {
+        var entry = instance.data;
+        var className = this.CSS.element(this.baseClass, "shape", {
+            disabled: entry.disabled,
+            selected: entry.selected || this.selection.isInstanceSelected(instance),
+            [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+        });
+        var shape = getShape(entry.shape || "square");
+        // if the entry has a custom fill or stroke set, use it for both values
+        let style = { ...entry.style };
+        style.fill = style.fill ?? style.stroke;
+        style.stroke = style.stroke ?? style.fill;
+        return (_jsx("svg", { className: this.CSS.element(this.baseClass, "svg"), style: {
+                width: `${this.svgSize}px`,
+                height: `${this.svgSize}px`,
+            }, children: shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
+                style,
+                className,
+                rx: entry.rx,
+                ry: entry.ry,
+            }) }, "svg"));
+    }
+}
+LegendEntry.prototype.baseClass = "legendentry";
+LegendEntry.prototype.shape = "square";
+LegendEntry.prototype.legendAction = "auto";
+LegendEntry.prototype.size = 18;
+LegendEntry.prototype.svgSize = 20;
+LegendEntry.prototype.styled = true;
+Widget.alias("legend-entry", LegendEntry);

package/build/charts/LineGraph.d.ts

@@ -0,0 +1,111 @@
+/** @jsxImportSource react */
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, RecordsProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+interface LinePoint {
+    x: number;
+    y: number;
+    y0: number;
+}
+export interface LineGraphConfig 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;
+    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+    active?: BooleanProp;
+    /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+    stack?: StringProp;
+    /** Indicate that values should be stacked on top of the other values. Default value is `false`. */
+    stacked?: BooleanProp;
+    /** Set to `true` to enable smooth (curved) line rendering. */
+    smooth?: BooleanProp;
+    /** Controls the curvature of smooth lines. Value should be between 0 and 0.4. Default is 0.05. */
+    smoothingRatio?: 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;
+    /** Name of the property which holds the base value. Default value is `false`, meaning y0 is used instead. */
+    y0Field?: string | false;
+    /** Base value. Default value is `0`. */
+    y0?: NumberProp;
+    /** Hide the base value. */
+    hiddenBase?: boolean;
+    /** Set to `true` to enable area rendering. */
+    area?: BooleanProp;
+    /** Set to `false` to disable line rendering. Default is `true`. */
+    line?: BooleanProp;
+    /** Style for the line element. */
+    lineStyle?: StyleProp;
+    /** Style for the area element. */
+    areaStyle?: StyleProp;
+    /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+    legend?: string | false;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+    /** Shape to use in legend. */
+    legendShape?: string;
+}
+export interface LineGraphInstance extends Instance {
+    xAxis: any;
+    yAxis: any;
+    axes: Record<string, any>;
+    colorMap: any;
+    lineSpans: LinePoint[][] | null;
+}
+export declare class LineGraph extends Widget {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    xField: string;
+    yField: string;
+    y0Field: string | false;
+    y0: number;
+    hiddenBase: boolean;
+    area: boolean;
+    line: boolean;
+    active: boolean;
+    legend: string | false;
+    legendAction: string;
+    legendShape: string;
+    stack: string;
+    smooth: boolean;
+    smoothingRatio: number;
+    constructor(config: LineGraphConfig);
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: LineGraphInstance): void;
+    explore(context: ChartRenderingContext, instance: LineGraphInstance): void;
+    prepare(context: ChartRenderingContext, instance: LineGraphInstance): void;
+    onLegendClick(e: MouseEvent, instance: LineGraphInstance): void;
+    calculateLineSpans(context: RenderingContext, instance: LineGraphInstance): LinePoint[][] | null;
+    render(context: RenderingContext, instance: LineGraphInstance, key: string): React.ReactNode;
+    getCurvedPathSegment(p: LinePoint, points: LinePoint[], i1: number, i2: number, j1: number, j2: number, r: number, yField?: "y" | "y0"): string;
+    getControlPoint({ cp, pp, np, r, reverse, yField, }: {
+        cp: LinePoint;
+        pp: LinePoint | undefined;
+        np: LinePoint | undefined;
+        r: number;
+        reverse?: boolean;
+        yField?: "y" | "y0";
+    }): [number, number];
+    getLineInfo(p1x: number, p1y: number, p2x: number, p2y: number): {
+        length: number;
+        angle: number;
+    };
+}
+export {};