@devexperts/dxcharts-lite 1.0.2 → 2.0.0

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -3,4 +3,122 @@
  * 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{CanvasElement as V,CHART_UUID as q}from"../../../canvas/canvas-bounds-container";import{getFontFromConfig as I}from"../../../chart.config";import{redrawBackgroundArea as z}from"../../../drawers/chart-background.drawer";import{avoidAntialiasing as J,drawLine as K}from"../../../utils/canvas/canvas-drawing-functions.utils";import{calculateSymbolHeight as N,calculateTextWidth as R}from"../../../utils/canvas/canvas-font-measure-tool.utils";import{floor as O}from"../../../utils/math.utils";import{drawBadgeLabel as Q,drawPlainLabel as Z,drawRectLabel as $}from"../y-axis-labels.drawer";export const DEFAULT_LABEL_APPEARANCE_TYPE="badge";const X=4;export const priceLabelDrawersMap={badge:Q,rectangle:$,plain:Z};export function drawLabel(o,n,e,m,t,B,l,_){var s,d,c,r,a;const p=t.y,f=t.labelText,T=(s=t.mode)!==null&&s!==void 0?s:"label",x=(d=t.labelType)!==null&&d!==void 0?d:DEFAULT_LABEL_APPEARANCE_TYPE,g=t.description,A=(c=t.textFont)!==null&&c!==void 0?c:I(l),w=t.bgColor,b=(r=t.lineColor)!==null&&r!==void 0?r:w,h=R(g!=null?g:"",o,A)+8,D=O(t.y),y=N(A,o),E=p-y/2,j=p+y/2-E;o.save(),o.fillStyle=w,o.strokeStyle=b;const i=B.getBounds(V.PANE_UUID(q)),G=priceLabelDrawersMap[x],C=l.labels.descriptions,M=v(e,D,j),Y=()=>C&&L(n,o,e,m,t,l.align,l);let F,P;const U=2;l.align==="right"?(F=i.x,P=C?i.x+i.width-h:i.x+i.width+U):(F=C?i.x+h:i.x-U,P=i.x+i.width);const k=(a=t.lineY)!==null&&a!==void 0?a:t.y,H=()=>M&&J(o,()=>K(o,F,k,P,k,1)),W=()=>G(o,e,f,p,t,l,_,!1,n);switch(T){case"line":H(),Y();break;case"line-label":H(),Y(),W();break;case"label":Y(),W();break;case"none":break}o.restore()}const v=(o,n,e)=>n>o.y+e/2&&n<o.y+o.height-e/2;function L(o,n,e,m,t,B="right",l){var _,s,d;const c=t.description;if(!c||c.length===0)return;const r=t.y,a=I(l),p=R(c,n,a),f=N(a,n),T=(_=t.paddingTop)!==null&&_!==void 0?_:X,x=(s=t.paddingBottom)!==null&&s!==void 0?s:X,g=r-f/2-T,w=r+f/2+x-g;if(r<e.y+w/2||r>e.y+e.height-w/2)return;n.save();const b=p+5,h=4,D=p+h*2,y=m.x+m.width,E=B==="right"?y-D:m.x+h;z(o,n,E,g,b,w,.8),n.fillStyle=(d=t.descColor)!==null&&d!==void 0?d:t.bgColor,n.font=a;const S=B==="right"?y-p-h*2:m.x+h*2;n.fillText(c,S,r+f/2-1),n.restore()}
+import { CanvasElement, CHART_UUID } from '../../../canvas/canvas-bounds-container';
+import { getFontFromConfig, } from '../../../chart.config';
+import { redrawBackgroundArea } from '../../../drawers/chart-background.drawer';
+import { avoidAntialiasing, drawLine } from '../../../utils/canvas/canvas-drawing-functions.utils';
+import { calculateSymbolHeight, calculateTextWidth } from '../../../utils/canvas/canvas-font-measure-tool.utils';
+import { floor } from '../../../utils/math.utils';
+import { drawBadgeLabel, drawPlainLabel, drawRectLabel } from '../y-axis-labels.drawer';
+export const DEFAULT_LABEL_APPEARANCE_TYPE = 'badge';
+const DEFAULT_PADDING = 4;
+export const priceLabelDrawersMap = {
+    badge: drawBadgeLabel,
+    rectangle: drawRectLabel,
+    plain: drawPlainLabel,
+};
+/**
+ * Draws label on Y axis with provided parameters.
+ * @param ctx - canvas 2D context to draw on
+ * @param bounds - bounds of Y axis
+ * @param visualLabel
+ * @param canvasBoundsContainer
+ * @param config
+ */
+export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, canvasBoundsContainer, config, colors) {
+    var _a, _b, _c, _d, _e;
+    const centralY = visualLabel.y;
+    const text = visualLabel.labelText;
+    const mode = (_a = visualLabel.mode) !== null && _a !== void 0 ? _a : 'label';
+    const appearanceType = (_b = visualLabel.labelType) !== null && _b !== void 0 ? _b : DEFAULT_LABEL_APPEARANCE_TYPE;
+    const description = visualLabel.description;
+    const textFont = (_c = visualLabel.textFont) !== null && _c !== void 0 ? _c : getFontFromConfig(config);
+    const bgColor = visualLabel.bgColor;
+    const lineColor = (_d = visualLabel.lineColor) !== null && _d !== void 0 ? _d : bgColor;
+    const descriptionWidth = calculateTextWidth(description !== null && description !== void 0 ? description : '', ctx, textFont) + 8;
+    const labelY = floor(visualLabel.y);
+    const fontHeight = calculateSymbolHeight(textFont, ctx);
+    const labelBoxTopY = centralY - fontHeight / 2;
+    const labelBoxBottomY = centralY + fontHeight / 2;
+    const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
+    ctx.save();
+    ctx.fillStyle = bgColor;
+    ctx.strokeStyle = lineColor;
+    const chartBounds = canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+    const drawLabel = priceLabelDrawersMap[appearanceType];
+    const showDescription = config.labels.descriptions;
+    const showLine = isLineVisible(bounds, labelY, labelBoxHeight);
+    const _drawDescription = () => showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config.align, config);
+    let lineXStart;
+    let lineXEnd;
+    // line should touch the label
+    const lineStartAdjust = 2;
+    if (config.align === 'right') {
+        lineXStart = chartBounds.x;
+        lineXEnd = showDescription
+            ? chartBounds.x + chartBounds.width - descriptionWidth
+            : chartBounds.x + chartBounds.width + lineStartAdjust;
+    }
+    else {
+        lineXStart = showDescription ? chartBounds.x + descriptionWidth : chartBounds.x - lineStartAdjust;
+        lineXEnd = chartBounds.x + chartBounds.width;
+    }
+    const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
+    const _drawLine = () => showLine && avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1));
+    const _drawLabel = () => drawLabel(ctx, bounds, text, centralY, visualLabel, config, colors, false, backgroundCtx);
+    switch (mode) {
+        case 'line':
+            _drawLine();
+            _drawDescription();
+            break;
+        case 'line-label':
+            _drawLine();
+            _drawDescription();
+            _drawLabel();
+            break;
+        case 'label':
+            _drawDescription();
+            _drawLabel();
+            break;
+        case 'none':
+            break;
+    }
+    ctx.restore();
+}
+const isLineVisible = (bounds, labelY, labelBoxHeight) => labelY > bounds.y + labelBoxHeight / 2 && labelY < bounds.y + bounds.height - labelBoxHeight / 2;
+function drawDescription(backgroundCtx, ctx, labelBounds, paneBounds, visualLabel, align = 'right', yAxisState) {
+    var _a, _b, _c;
+    const description = visualLabel.description;
+    if (!description || description.length === 0) {
+        return;
+    }
+    const centralY = visualLabel.y;
+    const textFont = getFontFromConfig(yAxisState);
+    const descriptionWidth = calculateTextWidth(description, ctx, textFont);
+    const fontHeight = calculateSymbolHeight(textFont, ctx);
+    const paddingTop = (_a = visualLabel.paddingTop) !== null && _a !== void 0 ? _a : DEFAULT_PADDING;
+    const paddingBottom = (_b = visualLabel.paddingBottom) !== null && _b !== void 0 ? _b : DEFAULT_PADDING;
+    const labelBoxY = centralY - fontHeight / 2 - paddingTop;
+    const labelBoxBottom = centralY + fontHeight / 2 + paddingBottom;
+    const labelBoxHeight = labelBoxBottom - labelBoxY;
+    // do not draw, if description is out of bounds
+    if (centralY < labelBounds.y + labelBoxHeight / 2 ||
+        centralY > labelBounds.y + labelBounds.height - labelBoxHeight / 2) {
+        return;
+    }
+    ctx.save();
+    // overlay rect
+    const width = descriptionWidth + 5;
+    const descriptionPadding = 4;
+    const rectWidth = descriptionWidth + descriptionPadding * 2;
+    const boundsEnd = paneBounds.x + paneBounds.width;
+    const x = align === 'right' ? boundsEnd - rectWidth : paneBounds.x + descriptionPadding;
+    redrawBackgroundArea(backgroundCtx, ctx, x, labelBoxY, width, labelBoxHeight, 0.8);
+    ctx.fillStyle = (_c = visualLabel.descColor) !== null && _c !== void 0 ? _c : visualLabel.bgColor;
+    ctx.font = textFont;
+    const xTextBounds = align === 'right'
+        ? boundsEnd - descriptionWidth - descriptionPadding * 2
+        : paneBounds.x + descriptionPadding * 2;
+    ctx.fillText(description, xTextBounds, centralY + fontHeight / 2 - 1); // -1 for font height adjustment
+    ctx.restore();
+}

package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.d.ts

@@ -5,13 +5,13 @@
  */
 import { Observable } from 'rxjs';
 import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
-import { ChartConfigComponentsYAxis, FullChartConfig, YAxisLabelMode } from '../../../chart.config';
+import { YAxisConfig, YAxisLabelMode } from '../../../chart.config';
 import EventBus from '../../../events/event-bus';
 import { Bounds } from '../../../model/bounds.model';
 import { CanvasModel } from '../../../model/canvas.model';
 import { ChartBaseElement } from '../../../model/chart-base-element';
+import { ScaleModel } from '../../../model/scale.model';
 import { Unit } from '../../../model/scaling/viewport.model';
-import { ChartModel } from '../../chart/chart.model';
 import { YAxisLabelDrawConfig } from '../y-axis-labels.drawer';
 export type YAxisVisualLabelType = 'badge' | 'rectangle' | 'plain';
 export interface VisualYAxisLabel extends YAxisLabelDrawConfig {
@@ -27,7 +27,7 @@ export interface VisualYAxisLabel extends YAxisLabelDrawConfig {
 export interface LabelGroup {
     labels: VisualYAxisLabel[];
     bounds?: Bounds;
-    axisState?: ChartConfigComponentsYAxis;
+    axisState?: YAxisConfig;
 }
 export type ProviderGroups = Record<string, YAxisLabelsProvider[]>;
 export declare const LabelsGroups: {
@@ -45,12 +45,13 @@ export declare const LabelsGroups: {
  * - ...
  * Anything but the base labels which are generated in other component {@link YAxisBaseLabelsModel}
  */
-export declare class YAxisLabelsModel extends ChartBaseElement {
+export declare class FancyYAxisLabelsModel extends ChartBaseElement {
     eventBus: EventBus;
-    private chartModel;
+    private scale;
     private canvasBoundsContainer;
-    private config;
+    private state;
     private canvasModel;
+    private paneUUID;
     private updateYAxisWidth;
     orderedLabels: LabelGroup[];
     /**
@@ -60,7 +61,7 @@ export declare class YAxisLabelsModel extends ChartBaseElement {
     private labelsProviders;
     private labelsPositionRecalculatedSubject;
     private animFrameId;
-    constructor(eventBus: EventBus, chartModel: ChartModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasModel: CanvasModel, updateYAxisWidth: () => void);
+    constructor(eventBus: EventBus, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, state: YAxisConfig, canvasModel: CanvasModel, paneUUID: string, updateYAxisWidth: () => void);
     /**
      * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
      * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
@@ -68,7 +69,7 @@ export declare class YAxisLabelsModel extends ChartBaseElement {
      * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
      * - chartModel.nextCandleTimeStampSubject
      * - canvasBoundsContainer.barResizerChangedSubject
-     * - chartModel.scaleModel.changed
+     * - chartModel.scale.changed
      * When any of these observables emit a new value, the updateLabels() method is called.
      * @protected
      */

package/dist/chart/components/y_axis/price_labels/y-axis-labels.model.js

@@ -3,4 +3,204 @@
  * 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{merge as h,Subject as b}from"rxjs";import{CanvasElement as c,CHART_UUID as v}from"../../../canvas/canvas-bounds-container";import{ChartBaseElement as u}from"../../../model/chart-base-element";import{animationFrameThrottledPrior as p}from"../../../utils/perfomance/request-animation-frame-throttle.utils";import{uuid as m}from"../../../utils/uuid.utils";import{calcLabelsYCoordinates as f}from"./labels-positions-calculator";import{flat as d}from"../../../utils/array.utils";export const LabelsGroups={MAIN:"MAIN"};export class YAxisLabelsModel extends u{constructor(e,s,t,i,r,l){super(),this.eventBus=e,this.chartModel=s,this.canvasBoundsContainer=t,this.config=i,this.canvasModel=r,this.updateYAxisWidth=l,this.orderedLabels=[],this.customLabels={},this.labelsProviders={},this.labelsPositionRecalculatedSubject=new b,this.animFrameId=`anim_cache_${m()}`,this.initModel()}doActivate(){super.doActivate(),this.addRxSubscription(h(this.chartModel.observeCandlesChanged(),this.canvasBoundsContainer.observeBoundsChanged(c.PANE_UUID(v)),this.chartModel.nextCandleTimeStampSubject,this.canvasBoundsContainer.barResizerChangedSubject,this.chartModel.scaleModel.changed).subscribe(()=>{this.updateLabels()}))}initModel(){this.initLabelsGroups(),this.recalculateLabels(),this.canvasModel.fireDraw()}initLabelsGroups(){if(Object.keys(this.labelsProviders).length!==0)for(const e of Object.keys(this.labelsProviders))this.createGroup(e),Object.entries(this.labelsProviders[e]).forEach(([s,t])=>{this.addToGroup(t,e,s)})}updateLabels(e=!1){this.recalculateLabels(),p(this.animFrameId,()=>{e&&this.updateYAxisWidth(),this.canvasModel.fireDraw()})}recalculateLabels(){var e,s;this.orderedLabels=[];const t=this.config.components.yAxis.fontSize+((e=this.config.components.yAxis.labelBoxMargin.top)!==null&&e!==void 0?e:0)+((s=this.config.components.yAxis.labelBoxMargin.bottom)!==null&&s!==void 0?s:0);for(const i of Object.values(this.labelsProviders)){const r=d(Object.values(i).map(a=>a.getUnorderedLabels())),l=d(r.map(a=>a.labels)).map(a=>{var o;return{y:a.y,weight:(o=a.labelWeight)!==null&&o!==void 0?o:Number.POSITIVE_INFINITY}}),n=f(l,t);r.forEach(a=>{const o=n.splice(0,a.labels.length);this.orderedLabels.push(this.updateLabelsCoordinates(a,o))})}this.orderedLabels=this.orderedLabels.reverse()}createGroup(e){!this.labelsProviders[e]&&(this.labelsProviders[e]={})}addToGroup(e,s,t){this.labelsProviders[s]&&(Object.values(this.labelsProviders[s]).includes(e)||(this.labelsProviders[s][t]=e))}updateLabelsCoordinates(e,s){return Object.assign(Object.assign({},e),{labels:e.labels.map((t,i)=>Object.assign(Object.assign({},t),{lineY:t.y,y:s[i]}))})}observeLabelsPositionsRecalculated(){return this.labelsPositionRecalculatedSubject.asObservable()}registerYAxisLabelsProvider(e,s,t){var i;const r=(i=this.labelsProviders[e])!==null&&i!==void 0?i:{};r[t]=s,this.labelsProviders[e]=r,this.initModel()}unregisterYAxisLabelsProvider(e,s){var t;const i=(t=this.labelsProviders[e])!==null&&t!==void 0?t:{};delete i[s],this.labelsProviders[e]&&Object.keys(this.labelsProviders[e]).length===0&&delete this.labelsProviders[e],this.initModel()}}
+import { merge, Subject } from 'rxjs';
+import { CanvasElement } from '../../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../../model/chart-base-element';
+import { flat } from '../../../utils/array.utils';
+import { animationFrameThrottledPrior } from '../../../utils/performance/request-animation-frame-throttle.utils';
+import { uuid } from '../../../utils/uuid.utils';
+import { calcLabelsYCoordinates } from './labels-positions-calculator';
+export const LabelsGroups = {
+    MAIN: 'MAIN',
+};
+/**
+ * Different labels on Y axis:
+ * - last candle price
+ * - bid/ask
+ * - countdown
+ * - prev.day price
+ * - high low in viewport
+ * - drawings
+ * - studies
+ * - ...
+ * Anything but the base labels which are generated in other component {@link YAxisBaseLabelsModel}
+ */
+export class FancyYAxisLabelsModel extends ChartBaseElement {
+    constructor(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, updateYAxisWidth) {
+        super();
+        this.eventBus = eventBus;
+        this.scale = scale;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.state = state;
+        this.canvasModel = canvasModel;
+        this.paneUUID = paneUUID;
+        this.updateYAxisWidth = updateYAxisWidth;
+        this.orderedLabels = [];
+        /**
+         * an easier way to manage custom y-axis labels, than y-axis labels providers, but doesn't support overlapping avoidance
+         */
+        this.customLabels = {};
+        this.labelsProviders = {};
+        this.labelsPositionRecalculatedSubject = new Subject();
+        this.animFrameId = `anim_cache_${uuid()}`;
+        this.initModel();
+    }
+    /**
+     * This method is used to activate the chart and subscribe to the observables that will trigger the update of the labels.
+     * It calls the parent method doActivate() and adds a new Rx subscription to the merge of the following observables:
+     * - chartModel.observeCandlesChanged()
+     * - canvasBoundsContainer.observeBoundsChanged(CanvasElement.CHART)
+     * - chartModel.nextCandleTimeStampSubject
+     * - canvasBoundsContainer.barResizerChangedSubject
+     * - chartModel.scale.changed
+     * When any of these observables emit a new value, the updateLabels() method is called.
+     * @protected
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(merge(this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed).subscribe(() => {
+            this.updateLabels();
+        }));
+    }
+    /**
+     * Initializes the model by calling the methods to initialize the label groups and recalculate the labels.
+     * Then, it fires the draw event on the canvas model.
+     * @private
+     */
+    initModel() {
+        this.initLabelsGroups();
+        this.recalculateLabels();
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Initializes the labels groups.
+     * If there are labels providers, it creates a group for each one and adds the providers to their respective groups.
+     * @returns {void}
+     */
+    initLabelsGroups() {
+        for (const groupName of Object.keys(this.labelsProviders)) {
+            this.createGroup(groupName);
+            Object.entries(this.labelsProviders[groupName]).forEach(([id, provider]) => {
+                this.addToGroup(provider, groupName, id);
+            });
+        }
+    }
+    /**
+     * Updates YAxis ordered labels.
+     * @param adjustYAxisWidth - provide "true", if you need to adjust width after new labels will be calculated.
+     */
+    updateLabels(adjustYAxisWidth = false) {
+        // Updating labels is an expensive operation, and depends on chart data.
+        // Animation frame is needed here, because recalculation can be proceeded while rendering, and make render process fregmented.
+        this.recalculateLabels();
+        animationFrameThrottledPrior(this.animFrameId, () => {
+            adjustYAxisWidth && this.updateYAxisWidth();
+            this.canvasModel.fireDraw();
+        });
+    }
+    /**
+     * Recalculates the labels based on the current configuration and label providers.
+     * It generates label groups and calculates their coordinates based on their weight and the label height.
+     * The coordinates are generated in the order they were passed to the generator.
+     * The ordered labels are then updated with the new coordinates and reversed.
+     * @returns {void}
+     */
+    recalculateLabels() {
+        var _a, _b;
+        this.orderedLabels = [];
+        const labelHeight = this.state.fontSize + ((_a = this.state.labelBoxMargin.top) !== null && _a !== void 0 ? _a : 0) + ((_b = this.state.labelBoxMargin.bottom) !== null && _b !== void 0 ? _b : 0);
+        for (const providers of Object.values(this.labelsProviders)) {
+            // generated label groups
+            const labelGroups = flat(Object.values(providers).map(c => c.getUnorderedLabels()));
+            const labelsPointsAndWeight = flat(labelGroups.map(g => g.labels)).map(label => {
+                var _a;
+                return ({
+                    y: label.y,
+                    weight: (_a = label.labelWeight) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY,
+                });
+            });
+            // coordinates are generated in order they were passed to generator
+            const updatedCoordinates = calcLabelsYCoordinates(labelsPointsAndWeight, labelHeight);
+            labelGroups.forEach(labelGroup => {
+                const points = updatedCoordinates.splice(0, labelGroup.labels.length);
+                this.orderedLabels.push(this.updateLabelsCoordinates(labelGroup, points));
+            });
+        }
+        this.orderedLabels = this.orderedLabels.reverse();
+    }
+    /**
+     * Creates a new group with the given name if it doesn't exist yet.
+     * @param {string} groupName - The name of the group to be created.
+     * @returns {void}
+     */
+    createGroup(groupName) {
+        !this.labelsProviders[groupName] && (this.labelsProviders[groupName] = {});
+    }
+    /**
+     * Adds a YAxisLabelsProvider component to a group.
+     *
+     * @param {YAxisLabelsProvider} component - The component to add to the group.
+     * @param {string} groupName - The name of the group to add the component to.
+     * @param {string} id - The id of the component to add to the group.
+     * @returns {void}
+     */
+    addToGroup(component, groupName, id) {
+        if (this.labelsProviders[groupName]) {
+            if (!Object.values(this.labelsProviders[groupName]).includes(component)) {
+                this.labelsProviders[groupName][id] = component;
+            }
+        }
+    }
+    /**
+     * Updates the coordinates of the labels in a LabelGroup object based on an array of points.
+     * @param {LabelGroup} labels - The LabelGroup object containing the labels to be updated.
+     * @param {number[]} points - An array of points to be used to update the y-coordinate of each label.
+     * @returns {LabelGroup} - A new LabelGroup object with updated label coordinates.
+     */
+    updateLabelsCoordinates(labels, points) {
+        return Object.assign(Object.assign({}, labels), { labels: labels.labels.map((label, idx) => (Object.assign(Object.assign({}, label), { 
+                // save original y
+                lineY: label.y, y: points[idx] }))) });
+    }
+    /**
+     * Returns an Observable that emits a void value whenever the labels position is recalculated.
+     * The Observable is created from the labelsPositionRecalculatedSubject Subject.
+     * @returns {Observable<void>} An Observable that emits a void value whenever the labels position is recalculated.
+     */
+    observeLabelsPositionsRecalculated() {
+        return this.labelsPositionRecalculatedSubject.asObservable();
+    }
+    /**
+     * Registers a Y axis labels provider for a given group name and ID.
+     *
+     * @param {string} groupName - The name of the group to which the provider belongs.
+     * @param {YAxisLabelsProvider} provider - The provider to be registered.
+     * @param {string} id - The ID of the provider to be registered.
+     * @returns {void}
+     */
+    registerYAxisLabelsProvider(groupName, provider, id) {
+        var _a;
+        const providers = (_a = this.labelsProviders[groupName]) !== null && _a !== void 0 ? _a : {};
+        providers[id] = provider;
+        this.labelsProviders[groupName] = providers;
+        this.initModel();
+    }
+    /**
+     * Unregisters a Y axis labels provider.
+     *
+     * @param {string} groupName - The name of the group to which the provider belongs.
+     * @param {string} id - The ID of the provider to unregister.
+     *
+     * @returns {void}
+     */
+    unregisterYAxisLabelsProvider(groupName, id) {
+        var _a;
+        const providers = (_a = this.labelsProviders[groupName]) !== null && _a !== void 0 ? _a : {};
+        delete providers[id];
+        // if group is empty, delete it too
+        if (this.labelsProviders[groupName] && Object.keys(this.labelsProviders[groupName]).length === 0) {
+            delete this.labelsProviders[groupName];
+        }
+        this.initModel();
+    }
+}

package/dist/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.d.ts

@@ -4,20 +4,19 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
-import { ChartConfigComponentsYAxis, FullChartColors } from '../../../chart.config';
+import { FullChartColors } from '../../../chart.config';
 import { Drawer } from '../../../drawers/drawing-manager';
 import { CanvasModel } from '../../../model/canvas.model';
-import { LabelGroup, VisualYAxisLabel } from './y-axis-labels.model';
+import { PaneManager } from '../../pane/pane-manager.component';
+import { LabelGroup } from './y-axis-labels.model';
 export declare class YAxisPriceLabelsDrawer implements Drawer {
-    private labelsProvider;
     private yAxisLabelsCanvasModel;
     private backgroundCanvasModel;
-    private yAxisState;
     private canvasBoundsContainer;
     private yAxisColors;
-    private readonly customLabels;
-    constructor(labelsProvider: () => LabelGroup[], yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, yAxisState: ChartConfigComponentsYAxis, canvasBoundsContainer: CanvasBoundsContainer, yAxisColors: FullChartColors['yAxis'], customLabels: Record<string, VisualYAxisLabel>);
+    private paneManager;
+    constructor(yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, yAxisColors: FullChartColors['yAxis'], paneManager: PaneManager);
     draw(): void;
-    drawHighlightedBackgroundBetweenLabels(): void;
+    drawHighlightedBackgroundBetweenLabels(orderedLabels: LabelGroup[]): void;
     getCanvasIds(): Array<string>;
 }

package/dist/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.js

@@ -3,4 +3,61 @@
  * 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{CanvasElement as c,CHART_UUID as h,limitYToBounds as u}from"../../../canvas/canvas-bounds-container";import{fillRect as C}from"../../../utils/canvas/canvas-drawing-functions.utils";import{drawLabel as b}from"./price-label.drawer";export class YAxisPriceLabelsDrawer{constructor(t,d,e,i,r,o,a){this.labelsProvider=t,this.yAxisLabelsCanvasModel=d,this.backgroundCanvasModel=e,this.yAxisState=i,this.canvasBoundsContainer=r,this.yAxisColors=o,this.customLabels=a}draw(){const t=this.yAxisLabelsCanvasModel.ctx,d=this.backgroundCanvasModel.ctx,e=this.canvasBoundsContainer.getBounds(c.PANE_UUID_Y_AXIS(h)),i=this.canvasBoundsContainer.getBounds(c.ALL_PANES);this.drawHighlightedBackgroundBetweenLabels(),this.labelsProvider().forEach(o=>{var a;const l=(a=o.bounds)!==null&&a!==void 0?a:e;o.labels.forEach(s=>{var n;return b(t,d,l,i,s,this.canvasBoundsContainer,(n=o.axisState)!==null&&n!==void 0?n:this.yAxisState,this.yAxisColors)})}),Object.values(this.customLabels).forEach(o=>b(t,d,e,i,o,this.canvasBoundsContainer,this.yAxisState,this.yAxisColors))}drawHighlightedBackgroundBetweenLabels(){const t=this.yAxisLabelsCanvasModel.ctx,d=this.labelsProvider(),e={};d.forEach(i=>{i.labels.forEach(r=>{var o,a,l;if(r.subGroupId){const s=(o=e[r.subGroupId])!==null&&o!==void 0?o:[];if(e[r.subGroupId]=s,s.push(r),s.length===2){const n=(a=i.bounds)!==null&&a!==void 0?a:this.canvasBoundsContainer.getBounds(c.PANE_UUID_Y_AXIS(h));t.save(),t.fillStyle=(l=s[0].highlightColor)!==null&&l!==void 0?l:s[0].bgColor;const[v,x]=s[0].y>s[1].y?[s[1].y,s[0].y]:[s[0].y,s[1].y];C(t,{x:n.x,y:u(v,n)},{x:n.x+n.width-6,y:u(x,n)}),t.restore()}}})})}getCanvasIds(){return[this.yAxisLabelsCanvasModel.canvasId]}}
+import { CanvasElement, CHART_UUID, limitYToBounds, } from '../../../canvas/canvas-bounds-container';
+import { fillRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
+import { drawLabel } from './price-label.drawer';
+export class YAxisPriceLabelsDrawer {
+    constructor(yAxisLabelsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, yAxisColors, paneManager) {
+        this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.backgroundCanvasModel = backgroundCanvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.yAxisColors = yAxisColors;
+        this.paneManager = paneManager;
+    }
+    draw() {
+        const ctx = this.yAxisLabelsCanvasModel.ctx;
+        const backgroundCtx = this.backgroundCanvasModel.ctx;
+        this.paneManager.yExtents.forEach(extent => {
+            const yAxisBounds = extent.getYAxisBounds();
+            const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+            const orderedLabels = extent.yAxis.model.fancyLabelsModel.orderedLabels;
+            this.drawHighlightedBackgroundBetweenLabels(orderedLabels);
+            orderedLabels.forEach(l => {
+                var _a;
+                const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
+                l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.yAxisColors));
+            });
+            // TODO I added this as a simple mechanism to add custom labels, we need to review it
+            Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.yAxisColors));
+        });
+    }
+    // this is a very simple solution which matches 2 labels with same "subGroupId"
+    // in future we may want to change it, but for now it's enough
+    // and I guess it used only for drawings
+    drawHighlightedBackgroundBetweenLabels(orderedLabels) {
+        const ctx = this.yAxisLabelsCanvasModel.ctx;
+        const map = {};
+        orderedLabels.forEach(group => {
+            group.labels.forEach(label => {
+                var _a, _b, _c;
+                if (label.subGroupId) {
+                    const labels = (_a = map[label.subGroupId]) !== null && _a !== void 0 ? _a : [];
+                    map[label.subGroupId] = labels;
+                    labels.push(label);
+                    if (labels.length === 2) {
+                        const bounds = (_b = group.bounds) !== null && _b !== void 0 ? _b : this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
+                        ctx.save();
+                        ctx.fillStyle = (_c = labels[0].highlightColor) !== null && _c !== void 0 ? _c : labels[0].bgColor;
+                        // start and end are sorted in ascending order
+                        const [startY, endY] = labels[0].y > labels[1].y ? [labels[1].y, labels[0].y] : [labels[0].y, labels[1].y];
+                        fillRect(ctx, { x: bounds.x, y: limitYToBounds(startY, bounds) }, { x: bounds.x + bounds.width - 6, y: limitYToBounds(endY, bounds) });
+                        ctx.restore();
+                    }
+                }
+            });
+        });
+    }
+    getCanvasIds() {
+        return [this.yAxisLabelsCanvasModel.canvasId];
+    }
+}

package/dist/chart/components/y_axis/y-axis-base-labels.model.d.ts

@@ -8,16 +8,18 @@ import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
 export declare class YAxisBaseLabelsModel extends ChartBaseElement {
-    private scaleModel;
-    private yAxisLabelsGenerator;
+    private scale;
+    private labelsGenerator;
     private canvasBoundsContainer;
+    private paneUUID;
+    private extentIdx;
     labels: Array<NumericAxisLabel>;
     private prevYAxisHeight;
     private animFrameId;
-    constructor(scaleModel: ScaleModel, yAxisLabelsGenerator: NumericAxisLabelsGenerator, canvasBoundsContainer: CanvasBoundsContainer);
+    constructor(scale: ScaleModel, labelsGenerator: NumericAxisLabelsGenerator, canvasBoundsContainer: CanvasBoundsContainer, paneUUID: string, extentIdx: number);
     /**
      * This method is used to activate the component. It calls the parent's doActivate method and subscribes to the merge of two observables:
-     * - this.scaleModel.yChanged
+     * - this.scale.yChanged
      * - this.canvasBoundsContainer.observeBoundsChanged
      * The merge of these two observables is used to update the labels of the component when either the y-axis scale model changes or the canvas bounds change.
      * If the height of the canvas bounds changes by more than 1.5 times the previous height, the labels cache is invalidated and the previous y-axis height is updated.

package/dist/chart/components/y_axis/y-axis-base-labels.model.js

@@ -3,4 +3,50 @@
  * 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{merge as t}from"rxjs";import{filter as a,map as r,tap as o}from"rxjs/operators";import{CanvasElement as n}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as h}from"../../model/chart-base-element";import{uuid as m}from"../../utils/uuid.utils";import{animationFrameThrottledPrior as l}from"../../utils/perfomance/request-animation-frame-throttle.utils";import{isDiffersBy as d}from"../../utils/math.utils";export class YAxisBaseLabelsModel extends h{constructor(e,s,i){super(),this.scaleModel=e,this.yAxisLabelsGenerator=s,this.canvasBoundsContainer=i,this.labels=[],this.prevYAxisHeight=0,this.animFrameId=`anim_cache_${m()}`}doActivate(){super.doActivate(),this.addRxSubscription(t(this.scaleModel.yChanged,this.canvasBoundsContainer.observeBoundsChanged(n.Y_AXIS).pipe(r(e=>e.height),a(e=>d(e,this.prevYAxisHeight,1.5)),o(e=>{this.yAxisLabelsGenerator.labelsCache.invalidate(),this.prevYAxisHeight=e}))).subscribe(()=>this.updateLabels()))}updateLabels(){this.labels=this.yAxisLabelsGenerator.generateNumericLabels(),l(this.animFrameId,()=>this.canvasBoundsContainer.updateYAxisWidths())}}
+import { merge } from 'rxjs';
+import { filter, map, tap } from 'rxjs/operators';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { uuid } from '../../utils/uuid.utils';
+import { animationFrameThrottledPrior } from '../../utils/performance/request-animation-frame-throttle.utils';
+import { isDiffersBy } from '../../utils/math.utils';
+// TODO rework, make this the source of Y labels for main chart
+export class YAxisBaseLabelsModel extends ChartBaseElement {
+    constructor(scale, labelsGenerator, canvasBoundsContainer, paneUUID, extentIdx) {
+        super();
+        this.scale = scale;
+        this.labelsGenerator = labelsGenerator;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.paneUUID = paneUUID;
+        this.extentIdx = extentIdx;
+        this.labels = [];
+        this.prevYAxisHeight = 0;
+        this.animFrameId = `anim_cache_${uuid()}`;
+    }
+    /**
+     * This method is used to activate the component. It calls the parent's doActivate method and subscribes to the merge of two observables:
+     * - this.scale.yChanged
+     * - this.canvasBoundsContainer.observeBoundsChanged
+     * The merge of these two observables is used to update the labels of the component when either the y-axis scale model changes or the canvas bounds change.
+     * If the height of the canvas bounds changes by more than 1.5 times the previous height, the labels cache is invalidated and the previous y-axis height is updated.
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(merge(this.scale.yChanged, this.canvasBoundsContainer
+            .observeBoundsChanged(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.extentIdx))
+            .pipe(map(bounds => bounds.height), 
+        // do not recalculate height every time bounds is changed, recalculate only if it differs by 1.5 times
+        filter(height => isDiffersBy(height, this.prevYAxisHeight, 1.5)), tap(height => {
+            this.labelsGenerator.labelsCache.invalidate();
+            this.prevYAxisHeight = height;
+        }))).subscribe(() => this.updateLabels()));
+    }
+    /**
+     * Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
+     * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
+     */
+    updateLabels() {
+        this.labels = this.labelsGenerator.generateNumericLabels();
+        animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
+    }
+}

package/dist/chart/components/y_axis/y-axis-labels.drawer.d.ts

@@ -3,7 +3,7 @@
  * 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 { ChartConfigComponentsYAxis, FullChartColors } from '../../chart.config';
+import { YAxisConfig, FullChartColors } from '../../chart.config';
 import { Bounds } from '../../model/bounds.model';
 export interface YAxisLabelDrawProps {
     ctx: CanvasRenderingContext2D;
@@ -37,7 +37,7 @@ export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
  * @param align
  * @param yAxisState
  */
-export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: ChartConfigComponentsYAxis, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
+export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters.
  * @param ctx - canvas 2D context to draw on
@@ -48,7 +48,7 @@ export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bo
  * @param align
  * @param yAxisState
  */
-export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: ChartConfigComponentsYAxis, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
+export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters but with transparent background.
  * @param ctx - canvas 2D context to draw on
@@ -59,7 +59,7 @@ export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bou
  * @param align
  * @param yAxisState
  */
-export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: ChartConfigComponentsYAxis, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
+export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
 /**
  * Offset from the center of label to the top/bottom.
  *