cx 25.11.1 → 26.0.2

package/build/charts/Swimlane.d.ts

@@ -0,0 +1,47 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { Prop, NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+export interface SwimlaneConfig extends BoundedObjectConfig {
+    /** The `x` value binding or expression. */
+    x?: Prop<string | number>;
+    /** The `y` value binding or expression. */
+    y?: Prop<string | number>;
+    /** Represents a swimlane size. */
+    size?: NumberProp;
+    /** Switch to vertical swimlanes. */
+    vertical?: boolean;
+    /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+    laneOffset?: NumberProp;
+    /** Style object applied to the swimlanes. */
+    laneStyle?: StyleProp;
+    /** Name of the x-axis. Default is 'x'. */
+    xAxis?: string;
+    /** Name of the y-axis. Default is 'y'. */
+    yAxis?: string;
+}
+export interface SwimlaneInstance extends BoundedObjectInstance {
+    xAxis?: any;
+    yAxis?: any;
+    bounds?: Rect;
+}
+export declare class Swimlane extends BoundedObject<SwimlaneConfig, SwimlaneInstance> {
+    xAxis: string;
+    yAxis: string;
+    anchors: string;
+    baseClass: string;
+    size: number;
+    laneOffset: number;
+    vertical: boolean;
+    laneStyle: any;
+    CSS: any;
+    constructor(config?: SwimlaneConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    explore(context: ChartRenderingContext, instance: SwimlaneInstance): void;
+    prepare(context: RenderingContext, instance: SwimlaneInstance): void;
+    calculateRect(instance: SwimlaneInstance): Rect;
+    render(context: RenderingContext, instance: SwimlaneInstance, key: string): CxChild;
+}

package/build/charts/Swimlane.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { Rect } from "../svg/util/Rect";
+export class Swimlane extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.laneStyle = parseStyle(this.laneStyle);
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            size: undefined,
+            laneOffset: undefined,
+            laneStyle: { structured: true },
+            vertical: undefined,
+            x: undefined,
+            y: undefined,
+        });
+    }
+    explore(context, instance) {
+        let { data } = instance;
+        super.explore(context, instance);
+        instance.xAxis = context.axes?.[this.xAxis];
+        instance.yAxis = context.axes?.[this.yAxis];
+        const d = data;
+        if (d.vertical) {
+            instance.xAxis.acknowledge(d.x, d.size, d.laneOffset);
+        }
+        else {
+            instance.yAxis.acknowledge(d.y, d.size, d.laneOffset);
+        }
+    }
+    prepare(context, instance) {
+        super.prepare(context, instance);
+        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);
+    }
+    calculateRect(instance) {
+        var { data } = instance;
+        const d = data;
+        var { size, laneOffset } = d;
+        let bounds;
+        if (d.vertical) {
+            var x1 = instance.xAxis.map(d.x, laneOffset - size / 2);
+            var x2 = instance.xAxis.map(d.x, laneOffset + size / 2);
+            bounds = new Rect({
+                l: Math.min(x1, x2),
+                r: Math.max(x1, x2),
+                t: d.bounds.t,
+                b: d.bounds.b,
+            });
+        }
+        else {
+            var y1 = instance.yAxis.map(d.y, laneOffset - size / 2);
+            var y2 = instance.yAxis.map(d.y, laneOffset + size / 2);
+            bounds = new Rect({
+                l: d.bounds.l,
+                r: d.bounds.r,
+                t: Math.min(y1, y2),
+                b: Math.max(y1, y2),
+            });
+        }
+        return bounds;
+    }
+    render(context, instance, key) {
+        let { data, xAxis, yAxis, bounds } = instance;
+        let { CSS, baseClass } = this;
+        const d = data;
+        let axis = this.vertical ? xAxis : yAxis;
+        if (!axis)
+            return null;
+        let min, max, valueFunction;
+        if (axis.scale) {
+            min = axis.scale.min;
+            max = axis.scale.max;
+            let clamp = (value) => [Math.max(min, Math.min(max, value)), 0];
+            valueFunction = (value, offset) => clamp(value + offset);
+        }
+        else if (axis.valueList) {
+            min = 0;
+            max = axis.valueList.length;
+            valueFunction = (value, offset) => [axis.valueList[value], offset];
+        }
+        if (!(min < max))
+            return null;
+        let rectClass = CSS.element(baseClass, "lane");
+        if (this.vertical) {
+            let c1 = axis.map(...valueFunction(d.x, -d.size / 2 + d.laneOffset));
+            let c2 = axis.map(...valueFunction(d.x, +d.size / 2 + d.laneOffset));
+            return (_jsxs("g", { className: d.classNames, children: [_jsx("rect", { x: bounds.l, y: bounds.t, height: bounds.b - bounds.t, width: Math.abs(c1 - c2), className: rectClass, style: d.laneStyle }, key), this.renderChildren(context, instance), ";"] }, key));
+        }
+        else {
+            let c1 = axis.map(...valueFunction(d.y, -d.size / 2 + d.laneOffset));
+            let c2 = axis.map(...valueFunction(d.y, +d.size / 2 + d.laneOffset));
+            return (_jsxs("g", { className: d.classNames, children: [_jsx("rect", { x: bounds.l, y: bounds.t, width: bounds.r - bounds.l, height: Math.abs(c1 - c2), className: rectClass, style: d.laneStyle }, key), this.renderChildren(context, instance), ";"] }, key));
+        }
+    }
+}
+Swimlane.prototype.xAxis = "x";
+Swimlane.prototype.yAxis = "y";
+Swimlane.prototype.anchors = "0 1 1 0";
+Swimlane.prototype.baseClass = "swimlane";
+Swimlane.prototype.size = 0.5;
+Swimlane.prototype.laneOffset = 0;
+Swimlane.prototype.vertical = false;
+BoundedObject.alias("swimlane", Swimlane);

package/build/charts/Swimlanes.d.ts

@@ -0,0 +1,57 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { RenderingContext, CxChild } from "../ui/RenderingContext";
+import { NumberProp, StyleProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+export interface SwimlanesConfig 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 `swimlanes`. */
+    baseClass?: string;
+    /** Represents a swimlane size. */
+    size?: NumberProp;
+    /**
+     * Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render
+     * every second swimlane in the chart.)
+     */
+    step?: NumberProp;
+    /** Switch to vertical swimlanes. */
+    vertical?: boolean;
+    /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+    laneOffset?: NumberProp;
+    /** Style object applied to the swimlanes. */
+    laneStyle?: StyleProp;
+}
+export interface SwimlanesInstance extends BoundedObjectInstance {
+    xAxis?: any;
+    yAxis?: any;
+}
+export declare class Swimlanes extends BoundedObject<SwimlanesConfig, SwimlanesInstance> {
+    xAxis: string;
+    yAxis: string;
+    anchors: string;
+    baseClass: string;
+    size: number;
+    laneOffset: number;
+    step: number;
+    vertical: boolean;
+    styled: boolean;
+    laneStyle: any;
+    CSS: any;
+    constructor(config?: SwimlanesConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    explore(context: ChartRenderingContext, instance: SwimlanesInstance): void;
+    prepare(context: RenderingContext, instance: SwimlanesInstance): void;
+    render(context: RenderingContext, instance: SwimlanesInstance, key: string): CxChild;
+}

package/build/charts/Swimlanes.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+export class Swimlanes extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.laneStyle = parseStyle(this.laneStyle);
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            size: undefined,
+            step: undefined,
+            laneOffset: undefined,
+            laneStyle: { structured: true },
+        });
+    }
+    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;
+        const d = data;
+        let { bounds } = d;
+        let { CSS, baseClass } = this;
+        if (d.step <= 0 || d.size <= 0)
+            return null;
+        let axis = this.vertical ? xAxis : yAxis;
+        if (!axis)
+            return null;
+        let min, max, valueFunction;
+        if (axis.scale) {
+            min = axis.scale.min;
+            max = axis.scale.max;
+            let clamp = (value) => [Math.max(min, Math.min(max, value)), 0];
+            valueFunction = (value, offset) => clamp(value + offset);
+        }
+        else if (axis.valueList) {
+            min = 0;
+            max = axis.valueList.length;
+            valueFunction = (value, offset) => [axis.valueList[value], offset];
+        }
+        if (!(min < max))
+            return null;
+        let rects = [];
+        let at = Math.ceil(min / d.step) * d.step;
+        let index = 0;
+        let rectClass = CSS.element(baseClass, "lane");
+        while (at - d.size / 2 < max) {
+            let c1 = axis.map(...valueFunction(at, -d.size / 2 + d.laneOffset));
+            let c2 = axis.map(...valueFunction(at, +d.size / 2 + d.laneOffset));
+            if (this.vertical) {
+                rects.push(_jsx("rect", { y: bounds.t, x: Math.min(c1, c2), height: bounds.b - bounds.t, width: Math.abs(c1 - c2), className: rectClass, style: d.laneStyle }, index++));
+            }
+            else {
+                rects.push(_jsx("rect", { x: bounds.l, y: Math.min(c1, c2), width: bounds.r - bounds.l, height: Math.abs(c1 - c2), className: rectClass, style: d.laneStyle }, index++));
+            }
+            at += d.step;
+        }
+        return (_jsx("g", { className: d.classNames, children: rects }, key));
+    }
+}
+Swimlanes.prototype.xAxis = "x";
+Swimlanes.prototype.yAxis = "y";
+Swimlanes.prototype.anchors = "0 1 1 0";
+Swimlanes.prototype.baseClass = "swimlanes";
+Swimlanes.prototype.size = 0.5;
+Swimlanes.prototype.laneOffset = 0;
+Swimlanes.prototype.step = 1;
+Swimlanes.prototype.vertical = false;
+Swimlanes.prototype.styled = true;
+BoundedObject.alias("swimlanes", Swimlanes);

package/build/charts/axis/Axis.d.ts

@@ -0,0 +1,141 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../../svg/BoundedObject";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, StyleProp, ClassProp, Prop } from "../../ui/Prop";
+export interface AxisConfig extends BoundedObjectConfig {
+    /** Set to `true` for vertical axes. */
+    vertical?: boolean;
+    /** Used as a secondary axis. Displayed at the top/right. */
+    secondary?: boolean;
+    /** When set to `true`, the values are displayed in descending order. */
+    inverted?: BooleanProp;
+    /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
+    hidden?: boolean;
+    /** Size of the axis tick line. Defaults to 3. */
+    tickSize?: number;
+    /** Distance between ticks and the axis. Default is 0. Use negative values for offset to make ticks appear on both sides of the axis. */
+    tickOffset?: number;
+    /** The smallest distance between two ticks on the axis. Defaults to 25. */
+    minTickDistance?: number;
+    /** The smallest distance between two labels on the vertical axis. Defaults to 40. */
+    minLabelDistanceVertical?: number;
+    /** The smallest distance between two labels on the horizontal axis. Defaults to 50.  */
+    minLabelDistanceHorizontal?: number;
+    /** Distance between labels and the axis. Defaults to 10. */
+    labelOffset?: number | string;
+    /** Label rotation angle in degrees. */
+    labelRotation?: Prop<number | string>;
+    /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
+    labelAnchor?: "start" | "end" | "middle" | "auto";
+    /** Horizontal text offset. */
+    labelDx?: number | string;
+    /** Vertical text offset which can be used for vertical alignment. */
+    labelDy?: number | string;
+    /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
+    labelWrap?: boolean;
+    /**
+     * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
+     * that value is initialized based on axis configuration. Value `0` means that label will grow towards
+     * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
+     * `-0.5` will make labels vertically centered.
+     */
+    labelLineCountDyFactor?: number | string;
+    /**
+     * Used for vertical adjustment of multi-line labels. Default value is 1 which means
+     * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
+     */
+    labelLineHeight?: number | string;
+    /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
+    labelMaxLineLength?: number;
+    /** Set to true to hide the axis labels. */
+    hideLabels?: boolean;
+    /** Set to true to hide the axis line. */
+    hideLine?: boolean;
+    /** Set to true to hide the axis ticks. */
+    hideTicks?: boolean;
+    /** Additional CSS style to be applied to the axis line. */
+    lineStyle?: StyleProp;
+    /** Additional CSS style to be applied to the axis ticks. */
+    tickStyle?: StyleProp;
+    /** Additional CSS style to be applied to the axis labels. */
+    labelStyle?: StyleProp;
+    /** Additional CSS class to be applied to the axis line. */
+    lineClass?: ClassProp;
+    /** Additional CSS class to be applied to the axis ticks. */
+    tickClass?: ClassProp;
+    /** Additional CSS class to be applied to the axis labels. */
+    labelClass?: ClassProp;
+    onMeasured?: (info: any, instance: Instance) => void;
+    /** A function used to create a formatter function for axis labels. */
+    onCreateLabelFormatter?: string | ((context: any, instance: Instance) => (formattedValue: string, value: any, info: {
+        tickIndex: number;
+        serieIndex: number;
+    }) => {
+        text: string;
+        style?: any;
+        className?: string;
+    }[]);
+    /** Distance between the even labels and the axis. */
+    alternateLabelOffset?: number | string;
+    useGridlineTicks?: boolean;
+}
+export interface AxisInstance extends BoundedObjectInstance {
+    calculator: any;
+    labelFormatter?: any;
+    cached: {
+        axis?: any;
+    };
+}
+export declare class Axis extends BoundedObject<AxisConfig, AxisInstance> {
+    baseClass: string;
+    vertical: boolean;
+    secondary: boolean;
+    inverted: boolean;
+    hidden: boolean;
+    hideLabels: boolean;
+    hideTicks: boolean;
+    hideLine: boolean;
+    tickSize: number;
+    tickOffset: number;
+    minTickDistance: number;
+    minLabelDistance: number;
+    minLabelDistanceVertical: number;
+    minLabelDistanceHorizontal: number;
+    labelOffset: number;
+    alternateLabelOffset: number | null;
+    labelRotation: number;
+    labelAnchor: string;
+    labelDx: number | string;
+    labelDy: number | string;
+    labelWrap: boolean;
+    labelLineCountDyFactor: number | string;
+    labelLineHeight: number;
+    labelMaxLineLength: number;
+    lineStyle: any;
+    tickStyle: any;
+    labelStyle: any;
+    useGridlineTicks: boolean;
+    onCreateLabelFormatter: AxisConfig["onCreateLabelFormatter"];
+    onMeasured: AxisConfig["onMeasured"];
+    constructor(config?: AxisConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: AxisInstance): void;
+    report(context: RenderingContext, instance: AxisInstance): any;
+    reportData(context: RenderingContext, instance: AxisInstance): void;
+    renderTicksAndLabels(context: RenderingContext, instance: AxisInstance, valueFormatter: (v: any) => string, minLabelDistance: number): any;
+    wrapLines(str: any): {
+        text: string;
+        style?: any;
+        className?: string;
+    }[] | null;
+    renderLabels(lines: {
+        text: string;
+        style?: any;
+        className?: string;
+        data?: Record<string, any>;
+    }[], x: number, dy: number | string, dx: number | string, offsetClass: string): React.ReactNode[];
+    prepare(context: RenderingContext, instance: AxisInstance): void;
+    cleanup(context: RenderingContext, instance: AxisInstance): void;
+}

package/build/charts/axis/Axis.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../../svg/BoundedObject";
+import { isUndefined } from "../../util/isUndefined";
+import { parseStyle } from "../../util/parseStyle";
+export class Axis extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        if (this.labelAnchor == "auto")
+            this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "middle";
+        if (this.labelDx == "auto")
+            this.labelDx = 0;
+        if (this.labelDy == "auto")
+            this.labelDy = this.vertical ? "0.4em" : this.secondary ? 0 : "0.8em";
+        if (isUndefined(this.minLabelDistance))
+            this.minLabelDistance = this.vertical ? this.minLabelDistanceVertical : this.minLabelDistanceHorizontal;
+        if (this.labelLineCountDyFactor == "auto")
+            this.labelLineCountDyFactor = this.vertical ? -this.labelLineHeight / 2 : this.secondary ? -1 : 0;
+        this.lineStyle = parseStyle(this.lineStyle);
+        this.tickStyle = parseStyle(this.tickStyle);
+        this.labelStyle = parseStyle(this.labelStyle);
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData({
+            anchors: undefined,
+            hideLabels: undefined,
+            hideLine: undefined,
+            hideTicks: undefined,
+            labelRotation: undefined,
+            labelAnchor: undefined,
+            lineStyle: undefined,
+            lineClass: undefined,
+            labelStyle: undefined,
+            labelClass: undefined,
+            tickStyle: undefined,
+            tickClass: undefined,
+        }, ...args);
+    }
+    prepareData(context, instance) {
+        super.prepareData(context, instance);
+        if (this.onCreateLabelFormatter)
+            instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
+    }
+    report(context, instance) {
+        return instance.calculator;
+    }
+    reportData(context, instance) { }
+    renderTicksAndLabels(context, instance, valueFormatter, minLabelDistance) {
+        if (this.hidden)
+            return false;
+        var { data, calculator, labelFormatter } = instance;
+        var { bounds } = data;
+        let { CSS, baseClass } = this;
+        var size = calculator.findTickSize(minLabelDistance);
+        var labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
+        var offsetClass = CSS.element(baseClass, "label-offset");
+        var x1, y1, x2, y2, tickSize = this.tickSize, tickOffset = this.tickOffset;
+        if (this.vertical) {
+            x1 = x2 = this.secondary ? bounds.r : bounds.l;
+            y1 = bounds.b;
+            y2 = bounds.t;
+        }
+        else {
+            x1 = bounds.l;
+            x2 = bounds.r;
+            y1 = y2 = this.secondary ? bounds.t : bounds.b;
+        }
+        var res = [null, null];
+        if (!data.hideLine) {
+            res[0] = (_jsx("line", { className: CSS.expand(CSS.element(baseClass, "line"), data.lineClass), style: data.lineStyle, x1: x1, y1: y1, x2: x2, y2: y2 }, "line"));
+        }
+        var t = [];
+        if (!!size && !data.hideLabels) {
+            var ticks = calculator.getTicks([size]);
+            ticks.forEach((serie, si) => {
+                serie.forEach((v, i) => {
+                    var s = calculator.map(v);
+                    if (this.secondary) {
+                        x1 = this.vertical ? bounds.r + tickOffset : s;
+                        y1 = this.vertical ? s : bounds.t - tickOffset;
+                        x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                        y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
+                    }
+                    else {
+                        x1 = this.vertical ? bounds.l - tickOffset : s;
+                        y1 = this.vertical ? s : bounds.b + tickOffset;
+                        x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                        y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
+                    }
+                    if (!this.useGridlineTicks)
+                        t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+                    var x, y;
+                    let labelOffset = this.alternateLabelOffset != null && i % 2 == 1 ? this.alternateLabelOffset : this.labelOffset;
+                    if (this.secondary) {
+                        x = this.vertical ? bounds.r + labelOffset : s;
+                        y = this.vertical ? s : bounds.t - labelOffset;
+                    }
+                    else {
+                        x = this.vertical ? bounds.l - labelOffset : s;
+                        y = this.vertical ? s : bounds.b + labelOffset;
+                    }
+                    var transform = data.labelRotation ? `rotate(${data.labelRotation} ${x} ${y})` : undefined;
+                    var formattedValue = valueFormatter(v);
+                    var lines = labelFormatter
+                        ? labelFormatter(formattedValue, v, { tickIndex: si, serieIndex: i })
+                        : this.wrapLines(formattedValue);
+                    res.push(_jsx("text", { className: labelClass, style: data.labelStyle, x: x, y: y, textAnchor: data.labelAnchor, transform: transform, children: this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass) }, `label-${si}-${i}`));
+                });
+            });
+        }
+        if (!data.hideTicks) {
+            if (this.useGridlineTicks) {
+                let gridlines = calculator.mapGridlines();
+                gridlines.forEach((s, i) => {
+                    if (this.secondary) {
+                        x1 = this.vertical ? bounds.r + tickOffset : s;
+                        y1 = this.vertical ? s : bounds.t - tickOffset;
+                        x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                        y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
+                    }
+                    else {
+                        x1 = this.vertical ? bounds.l - tickOffset : s;
+                        y1 = this.vertical ? s : bounds.b + tickOffset;
+                        x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                        y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
+                    }
+                    t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+                });
+            }
+            res[1] = (_jsx("path", { className: CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass), style: data.tickStyle, d: t.join(" ") }, "ticks"));
+        }
+        return res;
+    }
+    wrapLines(str) {
+        if (!this.labelWrap || typeof str != "string")
+            return [{ text: str }];
+        let parts = str.split(" ");
+        if (parts.length == 0)
+            return null;
+        let lines = [];
+        let line = null;
+        for (let i = 0; i < parts.length; i++) {
+            if (!line)
+                line = parts[i];
+            else if (parts[i].length + line.length < this.labelMaxLineLength)
+                line += " " + parts[i];
+            else {
+                lines.push({ text: line });
+                line = parts[i];
+            }
+        }
+        if (line)
+            lines.push({ text: line });
+        return lines;
+    }
+    renderLabels(lines, x, dy, dx, offsetClass) {
+        let offset = this.labelLineCountDyFactor * (lines.length - 1);
+        let result = [];
+        if (lines.length > 1 && dy != null) {
+            result.push(_jsx("tspan", { className: offsetClass, dy: dy, children: "_" }, -2));
+        }
+        lines.forEach((p, i) => {
+            let data = p.data != null
+                ? Object.entries(p.data).reduce((acc, [key, val]) => {
+                    acc[`data-${key}`] = val;
+                    return acc;
+                }, {})
+                : null;
+            result.push(_jsx("tspan", { dy: lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy, x: x, style: p.style, className: p.className, dx: dx, ...data, children: p.text }, i));
+        });
+        return result;
+    }
+    prepare(context, instance) {
+        super.prepare(context, instance);
+        var { bounds } = instance.data;
+        var [a, b] = !this.vertical ? [bounds.l, bounds.r] : [bounds.b, bounds.t];
+        instance.calculator.measure(a, b);
+        if (this.onMeasured)
+            instance.invoke("onMeasured", instance.calculator.hash(), instance);
+        if (!instance.calculator.isSame(instance.cached.axis))
+            instance.markShouldUpdate(context);
+    }
+    cleanup(context, instance) {
+        var { cached, calculator } = instance;
+        cached.axis = calculator.hash();
+    }
+}
+Axis.prototype.anchors = "0 1 1 0";
+Axis.prototype.styled = true;
+Axis.prototype.vertical = false;
+Axis.prototype.secondary = false;
+Axis.prototype.inverted = false;
+Axis.prototype.hidden = false;
+Axis.prototype.hideLabels = false;
+Axis.prototype.hideTicks = false;
+Axis.prototype.hideLine = false;
+Axis.prototype.tickSize = 3;
+Axis.prototype.tickOffset = 0;
+Axis.prototype.minTickDistance = 25;
+Axis.prototype.minLabelDistanceVertical = 40;
+Axis.prototype.minLabelDistanceHorizontal = 50;
+Axis.prototype.labelOffset = 10;
+Axis.prototype.alternateLabelOffset = null;
+Axis.prototype.labelRotation = 0;
+Axis.prototype.labelAnchor = "auto";
+Axis.prototype.labelDx = "auto";
+Axis.prototype.labelDy = "auto";
+Axis.prototype.labelWrap = false;
+Axis.prototype.labelLineCountDyFactor = "auto";
+Axis.prototype.labelLineHeight = 1;
+Axis.prototype.labelMaxLineLength = 10;
+Axis.namespace = "ui.svg.chart.axis";