@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/components/volumes/separate-volumes.component.js

@@ -1,6 +1,68 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{ChartBaseElement as n}from"../../model/chart-base-element";import{createCandlesOffsetProvider as d}from"../chart/data-series.high-low-provider";import{VolumesDrawer as h}from"./volumes.drawer";import{volumeFormatter as u}from"./volumes.formatter";class a extends n{constructor(o,e,t,s,r,i,l){super(),this.canvasModel=o,this.chartComponent=e,this.drawingManager=t,this.config=s,this.volumesModel=r,this.volumesColorByChartTypeMap=i,this.paneManager=l,s.components.volumes.showSeparately&&this.activateSeparateVolumes()}doActivate(){super.doActivate(),this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject.subscribe(()=>{var o,e;return!(!((o=this.scaleModel)===null||o===void 0)&&o.isViewportValid())&&((e=this.scaleModel)===null||e===void 0?void 0:e.doAutoScale(!0))})),this.addRxSubscription(this.volumesModel.volumeMax.subscribe(()=>{var o;return(o=this.scaleModel)===null||o===void 0?void 0:o.doAutoScale()}))}activateSeparateVolumes(){if(this.paneManager.paneComponents[a.UUID]===void 0){const o=this.paneManager.createPane(a.UUID,{paneFormatters:{regular:u},useDefaultHighLow:!1,increment:1}),{scaleModel:e}=o,t=d(()=>({top:10,bottom:0,left:0,right:0,visible:!0}),this.volumesModel.highLowProvider);e.autoScaleModel.setHighLowProvider("volumes",t),e.doAutoScale(!0),this.scaleModel=e;const s=new h(this.canvasModel,this.config,this.volumesModel,this.chartComponent.chartModel,e,this.volumesColorByChartTypeMap,()=>this.config.components.volumes.showSeparately);this.drawingManager.addDrawer(s,"UNDERLAY_VOLUMES_AREA")}}deactiveSeparateVolumes(){this.paneManager.removePane(a.UUID),delete this.scaleModel,this.drawingManager.removeDrawerByName("UNDERLAY_VOLUMES_AREA")}fromY(o){var e,t;return(t=(e=this.scaleModel)===null||e===void 0?void 0:e.fromY(o))!==null&&t!==void 0?t:0}}a.UUID="volumes";export{a as SeparateVolumesComponent};
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
+import { volumeFormatter } from './volumes.formatter';
+class SeparateVolumesComponent extends ChartBaseElement {
+    constructor(chartComponent, drawingManager, config, volumesModel, paneManager) {
+        super();
+        this.chartComponent = chartComponent;
+        this.drawingManager = drawingManager;
+        this.config = config;
+        this.volumesModel = volumesModel;
+        this.paneManager = paneManager;
+        if (config.components.volumes.showSeparately) {
+            this.activateSeparateVolumes();
+        }
+    }
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject.subscribe(() => { var _a, _b; return !((_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.isViewportValid()) && ((_b = this.pane) === null || _b === void 0 ? void 0 : _b.scale.doAutoScale(true)); }));
+        this.addRxSubscription(this.volumesModel.volumeMax.subscribe(() => { var _a; return (_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.doAutoScale(); }));
+    }
+    /**
+     * Activates the separate volumes feature.
+     * If the pane component for separate volumes does not exist, it creates a new pane with the specified UUID and options.
+     * It then sets the high-low provider for the volumes scale model and does an auto scale.
+     * A new VolumesDrawer is created and added to the drawing manager with the specified parameters.
+     */
+    activateSeparateVolumes() {
+        if (this.paneManager.panes[SeparateVolumesComponent.UUID] === undefined) {
+            const volumePane = this.paneManager.createPane(SeparateVolumesComponent.UUID, {
+                paneFormatters: {
+                    regular: volumeFormatter,
+                },
+                useDefaultHighLow: false,
+                increment: 1,
+            });
+            this.pane = volumePane;
+            volumePane.mainExtent.yAxis.setAxisType('regular');
+            const { scale: scaleModel } = volumePane;
+            const volumesHighLowProvider = createCandlesOffsetProvider(() => ({ top: 10, bottom: 0, left: 0, right: 0, visible: true }), this.volumesModel.highLowProvider);
+            scaleModel.autoScaleModel.setHighLowProvider('volumes', volumesHighLowProvider);
+            scaleModel.doAutoScale(true);
+        }
+    }
+    /**
+     * Deactivates the separate volumes feature by removing the separate volumes pane, deleting the scale model, and removing the underlay volumes area drawer.
+     */
+    deactiveSeparateVolumes() {
+        this.paneManager.removePane(SeparateVolumesComponent.UUID);
+        delete this.pane;
+        this.drawingManager.removeDrawerByName('UNDERLAY_VOLUMES_AREA');
+    }
+    /**
+     * Converts a pixel value from the Y-axis of the scale model to the corresponding data value.
+     * @param {Pixel} y - The pixel value to convert.
+     * @returns {Unit} - The corresponding data value.
+     */
+    fromY(y) {
+        var _a, _b;
+        return (_b = (_a = this.pane) === null || _a === void 0 ? void 0 : _a.scale.fromY(y)) !== null && _b !== void 0 ? _b : 0;
+    }
+}
+SeparateVolumesComponent.UUID = 'volumes';
+export { SeparateVolumesComponent };

package/dist/chart/components/volumes/volume-color-resolvers.functions.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */

package/dist/chart/components/volumes/volume-color-resolvers.functions.js

@@ -1,6 +1,23 @@
 /*
- * 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 t from"color";export const VOLUMES_COLOR_OPACITY=.3,resolveColorForBar=(o,r)=>{const e=r.barTheme[`${o}Color`];return t(e).alpha(VOLUMES_COLOR_OPACITY).toString()},resolveColorUsingConfig=(o,r)=>{const e=r.volume[`${o}BarColor`];return t(e).alpha(VOLUMES_COLOR_OPACITY).toString()},resolveColorForLine=(o,r)=>{const e=r.lineTheme[`${o}Color`];return t(e).alpha(VOLUMES_COLOR_OPACITY).toString()},resolveColorForCandle=(o,r)=>{const e=r.candleTheme[`${o}Color`];return t(e).alpha(VOLUMES_COLOR_OPACITY).toString()};
+import Color from 'color';
+export const VOLUMES_COLOR_OPACITY = 0.3;
+export const resolveColorForBar = (priceMovement, colors) => {
+    const color = colors.barTheme[`${priceMovement}Color`];
+    return Color(color).alpha(VOLUMES_COLOR_OPACITY).toString();
+};
+export const resolveColorUsingConfig = (priceMovement, colors) => {
+    const color = colors.volume[`${priceMovement}BarColor`];
+    return Color(color).alpha(VOLUMES_COLOR_OPACITY).toString();
+};
+export const resolveColorForLine = (priceMovement, colors) => {
+    const color = colors.lineTheme[`${priceMovement}Color`];
+    return Color(color).alpha(VOLUMES_COLOR_OPACITY).toString();
+};
+export const resolveColorForCandle = (priceMovement, colors) => {
+    const color = colors.candleTheme[`${priceMovement}Color`];
+    return Color(color).alpha(VOLUMES_COLOR_OPACITY).toString();
+};

package/dist/chart/components/volumes/volumes.component.d.ts

@@ -1,32 +1,32 @@
 /*
- * 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 { BehaviorSubject } from 'rxjs';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
-import { ChartBaseElement } from '../../model/chart-base-element';
 import { BarType, FullChartColors, FullChartConfig } from '../../chart.config';
-import { CanvasModel } from '../../model/canvas.model';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import { PriceMovement } from '../../model/candle-series.model';
+import { CanvasModel } from '../../model/canvas.model';
+import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
 import { ChartComponent } from '../chart/chart.component';
+import { DynamicObjectsComponent } from '../dynamic-objects/dynamic-objects.component';
 import { PaneManager } from '../pane/pane-manager.component';
 import { SeparateVolumesComponent } from './separate-volumes.component';
 import { VolumesModel } from './volumes.model';
-import { YAxisComponent } from '../y_axis/y-axis.component';
-import { BehaviorSubject } from 'rxjs';
 export type VolumeColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 export declare class VolumesComponent extends ChartBaseElement {
     private canvasModel;
     private canvasBoundsContainer;
     private config;
     separateVolumes: SeparateVolumesComponent;
-    private volumesColorByChartTypeMap;
+    volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>>;
     volumesModel: VolumesModel;
-    yAxisComponent: YAxisComponent;
-    volumeSettingChangedSubject: BehaviorSubject<boolean>;
-    constructor(canvasModel: CanvasModel, chartComponent: ChartComponent, scaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, config: FullChartConfig, paneManager: PaneManager, yAxisComponent: YAxisComponent);
+    volumeVisibilityChangedSubject: BehaviorSubject<boolean>;
+    volumeIsSeparateModeChangedSubject: BehaviorSubject<boolean>;
+    constructor(canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, config: FullChartConfig, paneManager: PaneManager, dynamicObjectsComponent: DynamicObjectsComponent);
     /**
      * Registers default volume color resolvers for candle, line and bar charts
      * @private

package/dist/chart/components/volumes/volumes.component.js

@@ -1,6 +1,99 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{ChartBaseElement as n}from"../../model/chart-base-element";import{SeparateVolumesComponent as p}from"./separate-volumes.component";import{resolveColorForBar as v,resolveColorForCandle as r,resolveColorForLine as C}from"./volume-color-resolvers.functions";import{VolumesDrawer as V}from"./volumes.drawer";import{VolumesModel as c}from"./volumes.model";import{BehaviorSubject as d}from"rxjs";export class VolumesComponent extends n{constructor(e,o,l,a,i,s,m,u){super(),this.canvasModel=e,this.canvasBoundsContainer=a,this.config=s,this.volumesColorByChartTypeMap={},this.volumeSettingChangedSubject=new d(!1);const t=new c(o,l);this.volumesModel=t,this.yAxisComponent=u,this.addChildEntity(t),this.separateVolumes=new p(e,o,i,s,t,this.volumesColorByChartTypeMap,m),this.addChildEntity(this.separateVolumes);const h=new V(e,s,t,o.chartModel,l,this.volumesColorByChartTypeMap,()=>!s.components.volumes.showSeparately);i.addDrawer(h,"VOLUMES"),this.registerDefaultVolumeColorResolvers(),this.volumeSettingChangedSubject.next(s.components.volumes.visible)}registerDefaultVolumeColorResolvers(){this.registerVolumeColorResolver("candle",r),this.registerVolumeColorResolver("trend",r),this.registerVolumeColorResolver("hollow",r),this.registerVolumeColorResolver("line",C),this.registerVolumeColorResolver("bar",v)}setShowVolumesSeparatly(e){this.config.components.volumes.showSeparately!==e&&(this.config.components.volumes.showSeparately=e,e?this.separateVolumes.activateSeparateVolumes():this.separateVolumes.deactiveSeparateVolumes())}doDeactivate(){super.doDeactivate(),this.setVisible(!1)}registerVolumeColorResolver(e,o){this.volumesColorByChartTypeMap[e]=o}setVisible(e=!0){this.config.components.volumes.visible=e,this.volumeSettingChangedSubject.next(e),this.config.components.volumes.showSeparately===!0&&(e?this.separateVolumes.activateSeparateVolumes():this.separateVolumes.deactiveSeparateVolumes()),this.canvasBoundsContainer.recalculatePanesHeightRatios(),this.canvasModel.fireDraw()}}
+import { BehaviorSubject } from 'rxjs';
+import { CHART_UUID } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { SeparateVolumesComponent } from './separate-volumes.component';
+import { resolveColorForBar, resolveColorForCandle, resolveColorForLine } from './volume-color-resolvers.functions';
+import { VolumesDrawer } from './volumes.drawer';
+import { VolumesModel } from './volumes.model';
+export class VolumesComponent extends ChartBaseElement {
+    constructor(canvasModel, chartComponent, scale, canvasBoundsContainer, drawingManager, config, paneManager, dynamicObjectsComponent) {
+        super();
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+        this.volumesColorByChartTypeMap = {};
+        this.volumeVisibilityChangedSubject = new BehaviorSubject(false);
+        this.volumeIsSeparateModeChangedSubject = new BehaviorSubject(false);
+        const volumesModel = new VolumesModel(chartComponent, scale);
+        this.volumesModel = volumesModel;
+        this.addChildEntity(volumesModel);
+        this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
+        const volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
+        dynamicObjectsComponent.model.addObject({ drawer: volumesDrawer, model: volumesModel }, CHART_UUID);
+        this.addChildEntity(this.separateVolumes);
+        this.registerDefaultVolumeColorResolvers();
+        this.volumeVisibilityChangedSubject.next(config.components.volumes.visible);
+        this.volumeIsSeparateModeChangedSubject.next(config.components.volumes.showSeparately);
+    }
+    /**
+     * Registers default volume color resolvers for candle, line and bar charts
+     * @private
+     */
+    registerDefaultVolumeColorResolvers() {
+        this.registerVolumeColorResolver('candle', resolveColorForCandle);
+        this.registerVolumeColorResolver('trend', resolveColorForCandle);
+        this.registerVolumeColorResolver('hollow', resolveColorForCandle);
+        this.registerVolumeColorResolver('line', resolveColorForLine);
+        this.registerVolumeColorResolver('bar', resolveColorForBar);
+    }
+    /**
+     * Sets whether the volumes should be shown separately or not.
+     *
+     * @param {boolean} separate - A boolean value indicating whether the volumes should be shown separately or not.
+     * @returns {void}
+     */
+    setShowVolumesSeparatly(separate) {
+        if (this.config.components.volumes.showSeparately !== separate) {
+            this.config.components.volumes.showSeparately = separate;
+            if (separate) {
+                this.separateVolumes.activateSeparateVolumes();
+            }
+            else {
+                this.separateVolumes.deactiveSeparateVolumes();
+            }
+            this.volumeIsSeparateModeChangedSubject.next(separate);
+        }
+    }
+    /**
+     * This method deactivates the current component by calling the superclass doDeactivate method and setting the visibility of the component to false.
+     * @returns {void}
+     */
+    doDeactivate() {
+        super.doDeactivate();
+        this.setVisible(false);
+    }
+    /**
+     * You can use this method to determine volumes' color for specified chart type.
+     * @param chartType
+     * @param resolver
+     */
+    registerVolumeColorResolver(chartType, resolver) {
+        this.volumesColorByChartTypeMap[chartType] = resolver;
+    }
+    /**
+     * Sets the visibility of the volumes component and updates the canvas accordingly.
+     * @param {boolean} visible - Whether the volumes component should be visible or not. Default is true.
+     * @returns {void}
+     */
+    setVisible(visible = true) {
+        this.config.components.volumes.visible = visible;
+        this.volumeVisibilityChangedSubject.next(visible);
+        if (this.config.components.volumes.showSeparately === true) {
+            if (visible) {
+                this.separateVolumes.activateSeparateVolumes();
+                this.volumeIsSeparateModeChangedSubject.next(true);
+            }
+            else {
+                this.separateVolumes.deactiveSeparateVolumes();
+                this.volumeIsSeparateModeChangedSubject.next(false);
+            }
+        }
+        this.canvasBoundsContainer.recalculatePanesHeightRatios();
+        this.canvasModel.fireDraw();
+    }
+}

package/dist/chart/components/volumes/volumes.drawer.d.ts

@@ -1,25 +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 { BarType, FullChartConfig } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
-import { Drawer } from '../../drawers/drawing-manager';
 import { ViewportModel } from '../../model/scaling/viewport.model';
 import { ChartModel } from '../chart/chart.model';
+import { DynamicModelDrawer } from '../dynamic-objects/dynamic-objects.drawer';
 import { VolumeColorResolver } from './volumes.component';
 import { VolumesModel } from './volumes.model';
-export declare class VolumesDrawer implements Drawer {
-    private canvasModel;
+export declare class VolumesDrawer implements DynamicModelDrawer<VolumesModel> {
     private config;
     private volumesModel;
     private chartModel;
-    private viewportModel;
+    getViewportModel: () => ViewportModel;
     private volumesColorByChartTypeMap;
     private drawPredicate;
     private readonly volumeBarColors;
-    constructor(canvasModel: CanvasModel, config: FullChartConfig, volumesModel: VolumesModel, chartModel: ChartModel, viewportModel: ViewportModel, volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>>, drawPredicate: () => boolean);
+    constructor(config: FullChartConfig, volumesModel: VolumesModel, chartModel: ChartModel, getViewportModel: () => ViewportModel, volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>>, drawPredicate: () => boolean);
     /**
      * This function is used to calculate the colors for each volume bar. It is an optimization to avoid calculating the color for each volume, which can be expensive.
      * @param {BarType} barType - The type of bar to calculate the color for.
@@ -33,7 +32,7 @@ export declare class VolumesDrawer implements Drawer {
      * Restores the canvas context.
      * @returns {void}
      */
-    draw(): void;
+    draw(canvasModel: CanvasModel): void;
     /**
      * Draws the last bar of the chart if the volumes component is visible.
      * TODO: Rework the function.
@@ -62,10 +61,4 @@ export declare class VolumesDrawer implements Drawer {
      * @returns {void}
      */
     private drawVolume;
-    /**
-     * Returns an array of canvas ids.
-     *
-     * @returns {Array<string>} An array containing the canvas id.
-     */
-    getCanvasIds(): Array<string>;
 }

package/dist/chart/components/volumes/volumes.drawer.js

@@ -1,6 +1,145 @@
 /*
- * 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{clipToBounds as f}from"../../drawers/data-series.drawer";import{unitToPixels as m}from"../../model/scaling/viewport.model";import{ceilToDPR as u,floorToDPR as n}from"../../utils/device/device-pixel-ratio.utils";import{resolveColorUsingConfig as p}from"./volume-color-resolvers.functions";import{flat as M}from"../../utils/array.utils";const w=3;export class VolumesDrawer{constructor(e,t,o,i,l,s,r){this.canvasModel=e,this.config=t,this.volumesModel=o,this.chartModel=i,this.viewportModel=l,this.volumesColorByChartTypeMap=s,this.drawPredicate=r,this.volumeBarColors={down:"#FF00FF",up:"#FF00FF",none:"#FF00FF"}}calculateColors(e){var t;const o=(t=this.volumesColorByChartTypeMap[e])!==null&&t!==void 0?t:p;this.volumeBarColors.down=o("down",this.config.colors),this.volumeBarColors.up=o("up",this.config.colors),this.volumeBarColors.none=o("none",this.config.colors)}draw(){if(this.config.components.volumes.visible&&this.drawPredicate()){this.calculateColors(this.config.components.chart.type);const e=this.canvasModel.ctx;e.save();const t=this.viewportModel.getBounds();f(e,t),this.drawVolumes(),e.restore()}}drawLastBar(){this.config.components.volumes.visible}drawVolumes(){const e=this.volumesModel.volumeMax.getValue();if(e===0)return;const t=M(this.chartModel.mainCandleSeries.getSeriesInViewport(this.chartModel.scaleModel.xStart-1,this.chartModel.scaleModel.xEnd+1));t.forEach((o,i)=>{if(o.candle.volume){const l=this.viewportModel.getBounds(),s=l.height,r=t[i+1]!==void 0?n(this.viewportModel.toX(t[i+1].startUnit)):void 0,c=n(this.viewportModel.toX(o.startUnit)),a=r!==void 0?r-c:n(m(o.width,this.viewportModel.zoomX));if(this.config.components.volumes.showSeparately){const h=n(this.viewportModel.toY(o.candle.volume)),d=n(this.viewportModel.toY(0))-h;this.drawVolume(o,c,h,a,d)}else{const h=e/(s/w),d=Math.max(m(o.candle.volume,h),2),v=n(l.y+s-d);this.drawVolume(o,c,v,a,d)}}})}drawVolume(e,t,o,i,l){const s=this.canvasModel.ctx,r=o,c=o+l,a=e.name;s.fillStyle=this.volumeBarColors[a],s.strokeStyle=this.volumeBarColors[a],i===0?(s.beginPath(),s.moveTo(t,r),s.lineTo(t,u(c)),s.stroke()):s.fillRect(t,o,i,u(l))}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { clipToBounds } from '../../drawers/data-series.drawer';
+import { unitToPixels } from '../../model/scaling/viewport.model';
+import { flat } from '../../utils/array.utils';
+import { ceilToDPR, floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+import { resolveColorUsingConfig } from './volume-color-resolvers.functions';
+// ratio of CHART bounds height which is for overlay volumes
+const OVERLAY_VOLUME_TOTAL_HEIGHT_DIVISOR = 3;
+export class VolumesDrawer {
+    constructor(config, volumesModel, chartModel, getViewportModel, volumesColorByChartTypeMap, drawPredicate) {
+        this.config = config;
+        this.volumesModel = volumesModel;
+        this.chartModel = chartModel;
+        this.getViewportModel = getViewportModel;
+        this.volumesColorByChartTypeMap = volumesColorByChartTypeMap;
+        this.drawPredicate = drawPredicate;
+        this.volumeBarColors = {
+            down: '#FF00FF',
+            up: '#FF00FF',
+            none: '#FF00FF',
+        };
+    }
+    /**
+     * This function is used to calculate the colors for each volume bar. It is an optimization to avoid calculating the color for each volume, which can be expensive.
+     * @param {BarType} barType - The type of bar to calculate the color for.
+     * @returns {void}
+     */
+    calculateColors(barType) {
+        var _a;
+        const getVolumeBarColor = (_a = this.volumesColorByChartTypeMap[barType]) !== null && _a !== void 0 ? _a : resolveColorUsingConfig;
+        this.volumeBarColors['down'] = getVolumeBarColor('down', this.config.colors);
+        this.volumeBarColors['up'] = getVolumeBarColor('up', this.config.colors);
+        this.volumeBarColors['none'] = getVolumeBarColor('none', this.config.colors);
+    }
+    /**
+     * Draws the volumes on the chart canvas if the volumes are visible and the drawPredicate is true.
+     * Calculates the colors based on the chart type and saves the canvas context.
+     * Clips the canvas to the viewport bounds and draws the volumes.
+     * Restores the canvas context.
+     * @returns {void}
+     */
+    draw(canvasModel) {
+        if (this.config.components.volumes.visible && this.drawPredicate()) {
+            this.calculateColors(this.config.components.chart.type);
+            const ctx = canvasModel.ctx;
+            ctx.save();
+            const bounds = this.getViewportModel().getBounds();
+            clipToBounds(ctx, bounds);
+            this.drawVolumes(canvasModel);
+            ctx.restore();
+        }
+    }
+    /**
+     * Draws the last bar of the chart if the volumes component is visible.
+     * TODO: Rework the function.
+     *
+     * @returns {void}
+     */
+    drawLastBar() {
+        if (this.config.components.volumes.visible) {
+            // TODO rework
+            // this.calculateColors(this.config.components.chart.type);
+            // const ctx = this.canvasModel.ctx;
+            // const lastVolume = lastOf(this.volumes.data);
+            // if (lastVolume) {
+            // 	ctx.fillStyle = this.volumeBarColors[lastVolume.direction];
+            // 	const { width, height, x, y } = lastVolume;
+            // 	ctx.fillRect(x, y, width, height);
+            // }
+        }
+    }
+    /**
+     * Draws volumes on the chart based on the data provided by the volumesModel and chartModel.
+     * If the volumeMax is 0, the function will return without drawing anything.
+     * The function loops through all the candles in the viewport and calculates the x, y, width and height of each volume bar.
+     * If the config.components.volumes.showSeparately is true, the function will draw each volume bar separately.
+     * Otherwise, it will calculate the zoomY based on the volumeMax and the fullVHeight, and draw all the volume bars together.
+     * @private
+     */
+    drawVolumes(canvasModel) {
+        const volumeMax = this.volumesModel.volumeMax.getValue();
+        if (volumeMax === 0) {
+            return;
+        }
+        const candles = flat(this.chartModel.mainCandleSeries
+            // TODO volumes drawer should be a part of data series drawer
+            .getSeriesInViewport(this.chartModel.scale.xStart - 1, this.chartModel.scale.xEnd + 1));
+        const viewportModel = this.getViewportModel();
+        candles.forEach((vCandle, idx) => {
+            if (vCandle.candle.volume) {
+                const bounds = viewportModel.getBounds();
+                const fullVHeight = bounds.height;
+                const nextX = candles[idx + 1] !== undefined
+                    ? floorToDPR(viewportModel.toX(candles[idx + 1].startUnit))
+                    : undefined;
+                const x = floorToDPR(viewportModel.toX(vCandle.startUnit));
+                const width = nextX !== undefined ? nextX - x : floorToDPR(unitToPixels(vCandle.width, viewportModel.zoomX));
+                if (this.config.components.volumes.showSeparately) {
+                    const y = floorToDPR(viewportModel.toY(vCandle.candle.volume));
+                    const height = floorToDPR(viewportModel.toY(0)) - y;
+                    this.drawVolume(canvasModel, vCandle, x, y, width, height);
+                }
+                else {
+                    const zoomY = volumeMax / (fullVHeight / OVERLAY_VOLUME_TOTAL_HEIGHT_DIVISOR);
+                    const height = Math.max(unitToPixels(vCandle.candle.volume, zoomY), 2);
+                    const y = floorToDPR(bounds.y + fullVHeight - height);
+                    this.drawVolume(canvasModel, vCandle, x, y, width, height);
+                }
+            }
+        });
+    }
+    /**
+     * Draws a volume bar on the canvas.
+     *
+     * @private
+     * @param {VisualCandle} vCandle - The visual candle object.
+     * @param {Pixel} x - The x coordinate of the top-left corner of the volume bar.
+     * @param {Pixel} y - The y coordinate of the top-left corner of the volume bar.
+     * @param {Pixel} width - The width of the volume bar.
+     * @param {Pixel} height - The height of the volume bar.
+     * @returns {void}
+     */
+    drawVolume(canvasModel, vCandle, x, y, width, height) {
+        const ctx = canvasModel.ctx;
+        const yStart = y;
+        const yEnd = y + height;
+        const direction = vCandle.name;
+        ctx.fillStyle = this.volumeBarColors[direction];
+        ctx.strokeStyle = this.volumeBarColors[direction];
+        if (width === 0) {
+            // just draw a vertical line
+            ctx.beginPath();
+            ctx.moveTo(x, yStart);
+            ctx.lineTo(x, ceilToDPR(yEnd));
+            ctx.stroke();
+        }
+        else {
+            ctx.fillRect(x, y, width, ceilToDPR(height));
+        }
+    }
+}

package/dist/chart/components/volumes/volumes.formatter.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */

package/dist/chart/components/volumes/volumes.formatter.js

@@ -1,6 +1,36 @@
 /*
- * 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/.
  */
-const c=5,_=1e-10,s=/\.?0+$/,E=/(\.[1-9]*)0+$/;export const volumeFormatter=t=>{const r=(I,e)=>{const o=Math.pow(10,5),n=Math.round(I*o)/o;return n<1&&n>=1e-10?n.toFixed(5).replace(s,"").replace(E,""):(n+"").replace(E,"")+(e||"")};return Math.abs(t)>999999999?(t=Math.round(t/1e6)*1e6,r(t/1e9,"B")):Math.abs(t)>999999?(t=1e3*Math.round(t/1e3),r(t/1e6,"M")):Math.abs(t)>9999?r(t/1e3,"K"):r(t)};
+const DEFAULT_PRECISION = 5;
+const MIN_VALUE = 0.0000000001;
+const TRAILLING_ZEROES_REGEXP = /\.?0+$/;
+const TRAILLING_FRACTION_WITH_ZEROES_REGEXP = /(\.[1-9]*)0+$/;
+export const volumeFormatter = (value) => {
+    const formatValue = (value, amountToCut) => {
+        const rounder = Math.pow(10, DEFAULT_PRECISION);
+        const roundedValue = Math.round(value * rounder) / rounder;
+        if (roundedValue < 1 && roundedValue >= MIN_VALUE) {
+            return roundedValue
+                .toFixed(DEFAULT_PRECISION)
+                .replace(TRAILLING_ZEROES_REGEXP, '')
+                .replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '');
+        }
+        else {
+            return (roundedValue + '').replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '') + (amountToCut || '');
+        }
+    };
+    if (Math.abs(value) > 999999999) {
+        value = Math.round(value / 1000000) * 1000000;
+        return formatValue(value / 1000000000, 'B');
+    }
+    if (Math.abs(value) > 999999) {
+        value = 1000 * Math.round(value / 1000);
+        return formatValue(value / 1000000, 'M');
+    }
+    if (Math.abs(value) > 9999) {
+        return formatValue(value / 1000, 'K');
+    }
+    return formatValue(value);
+};

package/dist/chart/components/volumes/volumes.model.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -10,10 +10,10 @@ import { HighLowProvider } from '../../model/scaling/auto-scale.model';
 import { ChartComponent } from '../chart/chart.component';
 export declare class VolumesModel extends ChartBaseElement {
     private chartComponent;
-    private scaleModel;
+    private scale;
     volumeMax: BehaviorSubject<number>;
     highLowProvider: HighLowProvider;
-    constructor(chartComponent: ChartComponent, scaleModel: ScaleModel);
+    constructor(chartComponent: ChartComponent, scale: ScaleModel);
     protected doActivate(): void;
     /**
      * Used for optimization when we have to update only the last candle

package/dist/chart/components/volumes/volumes.model.js

@@ -1,6 +1,48 @@
 /*
- * 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{BehaviorSubject as o,merge as i}from"rxjs";import{ChartBaseElement as s}from"../../model/chart-base-element";import{firstOf as l,maxMin as r}from"../../utils/array.utils";const h=r(t=>t.candle.volume);export class VolumesModel extends s{constructor(e,a){super(),this.chartComponent=e,this.scaleModel=a,this.volumeMax=new o(0),this.highLowProvider={calculateHighLow:()=>({high:this.volumeMax.getValue(),low:0}),isHighLowActive:()=>!0}}doActivate(){super.doActivate(),this.addRxSubscription(i(this.chartComponent.chartModel.observeCandlesChanged(),this.scaleModel.xChanged).subscribe(()=>this.updateVolumeMax())),this.addRxSubscription(this.chartComponent.chartModel.mainCandleSeries.observeLastVisualCandleChanged().subscribe(()=>this.recalculateLastVisualVolume()))}recalculateLastVisualVolume(){}updateVolumeMax(){var e;this.volumeMax.next((e=l(h(this.chartComponent.chartModel.mainCandleSeries.getSeriesInViewport().flat())))!==null&&e!==void 0?e:0)}}
+import { BehaviorSubject, merge } from 'rxjs';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { firstOf, maxMin } from '../../utils/array.utils';
+const volumeMaxMinFn = maxMin(candle => candle.candle.volume);
+export class VolumesModel extends ChartBaseElement {
+    constructor(chartComponent, scale) {
+        super();
+        this.chartComponent = chartComponent;
+        this.scale = scale;
+        // max volume in all data series
+        this.volumeMax = new BehaviorSubject(0);
+        this.highLowProvider = {
+            calculateHighLow: () => ({ high: this.volumeMax.getValue(), low: 0 }),
+            isHighLowActive: () => true,
+        };
+    }
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(merge(this.chartComponent.chartModel.observeCandlesChanged(), this.scale.xChanged).subscribe(() => this.updateVolumeMax()));
+        this.addRxSubscription(this.chartComponent.chartModel.mainCandleSeries
+            .observeLastVisualCandleChanged()
+            .subscribe(() => this.recalculateLastVisualVolume()));
+    }
+    /**
+     * Used for optimization when we have to update only the last candle
+     * Doesn't work for line chart types
+     * @doc-tags tricky
+     */
+    recalculateLastVisualVolume() {
+        // TODO rework, move this logic to drawer
+    }
+    /**
+     * Updates the maximum volume value of the chart.
+     * @function
+     * @name updateVolumeMax
+     * @memberof ChartComponent
+     * @returns {void}
+     */
+    updateVolumeMax() {
+        var _a;
+        this.volumeMax.next((_a = firstOf(volumeMaxMinFn(this.chartComponent.chartModel.mainCandleSeries.getSeriesInViewport().flat()))) !== null && _a !== void 0 ? _a : 0);
+    }
+}

package/dist/chart/components/watermark/water-mark.component.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */