@devexperts/dxcharts-lite 2.6.1 → 2.6.2

package/dist/chart/canvas/canvas-bounds-container.d.ts

@@ -241,10 +241,10 @@ export declare class CanvasBoundsContainer {
     /**
      * Gets hit-test fn for canvas element.
      * @param {string} el - CanvasElement.ELEMENT_NAME
-     * @param {boolean} reverse - reverses the hit test condition
-     * @param {number} extensionX - extended hitBoundsTest in horizontal direction
-     * @param {number} extensionY - extended hitBoundsTest in vertical direction
-     * @param wholePage
+     * @param {Object} options - An object containing options for the hit test.
+     * @param {number} [options.extensionX=0] - The amount of extension in the x-axis.
+     * @param {number} [options.extensionY=0] - The amount of extension in the y-axis.
+     * @param {boolean} [options.wholePage=false] - Whether to test against the whole page or just the bounds object.
      * @return {HitBoundsTest} hit-test fn
      */
     getBoundsHitTest(el: string, options?: AtLeastOne<HitBoundsTestOptions>): HitBoundsTest;

package/dist/chart/canvas/canvas-bounds-container.js

@@ -655,10 +655,10 @@ export class CanvasBoundsContainer {
     /**
      * Gets hit-test fn for canvas element.
      * @param {string} el - CanvasElement.ELEMENT_NAME
-     * @param {boolean} reverse - reverses the hit test condition
-     * @param {number} extensionX - extended hitBoundsTest in horizontal direction
-     * @param {number} extensionY - extended hitBoundsTest in vertical direction
-     * @param wholePage
+     * @param {Object} options - An object containing options for the hit test.
+     * @param {number} [options.extensionX=0] - The amount of extension in the x-axis.
+     * @param {number} [options.extensionY=0] - The amount of extension in the y-axis.
+     * @param {boolean} [options.wholePage=false] - Whether to test against the whole page or just the bounds object.
      * @return {HitBoundsTest} hit-test fn
      */
     getBoundsHitTest(el, options = DEFAULT_HIT_TEST_OPTIONS) {

package/dist/chart/chart.config.d.ts

@@ -15,6 +15,7 @@ import { DateTimeFormatter, TimeFormatterConfig } from './model/date-time.format
 import { MergeOptions } from './utils/merge.utils';
 import { DeepPartial } from './utils/object.utils';
 import { Candle } from './model/candle.model';
+import { CustomIcon } from './components/events/events-custom-icons';
 export declare const MAIN_FONT = "Open Sans Semibold, sans-serif";
 export interface DateTimeFormatConfig {
     format: string;
@@ -123,12 +124,7 @@ export interface FullChartColors {
         labelBoxColor: string;
         labelTextColor: string;
     };
-    events: {
-        earnings: EventColors;
-        dividends: EventColors;
-        splits: EventColors;
-        'conference-calls': EventColors;
-    };
+    events: ChartConfigComponentsEventsColors;
     navigationMap: {
         buttonColor: string;
         knotColor: string;
@@ -356,6 +352,16 @@ export interface ChartConfigComponentsEvents {
      * 	</svg>'
      */
     icons?: ChartConfigComponentsEventsIcons;
+    /**
+     * Configure the event type vertical line appearance
+     */
+    line?: ChartConfigComponentsEventsLine;
+}
+export interface ChartConfigComponentsEventsColors {
+    earnings: EventColors;
+    dividends: EventColors;
+    splits: EventColors;
+    'conference-calls': EventColors;
 }
 export interface DateTimeFormatConfig {
     format: string;
@@ -668,9 +674,17 @@ export interface HighlightsColors {
     background: string;
     label: string;
 }
-export interface EventColors {
+/**
+ * @deprecated use {normal}, {hover} instead, will be removed in v6
+ */
+export interface EventColorsOld {
     color: string;
 }
+export interface EventColors extends EventColorsOld {
+    line?: string;
+    normal?: string;
+    hover?: string;
+}
 export interface HistogramColors {
     upCap: string;
     upBottom: string;
@@ -779,15 +793,29 @@ export interface YAxisLabelsColors extends Record<YAxisLabelType, Record<string,
     prePostMarket: YAxisPrePostMarketLabelColorConfig;
     prevDayClose: YAxisLabelColorConfig;
 }
-export interface CustomIcon {
-    normal: string;
-    hover: string;
-}
 export interface ChartConfigComponentsEventsIcons {
     earnings?: CustomIcon;
     dividends?: CustomIcon;
     splits?: CustomIcon;
-    conferenceCalls?: CustomIcon;
+    'conference-calls'?: CustomIcon;
+}
+export interface ChartConfigComponentsEventsLine {
+    earnings?: {
+        width: number;
+        dash: Array<number>;
+    };
+    dividends?: {
+        width: number;
+        dash: Array<number>;
+    };
+    splits?: {
+        width: number;
+        dash: Array<number>;
+    };
+    'conference-calls'?: {
+        width: number;
+        dash: Array<number>;
+    };
 }
 export type CursorType = string;
 export declare const getFontFromConfig: (config: YAxisConfig) => string;

package/dist/chart/chart.config.js

@@ -387,15 +387,35 @@ export const getDefaultConfig = () => ({
         highLowTheme: { highColor: 'rgba(223,222,223,1)', lowColor: 'rgba(223,222,223,1)' },
         instrumentInfo: { textColor: '#aeb1b3' },
         paneResizer: {
-            lineColor: 'rgba(55,55,54,1)',
+            lineColor: 'rgba(61,61,61,1)',
             bgColor: 'rgba(20,20,19,1)',
             bgHoverColor: 'rgba(55,55,54,0.6)',
         },
         events: {
-            earnings: { color: 'rgba(217,44,64,1)' },
-            dividends: { color: 'rgba(169,38,251,1)' },
-            splits: { color: 'rgba(244,187,63,1)' },
-            'conference-calls': { color: 'rgba(48,194,97,1)' },
+            earnings: {
+                color: 'rgba(217,44,64,1)',
+                normal: 'rgba(217,44,64,1)',
+                hover: 'rgba(217,44,64,1)',
+                line: 'rgba(217,44,64,1)',
+            },
+            dividends: {
+                color: 'rgba(169,38,251,1)',
+                normal: 'rgba(169,38,251,1)',
+                hover: 'rgba(169,38,251,1)',
+                line: 'rgba(169,38,251,1)',
+            },
+            splits: {
+                color: 'rgba(244,187,63,1)',
+                normal: 'rgba(244,187,63,1)',
+                hover: 'rgba(244,187,63,1)',
+                line: 'rgba(244,187,63,1)',
+            },
+            'conference-calls': {
+                color: 'rgba(48,194,97,1)',
+                normal: 'rgba(48,194,97,1)',
+                hover: 'rgba(48,194,97,1)',
+                line: 'rgba(48,194,97,1)',
+            },
         },
         secondaryChartTheme: [
             {

package/dist/chart/components/chart/chart-area-pan.handler.d.ts

@@ -37,7 +37,7 @@ interface ChartPanningOptions {
  * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
  * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
  * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
- 
+
 */
 export declare class ChartAreaPanHandler extends ChartBaseElement {
     private bus;
@@ -62,6 +62,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * If the zoomToCursor configuration is set to false, it calls the zoomXToEnd method of the scaleModel to zoom in or out based on the zoomIn parameter.
      * Finally, it fires the draw event of the bus to redraw the canvas.
      * @param {WheelEvent} e - Wheel event
+     * @param {number} zoomSensitivity - zoom sensitivity
      * @returns {void}
      */
     private zoomXHandler;
@@ -74,7 +75,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     private calculateDynamicSesitivity;
     /**
      * Registers a handler for panning the chart along the Y-axis.
-     * @param {ScaleModel} scaleModel - The scale model of the extent.
+     * @param {ScaleModel} scale - The scale model of the extent.
      * @param {HitBoundsTest} hitTest - The hit test of the pane.
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */

package/dist/chart/components/chart/chart-area-pan.handler.js

@@ -29,7 +29,7 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
  * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
  * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
- 
+
 */
 export class ChartAreaPanHandler extends ChartBaseElement {
     constructor(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
@@ -56,6 +56,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
          * If the zoomToCursor configuration is set to false, it calls the zoomXToEnd method of the scaleModel to zoom in or out based on the zoomIn parameter.
          * Finally, it fires the draw event of the bus to redraw the canvas.
          * @param {WheelEvent} e - Wheel event
+         * @param {number} zoomSensitivity - zoom sensitivity
          * @returns {void}
          */
         this.zoomXHandler = (e, zoomSensitivity) => {
@@ -120,9 +121,9 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe(e => {
             const device = deviceDetector();
-            const direction = device === 'apple' || device === 'mobile' ? 1 : -1;
+            const direction = device === 'apple' || device === 'mobile' ? -1 : 1;
             const deltaX = 0 + e.deltaX * direction;
-            const deltaY = 0 + e.deltaY * -direction;
+            const deltaY = 0 + e.deltaY * direction;
             if (e.ctrlKey) {
                 const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
                 this.zoomXHandler(e, zoomSensitivity);
@@ -162,7 +163,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
     }
     /**
      * Registers a handler for panning the chart along the Y-axis.
-     * @param {ScaleModel} scaleModel - The scale model of the extent.
+     * @param {ScaleModel} scale - The scale model of the extent.
      * @param {HitBoundsTest} hitTest - The hit test of the pane.
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */

package/dist/chart/components/events/events-custom-icons.d.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import { Point } from '../../inputlisteners/canvas-input-listener.component';
+export interface CustomIcon {
+    normal: string;
+    hover: string;
+}
+export interface CustomIconImage {
+    img: HTMLImageElement;
+    svgHeight: number;
+}
+export declare const getIconHash: (type: string, state: keyof CustomIcon) => string;
+/**
+ * Creates a custom icon for a given event type.
+ * @param {string} type - The type of the event.
+ * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
+ * @returns {void}
+ */
+export declare const createCustomIcon: (type: string, icon?: CustomIcon) => {
+    type: string;
+    normal: CustomIconImage;
+    hover: CustomIconImage;
+} | undefined;
+/**
+ * Creates an icon image from a string containing SVG data.
+ * @param {string} iconString - The string containing SVG data.
+ * @returns {CustomIconImage} An object containing an Image object and the height of the SVG element.
+ */
+export declare const createIconImage: (iconString: string) => CustomIconImage;
+export declare const drawCustomSvgIcon: (ctx: CanvasRenderingContext2D, icons: Record<string, CustomIconImage>, point: Point, type: string, isHovered: boolean) => void;

package/dist/chart/components/events/events-custom-icons.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+export const getIconHash = (type, state) => `${type}_${state}`;
+/**
+ * Creates a custom icon for a given event type.
+ * @param {string} type - The type of the event.
+ * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
+ * @returns {void}
+ */
+export const createCustomIcon = (type, icon) => {
+    if (icon) {
+        const normal = createIconImage(icon.normal);
+        const hover = createIconImage(icon.hover);
+        return { type, normal, hover };
+    }
+};
+/**
+ * Creates an icon image from a string containing SVG data.
+ * @param {string} iconString - The string containing SVG data.
+ * @returns {CustomIconImage} An object containing an Image object and the height of the SVG element.
+ */
+export const createIconImage = (iconString) => {
+    var _a;
+    const parser = new DOMParser();
+    const svgSelector = parser.parseFromString(iconString, 'text/html').querySelector('svg');
+    let svgHeight = 0;
+    if (svgSelector) {
+        svgHeight = parseInt((_a = svgSelector.getAttribute('height')) !== null && _a !== void 0 ? _a : '', 10);
+    }
+    const svg64 = btoa(iconString);
+    const b64Start = 'data:image/svg+xml;base64,';
+    const image64 = b64Start + svg64;
+    const img = new Image();
+    img.src = image64;
+    return {
+        img,
+        svgHeight,
+    };
+};
+export const drawCustomSvgIcon = (ctx, icons, point, type, isHovered) => {
+    if (isHovered) {
+        const hover = icons[getIconHash(type, 'hover')];
+        ctx.drawImage(hover.img, point.x - hover.svgHeight / 2, point.y - hover.svgHeight / 2);
+    }
+    else {
+        const normal = icons[getIconHash(type, 'normal')];
+        ctx.drawImage(normal.img, point.x - normal.svgHeight / 2, point.y - normal.svgHeight / 2);
+    }
+};

package/dist/chart/components/events/events.drawer.d.ts

@@ -5,12 +5,12 @@
  */
 import { Bounds } from '../../model/bounds.model';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
-import { CustomIcon, FullChartConfig } from '../../chart.config';
+import { FullChartConfig, EventColors } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { Drawer } from '../../drawers/drawing-manager';
 import { DateTimeFormatter } from '../../model/date-time.formatter';
 import { ChartModel } from '../chart/chart.model';
-import { EconomicEvent, EventsModel, EventType, EventWithId } from './events.model';
+import { EconomicEvent, EventsModel, EventWithId } from './events.model';
 export declare class EventsDrawer implements Drawer {
     private canvasModel;
     private chartModel;
@@ -20,22 +20,6 @@ export declare class EventsDrawer implements Drawer {
     private formatterProvider;
     private customIcons;
     constructor(canvasModel: CanvasModel, chartModel: ChartModel, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, model: EventsModel, formatterProvider: () => DateTimeFormatter);
-    /**
-     * Creates a custom icon for a given event type.
-     * @param {EventType} type - The type of the event.
-     * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
-     * @returns {void}
-     */
-    createCustomIcon(type: EventType, icon?: CustomIcon): void;
-    /**
-     * Creates an icon image from a string containing SVG data.
-     * @param {string} iconString - The string containing SVG data.
-     * @returns {Object} An object containing an Image object and the height of the SVG element.
-     */
-    createIconImage(iconString: string): {
-        img: HTMLImageElement;
-        svgHeight: number;
-    };
     /**
      * Draws events on the chart canvas if they are visible according to the configuration.
      * The events are filtered by type and then iterated over to draw them on the chart.
@@ -44,25 +28,16 @@ export declare class EventsDrawer implements Drawer {
      * @returns {void}
      */
     draw(): void;
-    /**
-     * Draws a custom SVG event on a canvas context.
-     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
-     * @param {number} x - The x coordinate of the event.
-     * @param {Bounds} bounds - The bounds of the event.
-     * @param {EventWithId} event - The event to draw.
-     * @returns {void}
-     */
-    drawCustomSvgEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId): void;
     /**
      * Draws a default event on a canvas context.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
      * @param {number} x - The x coordinate of the event.
      * @param {Bounds} bounds - The bounds of the event.
      * @param {EventWithId} event - The event to draw.
-     * @param {string} color - The color of the event.
+     * @param {EventColors} colors - The colors of the event.
      * @returns {void}
      */
-    drawDefaultEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId, color: string): void;
+    drawDefaultEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId, colors: EventColors): void;
     /**
      * This function is responsible for drawing a label on the canvas at a given x coordinate. The label contains a formatted timestamp of a given event. The function takes two parameters: x, which is the x coordinate where the label will be drawn, and event, which is an object containing information about the event, including its timestamp and type.
      * The function first gets the canvas context and the bounds of the x-axis. It then retrieves the font family, font height, and top padding from the configuration object. The y coordinate of the label is calculated based on the font height, top padding, and the y coordinate of the x-axis bounds. The font is set using the retrieved font family and font height.
@@ -81,6 +56,6 @@ export declare class EventsDrawer implements Drawer {
  * Returns the size of an event based on its style
  * @param {EconomicEvent} event - The event to get the size of
  * @returns {number} - The size of the event
- 
+
 */
 export declare function getEventSize(event: EconomicEvent): number;

package/dist/chart/components/events/events.drawer.js

@@ -4,12 +4,18 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { createCustomIcon, drawCustomSvgIcon, getIconHash } from './events-custom-icons';
 const eventsSizesDict = {
     'rhombus-small': 4,
     rhombus: 6,
     'rhombus-large': 8,
 };
-const getIconHash = (type, state) => `${type}_${state}`;
+const iconTypes = [
+    'earnings',
+    'dividends',
+    'splits',
+    'conference-calls',
+];
 export class EventsDrawer {
     constructor(canvasModel, chartModel, config, canvasBoundsContainer, model, formatterProvider) {
         this.canvasModel = canvasModel;
@@ -22,48 +28,14 @@ export class EventsDrawer {
         this.customIcons = {};
         const iconsConfig = this.config.components.events.icons;
         if (iconsConfig) {
-            this.createCustomIcon('earnings', iconsConfig.earnings);
-            this.createCustomIcon('dividends', iconsConfig.dividends);
-            this.createCustomIcon('splits', iconsConfig.splits);
-            this.createCustomIcon('conference-calls', iconsConfig.conferenceCalls);
-        }
-    }
-    /**
-     * Creates a custom icon for a given event type.
-     * @param {EventType} type - The type of the event.
-     * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
-     * @returns {void}
-     */
-    createCustomIcon(type, icon) {
-        if (icon) {
-            const normal = this.createIconImage(icon.normal);
-            const hover = this.createIconImage(icon.hover);
-            this.customIcons[getIconHash(type, 'normal')] = normal;
-            this.customIcons[getIconHash(type, 'hover')] = hover;
-        }
-    }
-    /**
-     * Creates an icon image from a string containing SVG data.
-     * @param {string} iconString - The string containing SVG data.
-     * @returns {Object} An object containing an Image object and the height of the SVG element.
-     */
-    createIconImage(iconString) {
-        var _a;
-        const parser = new DOMParser();
-        const svgSelector = parser.parseFromString(iconString, 'text/html').querySelector('svg');
-        let svgHeight = 0;
-        if (svgSelector) {
-            svgHeight = parseInt((_a = svgSelector.getAttribute('height')) !== null && _a !== void 0 ? _a : '', 10);
+            iconTypes.forEach(type => {
+                const customIcon = createCustomIcon(type, iconsConfig[type]);
+                if (customIcon) {
+                    this.customIcons[getIconHash(customIcon.type, 'normal')] = customIcon.normal;
+                    this.customIcons[getIconHash(customIcon.type, 'hover')] = customIcon.hover;
+                }
+            });
         }
-        const svg64 = btoa(iconString);
-        const b64Start = 'data:image/svg+xml;base64,';
-        const image64 = b64Start + svg64;
-        const img = new Image();
-        img.src = image64;
-        return {
-            img,
-            svgHeight,
-        };
     }
     /**
      * Draws events on the chart canvas if they are visible according to the configuration.
@@ -83,20 +55,28 @@ export class EventsDrawer {
         this.model.events
             .filter(e => this.config.components.events.eventsVisibility[e.type])
             .forEach(event => {
+            var _a, _b, _c, _d;
             const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
             if (x > chartBounds.x && x < chartBounds.x + chartBounds.width) {
-                const color = this.config.colors.events[event.type].color;
-                ctx.strokeStyle = color;
+                const colors = this.config.colors.events[event.type];
+                ctx.strokeStyle = (_b = (_a = colors.line) !== null && _a !== void 0 ? _a : colors.normal) !== null && _b !== void 0 ? _b : colors.color;
                 // check custom icon in cache
                 if (this.customIcons[getIconHash(event.type, 'hover')] !== undefined) {
-                    this.drawCustomSvgEvent(ctx, x, bounds, event);
+                    const point = { x, y: bounds.y + bounds.height / 2 };
+                    const isHovered = this.model.hoveredEvent.getValue() === event;
+                    drawCustomSvgIcon(ctx, this.customIcons, point, event.type, isHovered);
                 }
                 else {
-                    this.drawDefaultEvent(ctx, x, bounds, event, color);
+                    this.drawDefaultEvent(ctx, x, bounds, event, colors);
                 }
                 // draw vertical line and label for the hovered event
                 if (this.model.hoveredEvent.getValue() === event) {
+                    const line = this.config.components.events.line;
+                    const width = line && line[event.type] && ((_c = line[event.type]) === null || _c === void 0 ? void 0 : _c.width);
+                    const dash = line && line[event.type] && ((_d = line[event.type]) === null || _d === void 0 ? void 0 : _d.dash);
+                    ctx.lineWidth = width !== null && width !== void 0 ? width : 1;
                     ctx.beginPath();
+                    ctx.setLineDash(dash !== null && dash !== void 0 ? dash : []);
                     ctx.moveTo(x, chartBounds.y);
                     ctx.lineTo(x, bounds.y + bounds.height / 2);
                     ctx.stroke();
@@ -109,37 +89,19 @@ export class EventsDrawer {
         });
         ctx.restore();
     }
-    /**
-     * Draws a custom SVG event on a canvas context.
-     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
-     * @param {number} x - The x coordinate of the event.
-     * @param {Bounds} bounds - The bounds of the event.
-     * @param {EventWithId} event - The event to draw.
-     * @returns {void}
-     */
-    drawCustomSvgEvent(ctx, x, bounds, event) {
-        const y = bounds.y + bounds.height / 2;
-        const normal = this.customIcons[getIconHash(event.type, 'normal')];
-        const hover = this.customIcons[getIconHash(event.type, 'hover')];
-        if (this.model.hoveredEvent.getValue() === event) {
-            ctx.drawImage(hover.img, x - hover.svgHeight / 2, y - hover.svgHeight / 2);
-        }
-        else {
-            ctx.drawImage(normal.img, x - normal.svgHeight / 2, y - normal.svgHeight / 2);
-        }
-    }
     /**
      * Draws a default event on a canvas context.
      * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
      * @param {number} x - The x coordinate of the event.
      * @param {Bounds} bounds - The bounds of the event.
      * @param {EventWithId} event - The event to draw.
-     * @param {string} color - The color of the event.
+     * @param {EventColors} colors - The colors of the event.
      * @returns {void}
      */
-    drawDefaultEvent(ctx, x, bounds, event, color) {
+    drawDefaultEvent(ctx, x, bounds, event, colors) {
+        var _a, _b, _c;
         const y = bounds.y + bounds.height / 2;
-        ctx.fillStyle = color;
+        ctx.fillStyle = (_a = colors.normal) !== null && _a !== void 0 ? _a : colors.color;
         // draw figure
         ctx.lineWidth = 1.5; // 1.5 pixels
         const size = getEventSize(event);
@@ -150,9 +112,11 @@ export class EventsDrawer {
         ctx.lineTo(x, y + size);
         ctx.closePath();
         if (this.model.hoveredEvent.getValue() === event) {
+            ctx.fillStyle = (_b = colors.hover) !== null && _b !== void 0 ? _b : colors.color;
             ctx.fill();
         }
         else {
+            ctx.strokeStyle = (_c = colors.normal) !== null && _c !== void 0 ? _c : colors.color;
             ctx.stroke();
         }
     }
@@ -193,7 +157,7 @@ export class EventsDrawer {
  * Returns the size of an event based on its style
  * @param {EconomicEvent} event - The event to get the size of
  * @returns {number} - The size of the event
- 
+
 */
 export function getEventSize(event) {
     return eventsSizesDict[event.style];

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -71,6 +71,7 @@ export declare class PaneManager extends ChartBaseElement {
     /**
      * Creates sub-plot on the chart with y-axis
      * @param uuid
+     * @param {AtLeastOne<YExtentCreationOptions>} options
      * @returns
      */
     createPane(uuid?: string, options?: AtLeastOne<YExtentCreationOptions>): PaneComponent;
@@ -111,7 +112,7 @@ export declare class PaneManager extends ChartBaseElement {
     /**
      * Move data series to a certain pane, or create a new one if no pane is found
      */
-    moveDataSeriesToPane(dataSeries: DataSeriesModel[], initialPane: PaneComponent, initialExtent: YExtentComponent, paneUUID?: string, extent?: YExtentComponent, direction?: MoveDataSeriesToPaneDirection): void;
+    moveDataSeriesToPane(dataSeries: DataSeriesModel[], initialPane: PaneComponent, initialExtent: YExtentComponent, paneUUID?: string, extent?: YExtentComponent, direction?: MoveDataSeriesToPaneDirection, index?: number): void;
     /**
      * Adds cursors to the chart elements based on the provided uuid and cursor type.
      * @private

package/dist/chart/components/pane/pane-manager.component.js

@@ -8,7 +8,7 @@ import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container'
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { uuid as generateUuid } from '../../utils/uuid.utils';
 import { createHighLowOffsetCalculator } from '../chart/data-series.high-low-provider';
-import { BarResizerComponent } from '../resizer/bar-resizer.component';
+import { BarResizerComponent, RESIZER_HIT_TEST_EXTENSION } from '../resizer/bar-resizer.component';
 import { createDefaultYExtentHighLowProvider, } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
@@ -63,7 +63,7 @@ export class PaneManager extends ChartBaseElement {
      */
     addResizer(uuid) {
         const resizerHT = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_RESIZER(uuid), {
-            extensionY: this.config.components.paneResizer.dragZone,
+            extensionY: this.config.components.paneResizer.dragZone + RESIZER_HIT_TEST_EXTENSION,
         });
         const dragPredicate = () => this.chartBaseModel.mainVisualPoints.length !== 0;
         const dragTick = () => {
@@ -90,6 +90,7 @@ export class PaneManager extends ChartBaseElement {
     /**
      * Creates sub-plot on the chart with y-axis
      * @param uuid
+     * @param {AtLeastOne<YExtentCreationOptions>} options
      * @returns
      */
     createPane(uuid = generateUuid(), options) {
@@ -191,11 +192,11 @@ export class PaneManager extends ChartBaseElement {
     /**
      * Move data series to a certain pane, or create a new one if no pane is found
      */
-    moveDataSeriesToPane(dataSeries, initialPane, initialExtent, paneUUID, extent, direction) {
+    moveDataSeriesToPane(dataSeries, initialPane, initialExtent, paneUUID, extent, direction, index = 0) {
         const pane = paneUUID && this.panes[paneUUID];
         if (!pane) {
-            const order = direction && direction === 'above' ? 0 : this.panesOrder.length;
-            const newPane = this.createPane(undefined, { order });
+            const order = direction && direction === 'above' ? index : this.panesOrder.length + index;
+            const newPane = this.createPane(paneUUID, { order });
             newPane.moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, newPane.mainExtent);
             initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
             return;
@@ -204,7 +205,7 @@ export class PaneManager extends ChartBaseElement {
             pane.moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, extent);
         }
         else {
-            pane.moveDataSeriesToNewExtentComponent(dataSeries, initialPane, initialExtent);
+            pane.moveDataSeriesToNewExtentComponent(dataSeries, initialPane, initialExtent, initialExtent.yAxis.state.align);
         }
         initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
     }
@@ -220,7 +221,7 @@ export class PaneManager extends ChartBaseElement {
         const paneResizer = CanvasElement.PANE_UUID_RESIZER(uuid);
         this.cursorHandler.setCursorForCanvasEl(pane, cursor);
         this.config.components.paneResizer.visible &&
-            this.cursorHandler.setCursorForCanvasEl(paneResizer, this.config.components.paneResizer.cursor, this.config.components.paneResizer.dragZone);
+            this.cursorHandler.setCursorForCanvasEl(paneResizer, this.config.components.paneResizer.cursor, this.config.components.paneResizer.dragZone + RESIZER_HIT_TEST_EXTENSION);
         return () => {
             this.cursorHandler.removeCursorForCanvasEl(pane);
             this.config.components.paneResizer.visible && this.cursorHandler.removeCursorForCanvasEl(paneResizer);