@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,111 @@
 /*
- * 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{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.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/drawers/data-series-drawers/histogram.drawer.js

@@ -1,6 +1,28 @@
 /*
- * 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{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();
+        });
+    }
+}

package/dist/chart/drawers/data-series-drawers/linear.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/drawers/data-series-drawers/linear.drawer.js

@@ -1,6 +1,24 @@
 /*
- * 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{setLineWidth as s}from"../data-series.drawer";import{buildLinePath as l}from"./data-series-drawers.utils";export class LinearDrawer{constructor(){}draw(i,e,r,n){e.forEach((a,h)=>{var o;const t=r.getPaintConfig(h);s(i,t.lineWidth,r,n,t.hoveredLineWidth),i.strokeStyle=(o=n.singleColor)!==null&&o!==void 0?o:t.color,this.drawLinePath(i,a,r.view)})}drawLinePath(i,e,r){i.beginPath(),l(e,i,r),i.stroke()}}
+import { setLineWidth } from '../data-series.drawer';
+import { buildLinePath } from './data-series-drawers.utils';
+export class LinearDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            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;
+            this.drawLinePath(ctx, points, model.view);
+        });
+    }
+    drawLinePath(ctx, points, view) {
+        ctx.beginPath();
+        buildLinePath(points, ctx, view);
+        ctx.stroke();
+    }
+}

package/dist/chart/drawers/data-series-drawers/points.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/drawers/data-series-drawers/points.drawer.js

@@ -1,6 +1,24 @@
 /*
- * 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/.
  */
-export class PointsDrawer{constructor(){}draw(o,a,i,l){a.forEach((e,s)=>{var n;const t=i.getPaintConfig(s),c=t.lineWidth;o.fillStyle=(n=l.singleColor)!==null&&n!==void 0?n:t.color,o.lineWidth=1,e.forEach(r=>{o.beginPath();const f=i.view.toX(r.centerUnit),h=i.view.toY(r.close);o.arc(f,h,c,0,Math.PI*2),o.fill()})})}}
+export class PointsDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model, drawerConfig) {
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            const radius = config.lineWidth;
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            ctx.lineWidth = 1;
+            points.forEach(p => {
+                ctx.beginPath();
+                const x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                ctx.arc(x, y, radius, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        });
+    }
+}

package/dist/chart/drawers/data-series-drawers/rectangular-tool.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/drawers/data-series-drawers/rectangular-tool.drawer.js

@@ -1,6 +1,12 @@
 /*
- * 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/.
  */
-export class RectangularToolDrawer{draw(){}}
+export class RectangularToolDrawer {
+    // private lastDrawnTimelineX: number = -1;
+    // private regularZoneOpacity: number = 0.3;
+    // private lastZoneOpacity: number = 0.4;
+    // constructor(private chartModel: ChartModel, private chartBoundsContainer: CanvasBoundsContainer) {}
+    draw() { }
+}

package/dist/chart/drawers/data-series-drawers/text.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/drawers/data-series-drawers/text.drawer.js

@@ -1,6 +1,30 @@
 /*
- * 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{calculateSymbolHeight as y,calculateTextWidth as u}from"../../utils/canvas/canvas-font-measure-tool.utils";export class TextDrawer{constructor(t){this.config=t}draw(t,r,o,l){t.save(),r.forEach((a,f)=>{var e;const s=o.getPaintConfig(f);t.fillStyle=(e=l.singleColor)!==null&&e!==void 0?e:s.color;const i=s.lineWidth+"px "+this.config.components.yAxis.fontFamily;t.font=i,a.forEach(n=>{const c=o.getTextForPoint(n),g=u(c,t,i),h=y(i,t),v=o.view.toX(n.centerUnit)-g/2,x=o.view.toY(n.close)+h;t.fillText(c,v,x)})}),t.restore()}}
+import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+export class TextDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, allPoints, model, drawerConfig) {
+        ctx.save();
+        allPoints.forEach((points, idx) => {
+            var _a;
+            const config = model.getPaintConfig(idx);
+            ctx.fillStyle = (_a = drawerConfig.singleColor) !== null && _a !== void 0 ? _a : config.color;
+            const font = config.lineWidth + 'px ' + this.config.components.yAxis.fontFamily;
+            ctx.font = font;
+            points.forEach(p => {
+                const text = model.getTextForPoint(p);
+                const textWidth = calculateTextWidth(text, ctx, font);
+                const textHeight = calculateSymbolHeight(font, ctx);
+                const x = model.view.toX(p.centerUnit) - textWidth / 2;
+                const y = model.view.toY(p.close) + textHeight;
+                ctx.fillText(text, x, y);
+            });
+        });
+        ctx.restore();
+    }
+}

package/dist/chart/drawers/data-series-drawers/trend-histogram.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/drawers/data-series-drawers/trend-histogram.drawer.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{flat as v}from"../../utils/array.utils";import{floor as c}from"../../utils/math.utils";export class TrendHistogramDrawer{constructor(){}draw(o,e,s){const f=s.view.toY(0),h=v(e),i=[[],[]];h.forEach((n,r,t)=>{i[n.close<this.previousValue(t,r)?1:0].push(n)}),i.forEach((n,r)=>{const t=s.getPaintConfig(r);o.strokeStyle=r===0?t.color:t.aditionalColor||"#FF00FF",o.lineWidth=t.lineWidth,o.beginPath(),n.forEach(l=>{const a=s.view.toX(l.centerUnit),u=s.view.toY(l.close);o.moveTo(a,c(f)),o.lineTo(a,c(u))}),o.stroke()})}previousValue(o,e){do e--;while(e>=0&&!isFinite(o[e]&&o[e].close));return o[e]?o[e].close:Number.NaN}}
+import { flat } from '../../utils/array.utils';
+import { floor } from '../../utils/math.utils';
+export class TrendHistogramDrawer {
+    constructor() { }
+    draw(ctx, allPoints, model) {
+        const zero = model.view.toY(0);
+        // here I do flat, thinks that there is no more that 1 series
+        const allPointsFlat = flat(allPoints);
+        const items = [[], []];
+        allPointsFlat.forEach((item, idx, array) => {
+            items[item.close < this.previousValue(array, idx) ? 1 : 0].push(item);
+        });
+        items.forEach((points, idx) => {
+            // odd width is crucial to draw histogram without antialiasing
+            const config = model.getPaintConfig(idx);
+            ctx.strokeStyle = idx === 0 ? config.color : config.aditionalColor || '#FF00FF';
+            ctx.lineWidth = config.lineWidth;
+            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();
+        });
+    }
+    //weird but works
+    previousValue(arr, idx) {
+        do {
+            idx--;
+        } while (idx >= 0 && !isFinite(arr[idx] && arr[idx].close));
+        return arr[idx] ? arr[idx].close : Number.NaN;
+    }
+}

package/dist/chart/drawers/data-series-drawers/triangle.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/drawers/data-series-drawers/triangle.drawer.js

@@ -1,6 +1,27 @@
 /*
- * 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/.
  */
-export class TriangleDrawer{constructor(){}draw(o,e,n,l){e.forEach((s,c)=>{var i;const r=n.getPaintConfig(c);o.fillStyle=(i=l.singleColor)!==null&&i!==void 0?i:r.color,s.forEach(a=>{const t=n.view.toX(a.centerUnit),f=n.view.toY(a.close);this.drawCandleTriangle(o,t,f,r.lineWidth)})})}drawCandleTriangle(o,e,n,l){o.beginPath(),o.moveTo(e-l/2,n),o.lineTo(e,n-l),o.lineTo(e+l/2,n),o.fill()}}
+export class TriangleDrawer {
+    constructor() { }
+    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 x = model.view.toX(p.centerUnit);
+                const y = model.view.toY(p.close);
+                this.drawCandleTriangle(ctx, x, y, config.lineWidth);
+            });
+        });
+    }
+    drawCandleTriangle(ctx, x, y, triangleWidth) {
+        ctx.beginPath();
+        ctx.moveTo(x - triangleWidth / 2, y);
+        ctx.lineTo(x, y - triangleWidth);
+        ctx.lineTo(x + triangleWidth / 2, y);
+        ctx.fill();
+    }
+}

package/dist/chart/drawers/data-series.drawer.d.ts

@@ -1,13 +1,13 @@
 /*
- * 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 { DynamicModelDrawer } from '../components/dynamic-objects/dynamic-objects.drawer';
 import { PaneManager } from '../components/pane/pane-manager.component';
 import { Bounds } from '../model/bounds.model';
-import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 import { CanvasModel } from '../model/canvas.model';
-import { Drawer } from './drawing-manager';
+import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 export interface ChartDrawerConfig {
     singleColor?: string;
     forceBold?: number;
@@ -26,14 +26,12 @@ export declare const transformToTwoDimension: (points: VisualSeriesPoint[] | Vis
  *
  * (may support multiple layers in future)
  */
-export declare class DataSeriesDrawer implements Drawer {
+export declare class DataSeriesDrawer implements DynamicModelDrawer<DataSeriesModel> {
     private paneManager;
-    private canvasModel;
     private readonly seriesDrawers;
-    constructor(paneManager: PaneManager, canvasModel: CanvasModel, seriesDrawers: Record<string, SeriesDrawer>);
-    draw(): void;
+    constructor(paneManager: PaneManager, seriesDrawers: Record<string, SeriesDrawer>);
+    draw(canvasModel: CanvasModel, model: DataSeriesModel, paneUUID?: string): void;
     drawSeries(ctx: CanvasRenderingContext2D, series: DataSeriesModel): void;
-    getCanvasIds(): Array<string>;
 }
 export declare const clipToBounds: (ctx: CanvasRenderingContext2D, bounds: Bounds) => void;
 export declare const setLineWidth: (ctx: CanvasRenderingContext2D, lineWidth: number, dataSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig, seriesSelectedWidth?: number) => void;

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

@@ -1,6 +1,61 @@
 /*
- * 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{flatMap as i}from"../utils/array.utils";export const transformToTwoDimension=r=>Array.isArray(r[0])?r:[r];export class DataSeriesDrawer{constructor(e,t,a){this.paneManager=e,this.canvasModel=t,this.seriesDrawers=a}draw(){const e=this.canvasModel.ctx;i(Object.values(this.paneManager.paneComponents),t=>t.yExtentComponents).forEach(t=>{e.save(),clipToBounds(e,t.getBounds()),t.dataSeries.forEach(a=>this.drawSeries(e,a)),e.restore()})}drawSeries(e,t){if(t.config.visible){const a=t.config.type,s=this.seriesDrawers[a];if(s){const o=t.getSeriesInViewport(t.scaleModel.xStart-1,t.scaleModel.xEnd+1);o&&o.length>=1&&s.draw(e,o,t,{})}else console.error(`Data series drawer with type ${a} isn't registered!`)}}getCanvasIds(){return[this.canvasModel.canvasId]}}export const clipToBounds=(r,e)=>{r.beginPath(),r.rect(e.x,e.y,e.width,e.height),r.clip(),r.closePath()},setLineWidth=(r,e,t,a,s=e)=>{a.forceBold?r.lineWidth=a.forceBold:t.hovered?r.lineWidth=s:r.lineWidth=e};
+export const transformToTwoDimension = (points) => (Array.isArray(points[0]) ? points : [points]);
+/**
+ * Basic data series drawer.
+ * Have multiple paint tools: linear, histogram, points, text above/below candle and others.
+ *
+ * (may support multiple layers in future)
+ */
+export class DataSeriesDrawer {
+    constructor(paneManager, seriesDrawers) {
+        this.paneManager = paneManager;
+        this.seriesDrawers = seriesDrawers;
+    }
+    draw(canvasModel, model, paneUUID) {
+        const ctx = canvasModel.ctx;
+        const pane = paneUUID && this.paneManager.panes[paneUUID];
+        if (model) {
+            ctx.save();
+            pane && clipToBounds(ctx, pane.getBounds());
+            this.drawSeries(ctx, model);
+            ctx.restore();
+        }
+    }
+    drawSeries(ctx, series) {
+        if (series.config.visible) {
+            const paintTool = series.config.type;
+            const drawer = this.seriesDrawers[paintTool];
+            if (drawer) {
+                const viewportSeries = series.getSeriesInViewport(series.scale.xStart - 1, series.scale.xEnd + 1);
+                if (viewportSeries && viewportSeries.length >= 1) {
+                    // +- 1 to correctly draw points which are partly inside bounds
+                    drawer.draw(ctx, viewportSeries, series, {});
+                }
+            }
+            else {
+                console.error(`Data series drawer with type ${paintTool} isn't registered!`);
+            }
+        }
+    }
+}
+export const clipToBounds = (ctx, bounds) => {
+    ctx.beginPath();
+    ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+    ctx.clip();
+    ctx.closePath();
+};
+export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSelectedWidth = lineWidth) => {
+    if (drawerConfig.forceBold) {
+        ctx.lineWidth = drawerConfig.forceBold;
+    }
+    else if (dataSeries.hovered) {
+        ctx.lineWidth = seriesSelectedWidth;
+    }
+    else {
+        ctx.lineWidth = lineWidth;
+    }
+};

package/dist/chart/drawers/drawing-manager.d.ts

@@ -1,12 +1,12 @@
 /*
- * 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 EventBus from '../events/event-bus';
 import { ChartResizeHandler } from '../inputhandlers/chart-resize.handler';
 export declare const HIT_TEST_PREFIX = "HIT_TEST_";
-declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "VOLUMES", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DRAWINGS", "DATA_SERIES", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
+declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
 export type DrawerType = typeof drawerTypes[number];
 /**
  * Manages the drawing process.