@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,21 @@
  * 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

@@ -3,31 +3,30 @@
  * 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;
     volumeVisibilityChangedSubject: BehaviorSubject<boolean>;
     volumeIsSeparateModeChangedSubject: BehaviorSubject<boolean>;
-    constructor(canvasModel: CanvasModel, chartComponent: ChartComponent, scaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, config: FullChartConfig, paneManager: PaneManager, yAxisComponent: YAxisComponent);
+    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

@@ -3,4 +3,97 @@
  * 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 p}from"../../model/chart-base-element";import{SeparateVolumesComponent as v}from"./separate-volumes.component";import{resolveColorForBar as d,resolveColorForCandle as l,resolveColorForLine as C}from"./volume-color-resolvers.functions";import{VolumesDrawer as c}from"./volumes.drawer";import{VolumesModel as S}from"./volumes.model";import{BehaviorSubject as i}from"rxjs";export class VolumesComponent extends p{constructor(e,t,r,u,a,o,m,h){super(),this.canvasModel=e,this.canvasBoundsContainer=u,this.config=o,this.volumesColorByChartTypeMap={},this.volumeVisibilityChangedSubject=new i(!1),this.volumeIsSeparateModeChangedSubject=new i(!1);const s=new S(t,r);this.volumesModel=s,this.yAxisComponent=h,this.addChildEntity(s),this.separateVolumes=new v(e,t,a,o,s,this.volumesColorByChartTypeMap,m),this.addChildEntity(this.separateVolumes);const n=new c(e,o,s,t.chartModel,r,this.volumesColorByChartTypeMap,()=>!o.components.volumes.showSeparately);a.addDrawer(n,"VOLUMES"),this.registerDefaultVolumeColorResolvers(),this.volumeVisibilityChangedSubject.next(o.components.volumes.visible),this.volumeIsSeparateModeChangedSubject.next(o.components.volumes.showSeparately)}registerDefaultVolumeColorResolvers(){this.registerVolumeColorResolver("candle",l),this.registerVolumeColorResolver("trend",l),this.registerVolumeColorResolver("hollow",l),this.registerVolumeColorResolver("line",C),this.registerVolumeColorResolver("bar",d)}setShowVolumesSeparatly(e){this.config.components.volumes.showSeparately!==e&&(this.config.components.volumes.showSeparately=e,e?(this.separateVolumes.activateSeparateVolumes(),this.volumeIsSeparateModeChangedSubject.next(!0)):(this.separateVolumes.deactiveSeparateVolumes(),this.volumeIsSeparateModeChangedSubject.next(!1)))}doDeactivate(){super.doDeactivate(),this.setVisible(!1)}registerVolumeColorResolver(e,t){this.volumesColorByChartTypeMap[e]=t}setVisible(e=!0){this.config.components.volumes.visible=e,this.volumeVisibilityChangedSubject.next(e),this.config.components.volumes.showSeparately===!0&&(e?(this.separateVolumes.activateSeparateVolumes(),this.volumeIsSeparateModeChangedSubject.next(!0)):(this.separateVolumes.deactiveSeparateVolumes(),this.volumeIsSeparateModeChangedSubject.next(!1))),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

@@ -5,21 +5,20 @@
  */
 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

@@ -3,4 +3,143 @@
  * 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.js

@@ -3,4 +3,34 @@
  * 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

@@ -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

@@ -3,4 +3,46 @@
  * 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.js

@@ -3,4 +3,106 @@
  * 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{CHART_UUID as w,CanvasElement as f}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as d}from"../../model/chart-base-element";import{merge as n}from"../../utils/merge.utils";import{WaterMarkDrawer as k}from"./water-mark.drawer";export class WaterMarkComponent extends d{constructor(t,e,c,h,a,i,o){super(),this.paneManager=t,this.chartModel=e,this.eventBus=c,this.config=h,this.canvasModel=i,this.waterMarkConfig=this.config.components.waterMark,this.waterMarkData=this.getWaterMarkData(),this.waterMarkDrawer=new k(this.config,a,i,()=>this.waterMarkConfig,()=>this.waterMarkData),this.addRxSubscription(n(a.observeBoundsChanged(f.PANE_UUID(w)),this.paneManager.panesChangedSubject).subscribe(r=>{this.waterMarkConfig=this.recalculateTextSize(r.width,r.height)})),this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(()=>{this.waterMarkData=this.getWaterMarkData()})),o.addDrawerAfter(this.waterMarkDrawer,"WATERMARK","DRAWINGS")}setWaterMarkVisible(t){this.config.components&&this.config.components.waterMark&&(this.config.components.waterMark.visible=t,this.canvasModel.fireDraw())}setWaterMarkData(t){this.waterMarkData=t,this.canvasModel.fireDraw()}getWaterMarkData(){return this.waterMarkData||{}}setWaterMarkConfig(t){if(!(!t||!this.config.components)){if(!this.config.components.waterMark)this.config.components.waterMark=JSON.parse(JSON.stringify(t));else{const e={};n(e,t),n(e,this.config.components.waterMark),this.config.components.waterMark=e}this.canvasModel.fireDraw()}}setLogoImage(t){this.waterMarkDrawer.setLogoImage(t)}recalculateTextSize(t,e){const a=g=>.15*Math.log(g)/Math.log(1.5)+1,i=a(t/1920),o=a(e/1080),r=Math.min(i,o),s=r>=0?r:0,M={firstRowFontSize:Math.round(this.config.components.waterMark.firstRowFontSize*s),secondRowFontSize:Math.round(this.config.components.waterMark.secondRowFontSize*s),thirdRowFontSize:Math.round(this.config.components.waterMark.thirdRowFontSize*s)};return Object.assign(Object.assign({},this.config.components.waterMark),M)}}
+import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { merge } from '../../utils/merge.utils';
+import { WaterMarkDrawer } from './water-mark.drawer';
+export class WaterMarkComponent extends ChartBaseElement {
+    constructor(paneManager, chartModel, eventBus, config, canvasBoundsContainer, canvasModel, drawingManager) {
+        super();
+        this.paneManager = paneManager;
+        this.chartModel = chartModel;
+        this.eventBus = eventBus;
+        this.config = config;
+        this.canvasModel = canvasModel;
+        this.waterMarkConfig = this.config.components.waterMark;
+        this.waterMarkData = this.getWaterMarkData();
+        this.waterMarkDrawer = new WaterMarkDrawer(this.config, canvasBoundsContainer, canvasModel, () => this.waterMarkConfig, () => this.waterMarkData);
+        this.addRxSubscription(merge(canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(CHART_UUID)), this.paneManager.paneAddedSubject).subscribe((bounds) => {
+            this.waterMarkConfig = this.recalculateTextSize(bounds.width, bounds.height);
+        }));
+        this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {
+            this.waterMarkData = this.getWaterMarkData();
+        }));
+        drawingManager.addDrawerAfter(this.waterMarkDrawer, 'WATERMARK', 'DYNAMIC_OBJECTS');
+    }
+    /**
+     * Sets the visibility of the watermark component.
+     *
+     * @param {boolean} visible - A boolean indicating whether the watermark should be visible or not.
+     * @returns {void}
+     */
+    setWaterMarkVisible(visible) {
+        if (this.config.components && this.config.components.waterMark) {
+            this.config.components.waterMark.visible = visible;
+            this.canvasModel.fireDraw();
+        }
+    }
+    /**
+     * Sets the watermark data to be used in the canvas.
+     * @param {WaterMarkData} watermarkData - The data to be used as watermark.
+     * @returns {void}
+     */
+    setWaterMarkData(watermarkData) {
+        this.waterMarkData = watermarkData;
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Returns the water mark data object if it exists, otherwise returns an empty object.
+     * @returns {WaterMarkData} The water mark data object.
+     */
+    getWaterMarkData() {
+        return this.waterMarkData || {};
+    }
+    /**
+     * Sets the watermark configuration for the chart.
+     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @returns {void}
+     
+    */
+    setWaterMarkConfig(watermarkConfig) {
+        if (!watermarkConfig || !this.config.components) {
+            return;
+        }
+        if (!this.config.components.waterMark) {
+            this.config.components.waterMark = JSON.parse(JSON.stringify(watermarkConfig));
+        }
+        else {
+            const newWatermark = {};
+            merge(newWatermark, watermarkConfig);
+            merge(newWatermark, this.config.components.waterMark);
+            // eslint-disable-next-line no-restricted-syntax
+            this.config.components.waterMark = newWatermark;
+        }
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Sets the logo image to be used as a watermark.
+     * @param {CanvasImageSource} img - The image to be used as a watermark.
+     */
+    setLogoImage(img) {
+        this.waterMarkDrawer.setLogoImage(img);
+    }
+    /**
+     * Recalculates the watermark text size based on the chart's width and height.
+     * @param {number} chartWidth - The width of the chart.
+     * @param {number} chartHeight - The height of the chart.
+     * @returns {Object} - An object containing the updated watermark font sizes.
+     */
+    recalculateTextSize(chartWidth, chartHeight) {
+        const defaultScreenWidth = 1920;
+        const defaultScreenHeight = 1080;
+        // this function is used to make logarithmic dependency between screen size and watermark size
+        const fun = (x) => (0.15 * Math.log(x)) / Math.log(1.5) + 1;
+        const textSizeRatioHorizontal = fun(chartWidth / defaultScreenWidth);
+        const textSizeRatioVertical = fun(chartHeight / defaultScreenHeight);
+        const textSizeRatio = Math.min(textSizeRatioHorizontal, textSizeRatioVertical);
+        const textRatio = textSizeRatio >= 0 ? textSizeRatio : 0;
+        const updatedProps = {
+            firstRowFontSize: Math.round(this.config.components.waterMark.firstRowFontSize * textRatio),
+            secondRowFontSize: Math.round(this.config.components.waterMark.secondRowFontSize * textRatio),
+            thirdRowFontSize: Math.round(this.config.components.waterMark.thirdRowFontSize * textRatio),
+        };
+        return Object.assign(Object.assign({}, this.config.components.waterMark), updatedProps);
+    }
+}