@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,12 +3,13 @@
  * 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 { ChartConfigComponentsYAxis, FullChartConfig } from '../../chart.config';
-import { CanvasModel } from '../../model/canvas.model';
-import { NumericAxisLabel } from '../labels_generator/numeric-axis-labels.generator';
+import { FullChartConfig } from '../../chart.config';
 import { Drawer } from '../../drawers/drawing-manager';
-import { Unit, ViewportModel } from '../../model/scaling/viewport.model';
-import { Bounds, BoundsProvider } from '../../model/bounds.model';
+import { Bounds } from '../../model/bounds.model';
+import { CanvasModel } from '../../model/canvas.model';
+import { Unit } from '../../model/scaling/viewport.model';
+import { PaneManager } from '../pane/pane-manager.component';
+import { YAxisComponent } from './y-axis.component';
 export interface YAxisLabel {
     readonly text: string;
     readonly value: Unit;
@@ -23,13 +24,9 @@ export interface YAxisAnimationParameters {
  */
 export declare class YAxisDrawer implements Drawer {
     private fullConfig;
-    private yAxisState;
     private canvasModel;
-    private labelsProvider;
-    private axisBounds;
-    private drawPredicate;
-    private toY;
-    constructor(fullConfig: FullChartConfig, yAxisState: ChartConfigComponentsYAxis, canvasModel: CanvasModel, labelsProvider: () => Array<NumericAxisLabel>, axisBounds: BoundsProvider, drawPredicate: () => boolean, toY: ViewportModel['toY']);
+    private paneManager;
+    constructor(fullConfig: FullChartConfig, canvasModel: CanvasModel, paneManager: PaneManager);
     /**
      * Draws the axis on the canvas if the drawPredicate is true.
      * It gets the labels from the labelsProvider and the bounds from the axisBounds.
@@ -48,7 +45,7 @@ export declare class YAxisDrawer implements Drawer {
      * @param {string} font - The font used for the labels.
      * @param {string} labelTextColor - The color of the label text.
      */
-    drawLabels(ctx: CanvasRenderingContext2D, labels: YAxisLabel[], axisBounds: Bounds, fontHeight: number, font: string, labelTextColor: string): void;
+    drawLabels(ctx: CanvasRenderingContext2D, labels: YAxisLabel[], axisBounds: Bounds, fontHeight: number, font: string, labelTextColor: string, yAxis: YAxisComponent): void;
     /**
      * Returns an array of canvas IDs.
      *

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

@@ -3,4 +3,99 @@
  * 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{getFontFromConfig as x}from"../../chart.config";import{calculateSymbolHeight as f,calculateTextWidth as u}from"../../utils/canvas/canvas-font-measure-tool.utils";import{clipToBounds as y}from"../../drawers/data-series.drawer";export class YAxisDrawer{constructor(e,o,t,s,i,l=()=>!0,r){this.fullConfig=e,this.yAxisState=o,this.canvasModel=t,this.labelsProvider=s,this.axisBounds=i,this.drawPredicate=l,this.toY=r}draw(){if(this.drawPredicate()){const e=this.labelsProvider(),o=this.axisBounds(),t=this.canvasModel.ctx;t.fillStyle=this.getBackgroundColor(),t.fillRect(o.x,o.y,o.width,o.height);const s=x(this.yAxisState),i=f(s,t),l=this.getLabelTextColor();t.save(),y(t,o),this.drawLabels(t,e,o,i,s,l),t.restore()}}drawLabels(e,o,t,s,i,l){e.fillStyle=l,e.font=i;const r=e.measureText("00.0"),a=r.actualBoundingBoxAscent+r.actualBoundingBoxDescent,d=t.y+a,g=t.y+t.height-a;o.forEach(h=>{const c=this.toY(h.value);c>d&&c<g&&m(e,t,h.text,c,s,i,this.yAxisState.labelBoxMargin.end,this.yAxisState.align)})}getCanvasIds(){return[this.canvasModel.canvasId]}getBackgroundColor(){return this.fullConfig.colors.yAxis.backgroundColor}getLabelTextColor(){return this.fullConfig.colors.yAxis.labelTextColor}}const m=(n,e,o,t,s,i,l,r)=>{const a=r==="right"?e.x+e.width-u(o,n,i)-l:e.x+l;n.fillText(o,a,t+s/2-1)};
+import { getFontFromConfig } from '../../chart.config';
+import { clipToBounds } from '../../drawers/data-series.drawer';
+import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+/**
+ * Draws the Y_AXIS rectangle + it's base labels.
+ */
+export class YAxisDrawer {
+    constructor(fullConfig, canvasModel, paneManager) {
+        this.fullConfig = fullConfig;
+        this.canvasModel = canvasModel;
+        this.paneManager = paneManager;
+    }
+    /**
+     * Draws the axis on the canvas if the drawPredicate is true.
+     * It gets the labels from the labelsProvider and the bounds from the axisBounds.
+     * It sets the background color of the axis and fills the background rectangle.
+     * It gets the font from the yAxisState and calculates the font height.
+     * It saves the context, clips it to the bounds and draws the labels with the given font and text color.
+     * @function
+     */
+    draw() {
+        this.paneManager.yExtents.forEach(extent => {
+            const yAxisComponent = extent.yAxis;
+            if (yAxisComponent.state.visible) {
+                const labels = yAxisComponent.model.baseLabelsModel.labels;
+                const bounds = yAxisComponent.getBounds();
+                const ctx = this.canvasModel.ctx;
+                // draw axis background rect animation
+                ctx.fillStyle = this.getBackgroundColor();
+                ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+                const font = getFontFromConfig(yAxisComponent.state);
+                const fontHeight = calculateSymbolHeight(font, ctx);
+                const textColor = this.getLabelTextColor();
+                ctx.save();
+                clipToBounds(ctx, bounds);
+                this.drawLabels(ctx, labels, bounds, fontHeight, font, textColor, yAxisComponent);
+                ctx.restore();
+            }
+        });
+    }
+    /**
+     * Draws labels on the Y-axis of a canvas chart.
+     * @param {CanvasRenderingContext2D} ctx - The 2D rendering context of the canvas.
+     * @param {YAxisLabel[]} labels - An array of objects containing the value and text of each label.
+     * @param {Bounds} axisBounds - An object containing the x, y, width, and height of the Y-axis.
+     * @param {number} fontHeight - The height of the font used for the labels.
+     * @param {string} font - The font used for the labels.
+     * @param {string} labelTextColor - The color of the label text.
+     */
+    drawLabels(ctx, labels, axisBounds, fontHeight, font, labelTextColor, yAxis) {
+        ctx.fillStyle = labelTextColor;
+        ctx.font = font;
+        const metrics = ctx.measureText('00.0');
+        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        const topY = axisBounds.y + textHeight;
+        const bottomY = axisBounds.y + axisBounds.height - textHeight;
+        labels.forEach(label => {
+            const y = yAxis.scale.toY(label.value);
+            if (y > topY && y < bottomY) {
+                drawSimpleLabel(ctx, axisBounds, label.text, y, fontHeight, font, yAxis.state.labelBoxMargin.end, yAxis.state.align);
+            }
+        });
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the canvas ID.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+    /**
+     * Returns the background color of the Y-axis.
+     *
+     * @protected
+     * @returns {string} The background color of the Y-axis.
+     */
+    getBackgroundColor() {
+        return this.fullConfig.colors.yAxis.backgroundColor;
+    }
+    /**
+     * Returns the color of the label text for the chart area axis.
+     *
+     * @protected
+     * @returns {string} The color of the label text.
+     */
+    getLabelTextColor() {
+        return this.fullConfig.colors.yAxis.labelTextColor;
+    }
+}
+const drawSimpleLabel = (ctx, bounds, text, centralY, fontHeight, font, padding, yAxisAlign) => {
+    const xTextBounds = yAxisAlign === 'right'
+        ? bounds.x + bounds.width - calculateTextWidth(text, ctx, font) - padding
+        : bounds.x + padding;
+    ctx.fillText(text, xTextBounds, centralY + fontHeight / 2 - 1); // -1 for font height adjustment
+};

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

@@ -4,30 +4,23 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
-import { FullChartConfig } from '../../chart.config';
+import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
+import { DataSeriesModel } from '../../model/data-series.model';
 import { ScaleModel } from '../../model/scale.model';
-import { ChartModel } from '../chart/chart.model';
-import { PaneComponent } from '../pane/pane.component';
 import { NumericYAxisLabelsGenerator } from './numeric-y-axis-labels.generator';
-import { YAxisLabelsModel } from './price_labels/y-axis-labels.model';
+import { FancyYAxisLabelsModel } from './price_labels/y-axis-labels.model';
 import { YAxisBaseLabelsModel } from './y-axis-base-labels.model';
 export declare class YAxisModel extends ChartBaseElement {
-    private config;
+    private paneUUID;
+    private state;
     private canvasBoundsContainer;
-    private canvasModel;
-    private chartModel;
-    yAxisLabelsGenerator: NumericYAxisLabelsGenerator;
-    yAxisBaseLabelsModel: YAxisBaseLabelsModel;
-    yAxisLabelsModel: YAxisLabelsModel;
-    constructor(paneComponent: PaneComponent, eventBus: EventBus, config: FullChartConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, chartModel: ChartModel, scaleModel: ScaleModel);
-    /**
-     * This method is used to activate the chart and auto-adjust the width of the Y axis depending on data.
-     * It subscribes to the candlesSetSubject and invalidates the labelsCache of yAxisLabelsGenerator, updates the labels of yAxisLabelsModel and yAxisBaseLabelsModel, and fires the draw event of canvasModel.
-     * @protected
-     * @returns {void}
-     */
+    private extentIdx;
+    labelsGenerator: NumericYAxisLabelsGenerator;
+    baseLabelsModel: YAxisBaseLabelsModel;
+    fancyLabelsModel: FancyYAxisLabelsModel;
+    constructor(paneUUID: string, eventBus: EventBus, state: YAxisConfig, canvasBoundsContainer: CanvasBoundsContainer, canvasModel: CanvasModel, scale: ScaleModel, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, extentIdx: number);
     protected doActivate(): void;
 }

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

@@ -3,4 +3,37 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{merge as c}from"rxjs";import{ChartBaseElement as b}from"../../model/chart-base-element";import{NumericYAxisLabelsGenerator as x}from"./numeric-y-axis-labels.generator";import{YAxisLabelsModel as A}from"./price_labels/y-axis-labels.model";import{YAxisBaseLabelsModel as u}from"./y-axis-base-labels.model";export class YAxisModel extends b{constructor(t,l,i,d,a,o,n){super(),this.config=i,this.canvasBoundsContainer=d,this.canvasModel=a,this.chartModel=o;const h=t.valueFormatter;this.yAxisLabelsGenerator=new x(null,o,n,h,()=>this.config.components.yAxis.type,()=>this.chartModel.getBaseLine(),i.components.yAxis.labelHeight),this.yAxisBaseLabelsModel=new u(n,this.yAxisLabelsGenerator,this.canvasBoundsContainer),this.addChildEntity(this.yAxisBaseLabelsModel),this.yAxisLabelsModel=new A(l,this.chartModel,this.canvasBoundsContainer,this.config,a,()=>this.canvasBoundsContainer.updateYAxisWidths()),this.addChildEntity(this.yAxisLabelsModel),this.canvasBoundsContainer.yAxisBoundsContainer.registerYAxisWidthContributor({getLargestLabel:()=>{var s;return((s=this.yAxisLabelsGenerator.labelsCache.getLastCachedValue())!==null&&s!==void 0?s:[]).map(e=>e.text).concat(this.yAxisLabelsModel.orderedLabels.flatMap(e=>e.labels).map(e=>e.labelText)).reduce((e,r)=>r.length>e.length?r:e,"")},getYAxisIndex:()=>0,getYAxisAlign:()=>this.config.components.yAxis.align,getPaneUUID:()=>t.uuid})}doActivate(){super.doActivate(),this.addRxSubscription(c(this.chartModel.candlesSetSubject).subscribe(()=>{this.yAxisLabelsGenerator.labelsCache.invalidate(),this.yAxisLabelsModel.updateLabels(),this.yAxisBaseLabelsModel.updateLabels(),this.canvasModel.fireDraw()}))}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { NumericYAxisLabelsGenerator } from './numeric-y-axis-labels.generator';
+import { FancyYAxisLabelsModel } from './price_labels/y-axis-labels.model';
+import { YAxisBaseLabelsModel } from './y-axis-base-labels.model';
+export class YAxisModel extends ChartBaseElement {
+    constructor(paneUUID, eventBus, state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx) {
+        super();
+        this.paneUUID = paneUUID;
+        this.state = state;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.extentIdx = extentIdx;
+        this.labelsGenerator = new NumericYAxisLabelsGenerator(null, dataSeriesProvider, scale, valueFormatter, () => this.state.type, state.labelHeight);
+        this.baseLabelsModel = new YAxisBaseLabelsModel(scale, this.labelsGenerator, this.canvasBoundsContainer, paneUUID, extentIdx);
+        this.addChildEntity(this.baseLabelsModel);
+        this.fancyLabelsModel = new FancyYAxisLabelsModel(eventBus, scale, canvasBoundsContainer, state, canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths());
+        this.addChildEntity(this.fancyLabelsModel);
+    }
+    doActivate() {
+        const contributor = {
+            getLargestLabel: () => {
+                var _a;
+                return ((_a = this.labelsGenerator.labelsCache.getLastCachedValue()) !== null && _a !== void 0 ? _a : [])
+                    .map(label => label.text)
+                    .concat(this.fancyLabelsModel.orderedLabels.flatMap(l => l.labels).map(l => l.labelText))
+                    .reduce((maxLengthText, label) => (label.length > maxLengthText.length ? label : maxLengthText), '');
+            },
+            getYAxisIndex: () => this.extentIdx,
+            getYAxisState: () => this.state,
+            getPaneUUID: () => this.paneUUID,
+        };
+        this.canvasBoundsContainer.yAxisBoundsContainer.registerYAxisWidthContributor(contributor);
+        this.addSubscription(() => this.canvasBoundsContainer.yAxisBoundsContainer.removeYAxisWidthContributor(contributor));
+    }
+}

package/dist/chart/drawers/chart-background.drawer.js

@@ -3,4 +3,72 @@
  * 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{getDPR as f}from"../utils/device/device-pixel-ratio.utils";import{deepEqual as p}from"../utils/object.utils";import{floor as s}from"../utils/math.utils";export class BackgroundDrawer{constructor(e,o){this.canvasModel=e,this.config=o,this.prevState={},this.prevWidth=0,this.prevHeight=0}draw(){if(p(this.config.colors.chartAreaTheme,this.prevState)&&this.prevHeight===this.canvasModel.height&&this.prevWidth===this.canvasModel.width)return;this.canvasModel.clear();const e=this.canvasModel.ctx;if(this.config.colors.chartAreaTheme.backgroundMode==="gradient"){const o=e.createLinearGradient(0,0,this.canvasModel.width,this.canvasModel.height);o.addColorStop(0,this.config.colors.chartAreaTheme.backgroundGradientTopColor),o.addColorStop(1,this.config.colors.chartAreaTheme.backgroundGradientBottomColor),e.fillStyle=o}else e.fillStyle=this.config.colors.chartAreaTheme.backgroundColor;e.fillRect(0,0,this.canvasModel.width,this.canvasModel.height),this.prevState=Object.assign({},this.config.colors.chartAreaTheme),this.prevWidth=this.canvasModel.width,this.prevHeight=this.canvasModel.height}getCanvasIds(){return[this.canvasModel.canvasId]}}export const redrawBackgroundArea=(c,e,o,l,g,v,i)=>{const r=f(),h=[o*r,l*r,g*r,v*r];let t=c.getImageData(...h);if(i!==void 0){const d=t.data[3]/255;if(d===1)for(let a=3;a<t.data.length;a+=4)t.data[a]=s(t.data[a]*i);else for(let a=0;a<t.data.length;a++){const n=t.data[a];t.data[a]=a%4===3?s(n*i):s(d*n)}t=new ImageData(t.data,t.width,t.height,{colorSpace:t.colorSpace})}e.putImageData(t,h[0],h[1])};
+import { getDPR } from '../utils/device/device-pixel-ratio.utils';
+import { deepEqual } from '../utils/object.utils';
+import { floor } from '../utils/math.utils';
+export class BackgroundDrawer {
+    constructor(canvasModel, config) {
+        this.canvasModel = canvasModel;
+        this.config = config;
+        // we need to save previous state to avoid unnecessary redraws
+        this.prevState = {};
+        this.prevWidth = 0;
+        this.prevHeight = 0;
+    }
+    draw() {
+        if (deepEqual(this.config.colors.chartAreaTheme, this.prevState) &&
+            this.prevHeight === this.canvasModel.height &&
+            this.prevWidth === this.canvasModel.width) {
+            return;
+        }
+        this.canvasModel.clear();
+        const ctx = this.canvasModel.ctx;
+        if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
+            const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
+            grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
+            grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
+            ctx.fillStyle = grd;
+        }
+        else {
+            ctx.fillStyle = this.config.colors.chartAreaTheme.backgroundColor;
+        }
+        ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
+        // save prev state
+        this.prevState = Object.assign({}, this.config.colors.chartAreaTheme);
+        this.prevWidth = this.canvasModel.width;
+        this.prevHeight = this.canvasModel.height;
+    }
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}
+// this function in used in case when
+// some entity can overlap with another chart entity, so we need to hide the another entity
+export const redrawBackgroundArea = (backgroundCtx, ctx, x, y, width, height, opacity) => {
+    const dpr = getDPR();
+    const backgroundCoords = [x * dpr, y * dpr, width * dpr, height * dpr];
+    let imageData = backgroundCtx.getImageData(...backgroundCoords);
+    if (opacity !== undefined) {
+        // convert rgba to rgb for black background
+        //		Target.R = (Source.A * Source.R)
+        //		Target.G = (Source.A * Source.G)
+        //		Target.B = (Source.A * Source.B)
+        const alpha = imageData.data[3] / 255;
+        if (alpha === 1) {
+            // fast path
+            for (let i = 3; i < imageData.data.length; i += 4) {
+                imageData.data[i] = floor(imageData.data[i] * opacity);
+            }
+        }
+        else {
+            for (let i = 0; i < imageData.data.length; i++) {
+                const v = imageData.data[i];
+                imageData.data[i] = i % 4 === 3 ? floor(v * opacity) : floor(alpha * v);
+            }
+        }
+        imageData = new ImageData(
+        // i % 4 === 3 - this condition is for alpha channel
+        imageData.data, imageData.width, imageData.height, { colorSpace: imageData.colorSpace });
+    }
+    ctx.putImageData(imageData, backgroundCoords[0], backgroundCoords[1]);
+};

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

@@ -3,4 +3,72 @@
  * 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 d}from"../../model/candle-series.model";import{flat as S}from"../../utils/array.utils";import{floor as l}from"../../utils/math.utils";export class AreaDrawer{constructor(e){this.config=e}draw(e,C,o,r){if(o instanceof d){const i=S(C);if(i.length===0)return;r.singleColor?e.strokeStyle=r.singleColor:e.strokeStyle=o.colors.areaTheme.lineColor,o.hovered?e.lineWidth=this.config.selectedWidth:e.lineWidth=this.config.areaLineWidth;const a=o.extentComponent.getBounds(),p=i[0],T=o.view.toX(p.centerUnit);for(let t=0;t<i.length;t++){const g=i[t-1],v=i[t+1],c=i[t],s=o.view.toX(c.centerUnit),h=o.view.toY(c.close),f=a.y+a.height;if(g===void 0)e.beginPath(),e.lineTo(l(s),f),e.moveTo(l(s),h);else if(v===void 0){e.lineTo(l(s),h),e.stroke(),e.lineTo(l(s),f),e.lineTo(l(T),f),e.closePath();let n;r.singleColor?e.fillStyle=r.singleColor:e.fillStyle=o.colors.areaTheme.startColor&&o.colors.areaTheme.stopColor?(n=e.createLinearGradient(0,0,0,a.height),n.addColorStop(0,o.colors.areaTheme.startColor),n.addColorStop(1,o.colors.areaTheme.stopColor),n):"",e.fill()}else e.lineTo(l(s),h)}}}}
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { flat } from '../../utils/array.utils';
+import { floor } from '../../utils/math.utils';
+export class AreaDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    draw(ctx, points, model, drawerConfig) {
+        if (model instanceof CandleSeriesModel) {
+            // @ts-ignore
+            const visualCandles = flat(points);
+            if (visualCandles.length === 0) {
+                return;
+            }
+            if (drawerConfig.singleColor) {
+                ctx.strokeStyle = drawerConfig.singleColor;
+            }
+            else {
+                ctx.strokeStyle = model.colors.areaTheme.lineColor;
+            }
+            if (model.hovered) {
+                ctx.lineWidth = this.config.selectedWidth;
+            }
+            else {
+                ctx.lineWidth = this.config.areaLineWidth;
+            }
+            const paneBounds = model.extentComponent.getBounds();
+            const first = visualCandles[0];
+            const firstLineX = model.view.toX(first.centerUnit);
+            for (let i = 0; i < visualCandles.length; i++) {
+                const prev = visualCandles[i - 1];
+                const next = visualCandles[i + 1];
+                const visualCandle = visualCandles[i];
+                const lineX = model.view.toX(visualCandle.centerUnit);
+                const closeY = model.view.toY(visualCandle.close);
+                const bottomY = paneBounds.y + paneBounds.height;
+                if (prev === void 0) {
+                    ctx.beginPath();
+                    ctx.lineTo(floor(lineX), bottomY);
+                    ctx.moveTo(floor(lineX), closeY);
+                }
+                else if (next === void 0) {
+                    ctx.lineTo(floor(lineX), closeY);
+                    ctx.stroke();
+                    ctx.lineTo(floor(lineX), bottomY);
+                    ctx.lineTo(floor(firstLineX), bottomY);
+                    ctx.closePath();
+                    let fillColor;
+                    if (drawerConfig.singleColor) {
+                        ctx.fillStyle = drawerConfig.singleColor;
+                    }
+                    else {
+                        ctx.fillStyle =
+                            model.colors.areaTheme.startColor && model.colors.areaTheme.stopColor
+                                ? ((fillColor = ctx.createLinearGradient(0, 0, 0, paneBounds.height)),
+                                    fillColor.addColorStop(0, model.colors.areaTheme.startColor),
+                                    fillColor.addColorStop(1, model.colors.areaTheme.stopColor),
+                                    fillColor)
+                                : '';
+                    }
+                    ctx.fill();
+                }
+                else {
+                    ctx.lineTo(floor(lineX), closeY);
+                }
+            }
+        }
+    }
+}

package/dist/chart/drawers/chart-type-drawers/bar.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 b}from"../../model/candle-series.model";import{flat as p}from"../../utils/array.utils";import{avoidAntialiasing as Y}from"../../utils/canvas/canvas-drawing-functions.utils";import{floorToDPR as s}from"../../utils/device/device-pixel-ratio.utils";import{setLineWidth as d}from"../data-series.drawer";export class BarDrawer{constructor(o){this.config=o}setFillStyle(o,n,i,l){if(n.singleColor)o.strokeStyle=n.singleColor;else{const r=i.colors.barTheme;r&&(o.strokeStyle=r[`${l.name}Color`])}}draw(o,n,i,l){if(i instanceof b){const r=p(n);d(o,this.config.barLineWidth,i,l),Y(o,()=>{for(const t of r){this.setFillStyle(o,l,i,t),o.beginPath();const e=s(i.view.toX(t.centerUnit)),a=s(i.view.toX(t.startUnit)),[v,y,h,w]=t.yBodyKeyPoints(i.view),T=s(i.view.xPixels(t.width)/2),m=s(i.view.toY(t.close)),f=s(i.view.toY(t.open));this.config.showWicks?(o.moveTo(e,v),o.lineTo(e,w)):(o.moveTo(e,y),o.lineTo(e,h)),o.moveTo(e,m),o.lineTo(e+T,m),o.moveTo(a,f),o.lineTo(e,f),o.stroke()}})}}}
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { flat } from '../../utils/array.utils';
+import { avoidAntialiasing } from '../../utils/canvas/canvas-drawing-functions.utils';
+import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+import { setLineWidth } from '../data-series.drawer';
+export class BarDrawer {
+    constructor(config) {
+        this.config = config;
+    }
+    setFillStyle(ctx, drawerConfig, candleSeries, visualCandle) {
+        if (drawerConfig.singleColor) {
+            ctx.strokeStyle = drawerConfig.singleColor;
+        }
+        else {
+            const barTheme = candleSeries.colors.barTheme;
+            if (barTheme) {
+                ctx.strokeStyle = barTheme[`${visualCandle.name}Color`];
+            }
+        }
+    }
+    draw(ctx, points, candleSeries, drawerConfig) {
+        if (candleSeries instanceof CandleSeriesModel) {
+            // @ts-ignore
+            const visualCandles = flat(points);
+            setLineWidth(ctx, this.config.barLineWidth, candleSeries, drawerConfig);
+            avoidAntialiasing(ctx, () => {
+                for (const visualCandle of visualCandles) {
+                    this.setFillStyle(ctx, drawerConfig, candleSeries, visualCandle);
+                    ctx.beginPath();
+                    const bodyLineX = floorToDPR(candleSeries.view.toX(visualCandle.centerUnit));
+                    const openLineStartX = floorToDPR(candleSeries.view.toX(visualCandle.startUnit));
+                    const [wickStartY, bodyStartY, bodyEndY, wickEndY] = visualCandle.yBodyKeyPoints(candleSeries.view);
+                    const w = floorToDPR(candleSeries.view.xPixels(visualCandle.width) / 2);
+                    const bodyCloseY = floorToDPR(candleSeries.view.toY(visualCandle.close));
+                    const bodyOpenY = floorToDPR(candleSeries.view.toY(visualCandle.open));
+                    if (this.config.showWicks) {
+                        ctx.moveTo(bodyLineX, wickStartY);
+                        ctx.lineTo(bodyLineX, wickEndY);
+                    }
+                    else {
+                        ctx.moveTo(bodyLineX, bodyStartY);
+                        ctx.lineTo(bodyLineX, bodyEndY);
+                    }
+                    /* close line start */
+                    ctx.moveTo(bodyLineX, bodyCloseY);
+                    ctx.lineTo(bodyLineX + w, bodyCloseY);
+                    /* close line end */
+                    /* open line start */
+                    ctx.moveTo(openLineStartX, bodyOpenY);
+                    ctx.lineTo(bodyLineX, bodyOpenY);
+                    /* open line end */
+                    ctx.stroke();
+                }
+            });
+        }
+    }
+}

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

@@ -3,4 +3,87 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{CanvasElement as X}from"../../canvas/canvas-bounds-container";import{CandleSeriesModel as d}from"../../model/candle-series.model";import{flat as H}from"../../utils/array.utils";export class BaselineDrawer{constructor(e,s){this.baseLineModel=e,this.canvasBoundContainer=s}draw(e,s,o,h){if(h!==void 0&&o instanceof d){const a=H(s),p=this.baseLineModel.baselineYPercents,T=this.canvasBoundContainer.getBounds(X.CHART),n=T.y+T.height*(p/100),B=a[0];for(let c=0;c<a.length;c++){const f=a[c],i=a[c-1],S=a[c+1],v=o.view.toX(B.centerUnit),t=o.view.toX(f.centerUnit),l=o.view.toY(f.close),L=i?o.view.toY(i.close)<n:!1,b=l<n;if(i!==void 0&&L!==b){g(e,o,h,L);const P=o.view.toX(i.centerUnit),k=o.view.toY(i.close),u=t-P,y=l-k,Y=u/y,m=l-n,w=Y*m,C=P+(u-w);e.lineTo(C,n),e.stroke(),e.lineTo(v,n),e.closePath(),e.fill(),e.beginPath(),e.moveTo(C,n)}i===void 0?(e.beginPath(),e.moveTo(t,l)):S===void 0?(g(e,o,h,b),e.lineTo(t,l),e.stroke(),e.lineTo(t,n),e.lineTo(v,n),e.closePath(),e.fill(),e.beginPath(),e.moveTo(v,n),e.lineTo(t,n),e.strokeStyle=o.colors.baseLineTheme.baselineColor,e.stroke()):e.lineTo(t,l)}}}}const g=(r,e,s,o)=>{s.singleColor?(r.fillStyle=s.singleColor,r.strokeStyle=s.singleColor):(r.fillStyle=o?e.colors.baseLineTheme.upperSectionFillColor:e.colors.baseLineTheme.lowerSectionFillColor,r.strokeStyle=o?e.colors.baseLineTheme.upperSectionStrokeColor:e.colors.baseLineTheme.lowerSectionStrokeColor)};
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { CandleSeriesModel } from '../../model/candle-series.model';
+import { flat } from '../../utils/array.utils';
+export class BaselineDrawer {
+    constructor(baseLineModel, canvasBoundContainer) {
+        this.baseLineModel = baseLineModel;
+        this.canvasBoundContainer = canvasBoundContainer;
+    }
+    draw(ctx, points, model, drawerConfig) {
+        if (drawerConfig !== undefined && model instanceof CandleSeriesModel) {
+            const visualCandles = flat(points);
+            // calculate baseline
+            const baselineYPercents = this.baseLineModel.baselineYPercents;
+            const chartBounds = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
+            const baseLine = chartBounds.y + chartBounds.height * (baselineYPercents / 100);
+            const first = visualCandles[0];
+            for (let i = 0; i < visualCandles.length; i++) {
+                const current = visualCandles[i];
+                const prev = visualCandles[i - 1];
+                const next = visualCandles[i + 1];
+                const firstLineXPx = model.view.toX(first.centerUnit);
+                const currentLineXPx = model.view.toX(current.centerUnit);
+                const currentCloseYPx = model.view.toY(current.close);
+                const prevHigherThanBL = prev ? model.view.toY(prev.close) < baseLine : false;
+                const curHigherThanBL = currentCloseYPx < baseLine;
+                if (prev !== void 0 && prevHigherThanBL !== curHigherThanBL) {
+                    setBaselineFillStyle(ctx, model, drawerConfig, prevHigherThanBL);
+                    const prevLineXPx = model.view.toX(prev.centerUnit);
+                    const prevCloseYPx = model.view.toY(prev.close);
+                    // our goal here is to find the crossing point X between chart line and baseline
+                    const distanceWidth = currentLineXPx - prevLineXPx;
+                    const distanceHeight = currentCloseYPx - prevCloseYPx;
+                    const tg = distanceWidth / distanceHeight;
+                    const distanceHeightToBL = currentCloseYPx - baseLine;
+                    // distance from crossing point BL and area line to current candle X
+                    const distanceWidthBL = tg * distanceHeightToBL;
+                    const xPx = prevLineXPx + (distanceWidth - distanceWidthBL);
+                    ctx.lineTo(xPx, baseLine);
+                    ctx.stroke();
+                    ctx.lineTo(firstLineXPx, baseLine);
+                    ctx.closePath();
+                    ctx.fill();
+                    ctx.beginPath();
+                    ctx.moveTo(xPx, baseLine);
+                }
+                if (prev === void 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(currentLineXPx, currentCloseYPx);
+                }
+                else if (next === void 0) {
+                    setBaselineFillStyle(ctx, model, drawerConfig, curHigherThanBL);
+                    ctx.lineTo(currentLineXPx, currentCloseYPx);
+                    ctx.stroke();
+                    ctx.lineTo(currentLineXPx, baseLine);
+                    ctx.lineTo(firstLineXPx, baseLine);
+                    ctx.closePath();
+                    ctx.fill();
+                    ctx.beginPath();
+                    ctx.moveTo(firstLineXPx, baseLine);
+                    ctx.lineTo(currentLineXPx, baseLine);
+                    ctx.strokeStyle = model.colors.baseLineTheme.baselineColor;
+                    ctx.stroke();
+                }
+                else {
+                    ctx.lineTo(currentLineXPx, currentCloseYPx);
+                }
+            }
+        }
+    }
+}
+const setBaselineFillStyle = (ctx, candleSeries, drawerConfig, upper) => {
+    if (drawerConfig.singleColor) {
+        ctx.fillStyle = drawerConfig.singleColor;
+        ctx.strokeStyle = drawerConfig.singleColor;
+    }
+    else {
+        ctx.fillStyle = upper
+            ? candleSeries.colors.baseLineTheme.upperSectionFillColor
+            : candleSeries.colors.baseLineTheme.lowerSectionFillColor;
+        ctx.strokeStyle = upper
+            ? candleSeries.colors.baseLineTheme.upperSectionStrokeColor
+            : candleSeries.colors.baseLineTheme.lowerSectionStrokeColor;
+    }
+};