cx 26.3.9 → 26.4.0

package/src/charts/axis/Axis.tsx

@@ -1,444 +1,444 @@
-/** @jsxImportSource react */
-
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../../svg/BoundedObject";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-import { parseStyle } from "../../util/parseStyle";
-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 class Axis extends BoundedObject<AxisConfig, AxisInstance> {
-   declare baseClass: string;
-   declare vertical: boolean;
-   declare secondary: boolean;
-   declare inverted: boolean;
-   declare hidden: boolean;
-   declare hideLabels: boolean;
-   declare hideTicks: boolean;
-   declare hideLine: boolean;
-   declare tickSize: number;
-   declare tickOffset: number;
-   declare minTickDistance: number;
-   declare minLabelDistance: number;
-   declare minLabelDistanceVertical: number;
-   declare minLabelDistanceHorizontal: number;
-   declare labelOffset: number;
-   declare alternateLabelOffset: number | null;
-   declare labelRotation: number;
-   declare labelAnchor: string;
-   declare labelDx: number | string;
-   declare labelDy: number | string;
-   declare labelWrap: boolean;
-   declare labelLineCountDyFactor: number | string;
-   declare labelLineHeight: number;
-   declare labelMaxLineLength: number;
-   declare lineStyle: any;
-   declare tickStyle: any;
-   declare labelStyle: any;
-   declare useGridlineTicks: boolean;
-   declare onCreateLabelFormatter: AxisConfig["onCreateLabelFormatter"];
-   declare onMeasured: AxisConfig["onMeasured"];
-
-   constructor(config?: AxisConfig) {
-      super(config);
-   }
-
-   init(): void {
-      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: any[]): void {
-      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: RenderingContext, instance: AxisInstance): void {
-      super.prepareData(context, instance);
-      if (this.onCreateLabelFormatter)
-         instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
-   }
-
-   report(context: RenderingContext, instance: AxisInstance): any {
-      return instance.calculator;
-   }
-
-   reportData(context: RenderingContext, instance: AxisInstance): void {}
-
-   renderTicksAndLabels(context: RenderingContext, instance: AxisInstance, valueFormatter: (v: any) => string, minLabelDistance: number): any {
-      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: any[] = [null, null];
-
-      if (!data.hideLine) {
-         res[0] = (
-            <line
-               key="line"
-               className={CSS.expand(CSS.element(baseClass, "line"), data.lineClass)}
-               style={data.lineStyle}
-               x1={x1}
-               y1={y1}
-               x2={x2}
-               y2={y2}
-            />
-         );
-      }
-
-      var t: string[] = [];
-      if (!!size && !data.hideLabels) {
-         var ticks = calculator.getTicks([size]);
-         ticks.forEach((serie: any[], si: number) => {
-            serie.forEach((v: any, i: number) => {
-               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(
-                  <text
-                     key={`label-${si}-${i}`}
-                     className={labelClass}
-                     style={data.labelStyle}
-                     x={x}
-                     y={y}
-                     textAnchor={data.labelAnchor}
-                     transform={transform}
-                  >
-                     {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
-                  </text>,
-               );
-            });
-         });
-      }
-
-      if (!data.hideTicks) {
-         if (this.useGridlineTicks) {
-            let gridlines = calculator.mapGridlines();
-            gridlines.forEach((s: number, i: number) => {
-               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] = (
-            <path
-               key="ticks"
-               className={CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass)}
-               style={data.tickStyle}
-               d={t.join(" ")}
-            />
-         );
-      }
-
-      return res;
-   }
-
-   wrapLines(str: any): { text: string; style?: any; className?: string }[] | null {
-      if (!this.labelWrap || typeof str != "string") return [{ text: str }];
-
-      let parts = str.split(" ");
-      if (parts.length == 0) return null;
-
-      let lines: { text: string }[] = [];
-      let line: string | null = 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: { text: string; style?: any; className?: string; data?: Record<string, any> }[], x: number, dy: number | string, dx: number | string, offsetClass: string): React.ReactNode[] {
-      let offset = (this.labelLineCountDyFactor as number) * (lines.length - 1);
-      let result = [];
-
-      if (lines.length > 1 && dy != null) {
-         result.push(
-            <tspan key={-2} className={offsetClass} dy={dy}>
-               _
-            </tspan>,
-         );
-      }
-
-      lines.forEach((p, i) => {
-         let data =
-            p.data != null
-               ? Object.entries(p.data).reduce((acc, [key, val]) => {
-                    acc[`data-${key}`] = val;
-                    return acc;
-                 }, {} as Record<string, any>)
-               : null;
-         result.push(
-            <tspan
-               key={i}
-               dy={lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy}
-               x={x}
-               style={p.style}
-               className={p.className}
-               dx={dx}
-               {...data}
-            >
-               {p.text}
-            </tspan>,
-         );
-      });
-      return result;
-   }
-
-   prepare(context: RenderingContext, instance: AxisInstance): void {
-      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: RenderingContext, instance: AxisInstance): void {
-      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";
+/** @jsxImportSource react */
+
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../../svg/BoundedObject";
+import { VDOM } from "../../ui/Widget";
+import { isUndefined } from "../../util/isUndefined";
+import { parseStyle } from "../../util/parseStyle";
+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 class Axis extends BoundedObject<AxisConfig, AxisInstance> {
+   declare baseClass: string;
+   declare vertical: boolean;
+   declare secondary: boolean;
+   declare inverted: boolean;
+   declare hidden: boolean;
+   declare hideLabels: boolean;
+   declare hideTicks: boolean;
+   declare hideLine: boolean;
+   declare tickSize: number;
+   declare tickOffset: number;
+   declare minTickDistance: number;
+   declare minLabelDistance: number;
+   declare minLabelDistanceVertical: number;
+   declare minLabelDistanceHorizontal: number;
+   declare labelOffset: number;
+   declare alternateLabelOffset: number | null;
+   declare labelRotation: number;
+   declare labelAnchor: string;
+   declare labelDx: number | string;
+   declare labelDy: number | string;
+   declare labelWrap: boolean;
+   declare labelLineCountDyFactor: number | string;
+   declare labelLineHeight: number;
+   declare labelMaxLineLength: number;
+   declare lineStyle: any;
+   declare tickStyle: any;
+   declare labelStyle: any;
+   declare useGridlineTicks: boolean;
+   declare onCreateLabelFormatter: AxisConfig["onCreateLabelFormatter"];
+   declare onMeasured: AxisConfig["onMeasured"];
+
+   constructor(config?: AxisConfig) {
+      super(config);
+   }
+
+   init(): void {
+      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: any[]): void {
+      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: RenderingContext, instance: AxisInstance): void {
+      super.prepareData(context, instance);
+      if (this.onCreateLabelFormatter)
+         instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
+   }
+
+   report(context: RenderingContext, instance: AxisInstance): any {
+      return instance.calculator;
+   }
+
+   reportData(context: RenderingContext, instance: AxisInstance): void {}
+
+   renderTicksAndLabels(context: RenderingContext, instance: AxisInstance, valueFormatter: (v: any) => string, minLabelDistance: number): any {
+      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: any[] = [null, null];
+
+      if (!data.hideLine) {
+         res[0] = (
+            <line
+               key="line"
+               className={CSS.expand(CSS.element(baseClass, "line"), data.lineClass)}
+               style={data.lineStyle}
+               x1={x1}
+               y1={y1}
+               x2={x2}
+               y2={y2}
+            />
+         );
+      }
+
+      var t: string[] = [];
+      if (!!size && !data.hideLabels) {
+         var ticks = calculator.getTicks([size]);
+         ticks.forEach((serie: any[], si: number) => {
+            serie.forEach((v: any, i: number) => {
+               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(
+                  <text
+                     key={`label-${si}-${i}`}
+                     className={labelClass}
+                     style={data.labelStyle}
+                     x={x}
+                     y={y}
+                     textAnchor={data.labelAnchor}
+                     transform={transform}
+                  >
+                     {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
+                  </text>,
+               );
+            });
+         });
+      }
+
+      if (!data.hideTicks) {
+         if (this.useGridlineTicks) {
+            let gridlines = calculator.mapGridlines();
+            gridlines.forEach((s: number, i: number) => {
+               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] = (
+            <path
+               key="ticks"
+               className={CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass)}
+               style={data.tickStyle}
+               d={t.join(" ")}
+            />
+         );
+      }
+
+      return res;
+   }
+
+   wrapLines(str: any): { text: string; style?: any; className?: string }[] | null {
+      if (!this.labelWrap || typeof str != "string") return [{ text: str }];
+
+      let parts = str.split(" ");
+      if (parts.length == 0) return null;
+
+      let lines: { text: string }[] = [];
+      let line: string | null = 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: { text: string; style?: any; className?: string; data?: Record<string, any> }[], x: number, dy: number | string, dx: number | string, offsetClass: string): React.ReactNode[] {
+      let offset = (this.labelLineCountDyFactor as number) * (lines.length - 1);
+      let result = [];
+
+      if (lines.length > 1 && dy != null) {
+         result.push(
+            <tspan key={-2} className={offsetClass} dy={dy}>
+               _
+            </tspan>,
+         );
+      }
+
+      lines.forEach((p, i) => {
+         let data =
+            p.data != null
+               ? Object.entries(p.data).reduce((acc, [key, val]) => {
+                    acc[`data-${key}`] = val;
+                    return acc;
+                 }, {} as Record<string, any>)
+               : null;
+         result.push(
+            <tspan
+               key={i}
+               dy={lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy}
+               x={x}
+               style={p.style}
+               className={p.className}
+               dx={dx}
+               {...data}
+            >
+               {p.text}
+            </tspan>,
+         );
+      });
+      return result;
+   }
+
+   prepare(context: RenderingContext, instance: AxisInstance): void {
+      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: RenderingContext, instance: AxisInstance): void {
+      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";