@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,337 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{unitToPixels as L}from"../../model/scaling/viewport.model";import{cloneUnsafe as F,typedEntries_UNSAFE as p}from"../../utils/object.utils";import{fakeVisualCandle as T}from"../chart/fake-candles";import{parseTimeFormatsFromKey as v}from"./time/parser/time-formats-parser.functions";import{filterMapGroupedLabelsByCoverUpLevel as w,getWeightFromTimeFormat as y,groupLabelsByWeight as b,overlappingPredicate as M}from"./time/x-axis-weights.functions";import{generateWeightsMapForConfig as C,mapCandlesToWeightedPoints as u}from"./time/x-axis-weights.generator";export class XAxisTimeLabelsGenerator{get labels(){return this.getLabelsFromChartType()}constructor(e,a,o,s,t,i){this.eventBus=e,this.config=a,this.chartModel=o,this.scaleModel=s,this.timeZoneModel=t,this.canvasModel=i,this.labelsGroupedByWeight={},this.levelsCache={},this.weightToTimeFormatMatcherArray=[],this.weightToTimeFormatsDict={},this.extendedLabelsFilterConfig={minute_1:r=>r>=2},this.formatsByWeightMap=a.components.xAxis.formatsForLabelsConfig;const{weightToTimeFormatsDict:n,weightToTimeFormatMatcherDict:h}=C(this.formatsByWeightMap);this.weightToTimeFormatMatcherArray=Object.entries(h).map(([r,l])=>[parseInt(r,10),l]).sort(([r],[l])=>l-r),this.weightToTimeFormatsDict=n}getLabelsFromChartType(){var e,a;const o=(a=(e=this.weightedCache)===null||e===void 0?void 0:e.labels)!==null&&a!==void 0?a:[];return this.config.components.chart.type==="equivolume"?this.postProcessing(o):o}getAllCandlesWithFake(){const e=this.chartModel.mainCandleSeries.visualPoints;if(e.length===0)return[];const o=Array.from({length:750}).map((s,t)=>T(this.chartModel.mainCandleSeries.dataPoints,this.chartModel.mainCandleSeries.visualPoints,this.chartModel.mainCandleSeries.meanCandleWidth,e.length+t,this.chartModel.getPeriod()));return[...e,...o]}mapWeightedPointsToLabels(e,a){const o=new Array(e.length);return e.forEach((s,t)=>{var i;const n=a[t],h=this.weightToTimeFormatsDict[s.weight],r=this.timeZoneModel.getDateTimeFormatter(h)(n.candle.timestamp);o[t]={weight:s.weight,idx:(i=n.candle.idx)!==null&&i!==void 0?i:0,value:n.centerUnit,time:n.candle.timestamp,text:r}}),o}setFormatsForLabelsConfig(e){const{weightToTimeFormatsDict:a,weightToTimeFormatMatcherDict:o}=C(e);this.formatsByWeightMap=e,this.weightToTimeFormatMatcherArray=Object.entries(o).map(([s,t])=>[parseInt(s,10),t]).sort(([s],[t])=>t-s),this.weightToTimeFormatsDict=a,this.generateWeightedLabels()}generateWeightedLabels(){const e=this.getAllCandlesWithFake(),a=u(e,this.weightToTimeFormatMatcherArray,this.timeZoneModel.tzOffset(this.config.timezone)),o=this.mapWeightedPointsToLabels(a,e);this.labelsGroupedByWeight=b(o),this.weightedCache=void 0,this.levelsCache={},this.recalculateCachedLabels()}getLabelsFromCache(e){if(this.levelsCache[e])return this.levelsCache[e]}updateLastLabel(e){const a=this.chartModel.mainCandleSeries.visualPoints[this.chartModel.mainCandleSeries.visualPoints.length-2];if(a){const s=u([a,e],this.weightToTimeFormatMatcherArray,this.timeZoneModel.tzOffset(this.config.timezone)),t=this.mapWeightedPointsToLabels([s[1]],[e]),[i]=t;this.labelsGroupedByWeight=Object.entries(this.labelsGroupedByWeight).reduce((n,[h,r])=>{const l=r.findIndex(d=>d.idx===i.idx);let c=r;if(l!==-1&&(c=r.filter(d=>d.idx!==i.idx)),parseInt(h,10)===i.weight){const d=c.findIndex(m=>m.idx>i.idx);d!==-1?c=[...c.slice(0,d),i,...c.slice(d)]:c.push(i)}return n[h]=c,n},{}),this.weightedCache=void 0,this.levelsCache={},this.recalculateCachedLabels()}}updateHistoryLabels(e){const a=e.concat(this.chartModel.mainCandleSeries.visualPoints[e.length]),o=u(a,this.weightToTimeFormatMatcherArray,this.timeZoneModel.tzOffset(this.config.timezone)),s=this.mapWeightedPointsToLabels(o,a),t=b(s),i=F(t);for(const r in this.labelsGroupedByWeight)i[r]===void 0&&(i[r]=this.labelsGroupedByWeight[r]);const n=this.chartModel.mainCandleSeries.visualPoints[e.length-1],h=Object.entries(i).sort(([r],[l])=>parseInt(l,10)-parseInt(r,10)).reduce((r,[l,c])=>{const d=parseInt(l,10),m=this.labelsGroupedByWeight[d];if(d===this.weightToTimeFormatMatcherArray[0][0]&&m.shift(),m){const f=m.map(g=>(g.idx=g.idx+e.length,g.value=n.startUnit+n.width+g.value,g));t[d]?r[l]=c.concat(f):r[l]=f}else r[l]=c;return r},{});this.labelsGroupedByWeight=h,this.weightedCache=void 0,this.levelsCache={},this.recalculateCachedLabels()}generateLabels(){this.generateWeightedLabels()}recalculateLabels(){this.recalculateCachedLabels()}recalculateCachedLabels(){if(Object.getOwnPropertyNames(this.labelsGroupedByWeight).length===0)return;const e=this.config.components.xAxis.fontSize,a=Object.values(this.formatsByWeightMap).reduce((i,n)=>Math.max(n.length,i),1),o=e*a,s=L(this.chartModel.mainCandleSeries.meanCandleWidth,this.scaleModel.zoomX),t=Math.round(o/s);if(!(t<0&&!isFinite(s))&&(this.weightedCache===void 0||t!==this.weightedCache.coverUpLevel)){const i=this.getLabelsFromCache(t);if(i){this.weightedCache={labels:i,coverUpLevel:t};return}const n=w(this.filterLabelsByExtendedRules(this.labelsGroupedByWeight,t),t);this.levelsCache[t]=n,this.weightedCache={labels:n,coverUpLevel:t},this.eventBus.fireDraw()}}postProcessing(e){var a,o;const s=[];let t=0,i=1;for(;i<=e.length-1;){const n=e[t],h=e[i];M(this.canvasModel.ctx,this.config,n,h,this.scaleModel,30)?((a=h.weight)!==null&&a!==void 0?a:0)>((o=n.weight)!==null&&o!==void 0?o:0)&&(t=i):(s.push(n),t=i,i===e.length-1&&s.push(h)),i++}return s}filterLabelsByExtendedRules(e,a){const o=p(this.extendedLabelsFilterConfig).reduce((s,t)=>{if(!t)return s;const[i,n]=t;if(n){const h=v(i);if(h){const r=y(h);s[r]=n}}return s},{});return p(e).reduce((s,[t,i])=>(o[t]&&o[t](a)||(s[t]=i),s),{})}}
+import { unitToPixels } from '../../model/scaling/viewport.model';
+import { cloneUnsafe, typedEntries_UNSAFE } from '../../utils/object.utils';
+import { fakeVisualCandle } from '../chart/fake-candles';
+import { parseTimeFormatsFromKey } from './time/parser/time-formats-parser.functions';
+import { filterMapGroupedLabelsByCoverUpLevel, getWeightFromTimeFormat, groupLabelsByWeight, overlappingPredicate, } from './time/x-axis-weights.functions';
+import { generateWeightsMapForConfig, mapCandlesToWeightedPoints, } from './time/x-axis-weights.generator';
+export class XAxisTimeLabelsGenerator {
+    get labels() {
+        return this.getLabelsFromChartType();
+    }
+    constructor(eventBus, config, chartModel, scale, timeZoneModel, canvasModel) {
+        this.eventBus = eventBus;
+        this.config = config;
+        this.chartModel = chartModel;
+        this.scale = scale;
+        this.timeZoneModel = timeZoneModel;
+        this.canvasModel = canvasModel;
+        this.labelsGroupedByWeight = {};
+        this.levelsCache = {};
+        this.weightToTimeFormatMatcherArray = [];
+        this.weightToTimeFormatsDict = {};
+        this.extendedLabelsFilterConfig = {
+            minute_1: (coverUpLevel) => coverUpLevel >= 2,
+        };
+        this.formatsByWeightMap = config.components.xAxis.formatsForLabelsConfig;
+        const { weightToTimeFormatsDict, weightToTimeFormatMatcherDict } = generateWeightsMapForConfig(this.formatsByWeightMap);
+        this.weightToTimeFormatMatcherArray = Object.entries(weightToTimeFormatMatcherDict)
+            .map(([k, v]) => [parseInt(k, 10), v])
+            .sort(([a], [b]) => b - a);
+        this.weightToTimeFormatsDict = weightToTimeFormatsDict;
+    }
+    getLabelsFromChartType() {
+        var _a, _b;
+        const labels = (_b = (_a = this.weightedCache) === null || _a === void 0 ? void 0 : _a.labels) !== null && _b !== void 0 ? _b : [];
+        //@ts-ignore
+        if (this.config.components.chart.type === 'equivolume') {
+            return this.postProcessing(labels);
+        }
+        else {
+            return labels;
+        }
+    }
+    /**
+     * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels
+     */
+    getAllCandlesWithFake() {
+        const visualCandles = this.chartModel.mainCandleSeries.visualPoints;
+        if (visualCandles.length === 0) {
+            return [];
+        }
+        const fakeCandlesForSides = Array.from({ length: 750 });
+        const appendFakeCandle = fakeCandlesForSides.map((_, idx) => fakeVisualCandle(this.chartModel.mainCandleSeries.dataPoints, this.chartModel.mainCandleSeries.visualPoints, this.chartModel.mainCandleSeries.meanCandleWidth, visualCandles.length + idx, this.chartModel.getPeriod()));
+        return [...visualCandles, ...appendFakeCandle];
+    }
+    /**
+     * Maps an array of weighted points to an array of XAxisLabelWeighted objects.
+     * @param {WeightedPoint[]} weightedPoints - An array of weighted points to be mapped.
+     * @param {VisualCandle[]} allCandlesWithFake - An array of visual candles to be used for formatting the labels.
+     * @returns {XAxisLabelWeighted[]} An array of XAxisLabelWeighted objects.
+     */
+    mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake) {
+        const arr = new Array(weightedPoints.length);
+        weightedPoints.forEach((point, index) => {
+            var _a;
+            const visualCandle = allCandlesWithFake[index];
+            const labelFormat = this.weightToTimeFormatsDict[point.weight];
+            const formattedLabel = this.timeZoneModel.getDateTimeFormatter(labelFormat)(visualCandle.candle.timestamp);
+            arr[index] = {
+                weight: point.weight,
+                idx: (_a = visualCandle.candle.idx) !== null && _a !== void 0 ? _a : 0,
+                value: visualCandle.centerUnit,
+                time: visualCandle.candle.timestamp,
+                text: formattedLabel,
+            };
+        });
+        return arr;
+    }
+    /**
+     * Sets the formats for labels configuration.
+     * @param {Record<TimeFormatWithDuration, string>} newFormatsByWeightMap - The new formats by weight map.
+     * @returns {void}
+     */
+    setFormatsForLabelsConfig(newFormatsByWeightMap) {
+        const { weightToTimeFormatsDict, weightToTimeFormatMatcherDict } = generateWeightsMapForConfig(newFormatsByWeightMap);
+        this.formatsByWeightMap = newFormatsByWeightMap;
+        this.weightToTimeFormatMatcherArray = Object.entries(weightToTimeFormatMatcherDict)
+            .map(([k, v]) => [parseInt(k, 10), v])
+            .sort(([a], [b]) => b - a);
+        this.weightToTimeFormatsDict = weightToTimeFormatsDict;
+        this.generateWeightedLabels();
+    }
+    /**
+     * Generates weighted labels based on allCandlesWithFake, weightToTimeFormatMatcherDict and timeZoneModel.
+     * @private
+     * @function
+     * @returns {void}
+     */
+    generateWeightedLabels() {
+        const allCandlesWithFake = this.getAllCandlesWithFake();
+        const weightedPoints = mapCandlesToWeightedPoints(allCandlesWithFake, this.weightToTimeFormatMatcherArray, this.timeZoneModel.tzOffset(this.config.timezone));
+        const weightedLabels = this.mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake);
+        this.labelsGroupedByWeight = groupLabelsByWeight(weightedLabels);
+        this.weightedCache = undefined;
+        this.levelsCache = {};
+        this.recalculateCachedLabels();
+    }
+    /**
+     * Retrieves the labels from the cache for a given coverUpLevel.
+     * @param {number} coverUpLevel - The coverUpLevel to retrieve the labels from the cache.
+     * @returns {Array<string>|undefined} - The labels for the given coverUpLevel if they exist in the cache, otherwise undefined.
+     */
+    getLabelsFromCache(coverUpLevel) {
+        if (this.levelsCache[coverUpLevel]) {
+            return this.levelsCache[coverUpLevel];
+        }
+        return undefined;
+    }
+    /**
+     * Updates label of new appeared candle
+     * @param {VisualCandle} candle - new updated candle
+     * @returns {void}
+     */
+    updateLastLabel(candle) {
+        const prevCandle = this.chartModel.mainCandleSeries.visualPoints[this.chartModel.mainCandleSeries.visualPoints.length - 2];
+        if (prevCandle) {
+            const newCandleWithprevious = [prevCandle, candle];
+            const weightedPoints = mapCandlesToWeightedPoints(newCandleWithprevious, this.weightToTimeFormatMatcherArray, this.timeZoneModel.tzOffset(this.config.timezone));
+            const weightedLabels = this.mapWeightedPointsToLabels([weightedPoints[1]], [candle]);
+            const [newWeightedLabel] = weightedLabels;
+            this.labelsGroupedByWeight = Object.entries(this.labelsGroupedByWeight).reduce((acc, [weight, labels]) => {
+                const isLabelFoundHere = labels.findIndex(item => item.idx === newWeightedLabel.idx);
+                let filteredLabels = labels;
+                // we need to check it bsc the array from which we delete and the array into which we insert the value will most likely not be the same array
+                if (isLabelFoundHere !== -1) {
+                    filteredLabels = labels.filter(item => item.idx !== newWeightedLabel.idx);
+                }
+                if (parseInt(weight, 10) === newWeightedLabel.weight) {
+                    const idx = filteredLabels.findIndex(item => item.idx > newWeightedLabel.idx);
+                    if (idx !== -1) {
+                        filteredLabels = [
+                            ...filteredLabels.slice(0, idx),
+                            newWeightedLabel,
+                            ...filteredLabels.slice(idx),
+                        ];
+                    }
+                    else {
+                        filteredLabels.push(newWeightedLabel);
+                    }
+                }
+                acc[weight] = filteredLabels;
+                return acc;
+            }, {});
+            this.weightedCache = undefined;
+            this.levelsCache = {};
+            this.recalculateCachedLabels();
+        }
+    }
+    /**
+     * Creates labels for history candles and merge it with existing
+     * @param {VisualCandle} candle - new history candles
+     * @returns {void}
+     */
+    updateHistoryLabels(candles) {
+        const candlesPlusOne = candles.concat(this.chartModel.mainCandleSeries.visualPoints[candles.length]);
+        const weightedPoints = mapCandlesToWeightedPoints(candlesPlusOne, this.weightToTimeFormatMatcherArray, this.timeZoneModel.tzOffset(this.config.timezone));
+        const weightedLabels = this.mapWeightedPointsToLabels(weightedPoints, candlesPlusOne);
+        const historyLabelsByWeight = groupLabelsByWeight(weightedLabels);
+        const copyOfNewGroupedLabels = cloneUnsafe(historyLabelsByWeight);
+        for (const weight in this.labelsGroupedByWeight) {
+            if (copyOfNewGroupedLabels[weight] === undefined) {
+                copyOfNewGroupedLabels[weight] = this.labelsGroupedByWeight[weight];
+            }
+        }
+        const lastCandle = this.chartModel.mainCandleSeries.visualPoints[candles.length - 1];
+        const allLabelsByWeight = Object.entries(copyOfNewGroupedLabels)
+            .sort(([a], [b]) => parseInt(b, 10) - parseInt(a, 10))
+            .reduce((acc, [weight, labels]) => {
+            const parsedWeight = parseInt(weight, 10);
+            const existingLabels = this.labelsGroupedByWeight[parsedWeight];
+            if (parsedWeight === this.weightToTimeFormatMatcherArray[0][0]) {
+                //we need to delete last label in old labels array
+                // this is label from the array with biggest weight, so that's why we use sorting
+                existingLabels.shift();
+            }
+            if (existingLabels) {
+                const restLabels = existingLabels.map(label => {
+                    label.idx = label.idx + candles.length;
+                    label.value = lastCandle.startUnit + lastCandle.width + label.value;
+                    return label;
+                });
+                if (historyLabelsByWeight[parsedWeight]) {
+                    acc[weight] = labels.concat(restLabels);
+                }
+                else {
+                    acc[weight] = restLabels;
+                }
+            }
+            else {
+                acc[weight] = labels;
+            }
+            return acc;
+        }, {});
+        this.labelsGroupedByWeight = allLabelsByWeight;
+        this.weightedCache = undefined;
+        this.levelsCache = {};
+        this.recalculateCachedLabels();
+    }
+    /**
+     * Calls the method generateWeightedLabels to generate labels.
+     * @returns {void}
+     */
+    generateLabels() {
+        this.generateWeightedLabels();
+    }
+    /**
+     * Recalculates the labels by calling the method recalculateCachedLabels.
+     * @returns {void}
+     */
+    recalculateLabels() {
+        this.recalculateCachedLabels();
+    }
+    /**
+     * 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.
+     * 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);
+        // for some reason sometimes `this.scale.zoomX` is negative so we dont want to update labels
+        if (coverUpLevel < 0 && !isFinite(meanCandleWidthPx)) {
+            return;
+        }
+        if (this.weightedCache === undefined || coverUpLevel !== this.weightedCache.coverUpLevel) {
+            const labelsFromCache = this.getLabelsFromCache(coverUpLevel);
+            if (labelsFromCache) {
+                this.weightedCache = {
+                    labels: labelsFromCache,
+                    coverUpLevel,
+                };
+                return;
+            }
+            const labelsToCache = filterMapGroupedLabelsByCoverUpLevel(this.filterLabelsByExtendedRules(this.labelsGroupedByWeight, coverUpLevel), coverUpLevel);
+            this.levelsCache[coverUpLevel] = labelsToCache;
+            this.weightedCache = {
+                labels: labelsToCache,
+                coverUpLevel,
+            };
+            this.eventBus.fireDraw();
+        }
+    }
+    /**
+     * Post filtering for equivolume case
+     * {@link overlappingPredicate} is used
+     * @param {XAxisLabelWeighted[]} labels - array of labels filtered by weights algorithm
+     * @returns {XAxisLabelWeighted[]} - array of filtered labels by overlaping predicate
+     */
+    postProcessing(labels) {
+        var _a, _b;
+        const filteredLabels = [];
+        // tricky double-iterator to check multiple consequent overlapping labels
+        let i = 0;
+        let j = 1;
+        while (j <= labels.length - 1) {
+            const label = labels[i];
+            const nextLabel = labels[j];
+            const overlappingCondition = overlappingPredicate(this.canvasModel.ctx, this.config, label, nextLabel, this.scale, 30);
+            if (overlappingCondition) {
+                if (((_a = nextLabel.weight) !== null && _a !== void 0 ? _a : 0) > ((_b = label.weight) !== null && _b !== void 0 ? _b : 0)) {
+                    i = j;
+                }
+            }
+            else {
+                filteredLabels.push(label);
+                i = j;
+                if (j === labels.length - 1) {
+                    filteredLabels.push(nextLabel);
+                }
+            }
+            j++;
+        }
+        return filteredLabels;
+    }
+    /**
+     * Filters the labels by extended rules.
+     * @private
+     *
+     * @param {Record<number, XAxisLabelWeighted[]>} labelsGroupedByWeight - Object containing the labels grouped by weight.
+     * @param {number} coverUpLevel - The cover up level.
+     *
+     * @returns {Record<number, XAxisLabelWeighted[]>} - Object containing the filtered labels grouped by weight.
+     */
+    filterLabelsByExtendedRules(labelsGroupedByWeight, coverUpLevel) {
+        // transform {minute_1: () => boolean} to {215: () => boolean}
+        const mappedExtendedFilterConfig = typedEntries_UNSAFE(this.extendedLabelsFilterConfig).reduce((acc, item) => {
+            if (!item) {
+                return acc;
+            }
+            const [timeFormat, filterFn] = item;
+            if (filterFn) {
+                const parsedTimeFormat = parseTimeFormatsFromKey(timeFormat);
+                if (parsedTimeFormat) {
+                    const weightFromValue = getWeightFromTimeFormat(parsedTimeFormat);
+                    acc[weightFromValue] = filterFn;
+                }
+            }
+            return acc;
+        }, {});
+        // filter by cover up level
+        return typedEntries_UNSAFE(labelsGroupedByWeight).reduce((acc, [weight, labels]) => {
+            if (mappedExtendedFilterConfig[weight] && mappedExtendedFilterConfig[weight](coverUpLevel)) {
+                return acc;
+            }
+            acc[weight] = labels;
+            return acc;
+        }, {});
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

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

@@ -1,6 +1,40 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{ChartBaseElement as t}from"../../model/chart-base-element";import{EVENT_DRAW as l}from"../../events/events";export class XAxisLabelsModel extends t{constructor(e,s){super(),this.eventBus=e,this.labelProviders=s,this.labels=[],this.initModel(),this.addSubscription(this.eventBus.on(l,()=>this.recalculateLabels()))}initModel(){this.recalculateLabels()}recalculateLabels(){this.labels=[];for(const e of this.labelProviders)this.labels.push(...e.getUnorderedLabels())}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { EVENT_DRAW } from '../../events/events';
+/**
+ * Custom labels on X axis.
+ */
+export class XAxisLabelsModel extends ChartBaseElement {
+    constructor(eventBus, labelProviders) {
+        super();
+        this.eventBus = eventBus;
+        this.labelProviders = labelProviders;
+        this.labels = [];
+        this.initModel();
+        /**
+         * TODO refactor this, should NOT be recalculated on each DRAW, rather coordinates should be updated in drawer
+         * @doc-tags refactor
+         */
+        this.addSubscription(this.eventBus.on(EVENT_DRAW, () => this.recalculateLabels()));
+    }
+    /**
+     * Initializes the model by recalculating the labels.
+     */
+    initModel() {
+        this.recalculateLabels();
+    }
+    /**
+     * Recalculates the labels by clearing the existing labels and adding new labels from the label providers.
+     * @returns {void}
+     */
+    recalculateLabels() {
+        this.labels = [];
+        for (const provider of this.labelProviders) {
+            this.labels.push(...provider.getUnorderedLabels());
+        }
+    }
+}

package/dist/chart/components/x_axis/x-axis-scale.handler.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -15,7 +15,7 @@ import { ChartPanComponent } from '../pan/chart-pan.component';
  * @doc-tags scaling,zoom,viewport
  */
 export declare class XAxisScaleHandler extends ChartBaseElement {
-    private scaleModel;
+    private scale;
     private canvasInputListener;
     private canvasBoundsContainer;
     private chartPanComponent;
@@ -23,7 +23,7 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     lastXStart: Unit;
     lastXWidth: Unit;
     lastXPxWidth: Pixel;
-    constructor(scaleModel: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel);
+    constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel);
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.
      * It calls the parent class's doActivate method and then subscribes to the canvasInputListener's observeDbClick method.

package/dist/chart/components/x_axis/x-axis-scale.handler.js

@@ -1,6 +1,65 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{ChartBaseElement as u}from"../../model/chart-base-element";import{CanvasElement as a}from"../../canvas/canvas-bounds-container";import{DragNDropXComponent as p}from"../dran-n-drop_helper/drag-n-drop-x.component";export class XAxisScaleHandler extends u{constructor(t,n,e,o,h){super(),this.scaleModel=t,this.canvasInputListener=n,this.canvasBoundsContainer=e,this.chartPanComponent=o,this.chartModel=h,this.lastXStart=0,this.lastXWidth=0,this.lastXPxWidth=0,this.onXDragStart=()=>{this.lastXStart=this.scaleModel.xStart,this.lastXWidth=this.scaleModel.xEnd-this.scaleModel.xStart;const s=this.canvasBoundsContainer.getBounds(a.X_AXIS);this.lastXPxWidth=s.width-this.canvasInputListener.currentPoint.x},this.onXDragTick=s=>{const{delta:d}=s,i=this.lastXPxWidth-d;if(i<0)return;const c=this.lastXPxWidth/i,l=this.lastXWidth*c,X=this.lastXStart+(this.lastXWidth-l);this.scaleModel.setXScale(X,this.scaleModel.xEnd)};const r=new p(this.canvasBoundsContainer.getBoundsHitTest(a.X_AXIS),{onDragStart:this.onXDragStart,onDragTick:this.onXDragTick},this.canvasInputListener,this.chartPanComponent,{disableChartPanning:!1});this.addChildEntity(r)}doActivate(){super.doActivate(),this.addRxSubscription(this.canvasInputListener.observeDbClick(this.canvasBoundsContainer.getBoundsHitTest(a.X_AXIS)).subscribe(()=>this.chartModel.doBasicScale())),this.addRxSubscription(this.chartModel.candlesPrependSubject.subscribe(({prependedCandlesWidth:t})=>this.lastXStart+=t))}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
+/**
+ * Handles the mouse drag on X axis - to zoom the viewport horizontally.
+ * @doc-tags scaling,zoom,viewport
+ */
+export class XAxisScaleHandler extends ChartBaseElement {
+    constructor(scale, canvasInputListener, canvasBoundsContainer, chartPanComponent, chartModel) {
+        super();
+        this.scale = scale;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.chartPanComponent = chartPanComponent;
+        this.chartModel = chartModel;
+        this.lastXStart = 0;
+        this.lastXWidth = 0;
+        this.lastXPxWidth = 0;
+        this.onXDragStart = () => {
+            this.lastXStart = this.scale.xStart;
+            this.lastXWidth = this.scale.xEnd - this.scale.xStart;
+            const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+            this.lastXPxWidth = bounds.width - this.canvasInputListener.currentPoint.x;
+        };
+        this.onXDragTick = (dragInfo) => {
+            const { delta: absoluteXDelta } = dragInfo;
+            const newPxWidth = this.lastXPxWidth - absoluteXDelta;
+            // cursor goes beyond x-axis - maximum scale is reached
+            if (newPxWidth < 0) {
+                return;
+            }
+            const xZoomMult = this.lastXPxWidth / newPxWidth;
+            const newWidth = this.lastXWidth * xZoomMult;
+            const newXStart = this.lastXStart + (this.lastXWidth - newWidth);
+            this.scale.setXScale(newXStart, this.scale.xEnd);
+        };
+        const dragNDropXComponent = new DragNDropXComponent(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS), {
+            onDragStart: this.onXDragStart,
+            onDragTick: this.onXDragTick,
+        }, this.canvasInputListener, this.chartPanComponent, {
+            disableChartPanning: false,
+        });
+        this.addChildEntity(dragNDropXComponent);
+    }
+    /**
+     * This method is used to activate the canvas input listener and add a subscription to it.
+     * It calls the parent class's doActivate method and then subscribes to the canvasInputListener's observeDbClick method.
+     * The subscription is added to the RxJS subscription list.
+     * When the subscription is triggered, the doBasicScale method is called.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.canvasInputListener
+            .observeDbClick(this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.X_AXIS))
+            .subscribe(() => this.chartModel.doBasicScale()));
+        this.addRxSubscription(this.chartModel.candlesPrependSubject.subscribe(({ prependedCandlesWidth }) => (this.lastXStart += prependedCandlesWidth)));
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

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

@@ -1,6 +1,87 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{CanvasElement as d}from"../../canvas/canvas-bounds-container";import{calculateTextWidth as h}from"../../utils/canvas/canvas-font-measure-tool.utils";export class XAxisTimeLabelsDrawer{constructor(t,o,n,e,i,a=()=>!0){this.config=t,this.canvasModel=o,this.viewportModel=n,this.canvasBoundsContainer=e,this.labelsProvider=i,this.drawPredicate=a}draw(){var t;if(this.drawPredicate()){const o=this.canvasModel.ctx,n=this.config.colors.xAxis,e=this.config.components.xAxis.fontFamily,i=XAxisTimeLabelsDrawer.getFontFromConfig(this.config),a=this.config.components.xAxis.fontSize,r=(t=this.config.components.xAxis.padding.top)!==null&&t!==void 0?t:0;o.save(),o.font=i,o.fillStyle=n.backgroundColor;const s=this.canvasBoundsContainer.getBounds(d.X_AXIS);o.fillRect(s.x,s.y,s.width,s.height);const l=this.config.colors.xAxis.labelTextColor,c=this.labelsProvider();this.drawLabels(o,c,s,l,a,e,r),o.restore()}}drawLabels(t,o,n,e,i,a,r){const s=`${i}px ${a}`;t.fillStyle=e;for(const l of o){const c=this.viewportModel.toX(l.value)-h(l.text,t,s)/2;if(c<0||c>n.width)continue;const f=n.y+i-1+r,x=l.text;t.font=s,t.fillText(x,c,f)}}static getFontFromConfig(t){return`${t.components.xAxis.fontStyle}  ${t.components.xAxis.fontSize}px ${t.components.xAxis.fontFamily}`}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+/**
+ * This Drawer draws regular time labels for X Axis.
+ */
+export class XAxisTimeLabelsDrawer {
+    constructor(config, canvasModel, viewportModel, canvasBoundsContainer, labelsProvider, drawPredicate = () => true) {
+        this.config = config;
+        this.canvasModel = canvasModel;
+        this.viewportModel = viewportModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.labelsProvider = labelsProvider;
+        this.drawPredicate = drawPredicate;
+    }
+    /**
+     * Draws the X-axis labels on the canvas.
+     * If the drawPredicate is true, it will draw the labels.
+     * @returns {void}
+     */
+    draw() {
+        var _a;
+        if (this.drawPredicate()) {
+            const ctx = this.canvasModel.ctx;
+            const xAxisColors = this.config.colors.xAxis;
+            const fontFamily = this.config.components.xAxis.fontFamily;
+            const font = XAxisTimeLabelsDrawer.getFontFromConfig(this.config);
+            const fontHeight = this.config.components.xAxis.fontSize;
+            const offsetTop = (_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0;
+            ctx.save();
+            ctx.font = font;
+            ctx.fillStyle = xAxisColors.backgroundColor;
+            const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+            ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+            const color = this.config.colors.xAxis.labelTextColor;
+            const labels = this.labelsProvider();
+            this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop);
+            ctx.restore();
+        }
+    }
+    /**
+     * Draws labels on a canvas context.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {NumericAxisLabel[]} labels - An array of NumericAxisLabel objects containing the value and text of each label.
+     * @param {Bounds} bounds - The bounds of the viewport.
+     * @param {string} color - The color of the labels.
+     * @param {number} fontHeight - The height of the font in pixels.
+     * @param {string} fontFamily - The font family to use for the labels.
+     * @param {number} offsetTop - The offset from the top of the viewport to draw the labels.
+     * @returns {void}
+     */
+    drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop) {
+        const font = `${fontHeight}px ${fontFamily}`;
+        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;
+            ctx.fillText(labelText, x, y);
+        }
+    }
+    /**
+     * Returns a font string based on the provided FullChartConfig object.
+     * @param {FullChartConfig} config - The FullChartConfig object containing the font style, size and family.
+     * @returns {string} - The font string in the format of "fontStyle fontSize fontFamily".
+     */
+    static getFontFromConfig(config) {
+        return `${config.components.xAxis.fontStyle}  ${config.components.xAxis.fontSize}px ${config.components.xAxis.fontFamily}`;
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the ID of the canvas.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -30,7 +30,7 @@ export declare class XAxisComponent extends ChartBaseElement {
     private config;
     canvasModel: CanvasModel;
     chartComponent: ChartComponent;
-    private scaleModel;
+    private scale;
     private chartResizeHandler;
     private timeZoneModel;
     xAxisDrawer: XAxisTimeLabelsDrawer;
@@ -38,7 +38,7 @@ export declare class XAxisComponent extends ChartBaseElement {
     xAxisLabelsGenerator: XAxisLabelsGenerator;
     readonly xAxisLabelsModel: XAxisLabelsModel;
     xAxisScaleHandler: XAxisScaleHandler;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, backgroundCanvasModel: CanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, backgroundCanvasModel: CanvasModel);
     /**
      * This method is used to activate the chart and update the labels if there is a new data set or equivolume type.
      * It subscribes to the chart type change, candles set subject, candles updated subject, and time zone change to generate new labels.