@devexperts/dxcharts-lite 2.2.0 → 2.4.0

package/dist/chart/components/x_axis/time/x-axis-weights.generator.js

@@ -18,12 +18,10 @@ import { getWeightFromTimeFormat } from './x-axis-weights.functions';
  * @see
  * returns `null` if date doesn't match any condition
  */
-const getWeightByDate = (currentDate, previousDate, sortedWeights, tzOffset) => {
+const getWeightByDate = (currentDate, previousDate, sortedWeights) => {
     var _a, _b;
-    const offsetCurrentDate = tzOffset(currentDate.getTime());
-    const offsetPrevDate = tzOffset(previousDate.getTime());
     for (const [weight, timeMatcher] of sortedWeights) {
-        if (timeMatcher(offsetCurrentDate, offsetPrevDate)) {
+        if (timeMatcher(currentDate, previousDate)) {
             return weight;
         }
     }
@@ -36,12 +34,13 @@ const getWeightByDate = (currentDate, previousDate, sortedWeights, tzOffset) =>
 export function mapCandlesToWeightedPoints(visualCandles, sortedWeights, tzOffset) {
     const result = new Array(visualCandles.length);
     // assume that candles` timestamp before the first visual candle is unreachable
-    let prevDate = new Date(0);
+    let prevDate = tzOffset(0);
     for (let i = 0; i < visualCandles.length; i++) {
         const currentCandle = visualCandles[i];
-        const currentDate = new Date(currentCandle.candle.timestamp);
+        // calculate timstamp to Date in acordance with provided timezone and time
+        const currentDate = tzOffset(currentCandle.candle.timestamp);
         const currentWeightedPoint = {
-            weight: getWeightByDate(currentDate, prevDate, sortedWeights, tzOffset),
+            weight: getWeightByDate(currentDate, prevDate, sortedWeights),
         };
         result[i] = currentWeightedPoint;
         prevDate = currentDate;

package/dist/chart/components/x_axis/x-axis-labels.generator.d.ts

@@ -3,6 +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 { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { CanvasModel } from '../../model/canvas.model';
@@ -48,6 +49,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private scale;
     private timeZoneModel;
     private canvasModel;
+    private canvasBoundsContainer;
     private labelsGroupedByWeight;
     private weightedCache?;
     private levelsCache;
@@ -56,7 +58,8 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private weightToTimeFormatMatcherArray;
     private weightToTimeFormatsDict;
     private extendedLabelsFilterConfig;
-    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scale: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scale: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer);
+    private filterLabelsInViewport;
     private getLabelsFromChartType;
     /**
      * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels
@@ -110,11 +113,16 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
      * @returns {void}
      */
     recalculateLabels(): void;
+    /**
+     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Cover up level is based on maximum label width, which is based on the font size and the maximum format length.
+     * Used to group labels.
+     */
+    private calculateCoverUpLevel;
     /**
      * Recalculates cached labels based on the current configuration and zoom level.
      * If there are no grouped labels, the cache is not set.
-     * Calculates the maximum label width based on the font size and the maximum format length.
-     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Recalculating depends on cover up level.
      * If the cover up level is negative, the cache is not updated.
      * If the cover up level has not changed, the cached labels are returned.
      * Otherwise, the labels are filtered by extended rules and grouped by cover up level.

package/dist/chart/components/x_axis/x-axis-labels.generator.js

@@ -3,6 +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 { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { cloneUnsafe, typedEntries_UNSAFE } from '../../utils/object.utils';
 import { fakeVisualCandle } from '../chart/fake-candles';
@@ -11,15 +12,16 @@ import { filterMapGroupedLabelsByCoverUpLevel, getWeightFromTimeFormat, groupLab
 import { generateWeightsMapForConfig, mapCandlesToWeightedPoints, } from './time/x-axis-weights.generator';
 export class XAxisTimeLabelsGenerator {
     get labels() {
-        return this.getLabelsFromChartType();
+        return this.filterLabelsInViewport(this.getLabelsFromChartType());
     }
-    constructor(eventBus, config, chartModel, scale, timeZoneModel, canvasModel) {
+    constructor(eventBus, config, chartModel, scale, timeZoneModel, canvasModel, canvasBoundsContainer) {
         this.eventBus = eventBus;
         this.config = config;
         this.chartModel = chartModel;
         this.scale = scale;
         this.timeZoneModel = timeZoneModel;
         this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
         this.labelsGroupedByWeight = {};
         this.levelsCache = {};
         this.weightToTimeFormatMatcherArray = [];
@@ -27,6 +29,29 @@ export class XAxisTimeLabelsGenerator {
         this.extendedLabelsFilterConfig = {
             minute_1: (coverUpLevel) => coverUpLevel >= 2,
         };
+        /**
+         * Calculates the cover up level based on the maximum label width and the mean candle width.
+         * Cover up level is based on maximum label width, which is based on the font size and the maximum format length.
+         * Used to group labels.
+         */
+        this.calculateCoverUpLevel = () => {
+            const animation = this.scale.currentAnimation;
+            const meanCandleWidthInUnits = this.chartModel.mainCandleSeries.meanCandleWidth;
+            if (Object.getOwnPropertyNames(this.labelsGroupedByWeight).length === 0) {
+                return -1;
+            }
+            // calculate coverUpLevel for target zoomX to prevent extra labels calculations on every animation tick
+            const meanCandleWidthInPixels = (animation === null || animation === void 0 ? void 0 : animation.animationInProgress)
+                ? unitToPixels(meanCandleWidthInUnits, animation.animationConfig.targetZoomX)
+                : unitToPixels(meanCandleWidthInUnits, this.scale.zoomX);
+            if (!isFinite(meanCandleWidthInPixels)) {
+                return -1;
+            }
+            const fontSize = this.config.components.xAxis.fontSize;
+            const maxFormatLength = Object.values(this.formatsByWeightMap).reduce((max, item) => Math.max(item.length, max), 1);
+            const maxLabelWidth = fontSize * maxFormatLength;
+            return Math.round(maxLabelWidth / meanCandleWidthInPixels);
+        };
         this.formatsByWeightMap = config.components.xAxis.formatsForLabelsConfig;
         const { weightToTimeFormatsDict, weightToTimeFormatMatcherDict } = generateWeightsMapForConfig(this.formatsByWeightMap);
         this.weightToTimeFormatMatcherArray = Object.entries(weightToTimeFormatMatcherDict)
@@ -34,6 +59,19 @@ export class XAxisTimeLabelsGenerator {
             .sort(([a], [b]) => b - a);
         this.weightToTimeFormatsDict = weightToTimeFormatsDict;
     }
+    filterLabelsInViewport(labels) {
+        const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+        const filteredLabels = [];
+        for (const label of labels) {
+            const x = this.scale.toX(label.value);
+            // skip labels outside viewport
+            if (x < 0 || x > bounds.width) {
+                continue;
+            }
+            filteredLabels.push(label);
+        }
+        return filteredLabels;
+    }
     getLabelsFromChartType() {
         var _a, _b;
         const labels = (_b = (_a = this.weightedCache) === null || _a === void 0 ? void 0 : _a.labels) !== null && _b !== void 0 ? _b : [];
@@ -64,9 +102,10 @@ export class XAxisTimeLabelsGenerator {
      * @returns {XAxisLabelWeighted[]} An array of XAxisLabelWeighted objects.
      */
     mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake) {
+        var _a;
         const arr = new Array(weightedPoints.length);
-        weightedPoints.forEach((point, index) => {
-            var _a;
+        for (let index = 0; index < weightedPoints.length; ++index) {
+            const point = weightedPoints[index];
             const visualCandle = allCandlesWithFake[index];
             const labelFormat = this.weightToTimeFormatsDict[point.weight];
             const formattedLabel = this.timeZoneModel.getDateTimeFormatter(labelFormat)(visualCandle.candle.timestamp);
@@ -77,7 +116,7 @@ export class XAxisTimeLabelsGenerator {
                 time: visualCandle.candle.timestamp,
                 text: formattedLabel,
             };
-        });
+        }
         return arr;
     }
     /**
@@ -227,27 +266,16 @@ export class XAxisTimeLabelsGenerator {
     /**
      * Recalculates cached labels based on the current configuration and zoom level.
      * If there are no grouped labels, the cache is not set.
-     * Calculates the maximum label width based on the font size and the maximum format length.
-     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Recalculating depends on cover up level.
      * If the cover up level is negative, the cache is not updated.
      * If the cover up level has not changed, the cached labels are returned.
      * Otherwise, the labels are filtered by extended rules and grouped by cover up level.
      * The filtered labels are then cached and returned.
      */
     recalculateCachedLabels() {
-        // skip cache setting if we don't have grouped labels
-        if (Object.getOwnPropertyNames(this.labelsGroupedByWeight).length === 0) {
-            return;
-        }
-        const fontSize = this.config.components.xAxis.fontSize;
-        const maxFormatLength = Object.values(this.formatsByWeightMap).reduce((max, item) => {
-            return Math.max(item.length, max);
-        }, 1);
-        const maxLabelWidth = fontSize * maxFormatLength;
-        const meanCandleWidthPx = unitToPixels(this.chartModel.mainCandleSeries.meanCandleWidth, this.scale.zoomX);
-        const coverUpLevel = Math.round(maxLabelWidth / meanCandleWidthPx);
+        const coverUpLevel = this.calculateCoverUpLevel();
         // for some reason sometimes `this.scale.zoomX` is negative so we dont want to update labels
-        if (coverUpLevel < 0 && !isFinite(meanCandleWidthPx)) {
+        if (coverUpLevel < 0) {
             return;
         }
         if (this.weightedCache === undefined || coverUpLevel !== this.weightedCache.coverUpLevel) {

package/dist/chart/components/x_axis/x-axis-time-labels.drawer.js

@@ -58,10 +58,6 @@ export class XAxisTimeLabelsDrawer {
         ctx.fillStyle = color;
         for (const label of labels) {
             const x = this.viewportModel.toX(label.value) - calculateTextWidth(label.text, ctx, font) / 2;
-            // skip labels outside viewport
-            if (x < 0 || x > bounds.width) {
-                continue;
-            }
             const y = bounds.y + fontHeight - 1 + offsetTop; // -1 for font drawing inconsistency
             const labelText = label.text;
             ctx.font = font;

package/dist/chart/components/x_axis/x-axis.component.js

@@ -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 { merge } from 'rxjs';
+import { merge, animationFrameScheduler } from 'rxjs';
 import { distinctUntilChanged, map, throttleTime, filter } from 'rxjs/operators';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
@@ -29,7 +29,7 @@ export class XAxisComponent extends ChartBaseElement {
         this.scale = scale;
         this.chartResizeHandler = chartResizeHandler;
         this.timeZoneModel = timeZoneModel;
-        const xAxisLabelsGenerator = new XAxisTimeLabelsGenerator(eventBus, config, chartComponent.chartModel, scale, timeZoneModel, this.canvasModel);
+        const xAxisLabelsGenerator = new XAxisTimeLabelsGenerator(eventBus, config, chartComponent.chartModel, scale, timeZoneModel, this.canvasModel, canvasBoundsContainer);
         this.xAxisLabelsGenerator = xAxisLabelsGenerator;
         this.xAxisLabelsModel = new XAxisLabelsModel(eventBus, []);
         const xAxisCompositeDrawer = new CompositeDrawer();
@@ -56,26 +56,22 @@ export class XAxisComponent extends ChartBaseElement {
             this.xAxisLabelsGenerator.generateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesPrependSubject
-            .pipe(filter(({ prependedCandles }) => prependedCandles.length !== 0), map(({ prependedCandles }) => {
-            return this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, prependedCandles.length);
-        }))
+            .pipe(filter(({ prependedCandles }) => prependedCandles.length !== 0), map(({ prependedCandles }) => this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, prependedCandles.length)))
             .subscribe(newCandles => {
+            var _a, _b;
             //@ts-ignore
             if (availableBarTypes.includes(this.config.components.chart.type)) {
-                this.xAxisLabelsGenerator.updateHistoryLabels &&
-                    this.xAxisLabelsGenerator.updateHistoryLabels(newCandles);
+                (_b = (_a = this.xAxisLabelsGenerator).updateHistoryLabels) === null || _b === void 0 ? void 0 : _b.call(_a, newCandles);
             }
         }));
         this.addRxSubscription(merge(this.scale.xChanged, this.chartResizeHandler.canvasResized)
-            .pipe(throttleTime(50, undefined, { trailing: true, leading: true }))
+            .pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe(() => {
             this.xAxisLabelsGenerator.recalculateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
             .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.timestamp) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.timestamp); }), filter(notEmpty))
-            .subscribe(x => {
-            this.xAxisLabelsGenerator.updateLastLabel && this.xAxisLabelsGenerator.updateLastLabel(x);
-        }));
+            .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
     }
     /**
      * Returns the xAxisDrawer object.

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.js

@@ -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 { getPlainLabelTextColor, getPrimaryLabelTextColor } from '../label-color.functions';
+import { getPrimaryLabelTextColor } from '../label-color.functions';
 import { lastOf } from '../../../utils/array.utils';
 import { getLabelTextColorByBackgroundColor } from '../../../utils/canvas/canvas-text-functions.utils';
 export class LastCandleLabelsProvider {
@@ -87,7 +87,7 @@ export class LastCandleLabelsProvider {
         const appearanceType = this.yAxisConfig.labels.settings.lastPrice.type;
         const colors = series.colors.labels;
         const { rectLabelTextColor = 'white', rectLabelInvertedTextColor = 'black' } = this.chartConfig.colors.yAxis;
-        const getLabelBoxColor = this.resolveLabelColorFn(series.config.type);
+        const getLabelColorBySeries = this.resolveLabelColorFn(series.config.type);
         if (!colors) {
             return {
                 bgColor: '#FFFFFF',
@@ -95,14 +95,14 @@ export class LastCandleLabelsProvider {
                 rounded: true,
             };
         }
-        const boxColor = getLabelBoxColor(series.lastPriceMovement, series.colors);
+        const boxColor = getLabelColorBySeries(series.lastPriceMovement, series.colors);
         // if the label is for the main candle series
         if (primary) {
             const textColor = getPrimaryLabelTextColor(series.lastPriceMovement, colors);
             return {
                 bgColor: boxColor,
                 textColor: appearanceType === 'plain'
-                    ? getPlainLabelTextColor(this.chartConfig.colors, textColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                    ? getLabelColorBySeries(series.lastPriceMovement, series.colors)
                     : getLabelTextColorByBackgroundColor(boxColor, textColor, rectLabelInvertedTextColor),
                 rounded: true,
             };
@@ -111,7 +111,7 @@ export class LastCandleLabelsProvider {
         return {
             bgColor: boxColor,
             textColor: appearanceType === 'plain'
-                ? getPlainLabelTextColor(this.chartConfig.colors, rectLabelTextColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                ? getLabelColorBySeries(series.lastPriceMovement, series.colors)
                 : getLabelTextColorByBackgroundColor(boxColor, rectLabelTextColor, rectLabelInvertedTextColor),
             rounded: true,
         };

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

@@ -9,7 +9,7 @@ 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';
+import { drawBadgeLabel, drawPlainLabel, drawRectLabel, checkLabelInBoundaries } from '../y-axis-labels.drawer';
 export const DEFAULT_LABEL_APPEARANCE_TYPE = 'badge';
 const DEFAULT_PADDING = 4;
 export const priceLabelDrawersMap = {
@@ -66,22 +66,26 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     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;
+    const drawLineLabel = () => {
+        _drawLine();
+        _drawDescription();
+    };
+    const drawLineLabelLabel = () => {
+        _drawLine();
+        _drawLabel();
+        _drawDescription();
+    };
+    const drawLabelLabel = () => {
+        _drawDescription();
+        _drawLabel();
+    };
+    const labelDrawerByMode = {
+        'line': drawLineLabel,
+        'line-label': drawLineLabelLabel,
+        'label': drawLabelLabel,
+    };
+    if (mode !== 'none' && checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
+        labelDrawerByMode[mode]();
     }
     ctx.restore();
 }
@@ -101,11 +105,6 @@ function drawDescription(backgroundCtx, ctx, labelBounds, paneBounds, visualLabe
     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;

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

@@ -34,10 +34,11 @@ export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, 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'], checkBoundaries?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters.
  * @param ctx - canvas 2D context to draw on
@@ -45,10 +46,11 @@ export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bo
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, 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'], checkBoundaries?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters but with transparent background.
  * @param ctx - canvas 2D context to draw on
@@ -56,10 +58,12 @@ export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bou
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
+ * @param backgroundCtx
  */
-export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, 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'], checkBoundaries?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
 /**
  * Offset from the center of label to the top/bottom.
  *
@@ -68,3 +72,11 @@ export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bo
  * @param paddingTop - extra padding from top
  */
 export declare function getLabelYOffset(font: string, ctx: CanvasRenderingContext2D, paddingTop?: number): number;
+/**
+ * Checks if label fits in chart scale boundaries
+ * @param centralY
+ * @param bounds
+ * @param labelBoxHeight
+ * returns true if label fits
+ */
+export declare function checkLabelInBoundaries(centralY: number, bounds: Bounds, labelBoxHeight: number): boolean;

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

@@ -17,10 +17,11 @@ export const DEFAULT_PRICE_LABEL_PADDING = 4;
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -34,8 +35,7 @@ export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState,
     const labelBoxBottomY = centralY + halfFontHeight + paddingBottom;
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -64,10 +64,11 @@ export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState,
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -84,8 +85,7 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     const rounded = (_k = config.rounded) !== null && _k !== void 0 ? _k : (_l = yAxisState.typeConfig.rectangle) === null || _l === void 0 ? void 0 : _l.rounded;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -115,10 +115,12 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
+ * @param backgroundCtx
  */
-export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false, backgroundCtx) {
+export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true, backgroundCtx) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -134,8 +136,7 @@ export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState,
     const labelBoxBottomY = centralY + fontHeight / 2 + paddingBottom;
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -164,3 +165,13 @@ export function getLabelYOffset(font, ctx, paddingTop = DEFAULT_PRICE_LABEL_PADD
     const fontHeight = calculateSymbolHeight(font, ctx);
     return fontHeight / 2 + paddingTop;
 }
+/**
+ * Checks if label fits in chart scale boundaries
+ * @param centralY
+ * @param bounds
+ * @param labelBoxHeight
+ * returns true if label fits
+ */
+export function checkLabelInBoundaries(centralY, bounds, labelBoxHeight) {
+    return !(centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2);
+}

package/dist/chart/components/y_axis/y-axis-scale.handler.d.ts

@@ -9,23 +9,28 @@ import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
-import { Pixel, Unit, ViewportModel } from '../../model/scaling/viewport.model';
+import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartPanComponent } from '../pan/chart-pan.component';
+import { ScaleModel } from '../../model/scale.model';
 /**
  * Handles the mouse drag on Y axis - to zoom the viewport vertically.
  * @doc-tags scaling,zoom,viewport
  */
 export declare class YAxisScaleHandler extends ChartBaseElement {
     private bus;
-    private viewportModel;
-    private canvasBoundsContainer;
+    private config;
+    private scale;
+    private canvasInputListener;
+    private bounds;
+    private hitTest;
     private autoScaleCallback;
     yAxisDragEndSubject: Subject<void>;
     lastYStart: Unit;
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
-    constructor(bus: EventBus, config: YAxisConfig, chartPanComponent: ChartPanComponent, viewportModel: ViewportModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    protected doActivate(): void;
     private onYDragStart;
     private onYDragTick;
     private onYDragEnd;

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -14,11 +14,14 @@ const FULL_Y_HEIGHT_ZOOM_FACTOR = 10;
  * @doc-tags scaling,zoom,viewport
  */
 export class YAxisScaleHandler extends ChartBaseElement {
-    constructor(bus, config, chartPanComponent, viewportModel, canvasInputListener, canvasBoundsContainer, hitTest, autoScaleCallback) {
+    constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback) {
         super();
         this.bus = bus;
-        this.viewportModel = viewportModel;
-        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+        this.scale = scale;
+        this.canvasInputListener = canvasInputListener;
+        this.bounds = bounds;
+        this.hitTest = hitTest;
         this.autoScaleCallback = autoScaleCallback;
         this.yAxisDragEndSubject = new Subject();
         this.lastYStart = 0;
@@ -26,10 +29,12 @@ export class YAxisScaleHandler extends ChartBaseElement {
         this.lastYHeight = 0;
         this.lastYPxHeight = 0;
         this.onYDragStart = () => {
-            this.lastYStart = this.viewportModel.yStart;
-            this.lastYEnd = this.viewportModel.yEnd;
-            this.lastYHeight = this.viewportModel.yEnd - this.viewportModel.yStart;
-            this.lastYPxHeight = this.canvasBoundsContainer.getBounds(CanvasElement.Y_AXIS).height;
+            // halt previous scale animation if drag is started
+            this.scale.haltAnimation();
+            this.lastYStart = this.scale.yStart;
+            this.lastYEnd = this.scale.yEnd;
+            this.lastYHeight = this.scale.yEnd - this.scale.yStart;
+            this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: absoluteYDelta } = dragInfo;
@@ -48,7 +53,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
             const newYStart = this.lastYStart - delta;
             const newYEnd = this.lastYEnd + delta;
             this.autoScaleCallback(false);
-            this.viewportModel.setYScale(newYStart, newYEnd);
+            this.scale.setYScale(newYStart, newYEnd);
             this.bus.fireDraw();
         };
         this.onYDragEnd = () => {
@@ -61,16 +66,18 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
                 onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
                 onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
-            }, canvasInputListener, chartPanComponent, {
+            }, canvasInputListener, panning, {
                 disableChartPanning: false,
             });
             this.addChildEntity(dragNDropYComponent);
-            if (config.customScaleDblClick) {
-                canvasInputListener.observeDbClick(hitTest).subscribe(() => {
-                    autoScaleCallback(true);
-                    this.bus.fireDraw();
-                });
-            }
+        }
+    }
+    doActivate() {
+        if (this.config.customScaleDblClick) {
+            this.addRxSubscription(this.canvasInputListener.observeDbClick(this.hitTest).subscribe(() => {
+                this.autoScaleCallback(true);
+                this.bus.fireDraw();
+            }));
         }
     }
 }

package/dist/chart/components/y_axis/y-axis.component.js

@@ -151,6 +151,7 @@ export class YAxisComponent extends ChartBaseElement {
     setAxisType(type) {
         if (type !== this.state.type) {
             this.state.type = type;
+            this.config.components.yAxis.type = type;
             this.axisTypeSetSubject.next(type);
             this.scale.autoScale(true);
             this.model.fancyLabelsModel.updateLabels(true);

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

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { getFontFromConfig } from '../../chart.config';
-import { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 /**
  * Draws the Y_AXIS rectangle + it's base labels.