@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/dist/chart/drawers/chart-type-drawers/candle.drawer.js

@@ -3,4 +3,165 @@
  * 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{CandleSeriesModel as $}from"../../model/candle-series.model";import{avoidAntialiasing as X}from"../../utils/canvas/canvas-drawing-functions.utils";import{dpr as P,floorToDPR as m}from"../../utils/device/device-pixel-ratio.utils";import{setLineWidth as A}from"../data-series.drawer";import{flat as E}from"../../utils/array.utils";export class CandleDrawer{constructor(i){this.config=i,this.pixelLength=1,this.lineWidthCU=1,this.halfLineWidthCU=1}draw(i,e,t,o){if(t instanceof $){const r=E(e);A(i,this.config.candleLineWidth,t,o,this.config.candleLineWidth),X(i,()=>{this.pixelLength=1/P,this.halfLineWidthCU=i.lineWidth/2,this.lineWidthCU=i.lineWidth;for(const f of r){const{candleTheme:h,activeCandleTheme:l}=t.colors;h&&l&&this.drawCandle(i,o,t,f)}})}}drawCandle(i,e,t,o){const{candleTheme:r,activeCandleTheme:f}=t.colors,h=o.name,l=o.isActive?f:r,d=o.isHollow;e.singleColor?i.fillStyle=e.singleColor:d?i.fillStyle=l[`${h}WickColor`]:i.fillStyle=l[`${h}Color`];const s=m(t.view.toX(o.startUnit)),a=m(t.view.xPixels(o.width)),w=o.bodyHeight(t.view),[W,n,y,T]=o.yBodyKeyPoints(t.view),c=n===y?n+1:y,g=W===T?W+1:T,p=l[`${h}Color`],B=h==="none"?p:l[`${h}WickColor`];i.fillStyle=p,e.singleColor?i.strokeStyle=e.singleColor:i.strokeStyle=B;const v=d||(o.hasBorder&&o.isActive?this.config.showActiveCandlesBorder:this.config.showCandlesBorder),k=this.config.showWicks;if(a<2)i.beginPath(),i.moveTo(s,k?W:n),i.lineTo(s,k?g:c),i.stroke();else if(a<3)i.beginPath(),i.moveTo(s,k?W:n),i.lineTo(s,k?g:c),i.moveTo(s+1,n),i.lineTo(s+1,c),i.stroke();else if(a===3){const C=a/P;this.drawCandlesWicks(i,s+C,W,g,n,c),d||(i.beginPath(),i.moveTo(s+C,n),i.lineTo(s+C,c),i.stroke()),this.drawCandleBorder(i,e,l,o,s+this.halfLineWidthCU,n+this.halfLineWidthCU,a-this.lineWidthCU,w-this.lineWidthCU)}else{const C=m(t.view.toX(o.centerUnit));this.drawCandlesWicks(i,C,W,g,n,c-1);const S=this.config.candlePaddingPercent,U=Math.max(m(a*S/2),this.pixelLength),L=s+U,b=a-U*2;d||(e.singleColor&&(i.fillStyle=e.singleColor),i.fillRect(L,n,b,w)),v&&this.drawCandleBorder(i,e,l,o,L+this.halfLineWidthCU,n+this.halfLineWidthCU,b-this.lineWidthCU,w-this.lineWidthCU)}}drawCandlesWicks(i,e,t,o,r,f){this.config.showWicks&&(i.beginPath(),i.moveTo(e,t),i.lineTo(e,r),i.moveTo(e,f),i.lineTo(e,o),i.stroke())}drawCandleBorder(i,e,t,o,r,f,h,l){if(e.singleColor)i.strokeStyle=e.singleColor;else{const d=o.name;i.strokeStyle=d==="none"?t[`${d}Color`]:t[`${d}WickColor`]}i.strokeRect(r,f,h,l)}}
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { avoidAntialiasing } from '../../utils/canvas/canvas-drawing-functions.utils';
+import { dpr, floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+import { setLineWidth } from '../data-series.drawer';
+import { flat } from '../../utils/array.utils';
+export class CandleDrawer {
+    constructor(config) {
+        this.config = config;
+        //#region
+        // These properties are some kind of optimization hack
+        // we can calculate them inside drawCandle method, but it can affect performance since there are a lot of candles - lots of recalculations
+        // this value is calculate in following way: 1 / devicePixelRatio
+        // pixelLength is a length of one pixel in canvas units (CU), for example if dpr is 1 when in 1 CU we have 1 pixel
+        // for dpr 2 we have pixel length equal 0.5 CU, so when you draw a line with width 2, the actual width in pixels will be equal 4
+        this.pixelLength = 1;
+        // lineWidth and halfLineWidth are calculated using ctx.lineWidth (CU - canvas unit)
+        // why do we need half line width and line width? - to correctly draw candle border
+        // Canvas stroke draws outline border - for example, if we have a rectangle with height=10, width=20
+        // and we try to draw a border for this square like this: ctx.strokeRect(0, 0, 10, 20), lineWidth=2
+        // as a result on the canvas we have a rectangle which edge points are (-1, -1), (21, 11);
+        // for lineWidth=4 we get this edge points as a result: (-2, -2), (22, 12).
+        // However the border should not exceed candle width, so we add halfLine width to start point for rectangle
+        // and subtract lineWidth from width/height. As a result, candle border on canvas won't exceed candle width
+        this.lineWidthCU = 1;
+        this.halfLineWidthCU = 1;
+    }
+    //#endregion
+    draw(ctx, 
+    /**
+     * You can pass two-dimension array to divide series into multiple parts
+     */
+    points, model, drawerConfig) {
+        if (model instanceof CandleSeriesModel) {
+            // @ts-ignore
+            const visualCandles = flat(points);
+            // TODO FIXME draw called 3-4 times on single candle update even if multichart is off
+            setLineWidth(ctx, this.config.candleLineWidth, model, drawerConfig, this.config.candleLineWidth);
+            avoidAntialiasing(ctx, () => {
+                this.pixelLength = 1 / dpr;
+                this.halfLineWidthCU = ctx.lineWidth / 2;
+                this.lineWidthCU = ctx.lineWidth;
+                for (const visualCandle of visualCandles) {
+                    const { candleTheme, activeCandleTheme } = model.colors;
+                    if (candleTheme && activeCandleTheme) {
+                        this.drawCandle(ctx, drawerConfig, model, visualCandle);
+                    }
+                }
+            });
+        }
+    }
+    drawCandle(ctx, drawerConfig, candleSeries, visualCandle) {
+        const { candleTheme, activeCandleTheme } = candleSeries.colors;
+        const direction = visualCandle.name;
+        const currentCandleTheme = visualCandle.isActive ? activeCandleTheme : candleTheme;
+        const isHollow = visualCandle.isHollow;
+        // choose candle filling color
+        if (drawerConfig.singleColor) {
+            ctx.fillStyle = drawerConfig.singleColor;
+        }
+        else if (isHollow) {
+            ctx.fillStyle = currentCandleTheme[`${direction}WickColor`];
+        }
+        else {
+            ctx.fillStyle = currentCandleTheme[`${direction}Color`];
+        }
+        const baseX = floorToDPR(candleSeries.view.toX(visualCandle.startUnit));
+        const width = floorToDPR(candleSeries.view.xPixels(visualCandle.width));
+        const bodyH = visualCandle.bodyHeight(candleSeries.view);
+        const [lineStart, bodyStart, _bodyEnd, _lineEnd] = visualCandle.yBodyKeyPoints(candleSeries.view);
+        const bodyEnd = bodyStart === _bodyEnd ? bodyStart + 1 : _bodyEnd;
+        const lineEnd = lineStart === _lineEnd ? lineStart + 1 : _lineEnd;
+        const candleColor = currentCandleTheme[`${direction}Color`];
+        const wickColor = direction === 'none' ? candleColor : currentCandleTheme[`${direction}WickColor`];
+        ctx.fillStyle = candleColor;
+        // wick style, borders are drawn after the wicks, so style for borders will be changed in drawBorder method
+        if (drawerConfig.singleColor) {
+            ctx.strokeStyle = drawerConfig.singleColor;
+        }
+        else {
+            ctx.strokeStyle = wickColor;
+        }
+        const showCandleBorder = isHollow ||
+            (visualCandle.hasBorder && visualCandle.isActive
+                ? this.config.showActiveCandlesBorder
+                : this.config.showCandlesBorder);
+        // just draw a vertical line
+        const showWicks = this.config.showWicks;
+        // separate logic for each candle width in pixels
+        if (width < 2) {
+            ctx.beginPath();
+            ctx.moveTo(baseX, showWicks ? lineStart : bodyStart);
+            ctx.lineTo(baseX, showWicks ? lineEnd : bodyEnd);
+            ctx.stroke();
+        }
+        else if (width < 3) {
+            // draw 2 vertical lines for each px width
+            ctx.beginPath();
+            ctx.moveTo(baseX, showWicks ? lineStart : bodyStart);
+            ctx.lineTo(baseX, showWicks ? lineEnd : bodyEnd);
+            ctx.moveTo(baseX + 1, bodyStart);
+            ctx.lineTo(baseX + 1, bodyEnd);
+            ctx.stroke();
+        }
+        else if (width === 3) {
+            const offset = width / dpr;
+            this.drawCandlesWicks(ctx, baseX + offset, lineStart, lineEnd, bodyStart, bodyEnd);
+            // border = 2px + 1px line
+            if (!isHollow) {
+                ctx.beginPath();
+                ctx.moveTo(baseX + offset, bodyStart);
+                ctx.lineTo(baseX + offset, bodyEnd);
+                ctx.stroke();
+            }
+            this.drawCandleBorder(ctx, drawerConfig, currentCandleTheme, visualCandle, baseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, width - this.lineWidthCU, bodyH - this.lineWidthCU);
+        }
+        else {
+            // add paddings if exist
+            const wickX = visualCandle.x(candleSeries.view);
+            // candles' wick doesn't touch body end, so subtract 1
+            // we will rework the drawer in future, so let's keep it this way for now
+            this.drawCandlesWicks(ctx, wickX, lineStart, lineEnd, bodyStart, bodyEnd - 1);
+            const paddingPercent = this.config.candlePaddingPercent;
+            const paddingWidthOffset = Math.max(floorToDPR((width * paddingPercent) / 2), this.pixelLength);
+            const paddingBaseX = baseX + paddingWidthOffset;
+            const paddingWidth = width - paddingWidthOffset * 2;
+            if (!isHollow) {
+                if (drawerConfig.singleColor) {
+                    ctx.fillStyle = drawerConfig.singleColor;
+                }
+                ctx.fillRect(paddingBaseX, bodyStart, paddingWidth, bodyH);
+            }
+            // choose border color around candle and draw candle
+            if (showCandleBorder) {
+                this.drawCandleBorder(ctx, drawerConfig, currentCandleTheme, visualCandle, paddingBaseX + this.halfLineWidthCU, bodyStart + this.halfLineWidthCU, paddingWidth - this.lineWidthCU, bodyH - this.lineWidthCU);
+            }
+        }
+    }
+    drawCandlesWicks(ctx, x, lineStart, lineEnd, bodyStart, bodyEnd) {
+        // draw wick vertical line
+        if (this.config.showWicks) {
+            ctx.beginPath();
+            // upper wick
+            ctx.moveTo(x, lineStart);
+            ctx.lineTo(x, bodyStart);
+            // lower wick
+            ctx.moveTo(x, bodyEnd);
+            ctx.lineTo(x, lineEnd);
+            ctx.stroke();
+        }
+    }
+    drawCandleBorder(ctx, drawerConfig, candleTheme, visualCandle, x, y, w, h) {
+        if (drawerConfig.singleColor) {
+            ctx.strokeStyle = drawerConfig.singleColor;
+        }
+        else {
+            const direction = visualCandle.name;
+            ctx.strokeStyle =
+                direction === 'none' ? candleTheme[`${direction}Color`] : candleTheme[`${direction}WickColor`];
+        }
+        ctx.strokeRect(x, y, w, h);
+    }
+}

package/dist/chart/drawers/chart-type-drawers/histogram.drawer.js

@@ -3,4 +3,60 @@
  * 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{CandleSeriesModel as p}from"../../model/candle-series.model";import{floorToDPR as d}from"../../utils/device/device-pixel-ratio.utils";export class HistogramDrawer{constructor(o){this.config=o}draw(o,S,e,s){if(e instanceof p){const C=S.flat(),h=e.scaleModel.getBounds(),f=h.y+h.height;for(const t of C){o.beginPath();const c=t.name,i=this.config.barCapSize,n=e.colors.histogram;if(n===void 0)return;s.singleColor?o.fillStyle=s.singleColor:o.fillStyle=n[`${c}Bright`];const r=t.xStart(e.view),l=d(e.view.toY(t.close)),g=d(e.view.xPixels(t.width));o.fillRect(r,l,g,i);const a=o.createLinearGradient(0,l+i,0,f);s.singleColor?o.fillStyle=s.singleColor:(a.addColorStop(0,n[`${c}Cap`]),a.addColorStop(1,n[`${c}Bottom`]),o.fillStyle=a),g===0?(o.beginPath(),o.strokeStyle=a,o.moveTo(r,l+i),o.lineTo(r,f),o.stroke(),o.closePath()):o.fillRect(r,l+i,g,f-l-i)}}}}
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+export class HistogramDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, points, model, drawerConfig) {
+        if (model instanceof CandleSeriesModel) {
+            // @ts-ignore
+            const visualCandles = points.flat();
+            const bounds = model.scale.getBounds();
+            const bottomY = bounds.y + bounds.height;
+            for (const visualCandle of visualCandles) {
+                ctx.beginPath();
+                const direction = visualCandle.name;
+                const capHeight = this.config.barCapSize;
+                const histogramColors = model.colors.histogram;
+                if (histogramColors === undefined) {
+                    return;
+                }
+                if (drawerConfig.singleColor) {
+                    ctx.fillStyle = drawerConfig.singleColor;
+                }
+                else {
+                    ctx.fillStyle = histogramColors[`${direction}Bright`];
+                }
+                // histogram cap
+                const baseX = visualCandle.xStart(model.view);
+                const closeY = floorToDPR(model.view.toY(visualCandle.close));
+                const width = floorToDPR(model.view.xPixels(visualCandle.width));
+                ctx.fillRect(baseX, closeY, width, capHeight);
+                // the bar itself
+                const gradient = ctx.createLinearGradient(0, closeY + capHeight, 0, bottomY);
+                if (drawerConfig.singleColor) {
+                    ctx.fillStyle = drawerConfig.singleColor;
+                }
+                else {
+                    gradient.addColorStop(0, histogramColors[`${direction}Cap`]);
+                    gradient.addColorStop(1, histogramColors[`${direction}Bottom`]);
+                    ctx.fillStyle = gradient;
+                }
+                if (width === 0) {
+                    // just draw a vertical line
+                    ctx.beginPath();
+                    ctx.strokeStyle = gradient;
+                    ctx.moveTo(baseX, closeY + capHeight);
+                    ctx.lineTo(baseX, bottomY);
+                    ctx.stroke();
+                    ctx.closePath();
+                }
+                else {
+                    ctx.fillRect(baseX, closeY + capHeight, width, bottomY - closeY - capHeight);
+                }
+            }
+        }
+    }
+}

package/dist/chart/drawers/chart-type-drawers/line.drawer.js

@@ -3,4 +3,41 @@
  * 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{CandleSeriesModel as g}from"../../model/candle-series.model";import{setLineWidth as C}from"../data-series.drawer";import{flat as T}from"../../utils/array.utils";export class LineDrawer{constructor(o){this.config=o}draw(o,r,t,e){if(t instanceof g){const n=T(r);C(o,this.config.lineWidth,t,e,this.config.selectedWidth);const c=t.colors.lineTheme;o.lineCap="round",e.singleColor&&(o.strokeStyle=e.singleColor);for(let i=1;i<n.length;i++){const l=n[i-1],s=n[i],h=s.name;e.singleColor||(o.strokeStyle=c[`${h}Color`]);const m=t.view.toX(l.centerUnit),v=t.view.toY(l.close),f=t.view.toX(s.centerUnit),p=t.view.toY(s.close);o.beginPath(),o.moveTo(m,v),o.lineTo(f,p),o.stroke()}}}}
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { setLineWidth } from '../data-series.drawer';
+import { flat } from '../../utils/array.utils';
+export class LineDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, points, candleSeries, drawerConfig) {
+        if (candleSeries instanceof CandleSeriesModel) {
+            // @ts-ignore
+            const visualCandles = flat(points);
+            // TODO rework, make sure drawing is precise
+            setLineWidth(ctx, this.config.lineWidth, candleSeries, drawerConfig, this.config.selectedWidth);
+            const lineTheme = candleSeries.colors.lineTheme;
+            // make style changes outside loop to improve performance
+            ctx.lineCap = 'round';
+            if (drawerConfig.singleColor) {
+                ctx.strokeStyle = drawerConfig.singleColor;
+            }
+            for (let i = 1; i < visualCandles.length; i++) {
+                const prev = visualCandles[i - 1];
+                const vc = visualCandles[i];
+                const direction = vc.name;
+                if (!drawerConfig.singleColor) {
+                    ctx.strokeStyle = lineTheme[`${direction}Color`];
+                }
+                const prevX = candleSeries.view.toX(prev.centerUnit);
+                const prevY = candleSeries.view.toY(prev.close);
+                const x = candleSeries.view.toX(vc.centerUnit);
+                const y = candleSeries.view.toY(vc.close);
+                ctx.beginPath();
+                ctx.moveTo(prevX, prevY);
+                ctx.lineTo(x, y);
+                ctx.stroke();
+            }
+        }
+    }
+}

package/dist/chart/drawers/chart-type-drawers/scatter-plot.drawer.js

@@ -3,4 +3,22 @@
  * 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{flat as c}from"../../utils/array.utils";import{floorToDPR as i}from"../../utils/device/device-pixel-ratio.utils";const f=1.5;export class ScatterPlotDrawer{constructor(o){this.config=o}draw(o,n,r,e){var t;o.fillStyle=(t=e.singleColor)!==null&&t!==void 0?t:this.config.mainColor;for(const l of c(n)){o.beginPath();const a=i(r.view.toX(l.centerUnit)),s=i(r.view.toY(l.close));o.arc(a,s,f,0,Math.PI*2,!0),o.fill()}}}
+import { flat } from '../../utils/array.utils';
+import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+const SCATTER_PLOT_RADIUS = 1.5;
+export class ScatterPlotDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, points, model, drawerConfig) {
+        var _a;
+        ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : this.config.mainColor;
+        for (const visualCandle of flat(points)) {
+            ctx.beginPath();
+            const lineX = floorToDPR(model.view.toX(visualCandle.centerUnit));
+            const closeY = floorToDPR(model.view.toY(visualCandle.close));
+            ctx.arc(lineX, closeY, SCATTER_PLOT_RADIUS, 0, Math.PI * 2, true);
+            ctx.fill();
+        }
+    }
+}

package/dist/chart/drawers/clear-canvas.drawer.js

@@ -3,4 +3,17 @@
  * 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 class ClearCanvasDrawer{constructor(a){this.canvasModel=a}draw(){this.canvasModel.clear()}getCanvasIds(){return[this.canvasModel.canvasId]}}
+/**
+ * Clears the canvas.
+ */
+export class ClearCanvasDrawer {
+    constructor(canvasModel) {
+        this.canvasModel = canvasModel;
+    }
+    draw() {
+        this.canvasModel.clear();
+    }
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/drawers/composite.drawer.js

@@ -3,4 +3,70 @@
  * 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{findKeyFromValue as t}from"../utils/object.utils";import{flat as a}from"../utils/array.utils";export class CompositeDrawer{constructor(r){this.drawers=r!=null?r:new Map}draw(){this.drawers.forEach(r=>r.draw())}addDrawer(r,e){const s=e!=null?e:"drawer"+this.drawers.size;this.drawers.set(s,r)}drawLastBar(){this.drawers.forEach(r=>r.drawLastBar&&r.drawLastBar())}removeDrawer(r){const e=t(this.drawers,r);e?this.drawers.delete(e):console.warn("Couldn't find drawer type")}removeDrawerByName(r){this.drawers.delete(r)}getDrawer(r){return this.drawers.get(r)}moveTop(r){const e=t(this.drawers,r);e?this.moveTopByName(e):console.warn("Couldn't find drawer type")}moveTopByName(r){if(this.drawers.size===1)return;const e=this.drawers.get(r);this.drawers.delete(r),e&&this.drawers.set(r,e)}getSize(){return this.drawers.size}getAll(){return this.drawers}getCanvasIds(){const r=a(Array.from(this.drawers).map(([,s])=>s.getCanvasIds())),e=new Set([...r]);return Array.from(e)}}
+import { findKeyFromValue } from '../utils/object.utils';
+import { flat } from '../utils/array.utils';
+/**
+ * Container for grouping multiple drawers.
+ * Try to keep simple, not overkill with sorting.
+ */
+export class CompositeDrawer {
+    constructor(drawers) {
+        this.drawers = drawers !== null && drawers !== void 0 ? drawers : new Map();
+    }
+    draw() {
+        this.drawers.forEach(d => d.draw());
+    }
+    addDrawer(drawer, drawerName) {
+        const name = drawerName !== null && drawerName !== void 0 ? drawerName : 'drawer' + this.drawers.size;
+        this.drawers.set(name, drawer);
+    }
+    // TODO rework, move to specific candle composite drawer maybe
+    drawLastBar() {
+        this.drawers.forEach(d => d.drawLastBar && d.drawLastBar());
+    }
+    removeDrawer(drawer) {
+        const name = findKeyFromValue(this.drawers, drawer);
+        if (name) {
+            this.drawers.delete(name);
+        }
+        else {
+            console.warn(`Couldn't find drawer type`);
+        }
+    }
+    removeDrawerByName(drawerName) {
+        this.drawers.delete(drawerName);
+    }
+    getDrawer(drawerName) {
+        return this.drawers.get(drawerName);
+    }
+    moveTop(drawer) {
+        const name = findKeyFromValue(this.drawers, drawer);
+        if (name) {
+            this.moveTopByName(name);
+        }
+        else {
+            console.warn(`Couldn't find drawer type`);
+        }
+    }
+    moveTopByName(drawerName) {
+        if (this.drawers.size === 1) {
+            return;
+        }
+        const drawerInMap = this.drawers.get(drawerName);
+        this.drawers.delete(drawerName);
+        if (drawerInMap) {
+            this.drawers.set(drawerName, drawerInMap);
+        }
+    }
+    getSize() {
+        return this.drawers.size;
+    }
+    getAll() {
+        return this.drawers;
+    }
+    getCanvasIds() {
+        const canvasIds = flat(Array.from(this.drawers).map(([, d]) => d.getCanvasIds()));
+        const distinctedCanvasIds = new Set([...canvasIds]);
+        return Array.from(distinctedCanvasIds);
+    }
+}

package/dist/chart/drawers/data-series-drawers/candle-series-wrapper.js

@@ -3,4 +3,53 @@
  * 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{clipToBounds as a}from"../data-series.drawer";export const candleTypesList=["candle","bar","line","area","scatterPlot","hollow","histogram","baseline","trend"];export class CandleSeriesWrapper{constructor(e,r,s){this.drawer=e,this.config=r,this.chartBounds=s}draw(e,r,s,t){this.isChartTypeAllowed()&&(this.beforeDraw(e),this.drawer.draw(e,r,s,t),this.afterDraw(e,s))}beforeDraw(e){e.restore(),e.save(),a(e,this.chartBounds())}isChartTypeAllowed(){return candleTypesList.includes(this.config.components.chart.type)}afterDraw(e,r){e.restore(),e.save(),a(e,r.scaleModel.getBounds())}}
+import { clipToBounds } from '../data-series.drawer';
+export const candleTypesList = [
+    'candle',
+    'bar',
+    'line',
+    'area',
+    'scatterPlot',
+    'hollow',
+    'histogram',
+    'baseline',
+    'trend',
+];
+/**
+ * A decorator for drawers, that draw something depending on visual candles
+ */
+export class CandleSeriesWrapper {
+    constructor(drawer, config, chartBounds) {
+        this.drawer = drawer;
+        this.config = config;
+        this.chartBounds = chartBounds;
+    }
+    draw(ctx, allPoints, model, config) {
+        if (this.isChartTypeAllowed()) {
+            this.beforeDraw(ctx);
+            this.drawer.draw(ctx, allPoints, model, config);
+            this.afterDraw(ctx, model);
+        }
+    }
+    beforeDraw(ctx) {
+        // by default we have clip to study underlay area if study is underlying
+        // remove clip if study is underlying, because we need to color candles on main chart
+        // in the end we have to restore original clip
+        // if (!studySeries.overlaying) {
+        ctx.restore();
+        ctx.save();
+        clipToBounds(ctx, this.chartBounds());
+        // }
+    }
+    isChartTypeAllowed() {
+        return candleTypesList.includes(this.config.components.chart.type);
+    }
+    afterDraw(ctx, model) {
+        // restore previous clip
+        // if (!studySeries.overlaying) {
+        ctx.restore();
+        ctx.save();
+        clipToBounds(ctx, model.scale.getBounds());
+        // }
+    }
+}

package/dist/chart/drawers/data-series-drawers/color-candle.drawer.js

@@ -3,4 +3,38 @@
  * 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 b}from"../../model/scaling/viewport.model";import{floorToDPR as l}from"../../utils/device/device-pixel-ratio.utils";import{round as v}from"../../utils/math.utils";export class ColorCandleDrawer{constructor(t){this.chartModel=t}draw(t,d,s,i){d.forEach((r,h)=>{var e;const f=s.getPaintConfig(h);t.fillStyle=(e=i.singleColor)!==null&&e!==void 0?e:f.color,r.forEach(n=>{const o=this.chartModel.getVisualCandle(v(n.centerUnit)),g=n.close;if(o&&g===1){const M=this.chartModel.scaleModel.zoomX,c=l(b(o.width,M)),m=l(o.bodyHeight(this.chartModel.scaleModel)),p=o.xCenter(this.chartModel.scaleModel)-c/2,u=o.yBodyStart(this.chartModel.scaleModel),C=this.chartModel.config.components.chart.candlePaddingPercent,a=l(c*C/2),y=p+a,P=c-a*2;t.fillRect(y,u,P,m)}})})}}
+import { unitToPixels } from '../../model/scaling/viewport.model';
+import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+import { round } from '../../utils/math.utils';
+/**
+ * Some series have candles which are highlighted.
+ * This drawer draws the candle box on top of original candles.
+ */
+export class ColorCandleDrawer {
+    constructor(chartModel) {
+        this.chartModel = chartModel;
+    }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            points.forEach(p => {
+                const visualCandle = this.chartModel.getVisualCandle(round(p.centerUnit));
+                const value = p.close;
+                if (visualCandle && value === 1) {
+                    const zoomX = this.chartModel.scale.zoomX;
+                    const width = floorToDPR(unitToPixels(visualCandle.width, zoomX));
+                    const bodyH = floorToDPR(visualCandle.bodyHeight(this.chartModel.scale));
+                    const baseX = visualCandle.xCenter(this.chartModel.scale) - width / 2;
+                    const bodyStart = visualCandle.yBodyStart(this.chartModel.scale);
+                    const paddingPercent = this.chartModel.config.components.chart.candlePaddingPercent;
+                    const paddingWidthOffset = floorToDPR((width * paddingPercent) / 2);
+                    const paddingBaseX = baseX + paddingWidthOffset;
+                    const paddingWidth = width - paddingWidthOffset * 2;
+                    ctx.fillRect(paddingBaseX, bodyStart, paddingWidth, bodyH);
+                }
+            });
+        });
+    }
+}

package/dist/chart/drawers/data-series-drawers/data-series-drawers.utils.js

@@ -3,4 +3,19 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-export const buildLinePath=(o,e,t)=>{o.length!==0&&o.forEach((l,s)=>{const{centerUnit:i,close:f}=l,n=t.toX(i),c=t.toY(f);s===0?e.moveTo(n,c):e.lineTo(n,c)})};
+export const buildLinePath = (points, ctx, view) => {
+    if (points.length !== 0) {
+        // Recognizing line gaps by candles idx.
+        points.forEach((p, idx) => {
+            const { centerUnit, close } = p;
+            const x = view.toX(centerUnit);
+            const y = view.toY(close);
+            if (idx === 0) {
+                ctx.moveTo(x, y);
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        });
+    }
+};

package/dist/chart/drawers/data-series-drawers/difference-cloud.drawer.js

@@ -3,4 +3,109 @@
  * 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{setLineWidth as C}from"../data-series.drawer";import{buildLinePath as y}from"./data-series-drawers.utils";import{firstOf as D,lastOf as b}from"../../utils/array.utils";import{toRGBA as m}from"../../utils/color.utils";export class DifferenceCloudDrawer{constructor(){}draw(o,r,e,a){e.config.visible&&(r.forEach((i,l)=>{var s;const n=e.getPaintConfig(l);C(o,n.lineWidth,e,a,n.hoveredLineWidth);const f=(s=a.singleColor)!==null&&s!==void 0?s:n.color;o.strokeStyle=f,this.drawLine(o,i,e.view)}),e.linkedDataSeriesModels.forEach((i,l)=>{if(isDifferenceTool(i.config.type)&&isDifferenceTool(e.config.type)&&i.config.visible){const s=[],n=e,f=n.getSeriesInViewport(n.scaleModel.xStart-1,n.scaleModel.xEnd+1),c=i.getSeriesInViewport(i.scaleModel.xStart-1,i.scaleModel.xEnd+1);f.forEach((h,t)=>{const u=Math.min(h.length,c[t].length);for(let g=0;g<u;g++){const p=[h[g].clone(),c[t][g].clone()];s.push({diffPoints:p})}const v=n.getPaintConfig(t).color,E=i.getPaintConfig(l).color;this.drawDifference(o,v,E,s,n,i,a)})}}))}drawLine(o,r,e){o.beginPath(),y(r,o,e),o.stroke()}drawDifference(o,r,e,a,i,l,s){const[n,f]=[[],[]];a.forEach(t=>{const[u,v]=t.diffPoints;n.push(u),f.push(v)});const c=d(n,i.view),h=d(f,l.view);this.fillCloud(o,e,c,h,s),this.fillCloud(o,r,h,c,s)}fillCloud(o,r,e,a,i){var l,s,n,f;o.save(),o.beginPath();const c=(s=(l=D(e))===null||l===void 0?void 0:l.x)!==null&&s!==void 0?s:0,h=(f=(n=b(e))===null||n===void 0?void 0:n.x)!==null&&f!==void 0?f:0;o.lineTo(c,0),e.forEach(t=>{o.lineTo(t.x,t.y)}),o.lineTo(h,0),o.closePath(),o.clip(),o.beginPath(),e.forEach((t,u)=>{u===0?o.moveTo(t.x,t.y):o.lineTo(t.x,t.y)}),a.slice().reverse().forEach(t=>{o.lineTo(t.x,t.y)}),o.closePath(),o.fillStyle=i.singleColor?i.singleColor:m(r||"#383838",.3),o.fill(),o.restore()}}const d=(P,o)=>P.map(r=>{const{centerUnit:e,close:a}=r,i=o.toX(e),l=o.toY(a);return{x:i,y:l}});export const isDifferenceTool=P=>P==="DIFFERENCE";
+import { setLineWidth } from '../data-series.drawer';
+import { buildLinePath } from './data-series-drawers.utils';
+import { firstOf, lastOf } from '../../utils/array.utils';
+import { toRGBA } from '../../utils/color.utils';
+export class DifferenceCloudDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        if (model.config.visible) {
+            // draw main line
+            allPoints.forEach((points, idx) => {
+                var _a;
+                const config = model.getPaintConfig(idx);
+                setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
+                const lineColor = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+                ctx.strokeStyle = lineColor;
+                this.drawLine(ctx, points, model.view);
+            });
+            // draw difference cloud
+            model.linkedDataSeriesModels.forEach((linkedSeries, linkedSeriesIdx) => {
+                if (isDifferenceTool(linkedSeries.config.type) &&
+                    isDifferenceTool(model.config.type) &&
+                    linkedSeries.config.visible) {
+                    const differencePoints = [];
+                    const mainSeries = model;
+                    const allPointsMain = mainSeries.getSeriesInViewport(mainSeries.scale.xStart - 1, mainSeries.scale.xEnd + 1);
+                    const allPointsLinked = linkedSeries.getSeriesInViewport(linkedSeries.scale.xStart - 1, linkedSeries.scale.xEnd + 1);
+                    allPointsMain.forEach((points, idx) => {
+                        const to = Math.min(points.length, allPointsLinked[idx].length);
+                        for (let k = 0; k < to; k++) {
+                            const diffPoints = [
+                                points[k].clone(),
+                                allPointsLinked[idx][k].clone(),
+                            ];
+                            differencePoints.push({
+                                diffPoints,
+                            });
+                        }
+                        const curSeriesColor = mainSeries.getPaintConfig(idx).color;
+                        const nextSeriesColor = linkedSeries.getPaintConfig(linkedSeriesIdx).color;
+                        this.drawDifference(ctx, curSeriesColor, nextSeriesColor, differencePoints, mainSeries, linkedSeries, drawerConfig);
+                    });
+                }
+            });
+        }
+    }
+    drawLine(ctx, points, view) {
+        ctx.beginPath();
+        buildLinePath(points, ctx, view);
+        ctx.stroke();
+    }
+    drawDifference(ctx, lineColor, nextLineColor, diffPoints, curSeries, nextSeries, drawerConfig) {
+        const [linePoints, nextLinePoints] = [[], []];
+        diffPoints.forEach(points => {
+            const [point, nextPoint] = points.diffPoints;
+            linePoints.push(point);
+            nextLinePoints.push(nextPoint);
+        });
+        const curSeriesPoints = mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
+        const nextSeriesPoints = mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
+        this.fillCloud(ctx, nextLineColor, curSeriesPoints, nextSeriesPoints, drawerConfig);
+        this.fillCloud(ctx, lineColor, nextSeriesPoints, curSeriesPoints, drawerConfig);
+    }
+    fillCloud(ctx, color, linePoints, nextLinePoints, drawerConfig) {
+        var _a, _b, _c, _d;
+        ctx.save();
+        // clip above lowerLine
+        ctx.beginPath();
+        const firstX = (_b = (_a = firstOf(linePoints)) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+        const lastX = (_d = (_c = lastOf(linePoints)) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0;
+        ctx.lineTo(firstX, 0);
+        linePoints.forEach(p => {
+            ctx.lineTo(p.x, p.y);
+        });
+        ctx.lineTo(lastX, 0);
+        ctx.closePath();
+        ctx.clip();
+        ctx.beginPath();
+        linePoints.forEach((p, idx) => {
+            if (idx === 0) {
+                ctx.moveTo(p.x, p.y);
+            }
+            else {
+                ctx.lineTo(p.x, p.y);
+            }
+        });
+        nextLinePoints
+            .slice()
+            .reverse()
+            .forEach(p => {
+            ctx.lineTo(p.x, p.y);
+        });
+        ctx.closePath();
+        ctx.fillStyle = drawerConfig.singleColor ? drawerConfig.singleColor : toRGBA(color ? color : '#383838', 0.3);
+        ctx.fill();
+        ctx.restore();
+    }
+}
+const mapDataSeriesDiffPointsIntoPoints = (points, view) => {
+    return points.map(p => {
+        const { centerUnit, close } = p;
+        const x = view.toX(centerUnit);
+        const y = view.toY(close);
+        return { x, y };
+    });
+};
+export const isDifferenceTool = (type) => type === 'DIFFERENCE';

package/dist/chart/drawers/data-series-drawers/histogram.drawer.js

@@ -3,4 +3,26 @@
  * 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{floor as a}from"../../utils/math.utils";import{setLineWidth as g}from"../data-series.drawer";export class HistogramDrawer{constructor(){}draw(o,c,r,e){const h=r.view.toY(0);c.forEach((l,v)=>{var t;const i=r.getPaintConfig(v);g(o,i.lineWidth,r,e,i.hoveredLineWidth),o.strokeStyle=(t=e.singleColor)!==null&&t!==void 0?t:i.color,o.beginPath(),l.forEach(n=>{const s=r.view.toX(n.centerUnit),f=r.view.toY(n.close);o.moveTo(s,a(h)),o.lineTo(s,a(f))}),o.stroke()})}}
+import { floor } from '../../utils/math.utils';
+import { setLineWidth } from '../data-series.drawer';
+export class HistogramDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        const zero = model.view.toY(0);
+        allPoints.forEach((points, idx) => {
+            var _a;
+            // odd width is crucial to draw histogram without antialiasing
+            const config = model.getPaintConfig(idx);
+            setLineWidth(ctx, config.lineWidth, model, drawerConfig, config.hoveredLineWidth);
+            ctx.strokeStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            ctx.beginPath();
+            points.forEach(p => {
+                const x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                ctx.moveTo(x, floor(zero));
+                ctx.lineTo(x, floor(y));
+            });
+            ctx.stroke();
+        });
+    }
+}