@devexperts/dxcharts-lite 1.0.2 → 2.0.0

package/dist/chart/utils/auto-period-detector.utils.js

@@ -3,4 +3,42 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-export function autoDetectPeriod(i){if(i.length>1){const f=i.reduce((t,e,o)=>{if(o!==i.length-1){const n=i[o+1].timestamp-e.timestamp;t[n]?t[n]++:t[n]=1}return t},{});let p=0,r;for(const t of Object.keys(f)){const e=parseInt(t,10),o=f[e];o>p&&e>0&&(p=o,r=e)}if(r)return r}}
+/**
+ * Automatically detect period of candle source.
+ * Cannot just take first-second candles distance because of non-trading hours.
+ * Naive approach:
+ *  1. get all time distances between candles
+ *  2. the most frequent distance = period
+ * @param candles
+ * @doc-tags tricky,period
+ */
+export function autoDetectPeriod(candles) {
+    if (candles.length > 1) {
+        // simply get distance between two candles
+        const periodToCount = candles.reduce((acc, candle, idx) => {
+            if (idx !== candles.length - 1) {
+                const period = candles[idx + 1].timestamp - candle.timestamp;
+                if (acc[period]) {
+                    acc[period]++;
+                }
+                else {
+                    acc[period] = 1;
+                }
+            }
+            return acc;
+        }, {});
+        let maxCount = 0;
+        let naivePeriod;
+        for (const _period of Object.keys(periodToCount)) {
+            const period = parseInt(_period, 10);
+            const count = periodToCount[period];
+            if (count > maxCount && period > 0) {
+                maxCount = count;
+                naivePeriod = period;
+            }
+        }
+        if (naivePeriod) {
+            return naivePeriod;
+        }
+    }
+}

package/dist/chart/utils/candles-generator-ts.utils.js

@@ -3,4 +3,23 @@
  * 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 a from"./candles-generator.utils.js";export function generateCandlesDataTS(e){return a(e)}
+import generateCandlesData from './candles-generator.utils.js';
+/**
+ * Generated mock candles data.
+ *
+ * @param config
+ *   quantity - avg number of candles
+ *   startY - avg candle Y to start generation with
+ *   avgCandleSize - avg size of candle
+ *   avgTrendLength:
+ *     sw - avg length of SIDEWAYS trend
+ *     down - avg length of DOWN trend
+ *     up - avg length of UP trend
+ *   withVolume - add random volumes or not
+ *   period - specify distance between candles (60 for 1m, 3600 for 1h, 84600 for 1d)
+ * @return Array<Candle>
+ * @doc-tags tricky
+ */
+export function generateCandlesDataTS(config) {
+    return generateCandlesData(config);
+}

package/dist/chart/utils/candles-generator.utils.js

@@ -3,4 +3,164 @@
  * 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/.
  */
-"use strict";export default function p(r){r=r||{},r.quantity=r.quantity||200,r.startY=r.startY||50,r.avgCandleSize=r.avgCandleSize||2,r.avgTrendLength=r.avgTrendLength||{},r.avgTrendLength.sw=r.avgTrendLength.sw||10,r.avgTrendLength.down=r.avgTrendLength.down||10,r.avgTrendLength.up=r.avgTrendLength.up||10,r.withVolume=r.withVolume===!0||!1,r.period=r.period||3600;var a=[],n=r.quantity||200,m=10,u=10,h=10;r.avgTrendLength&&(m=r.avgTrendLength.sw||10,u=r.avgTrendLength.down||10,h=r.avgTrendLength.up||10);var t=r.startY||50,e=r.avgCandleSize||2,v=t-e,o=t+e,w=T(v,o,e);for(a.push(w);a.length<n;){var d=Math.random()*10;d>6?a=a.concat(b(a[a.length-1],e,m)):d>3?a=a.concat(L(a[a.length-1],e,h)):a=a.concat(i(a[a.length-1],e,u))}a=a.slice(0,r.quantity);let s=Math.round(new Date().getTime()/3e5)*3e5;s-=n*1e3*r.period;for(let M=0;M<a.length;M++){const l=a[M];Object.assign(l,{timestamp:s,isVisible:!0}),s+=1e3*r.period,r.withVolume&&(l.volume=Math.ceil(Math.random()*1e3+200))}return a}function T(r,a,n,m){var u=Math.random()*(a-r)+r,h;if(m&&m==="bull"||!m&&Math.random()>.5){var t=u+n;h=t<a?t:a}else{var e=u-n;h=e>r?e:r}var v=Math.max(u,h)+Math.random()*n*.2,o=Math.min(u,h)-Math.random()*n*.2;return{hi:v,lo:o,open:u,close:h,timestamp:0,volume:0}}function L(r,a,n){for(var m=[],u=Math.random()*n+n/2,h=r.lo,t=r.hi+a*1.2,e=0;e<u;e++){var v=Math.random()>.9?"bear":"bull",o=T(h,t,a,v);h=o.lo-a*(Math.random()*.1+.1),t=o.hi+a*(Math.random()*1.3+.1),Math.random()>.9&&(t=o.hi+a),m.push(o)}return m}function i(r,a,n){for(var m=[],u=Math.random()*n+n/2,h=r.hi-a*1.2,t=r.hi,e=0;e<u;e++){var v=Math.random()<.9?"bear":"bull",o=T(h,t,a,v);h=o.lo-a*(Math.random()*.3+.1),t=o.hi-a*(Math.random()*.1+.1),Math.random()>.9&&(t=o.lo-a),m.push(o)}return m}function b(r,a,n){var m=[],u=Math.random()*n+n/2;function h(s){var M,l;return Math.random()>.5?(M=s.lo-a*.2,l=s.hi+a*1.2):(M=s.lo-a*1.2,l=s.hi+a*.2),{from:M,to:l}}for(var t=h(r),e=t.from,v=t.to,o=0;o<u;o++){var w=Math.random()<.5?"bear":"bull",d=T(e,v,a,w);t=h(d),e=t.from,v=t.to,Math.random()>.9&&(Math.random()>.5?e=d.lo-a:v=d.hi+a),m.push(d)}return m}window.DXChart=Object.assign(Object.assign({},window.DXChart),{generateCandlesData:p});
+/* eslint-disable */
+'use strict';
+export default function generateCandlesData(config) {
+    // default generation config
+    config = config || {};
+    config.quantity = config.quantity || 200;
+    config.startY = config.startY || 50;
+    config.avgCandleSize = config.avgCandleSize || 2;
+    config.avgTrendLength = config.avgTrendLength || {};
+    config.avgTrendLength.sw = config.avgTrendLength.sw || 10;
+    config.avgTrendLength.down = config.avgTrendLength.down || 10;
+    config.avgTrendLength.up = config.avgTrendLength.up || 10;
+    config.withVolume = config.withVolume === true || false;
+    config.period = config.period || 3600;
+    var result = [];
+    var quantity = config.quantity || 200;
+    var swTrendLength = 10;
+    var downTrendLength = 10;
+    var upTrendLength = 10;
+    if (config.avgTrendLength) {
+        swTrendLength = config.avgTrendLength.sw || 10;
+        downTrendLength = config.avgTrendLength.down || 10;
+        upTrendLength = config.avgTrendLength.up || 10;
+    }
+    var startY = config.startY || 50;
+    var candleAvgSize = config.avgCandleSize || 2;
+    // generate 1st candle
+    var from = startY - candleAvgSize;
+    var to = startY + candleAvgSize;
+    var entryCandle = generateRandomCandle(from, to, candleAvgSize);
+    result.push(entryCandle);
+    // generate UP, DOWN or SW trends until quantity is filled
+    while (result.length < quantity) {
+        var r = Math.random() * 10;
+        if (r > 6) {
+            result = result.concat(generateCandlesSideways(result[result.length - 1], candleAvgSize, swTrendLength));
+        }
+        else if (r > 3) {
+            result = result.concat(generateCandlesUp(result[result.length - 1], candleAvgSize, upTrendLength));
+        }
+        else {
+            result = result.concat(generateCandlesDown(result[result.length - 1], candleAvgSize, downTrendLength));
+        }
+    }
+    result = result.slice(0, config.quantity);
+    // set candle timestamps
+    let time = Math.round(new Date().getTime() / 300000) * 300000;
+    time -= quantity * 1000 * config.period;
+    for (let i = 0; i < result.length; i++) {
+        const candle = result[i];
+        Object.assign(candle, {
+            timestamp: time,
+            isVisible: true,
+        });
+        time += 1000 * config.period;
+        if (config.withVolume) {
+            candle.volume = Math.ceil(Math.random() * 1000 + 200);
+        }
+    }
+    return result;
+}
+function generateRandomCandle(from, to, candleAvgSize, type) {
+    var open = Math.random() * (to - from) + from;
+    var close;
+    if ((type && type === 'bull') || (!type && Math.random() > 0.5)) {
+        var close1 = open + candleAvgSize;
+        close = close1 < to ? close1 : to;
+    }
+    else {
+        var close2 = open - candleAvgSize;
+        close = close2 > from ? close2 : from;
+    }
+    var high = Math.max(open, close) + Math.random() * candleAvgSize * 0.2;
+    var low = Math.min(open, close) - Math.random() * candleAvgSize * 0.2;
+    return {
+        hi: high,
+        lo: low,
+        open: open,
+        close: close,
+        timestamp: 0,
+        volume: 0,
+    };
+}
+function generateCandlesUp(entryCandle, candleAvgSize, trendLength) {
+    var result = [];
+    var randomTrendLength = Math.random() * trendLength + trendLength / 2;
+    var from = entryCandle.lo;
+    var to = entryCandle.hi + candleAvgSize * 1.2;
+    for (var i = 0; i < randomTrendLength; i++) {
+        var type = Math.random() > 0.9 ? 'bear' : 'bull';
+        var candle = generateRandomCandle(from, to, candleAvgSize, type);
+        from = candle.lo - candleAvgSize * (Math.random() * 0.1 + 0.1);
+        to = candle.hi + candleAvgSize * (Math.random() * 1.3 + 0.1);
+        // spike
+        if (Math.random() > 0.9) {
+            to = candle.hi + candleAvgSize;
+        }
+        result.push(candle);
+    }
+    return result;
+}
+function generateCandlesDown(entryCandle, candleAvgSize, trendLength) {
+    var result = [];
+    var randomTrendLength = Math.random() * trendLength + trendLength / 2;
+    var from = entryCandle.hi - candleAvgSize * 1.2;
+    var to = entryCandle.hi;
+    for (var i = 0; i < randomTrendLength; i++) {
+        var type = Math.random() < 0.9 ? 'bear' : 'bull';
+        var candle = generateRandomCandle(from, to, candleAvgSize, type);
+        from = candle.lo - candleAvgSize * (Math.random() * 0.3 + 0.1);
+        to = candle.hi - candleAvgSize * (Math.random() * 0.1 + 0.1);
+        // spike
+        if (Math.random() > 0.9) {
+            to = candle.lo - candleAvgSize;
+        }
+        result.push(candle);
+    }
+    return result;
+}
+function generateCandlesSideways(entryCandle, candleAvgSize, trendLength) {
+    var result = [];
+    var randomTrendLength = Math.random() * trendLength + trendLength / 2;
+    function nextFromTo(candle) {
+        var from;
+        var to;
+        if (Math.random() > 0.5) {
+            from = candle.lo - candleAvgSize * 0.2;
+            to = candle.hi + candleAvgSize * 1.2;
+        }
+        else {
+            from = candle.lo - candleAvgSize * 1.2;
+            to = candle.hi + candleAvgSize * 0.2;
+        }
+        return {
+            from: from,
+            to: to,
+        };
+    }
+    var fromTo = nextFromTo(entryCandle);
+    var from = fromTo.from;
+    var to = fromTo.to;
+    for (var i = 0; i < randomTrendLength; i++) {
+        var type = Math.random() < 0.5 ? 'bear' : 'bull';
+        var candle = generateRandomCandle(from, to, candleAvgSize, type);
+        fromTo = nextFromTo(candle);
+        from = fromTo.from;
+        to = fromTo.to;
+        // spike
+        if (Math.random() > 0.9) {
+            if (Math.random() > 0.5) {
+                from = candle.lo - candleAvgSize;
+            }
+            else {
+                to = candle.hi + candleAvgSize;
+            }
+        }
+        result.push(candle);
+    }
+    return result;
+}
+window['DXChart'] = Object.assign(Object.assign({}, window['DXChart']), { generateCandlesData });

package/dist/chart/utils/candles.utils.js

@@ -3,4 +3,45 @@
  * 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{binarySearch as c,firstOf as d,lastOf as s}from"./array.utils";import{floor as v}from"./math.utils";export const searchCandleIndex=(e,o,r,u=1e3)=>{var t,i,n,l;const f=(i=(t=d(r))===null||t===void 0?void 0:t.timestamp)!==null&&i!==void 0?i:0,x=(l=(n=s(r))===null||n===void 0?void 0:n.timestamp)!==null&&l!==void 0?l:0;return e>x?o?{index:r.length-1+Math.ceil((e-x)/u),exact:!0}:{index:r.length-1,exact:!0}:e<f?o?{index:v((e-f)/u),exact:!0}:{index:-1,exact:!0}:c(r,e,a=>a.timestamp)};
+import { binarySearch, firstOf, lastOf } from './array.utils';
+import { floor } from './math.utils';
+export const searchCandleIndex = (timestamp, shouldExtrapolate, candles, periodMs = 1000) => {
+    var _a, _b, _c, _d;
+    const firstTimestamp = (_b = (_a = firstOf(candles)) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : 0;
+    const lastTimestamp = (_d = (_c = lastOf(candles)) === null || _c === void 0 ? void 0 : _c.timestamp) !== null && _d !== void 0 ? _d : 0;
+    if (timestamp > lastTimestamp) {
+        // TODO rework the code below, it looks very very sus ( ≖.≖)
+        if (shouldExtrapolate) {
+            // div by 1000 because periodDuration is in seconds
+            return {
+                // -1 to skip fake candle and get the last existing/visible one if reached last index
+                index: candles.length - 1 + Math.ceil((timestamp - lastTimestamp) / periodMs),
+                exact: true,
+            };
+        }
+        else {
+            return {
+                // -1 to skip fake candle and get the last existing/visible one if reached last index
+                index: candles.length - 1,
+                exact: true,
+            };
+        }
+    }
+    else if (timestamp < firstTimestamp) {
+        if (shouldExtrapolate) {
+            return {
+                index: floor((timestamp - firstTimestamp) / periodMs),
+                exact: true,
+            };
+        }
+        else {
+            return {
+                index: -1,
+                exact: true,
+            };
+        }
+    }
+    else {
+        return binarySearch(candles, timestamp, candle => candle.timestamp);
+    }
+};

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.js

@@ -3,4 +3,147 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-export function drawRoundedRect(e,i,o,l,a,n=4,r=!0,v=!1){e.save(),e.beginPath(),e.moveTo(i+n,o),e.lineTo(i+l-n,o),e.quadraticCurveTo(i+l,o,i+l,o+n),e.lineTo(i+l,o+a-n),e.quadraticCurveTo(i+l,o+a,i+l-n,o+a),e.lineTo(i+n,o+a),e.quadraticCurveTo(i,o+a,i,o+a-n),e.lineTo(i,o+n),e.quadraticCurveTo(i,o,i+n,o),e.closePath(),r&&e.fill(),v&&e.stroke(),e.restore()}export function drawPriceLabel(e,i,o,l,a,n,r,v,u,C,q=4,P=!0,m=!1){const s=C==="right"?v:-v,T=C==="right"?q:-q,f=q;e.save(),e.beginPath(),u?e.moveTo(n+T,r):e.moveTo(n,r),u?(e.lineTo(n+s-T,r),e.quadraticCurveTo(n+s,r,n+s,r-f),e.lineTo(n+s,o+f),e.quadraticCurveTo(n+s,o,n+s-T,o),e.lineTo(i+T,o)):(e.lineTo(n+s,r),e.lineTo(n+s,o),e.lineTo(i,o)),u?(e.quadraticCurveTo(i,o,i-T/3,o+f/3),e.lineTo(l+T/3,a-f/3),e.quadraticCurveTo(l,a,l+T/3,a+f/3),e.lineTo(n-T/3,r-f/3),e.quadraticCurveTo(n,r,n+T/3,r)):(e.lineTo(l,a),e.lineTo(n,r)),e.closePath(),P&&e.fill(),m&&e.stroke(),e.restore()}export function drawLine(e,i,o,l,a,n=1){e.save(),e.lineWidth=n,e.beginPath(),e.moveTo(i,o),e.lineTo(l,a),e.stroke(),e.closePath(),e.restore()}export function avoidAntialiasing(e,i){e.save(),e.lineWidth%2&&e.translate(.5,.5),i(),e.restore()}export function fillRect(e,i,o){const l=Math.min(i.x,o.x)+.5,a=Math.min(i.y,o.y),n=Math.abs(i.x-o.x),r=Math.abs(i.y-o.y);e.fillRect(l,a,n,r)}
+/**
+ * Draws a rounded rectangle on a canvas context
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on
+ * @param {number} x - The x-coordinate of the top-left corner of the rectangle
+ * @param {number} y - The y-coordinate of the top-left corner of the rectangle
+ * @param {number} width - The width of the rectangle
+ * @param {number} height - The height of the rectangle
+ * @param {number} [radius=4] - The radius of the corners of the rectangle
+ * @param {boolean} [fill=true] - Whether or not to fill the rectangle
+ * @param {boolean} [stroke=false] - Whether or not to stroke the rectangle
+ */
+export function drawRoundedRect(ctx, x, y, width, height, radius = 4, fill = true, stroke = false) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+    if (fill) {
+        ctx.fill();
+    }
+    if (stroke) {
+        ctx.stroke();
+    }
+    ctx.restore();
+}
+/**
+ * Draws a price label on a canvas context.
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {number} x0 - The x-coordinate of the starting point of the label.
+ * @param {number} y0 - The y-coordinate of the starting point of the label.
+ * @param {number} x1 - The x-coordinate of the middle point of the label.
+ * @param {number} y1 - The y-coordinate of the middle point of the label.
+ * @param {number} x2 - The x-coordinate of the ending point of the label.
+ * @param {number} y2 - The y-coordinate of the ending point of the label.
+ * @param {number} _width - The width of the label.
+ * @param {boolean} rounded - Whether the label should have rounded corners.
+ * @param {string} align - The alignment of the label on the y-axis. Can be 'left' or 'right'.
+ * @param {number} radius - The radius of the rounded corners of the label.
+ * @param {boolean} fill - Whether the label should be filled with color.
+ * @param {boolean} stroke - Whether the label should have a stroke.
+ */
+export function drawPriceLabel(ctx, x0, y0, x1, y1, x2, y2, _width, rounded, align, radius = 4, fill = true, stroke = false) {
+    const width = align === 'right' ? _width : -_width;
+    const xRadius = align === 'right' ? radius : -radius;
+    const yRadius = radius;
+    ctx.save();
+    ctx.beginPath();
+    if (rounded) {
+        ctx.moveTo(x2 + xRadius, y2);
+    }
+    else {
+        ctx.moveTo(x2, y2);
+    }
+    // rect
+    if (rounded) {
+        ctx.lineTo(x2 + width - xRadius, y2);
+        ctx.quadraticCurveTo(x2 + width, y2, x2 + width, y2 - yRadius);
+        ctx.lineTo(x2 + width, y0 + yRadius);
+        ctx.quadraticCurveTo(x2 + width, y0, x2 + width - xRadius, y0);
+        ctx.lineTo(x0 + xRadius, y0);
+    }
+    else {
+        ctx.lineTo(x2 + width, y2);
+        ctx.lineTo(x2 + width, y0);
+        ctx.lineTo(x0, y0);
+    }
+    // triangle
+    if (rounded) {
+        ctx.quadraticCurveTo(x0, y0, x0 - xRadius / 3, y0 + yRadius / 3);
+        ctx.lineTo(x1 + xRadius / 3, y1 - yRadius / 3);
+        ctx.quadraticCurveTo(x1, y1, x1 + xRadius / 3, y1 + yRadius / 3);
+        ctx.lineTo(x2 - xRadius / 3, y2 - yRadius / 3);
+        ctx.quadraticCurveTo(x2, y2, x2 + xRadius / 3, y2);
+    }
+    else {
+        ctx.lineTo(x1, y1);
+        ctx.lineTo(x2, y2);
+    }
+    ctx.closePath();
+    if (fill) {
+        ctx.fill();
+    }
+    if (stroke) {
+        ctx.stroke();
+    }
+    ctx.restore();
+}
+/**
+ * Draws a line on a canvas context with the specified thickness.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {number} x0 - The x-coordinate of the starting point of the line.
+ * @param {number} y0 - The y-coordinate of the starting point of the line.
+ * @param {number} x1 - The x-coordinate of the ending point of the line.
+ * @param {number} y1 - The y-coordinate of the ending point of the line.
+ * @param {number} [thickness=1] - The thickness of the line. Default is 1.
+ *
+ * @returns {void}
+ */
+export function drawLine(ctx, x0, y0, x1, y1, thickness = 1) {
+    ctx.save();
+    ctx.lineWidth = thickness;
+    ctx.beginPath();
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+}
+/**
+ * Try to avoid anti-aliasing
+ */
+export function avoidAntialiasing(ctx, draw) {
+    // TODO rework, potentially make it one time per DRAW event
+    ctx.save();
+    if (ctx.lineWidth % 2) {
+        ctx.translate(0.5, 0.5);
+    }
+    draw();
+    ctx.restore();
+}
+/**
+ * Draws a filled rectangle on a canvas context.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {{x: number, y: number}} a - The first point of the rectangle.
+ * @param {{x: number, y: number}} b - The second point of the rectangle.
+ * @returns {void}
+ 
+*/
+export function fillRect(ctx, a, b) {
+    const x = Math.min(a.x, b.x) + 0.5;
+    const y = Math.min(a.y, b.y);
+    const w = Math.abs(a.x - b.x);
+    const h = Math.abs(a.y - b.y);
+    ctx.fillRect(x, y, w, h);
+}

package/dist/chart/utils/canvas/canvas-font-measure-tool.utils.js

@@ -3,4 +3,54 @@
  * 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/.
  */
-const u={};export function calculateSymbolHeight(r,e){let t=u[r];return t!==void 0||(e.save(),e.font=r,t=e.measureText("M").width,u[r]=t,e.restore()),t}const a=new Map;export function calculateTextWidth(r,e,t){const n=t+r;let s=a.get(n);return s||(e.save(),e.font=t,s=e.measureText(r).width,a.set(n,s),e.restore()),s}
+/**
+ * Calculates max symbol height for provided font on canvas.
+ * @doc-tags tricky,chart-core,canvas
+ */
+const symbolHeightCache = {};
+/**
+ * Calculates the height of a symbol for a given font using a CanvasRenderingContext2D.
+ * @param {string} font - The font to calculate the symbol height for.
+ * @param {CanvasRenderingContext2D} ctx - The CanvasRenderingContext2D to use for the calculation.
+ * @returns {number} - The height of the symbol.
+ */
+export function calculateSymbolHeight(font, ctx) {
+    let result = symbolHeightCache[font];
+    if (result !== undefined) {
+        return result;
+    }
+    // Capital "M" width is very close to height, 90% approximation
+    ctx.save();
+    ctx.font = font;
+    result = ctx.measureText('M').width;
+    symbolHeightCache[font] = result;
+    ctx.restore();
+    return result;
+}
+/**
+ * Calculates text width in pixels for provided font on canvas.
+ * @param text
+ * @param ctx
+ * @param font
+ * @doc-tags tricky,chart-core,canvas
+ */
+const textWidthCache = new Map();
+/**
+ * Calculates the width of a given text using the provided font and canvas rendering context.
+ * @param {string} text - The text to calculate the width of.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to use for measuring the text width.
+ * @param {string} font - The font to use for measuring the text width.
+ * @returns {number} - The width of the text in pixels.
+ */
+export function calculateTextWidth(text, ctx, font) {
+    const key = font + text;
+    let result = textWidthCache.get(key);
+    if (!result) {
+        ctx.save();
+        ctx.font = font;
+        result = ctx.measureText(text).width;
+        textWidthCache.set(key, result);
+        ctx.restore();
+    }
+    return result;
+}

package/dist/chart/utils/canvas/canvas-text-functions.utils.js

@@ -3,4 +3,159 @@
  * 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*as g from"color";export function prepareTextForFill(t,e){let n="";e.textStyle&&(e.textStyle.italic&&(n+="italic "),e.textStyle.bold&&(n+="bold ")),t.font=n+(e.textSize||12)+" "+(e.textFontFamily||"monospace"),t.fillStyle=e.textFill||"#FFFFFF",e.rtl?t.textAlign="right":t.textAlign="start"}export function getTextLineHeight(t){const e=t.font.match(/(\d+.)?\d+(px|pt)/gi);let n="10px";return e&&e.length&&(e[0].includes("pt")?n=+e[0].slice(0,e[0].indexOf("pt"))*96/72+"px":n=e[0]),parseInt(n,10)*1.33}export function getTextBounds(t,e,n){t.save(),prepareTextForFill(t,n);const i=Math.ceil(Math.max.apply(Math,e.map(o=>t.measureText(o).width))),l=getTextLineHeight(t),r=l*e.length;return t.restore(),[i,r,l]}export function getTextLines(t){return(t||"").split(/\r\n|\r|\n/)}export function drawText(t,e,n,i,l){t.save();const[r,,o]=getTextBounds(t,e,l);e.forEach((s,d)=>{var u,x,a;const h=t.measureText(s).width,f=c(n,r,h,(u=l.textAlign)!==null&&u!==void 0?u:"left");l.textStyle&&l.textStyle.underline&&underlineText(t,s,f,i+o*d,(x=l.textFill)!==null&&x!==void 0?x:"",(a=l.textSize)!==null&&a!==void 0?a:""),t.fillText(s,f,i+o*d)}),t.restore()}function c(t,e,n,i){switch(i){case"left":return t;case"right":return t+e-n;default:return t}}export function underlineText(t,e,n,i,l,r){t.save();const o=t.measureText(e).width,s=n,d=n+o,u=i+2,x=u;let a=parseInt(r,10)/15;a<1&&(a=1),t.beginPath(),t.strokeStyle=l,t.lineWidth=a,t.moveTo(s,u),t.lineTo(d,x),t.stroke(),t.restore()}export function getFontSizeInPx(t){return`${t}px`}export function getLabelTextColorByBackgroundColor(t,e,n){const i=g.rgb(t).array(),l=i[0],r=i[1],o=i[2];return(l*299+r*587+o*114)/1e3<128?e:n}
+import Color from 'color';
+/**
+ * Sets the font, fill style and text alignment of a canvas context based on the provided properties.
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to modify.
+ * @param {CanvasTextProperties} properties - An object containing the properties to apply to the canvas context.
+ * @param {string} properties.textStyle - The style of the text. Can be 'italic', 'bold' or both.
+ * @param {number} properties.textSize - The size of the text in pixels.
+ * @param {string} properties.textFontFamily - The font family of the text.
+ * @param {string} properties.textFill - The fill style of the text.
+ * @param {boolean} properties.rtl - Whether the text should be aligned to the right or to the left.
+ */
+export function prepareTextForFill(ctx, properties) {
+    let textStyles = '';
+    if (properties.textStyle) {
+        properties.textStyle.italic && (textStyles += `italic `);
+        properties.textStyle.bold && (textStyles += `bold `);
+    }
+    ctx.font = textStyles + (properties.textSize || 12) + ' ' + (properties.textFontFamily || 'monospace');
+    ctx.fillStyle = properties.textFill || '#FFFFFF';
+    if (properties.rtl) {
+        ctx.textAlign = 'right';
+    }
+    else {
+        ctx.textAlign = 'start';
+    }
+}
+/**
+ * Calculates the line height of a text based on the font size of the provided CanvasRenderingContext2D.
+ * @param {CanvasRenderingContext2D} ctx - The CanvasRenderingContext2D object used to draw the text.
+ * @returns {number} The calculated line height of the text.
+ */
+export function getTextLineHeight(ctx) {
+    const textSizeMatch = ctx.font.match(/(\d+.)?\d+(px|pt)/gi);
+    let textSize = '10px';
+    if (textSizeMatch && textSizeMatch.length) {
+        if (textSizeMatch[0].includes('pt')) {
+            const ptSize = +textSizeMatch[0].slice(0, textSizeMatch[0].indexOf('pt'));
+            textSize = (ptSize * 96) / 72 + 'px';
+        }
+        else {
+            textSize = textSizeMatch[0];
+        }
+    }
+    return parseInt(textSize, 10) * 1.33; // Base Line Height in Project
+}
+/**
+ * Calculates text bounds [textWidth, textHeight, lineHeight]
+ * @param ctx
+ * @param lines
+ * @param properties
+ */
+export function getTextBounds(ctx, lines, properties) {
+    ctx.save();
+    prepareTextForFill(ctx, properties);
+    const textWidth = Math.ceil(Math.max.apply(Math, lines.map((text) => {
+        return ctx.measureText(text).width;
+    })));
+    const lineHeight = getTextLineHeight(ctx);
+    const textHeight = lineHeight * lines.length;
+    ctx.restore();
+    return [textWidth, textHeight, lineHeight];
+}
+/**
+ * Splits multiline text to array of lines
+ * @param text
+ */
+export function getTextLines(text) {
+    return (text || '').split(/\r\n|\r|\n/);
+}
+/**
+ * Draws multiple lines of text on a canvas context at a given position.
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {string[]} lines - An array of strings representing the lines of text to draw.
+ * @param {number} x - The x-coordinate of the starting position of the text.
+ * @param {number} y - The y-coordinate of the starting position of the text.
+ * @param {CanvasTextProperties} properties - An object containing properties for the text, such as font size, style, and alignment.
+ * @returns {void}
+ 
+*/
+export function drawText(ctx, lines, x, y, properties) {
+    ctx.save();
+    const [textWidth, , lineHeight] = getTextBounds(ctx, lines, properties);
+    lines.forEach((l, i) => {
+        var _a, _b, _c;
+        const lineWidth = ctx.measureText(l).width;
+        const alignedX = alignCanvasText(x, textWidth, lineWidth, (_a = properties.textAlign) !== null && _a !== void 0 ? _a : 'left');
+        if (properties.textStyle && properties.textStyle.underline) {
+            underlineText(ctx, l, alignedX, y + lineHeight * i, (_b = properties.textFill) !== null && _b !== void 0 ? _b : '', (_c = properties.textSize) !== null && _c !== void 0 ? _c : '');
+        }
+        ctx.fillText(l, alignedX, y + lineHeight * i);
+    });
+    ctx.restore();
+}
+/**
+ * Aligns canvas text based on the given parameters.
+ * @param {number} originalCoordinate - The original coordinate of the text.
+ * @param {number} maxWidth - The maximum width of the text.
+ * @param {number} textWidth - The width of the text.
+ * @param {CanvasTextAlignment} alignment - The alignment of the text.
+ * @returns {number} - The aligned coordinate of the text.
+ */
+function alignCanvasText(originalCoordinate, maxWidth, textWidth, alignment) {
+    switch (alignment) {
+        case 'left':
+            return originalCoordinate;
+        case 'right':
+            return originalCoordinate + maxWidth - textWidth;
+        default:
+            return originalCoordinate;
+    }
+}
+/**
+ * Draws an underline below the given text on a canvas context.
+ * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+ * @param {string} text - The text to underline.
+ * @param {number} x - The x-coordinate of the starting point of the text.
+ * @param {number} y - The y-coordinate of the starting point of the text.
+ * @param {string} color - The color of the underline.
+ * @param {string} textSize - The size of the text in pixels.
+ */
+export function underlineText(ctx, text, x, y, color, textSize) {
+    ctx.save();
+    const textWidth = ctx.measureText(text).width;
+    const startX = x;
+    const endX = x + textWidth;
+    const startY = y + 2; // shifts underline 2px lower than the text
+    const endY = startY;
+    let underlineHeight = parseInt(textSize, 10) / 15;
+    if (underlineHeight < 1) {
+        underlineHeight = 1;
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = underlineHeight;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+    ctx.restore();
+}
+/**
+ * Returns a string with the font size in pixels.
+ *
+ * @param {number} fontSize - The font size in points.
+ * @returns {string} The font size in pixels as a string.
+ */
+export function getFontSizeInPx(fontSize) {
+    return `${fontSize}px`;
+}
+export function getLabelTextColorByBackgroundColor(bgColor, textColor, invertedTextColor) {
+    const rgb = Color.rgb(bgColor).array();
+    const r = rgb[0];
+    const g = rgb[1];
+    const b = rgb[2];
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq < 128 ? textColor : invertedTextColor;
+}