@devexperts/dxcharts-lite 1.0.2 → 2.0.0

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

@@ -3,4 +3,164 @@
  * 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 M}from"../../chart.config";import{redrawBackgroundArea as q}from"../../drawers/chart-background.drawer";import{drawPriceLabel as z,drawRoundedRect as J}from"../../utils/canvas/canvas-drawing-functions.utils";import{calculateSymbolHeight as D,calculateTextWidth as X}from"../../utils/canvas/canvas-font-measure-tool.utils";import{getLabelTextColorByBackgroundColor as j}from"../../utils/canvas/canvas-text-functions.utils";import{round as G}from"../../utils/math.utils";export const DEFAULT_PRICE_LABEL_PADDING=4;export function drawBadgeLabel(o,t,m,n,l,d,b,R=!1){var _,a,g,p,v,h,s;const r=d.align,f=(_=l.textFont)!==null&&_!==void 0?_:M(d),B=l.bgColor,E=(a=l.textColor)!==null&&a!==void 0?a:j(B,b.labelTextColor,b.labelInvertedTextColor),F=(g=l.paddingTop)!==null&&g!==void 0?g:DEFAULT_PRICE_LABEL_PADDING,x=(p=l.paddingBottom)!==null&&p!==void 0?p:DEFAULT_PRICE_LABEL_PADDING,L=(v=l.paddingEnd)!==null&&v!==void 0?v:DEFAULT_PRICE_LABEL_PADDING,i=G(D(f,o)/2),e=n-i-F,C=n+i+x-e;if((n<t.y+C/2||n>t.y+t.height-C/2)&&!R)return;o.save(),o.fillStyle=B,o.strokeStyle=B;const c=G(t.width/6),u=r==="right"?t.x:t.x+t.width,w=r==="right"?u+c:u-c,H=d.labelBoxMargin.end,k=H-L,T=t.width-c-k;z(o,w,e,u,e+G(C/2),w,e+C,T,(s=(h=d.typeConfig.badge)===null||h===void 0?void 0:h.rounded)!==null&&s!==void 0?s:!1,r),o.fillStyle=E,o.font=f;const I=r==="right"?t.x+t.width-X(m,o,f)-H:t.x+H;o.fillText(m,I,n+i-1),o.restore()}export function drawRectLabel(o,t,m,n,l,d,b,R=!1){var _,a,g,p,v,h,s,r,f,B,E;const F=d.align,x=(_=l.textFont)!==null&&_!==void 0?_:M(d),L=l.bgColor,i=(a=l.textColor)!==null&&a!==void 0?a:j(L,b.labelTextColor,b.labelInvertedTextColor),e=(g=d.typeConfig.rectangle)===null||g===void 0?void 0:g.paddings,W=(v=(p=l.paddingTop)!==null&&p!==void 0?p:e==null?void 0:e.top)!==null&&v!==void 0?v:DEFAULT_PRICE_LABEL_PADDING,C=(s=(h=l.paddingBottom)!==null&&h!==void 0?h:e==null?void 0:e.bottom)!==null&&s!==void 0?s:DEFAULT_PRICE_LABEL_PADDING,c=(f=(r=l.paddingEnd)!==null&&r!==void 0?r:e==null?void 0:e.end)!==null&&f!==void 0?f:DEFAULT_PRICE_LABEL_PADDING,u=l.paddingStart,w=D(x,o),H=n-w/2-W,T=n+w/2+C-H,I=(B=l.rounded)!==null&&B!==void 0?B:(E=d.typeConfig.rectangle)===null||E===void 0?void 0:E.rounded;if((n<t.y+T/2||n>t.y+t.height-T/2)&&!R)return;o.save(),o.fillStyle=L,o.strokeStyle=L;const y=d.labelBoxMargin.end;o.font=x;const O=X(m,o,x),P=y-c,S=u!==void 0?O+u+c:t.width-P,N=F==="right"?t.x+t.width-P-S:t.x+P,U=F==="right"?t.x+t.width-O-y:y;I?J(o,N,H,S,T,4,!0):o.fillRect(N,H,S,T),o.fillStyle=i,o.fillText(m,U,n+w/2-1),o.restore()}export function drawPlainLabel(o,t,m,n,l,d,b,R=!1,_){var a,g,p,v,h,s,r,f,B;const E=d.align,F=(a=l.textFont)!==null&&a!==void 0?a:M(d),x=l.bgColor,L=(g=l.textColor)!==null&&g!==void 0?g:j(x,b.labelTextColor,b.labelInvertedTextColor),i=(p=d.typeConfig.rectangle)===null||p===void 0?void 0:p.paddings,e=(h=(v=l.paddingTop)!==null&&v!==void 0?v:i==null?void 0:i.top)!==null&&h!==void 0?h:DEFAULT_PRICE_LABEL_PADDING,W=(r=(s=l.paddingBottom)!==null&&s!==void 0?s:i==null?void 0:i.bottom)!==null&&r!==void 0?r:DEFAULT_PRICE_LABEL_PADDING,C=(B=(f=l.paddingEnd)!==null&&f!==void 0?f:i==null?void 0:i.end)!==null&&B!==void 0?B:DEFAULT_PRICE_LABEL_PADDING,c=l.paddingStart,u=D(F,o),w=n-u/2-e,k=n+u/2+W-w;if((n<t.y+k/2||n>t.y+t.height-k/2)&&!R)return;o.save(),o.fillStyle=x,o.strokeStyle=x;const T=d.labelBoxMargin.end;o.font=F;const I=X(m,o,F),y=T-C,O=c!==void 0?I+c+C:t.width-y,P=E==="right"?t.x+t.width-y-O:t.x+y,S=E==="right"?t.x+t.width-I-T:T;_&&q(_,o,P,w,O,k),o.fillStyle=L,o.fillText(m,S,n+u/2-1),o.restore()}export function getLabelYOffset(o,t,m=DEFAULT_PRICE_LABEL_PADDING){return D(o,t)/2+m}
+import { getFontFromConfig } from '../../chart.config';
+import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
+import { drawPriceLabel, drawRoundedRect } from '../../utils/canvas/canvas-drawing-functions.utils';
+import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+import { getLabelTextColorByBackgroundColor } from '../../utils/canvas/canvas-text-functions.utils';
+import { round } from '../../utils/math.utils';
+export const DEFAULT_PRICE_LABEL_PADDING = 4;
+/**
+ * Draws badge label on Y axis with provided parameters.
+ * @param ctx - canvas 2D context to draw on
+ * @param bounds - bounds of Y axis
+ * @param text - text to draw
+ * @param centralY - y
+ * @param config - label styles config
+ * @param align
+ * @param yAxisState
+ */
+export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const align = yAxisState.align;
+    const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
+    const bgColor = config.bgColor;
+    const textColor = (_b = config.textColor) !== null && _b !== void 0 ? _b : getLabelTextColorByBackgroundColor(bgColor, yAxisColors.labelTextColor, yAxisColors.labelInvertedTextColor);
+    const paddingTop = (_c = config.paddingTop) !== null && _c !== void 0 ? _c : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingBottom = (_d = config.paddingBottom) !== null && _d !== void 0 ? _d : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingEnd = (_e = config.paddingEnd) !== null && _e !== void 0 ? _e : DEFAULT_PRICE_LABEL_PADDING;
+    const halfFontHeight = round(calculateSymbolHeight(textFont, ctx) / 2);
+    const labelBoxTopY = centralY - halfFontHeight - paddingTop;
+    const labelBoxBottomY = centralY + halfFontHeight + paddingBottom;
+    const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
+    // do not draw, if label is out of bounds
+    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
+        !drawOutside) {
+        return;
+    }
+    ctx.save();
+    ctx.fillStyle = bgColor;
+    ctx.strokeStyle = bgColor;
+    const labelForeWidth = round(bounds.width / 6);
+    const x1 = align === 'right' ? bounds.x : bounds.x + bounds.width;
+    const x2 = align === 'right' ? x1 + labelForeWidth : x1 - labelForeWidth;
+    const xTextOffset = yAxisState.labelBoxMargin.end;
+    const marginEnd = xTextOffset - paddingEnd;
+    // main body label width, without triangle
+    const width = bounds.width - labelForeWidth - marginEnd;
+    drawPriceLabel(ctx, x2, labelBoxTopY, x1, labelBoxTopY + round(labelBoxHeight / 2), x2, labelBoxTopY + labelBoxHeight, width, (_g = (_f = yAxisState.typeConfig.badge) === null || _f === void 0 ? void 0 : _f.rounded) !== null && _g !== void 0 ? _g : false, align);
+    ctx.fillStyle = textColor;
+    ctx.font = textFont;
+    const textX = align === 'right'
+        ? bounds.x + bounds.width - calculateTextWidth(text, ctx, textFont) - xTextOffset
+        : bounds.x + xTextOffset;
+    ctx.fillText(text, textX, centralY + halfFontHeight - 1); // -1 for font height adjustment
+    ctx.restore();
+}
+/**
+ * Draws rectangle label on Y axis with provided parameters.
+ * @param ctx - canvas 2D context to draw on
+ * @param bounds - bounds of Y axis
+ * @param text - text to draw
+ * @param centralY - y
+ * @param config - label styles config
+ * @param align
+ * @param yAxisState
+ */
+export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const align = yAxisState.align;
+    const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
+    const bgColor = config.bgColor;
+    const textColor = (_b = config.textColor) !== null && _b !== void 0 ? _b : getLabelTextColorByBackgroundColor(bgColor, yAxisColors.labelTextColor, yAxisColors.labelInvertedTextColor);
+    const paddings = (_c = yAxisState.typeConfig.rectangle) === null || _c === void 0 ? void 0 : _c.paddings;
+    const paddingTop = (_e = (_d = config.paddingTop) !== null && _d !== void 0 ? _d : paddings === null || paddings === void 0 ? void 0 : paddings.top) !== null && _e !== void 0 ? _e : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingBottom = (_g = (_f = config.paddingBottom) !== null && _f !== void 0 ? _f : paddings === null || paddings === void 0 ? void 0 : paddings.bottom) !== null && _g !== void 0 ? _g : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingEnd = (_j = (_h = config.paddingEnd) !== null && _h !== void 0 ? _h : paddings === null || paddings === void 0 ? void 0 : paddings.end) !== null && _j !== void 0 ? _j : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingStart = config.paddingStart;
+    const fontHeight = calculateSymbolHeight(textFont, ctx);
+    const labelBoxTopY = centralY - fontHeight / 2 - paddingTop;
+    const labelBoxBottomY = centralY + fontHeight / 2 + paddingBottom;
+    const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
+    const rounded = (_k = config.rounded) !== null && _k !== void 0 ? _k : (_l = yAxisState.typeConfig.rectangle) === null || _l === void 0 ? void 0 : _l.rounded;
+    // do not draw, if label is out of bounds
+    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
+        !drawOutside) {
+        return;
+    }
+    ctx.save();
+    ctx.fillStyle = bgColor;
+    ctx.strokeStyle = bgColor;
+    const xTextOffset = yAxisState.labelBoxMargin.end;
+    ctx.font = textFont;
+    const textWidth = calculateTextWidth(text, ctx, textFont);
+    const marginEnd = xTextOffset - paddingEnd;
+    const width = paddingStart !== undefined ? textWidth + paddingStart + paddingEnd : bounds.width - marginEnd;
+    const x = align === 'right' ? bounds.x + bounds.width - marginEnd - width : bounds.x + marginEnd;
+    const textX = align === 'right' ? bounds.x + bounds.width - textWidth - xTextOffset : xTextOffset;
+    if (rounded) {
+        drawRoundedRect(ctx, x, labelBoxTopY, width, labelBoxHeight, 4, true);
+    }
+    else {
+        ctx.fillRect(x, labelBoxTopY, width, labelBoxHeight);
+    }
+    ctx.fillStyle = textColor;
+    ctx.fillText(text, textX, centralY + fontHeight / 2 - 1); // -1 for font height adjustment
+    ctx.restore();
+}
+/**
+ * Draws rectangle label on Y axis with provided parameters but with transparent background.
+ * @param ctx - canvas 2D context to draw on
+ * @param bounds - bounds of Y axis
+ * @param text - text to draw
+ * @param centralY - y
+ * @param config - label styles config
+ * @param align
+ * @param yAxisState
+ */
+export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false, backgroundCtx) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const align = yAxisState.align;
+    const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
+    const bgColor = config.bgColor;
+    const textColor = (_b = config.textColor) !== null && _b !== void 0 ? _b : getLabelTextColorByBackgroundColor(bgColor, yAxisColors.labelTextColor, yAxisColors.labelInvertedTextColor);
+    const paddings = (_c = yAxisState.typeConfig.rectangle) === null || _c === void 0 ? void 0 : _c.paddings;
+    const paddingTop = (_e = (_d = config.paddingTop) !== null && _d !== void 0 ? _d : paddings === null || paddings === void 0 ? void 0 : paddings.top) !== null && _e !== void 0 ? _e : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingBottom = (_g = (_f = config.paddingBottom) !== null && _f !== void 0 ? _f : paddings === null || paddings === void 0 ? void 0 : paddings.bottom) !== null && _g !== void 0 ? _g : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingEnd = (_j = (_h = config.paddingEnd) !== null && _h !== void 0 ? _h : paddings === null || paddings === void 0 ? void 0 : paddings.end) !== null && _j !== void 0 ? _j : DEFAULT_PRICE_LABEL_PADDING;
+    const paddingStart = config.paddingStart;
+    const fontHeight = calculateSymbolHeight(textFont, ctx);
+    const labelBoxTopY = centralY - fontHeight / 2 - paddingTop;
+    const labelBoxBottomY = centralY + fontHeight / 2 + paddingBottom;
+    const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
+    // do not draw, if label is out of bounds
+    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
+        !drawOutside) {
+        return;
+    }
+    ctx.save();
+    ctx.fillStyle = bgColor;
+    ctx.strokeStyle = bgColor;
+    const xTextOffset = yAxisState.labelBoxMargin.end;
+    ctx.font = textFont;
+    const textWidth = calculateTextWidth(text, ctx, textFont);
+    const marginEnd = xTextOffset - paddingEnd;
+    const width = paddingStart !== undefined ? textWidth + paddingStart + paddingEnd : bounds.width - marginEnd;
+    const x = align === 'right' ? bounds.x + bounds.width - marginEnd - width : bounds.x + marginEnd;
+    const textX = align === 'right' ? bounds.x + bounds.width - textWidth - xTextOffset : xTextOffset;
+    backgroundCtx && redrawBackgroundArea(backgroundCtx, ctx, x, labelBoxTopY, width, labelBoxHeight);
+    ctx.fillStyle = textColor;
+    ctx.fillText(text, textX, centralY + fontHeight / 2 - 1); // -1 for font height adjustment
+    ctx.restore();
+}
+/**
+ * Offset from the center of label to the top/bottom.
+ *
+ * @param font Label font
+ * @param ctx Drawing context
+ * @param paddingTop - extra padding from top
+ */
+export function getLabelYOffset(font, ctx, paddingTop = DEFAULT_PRICE_LABEL_PADDING) {
+    const fontHeight = calculateSymbolHeight(font, ctx);
+    return fontHeight / 2 + paddingTop;
+}

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

@@ -5,7 +5,7 @@
  */
 import { Subject } from 'rxjs';
 import { CanvasBoundsContainer, HitBoundsTest } from '../../canvas/canvas-bounds-container';
-import { ChartConfigComponentsYAxis } from '../../chart.config';
+import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
@@ -25,7 +25,7 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
-    constructor(bus: EventBus, config: ChartConfigComponentsYAxis, chartPanComponent: ChartPanComponent, viewportModel: ViewportModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    constructor(bus: EventBus, config: YAxisConfig, chartPanComponent: ChartPanComponent, viewportModel: ViewportModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
     private onYDragStart;
     private onYDragTick;
     private onYDragEnd;

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -3,4 +3,75 @@
  * 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{Subject as p}from"rxjs";import{CanvasElement as m}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as E}from"../../model/chart-base-element";import{DragNDropYComponent as b}from"../dran-n-drop_helper/drag-n-drop-y.component";const d=10;export class YAxisScaleHandler extends E{constructor(i,t,Y,g,n,D,h,l){if(super(),this.bus=i,this.viewportModel=g,this.canvasBoundsContainer=D,this.autoScaleCallback=l,this.yAxisDragEndSubject=new p,this.lastYStart=0,this.lastYEnd=0,this.lastYHeight=0,this.lastYPxHeight=0,this.onYDragStart=()=>{this.lastYStart=this.viewportModel.yStart,this.lastYEnd=this.viewportModel.yEnd,this.lastYHeight=this.viewportModel.yEnd-this.viewportModel.yStart,this.lastYPxHeight=this.canvasBoundsContainer.getBounds(m.Y_AXIS).height},this.onYDragTick=s=>{const{delta:e}=s;let a;e<0?a=1/(1+-e/this.lastYPxHeight*(d-1)):a=1+e/this.lastYPxHeight*(d-1);const c=(this.lastYHeight*a-this.lastYHeight)/2,u=this.lastYStart-c,S=this.lastYEnd+c;this.autoScaleCallback(!1),this.viewportModel.setYScale(u,S),this.bus.fireDraw()},this.onYDragEnd=()=>{this.yAxisDragEndSubject.next()},t.customScale){const s=()=>t.type!=="percent",e=new b(h,{onDragTick:r(this.onYDragTick,s),onDragStart:r(this.onYDragStart,s),onDragEnd:r(this.onYDragEnd,s)},n,Y,{disableChartPanning:!1});this.addChildEntity(e),t.customScaleDblClick&&n.observeDbClick(h).subscribe(()=>{l(!0),this.bus.fireDraw()})}}}const r=(o,i)=>(...t)=>i()&&o(...t);
+import { Subject } from 'rxjs';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
+// if you drag full Y height from top to bottom - you will have x3 zoom, and vice-versa
+const FULL_Y_HEIGHT_ZOOM_FACTOR = 10;
+/**
+ * Handles the mouse drag on Y axis - to zoom the viewport vertically.
+ * @doc-tags scaling,zoom,viewport
+ */
+export class YAxisScaleHandler extends ChartBaseElement {
+    constructor(bus, config, chartPanComponent, viewportModel, canvasInputListener, canvasBoundsContainer, hitTest, autoScaleCallback) {
+        super();
+        this.bus = bus;
+        this.viewportModel = viewportModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.autoScaleCallback = autoScaleCallback;
+        this.yAxisDragEndSubject = new Subject();
+        this.lastYStart = 0;
+        this.lastYEnd = 0;
+        this.lastYHeight = 0;
+        this.lastYPxHeight = 0;
+        this.onYDragStart = () => {
+            this.lastYStart = this.viewportModel.yStart;
+            this.lastYEnd = this.viewportModel.yEnd;
+            this.lastYHeight = this.viewportModel.yEnd - this.viewportModel.yStart;
+            this.lastYPxHeight = this.canvasBoundsContainer.getBounds(CanvasElement.Y_AXIS).height;
+        };
+        this.onYDragTick = (dragInfo) => {
+            const { delta: absoluteYDelta } = dragInfo;
+            // 1/3..3
+            let zoomYMult;
+            if (absoluteYDelta < 0) {
+                // 1/3..1
+                zoomYMult = 1 / (1 + (-absoluteYDelta / this.lastYPxHeight) * (FULL_Y_HEIGHT_ZOOM_FACTOR - 1));
+            }
+            else {
+                // 1..3
+                zoomYMult = 1 + (absoluteYDelta / this.lastYPxHeight) * (FULL_Y_HEIGHT_ZOOM_FACTOR - 1);
+            }
+            const newYHeight = this.lastYHeight * zoomYMult;
+            const delta = (newYHeight - this.lastYHeight) / 2;
+            const newYStart = this.lastYStart - delta;
+            const newYEnd = this.lastYEnd + delta;
+            this.autoScaleCallback(false);
+            this.viewportModel.setYScale(newYStart, newYEnd);
+            this.bus.fireDraw();
+        };
+        this.onYDragEnd = () => {
+            this.yAxisDragEndSubject.next();
+        };
+        // drag to Y-scale and double click to auto scale
+        if (config.customScale) {
+            const dragPredicate = () => config.type !== 'percent';
+            const dragNDropYComponent = new DragNDropYComponent(hitTest, {
+                onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
+                onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
+                onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
+            }, canvasInputListener, chartPanComponent, {
+                disableChartPanning: false,
+            });
+            this.addChildEntity(dragNDropYComponent);
+            if (config.customScaleDblClick) {
+                canvasInputListener.observeDbClick(hitTest).subscribe(() => {
+                    autoScaleCallback(true);
+                    this.bus.fireDraw();
+                });
+            }
+        }
+    }
+}
+const callIfPredicateTrue = (fun, predicate) => (...args) => predicate() && fun(...args);

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

@@ -6,64 +6,68 @@
 import { Subject } from 'rxjs';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { CursorHandler } from '../../canvas/cursor.handler';
-import { BarType, ChartConfigComponentsYAxis, FullChartColors, FullChartConfig, YAxisAlign, YAxisLabelAppearanceType, YAxisLabelMode, YAxisLabelType } from '../../chart.config';
-import { CompositeDrawer } from '../../drawers/composite.drawer';
-import { DrawingManager } from '../../drawers/drawing-manager';
+import { YAxisWidthContributor } from '../../canvas/y-axis-bounds.container';
+import { BarType, FullChartColors, FullChartConfig, YAxisAlign, YAxisConfig, YAxisLabelAppearanceType, YAxisLabelMode, YAxisLabelType } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 import { PriceMovement } from '../../model/candle-series.model';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DataSeriesType } from '../../model/data-series.config';
+import { DataSeriesModel } from '../../model/data-series.model';
 import { ScaleModel } from '../../model/scale.model';
-import { ChartModel } from '../chart/chart.model';
 import { PriceAxisType } from '../labels_generator/numeric-axis-labels.generator';
 import { ChartPanComponent } from '../pan/chart-pan.component';
-import { PaneManager } from '../pane/pane-manager.component';
 import { VisualYAxisLabel, YAxisLabelsProvider } from './price_labels/y-axis-labels.model';
 import { YAxisScaleHandler } from './y-axis-scale.handler';
 import { YAxisModel } from './y-axis.model';
-import { YAxisWidthContributor } from '../../canvas/y-axis-bounds.container';
 export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 /**
  * Y axis component. Contains all Y axis related logic.
  */
 export declare class YAxisComponent extends ChartBaseElement {
     private eventBus;
-    private config;
     private canvasModel;
-    private yAxisLabelsCanvasModel;
-    private backgroundCanvasModel;
-    private chartModel;
-    private scaleModel;
+    scale: ScaleModel;
     private canvasBoundsContainer;
-    private cursorHandler;
+    private cursors;
+    paneUUID: string;
+    extentIdx: number;
+    private labelsColorByChartTypeMap;
     yAxisScaleHandler: YAxisScaleHandler;
-    yAxisModel: YAxisModel;
+    model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
-    readonly state: ChartConfigComponentsYAxis;
-    private labelsColorByChartTypeMap;
-    drawer: CompositeDrawer;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, chartModel: ChartModel, scaleModel: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler);
+    readonly state: YAxisConfig;
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number);
+    /**
+     * Registers default label color resolvers for different chart types.
+     * @private
+     * @function
+     * @name registerDefaultLabelColorResolver
+     * @returns {void}
+     */
+    private registerDefaultLabelColorResolvers;
+    protected doActivate(): void;
     private updateCursor;
     /**
      * Updates labels visual appearance on canvas
      */
     updateOrderedLabels(adjustYAxisWidth?: boolean): void;
     /**
-     * Calls the parent class's doActivate method
-     * @protected
+     * Registers a label color resolver for a specific chart type.
+     *
+     * @param {BarType} chartType - The type of chart for which the label color resolver is being registered.
+     * @param {LabelColorResolver} resolver - The function that will be used to resolve the color of the labels for the specified chart type.
      * @returns {void}
      */
-    protected doActivate(): void;
+    registerLabelColorResolver(chartType: BarType, resolver: LabelColorResolver): void;
     /**
-     * Registers default label color resolvers for different chart types.
-     * @private
-     * @function
-     * @name registerDefaultLabelColorResolver
-     * @returns {void}
+     * Returns a function that resolves the color for a label based on the type of data series.
+     * @param {DataSeriesType} candlesType - The type of data series.
+     * @returns {Function} - A function that resolves the color for a label.
+     * If there is no color mapping for the given data series type, it returns the default color resolver function.
      */
-    private registerDefaultLabelColorResolver;
+    getLabelsColorResolver(candlesType: DataSeriesType): LabelColorResolver;
     /**
      * You can add a custom labels provider for additional labels on YAxis (like for drawings, symbol last price, studies, etc..)
      * @param groupName - a group in which labels position recalculation algorithm will be applied, usually it's subchart name
@@ -82,6 +86,7 @@ export declare class YAxisComponent extends ChartBaseElement {
      * @param name
      */
     deleteSimpleYAxisLabel(name: string): void;
+    getAxisType(): PriceAxisType;
     /**
      * Unregister a Y axis labels provider from the specified group.
      * @param {string} groupName - The name of the group from which to unregister the provider. Defaults to LabelsGroups.MAIN.
@@ -89,6 +94,7 @@ export declare class YAxisComponent extends ChartBaseElement {
      * @returns {string} - The ID of the unregistered provider.
      */
     unregisterYAxisLabelsProvider(groupName: string | undefined, id: string): string;
+    getBounds(): import("../../model/bounds.model").Bounds;
     /**
      * If custom pane has y-axis it has to register width contributor to correctly calculate overall y-axis width.
      * @param contributor
@@ -140,19 +146,4 @@ export declare class YAxisComponent extends ChartBaseElement {
      * @returns {void}
      */
     changeLabelsDescriptionVisibility(descVisibility: boolean): void;
-    /**
-     * Registers a label color resolver for a specific chart type.
-     *
-     * @param {BarType} chartType - The type of chart for which the label color resolver is being registered.
-     * @param {LabelColorResolver} resolver - The function that will be used to resolve the color of the labels for the specified chart type.
-     * @returns {void}
-     */
-    registerLabelColorResolver(chartType: BarType, resolver: LabelColorResolver): void;
-    /**
-     * Returns a function that resolves the color for a label based on the type of data series.
-     * @param {DataSeriesType} candlesType - The type of data series.
-     * @returns {Function} - A function that resolves the color for a label.
-     * If there is no color mapping for the given data series type, it returns the default color resolver function.
-     */
-    getLabelsColorResolver(candlesType: DataSeriesType): LabelColorResolver;
 }

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

@@ -3,4 +3,223 @@
  * 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{Subject as g}from"rxjs";import{CanvasElement as d,CHART_UUID as r}from"../../canvas/canvas-bounds-container";import{ClearCanvasDrawer as f}from"../../drawers/clear-canvas.drawer";import{CompositeDrawer as w}from"../../drawers/composite.drawer";import{ChartBaseElement as Y}from"../../model/chart-base-element";import{uuid as D}from"../../utils/uuid.utils";import{resolveColorForArea as S,resolveColorForBar as R,resolveColorForBaseLine as P,resolveColorForCandle as I,resolveColorForHistogram as B,resolveColorForLine as _,resolveColorForScatterPlot as T,resolveColorForTrendAndHollow as b,resolveDefaultColorForLabel as E}from"./label-color.functions";import{LastCandleLabelsProvider as F}from"./price_labels/last-candle-labels.provider";import{LabelsGroups as h}from"./price_labels/y-axis-labels.model";import{YAxisPriceLabelsDrawer as H}from"./price_labels/y-axis-price-labels.drawer";import{YAxisScaleHandler as U}from"./y-axis-scale.handler";import{YAxisDrawer as N}from"./y-axis.drawer";import{YAxisModel as X}from"./y-axis.model";export class YAxisComponent extends Y{constructor(e,s,t,A,x,l,a,C,i,c,L,n,p){super(),this.eventBus=e,this.config=s,this.canvasModel=t,this.yAxisLabelsCanvasModel=A,this.backgroundCanvasModel=x,this.chartModel=l,this.scaleModel=a,this.canvasBoundsContainer=i,this.cursorHandler=p,this.axisTypeSetSubject=new g,this.labelsColorByChartTypeMap={},this.state=s.components.yAxis;const o=new w;this.drawer=o;const y=new f(this.yAxisLabelsCanvasModel);o.addDrawer(y,"YAXIS_CLEAR"),this.registerDefaultLabelColorResolver(),c.addDrawer(o,"Y_AXIS"),this.yAxisScaleHandler=new U(e,this.state,L,a,C,i,i.getBoundsHitTest(d.PANE_UUID_Y_AXIS(r)),M=>a.autoScale(M)),this.addChildEntity(this.yAxisScaleHandler),this.yAxisModel=new X(n.paneComponents[r],e,this.config,i,t,l,a),this.addChildEntity(this.yAxisModel),n.paneComponents[r].yAxisLabelsGenerator=this.yAxisModel.yAxisLabelsGenerator;const u=new N(s,this.state,t,()=>this.yAxisModel.yAxisBaseLabelsModel.labels,()=>i.getBounds(d.Y_AXIS),()=>this.state.visible,l.pane.scaleModel.toY.bind(l.pane.scaleModel));o.addDrawer(u);const v=new H(()=>this.yAxisModel.yAxisLabelsModel.orderedLabels,this.yAxisLabelsCanvasModel,this.backgroundCanvasModel,this.state,this.canvasBoundsContainer,this.config.colors.yAxis,this.yAxisModel.yAxisLabelsModel.customLabels);o.addDrawer(v);const m=new F(this.chartModel,this.config,this.chartModel.lastCandleLabelsByChartType,this.getLabelsColorResolver.bind(this));this.registerYAxisLabelsProvider(m,h.MAIN),n.paneComponents[r].mainYExtentComponent.getAxisType=()=>this.state.type,this.updateCursor()}updateCursor(){this.state.type==="percent"?this.cursorHandler.setCursorForCanvasEl(d.PANE_UUID_Y_AXIS(r),this.config.components.yAxis.resizeDisabledCursor):this.cursorHandler.setCursorForCanvasEl(d.PANE_UUID_Y_AXIS(r),this.config.components.yAxis.cursor)}updateOrderedLabels(e=!1){this.yAxisModel.yAxisLabelsModel.updateLabels(e)}doActivate(){super.doActivate()}registerDefaultLabelColorResolver(){this.registerLabelColorResolver("candle",I),this.registerLabelColorResolver("bar",R),this.registerLabelColorResolver("line",_),this.registerLabelColorResolver("area",S),this.registerLabelColorResolver("scatterPlot",T),this.registerLabelColorResolver("histogram",B),this.registerLabelColorResolver("baseline",P),this.registerLabelColorResolver("trend",b),this.registerLabelColorResolver("hollow",b)}registerYAxisLabelsProvider(e,s=h.MAIN,t=D()){return this.yAxisModel.yAxisLabelsModel.registerYAxisLabelsProvider(s,e,t),t}addSimpleYAxisLabel(e,s){this.yAxisModel.yAxisLabelsModel.customLabels[e]=s,this.canvasModel.fireDraw()}deleteSimpleYAxisLabel(e){delete this.yAxisModel.yAxisLabelsModel.customLabels[e],this.canvasModel.fireDraw()}unregisterYAxisLabelsProvider(e=h.MAIN,s){return this.yAxisModel.yAxisLabelsModel.unregisterYAxisLabelsProvider(e,s),s}registerYAxisWidthContributor(e){this.canvasBoundsContainer.yAxisBoundsContainer.registerYAxisWidthContributor(e)}setAxisType(e){e!==this.state.type&&(this.state.type=e,this.axisTypeSetSubject.next(e),this.scaleModel.autoScale(!0),this.yAxisModel.yAxisLabelsModel.updateLabels(!0),this.updateCursor())}setYAxisAlign(e){this.state.align=e,this.canvasBoundsContainer.updateYAxisWidths(),this.eventBus.fireDraw()}setVisible(e){this.state.visible=e,this.eventBus.fireDraw()}isVisible(){return this.state.visible}setLockPriceToBarRatio(e=!1){this.scaleModel.setLockPriceToBarRatio(e)}changeLabelMode(e,s){this.state.labels.settings[e].mode=s,this.yAxisModel.yAxisLabelsModel.updateLabels()}changeLabelAppearance(e,s){this.state.labels.settings[e].type=s,this.yAxisModel.yAxisLabelsModel.updateLabels()}togglePriceScaleInverse(e){this.scaleModel.state.inverse=e,this.scaleModel.inverseY=e,this.scaleModel.scaleInversedSubject.next(e)}changeLabelsDescriptionVisibility(e){this.state.labels.descriptions=e,this.canvasModel.fireDraw()}registerLabelColorResolver(e,s){this.labelsColorByChartTypeMap[e]=s}getLabelsColorResolver(e){var s;return(s=this.labelsColorByChartTypeMap[e])!==null&&s!==void 0?s:E}}
+import { Subject } from 'rxjs';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { cloneUnsafe } from '../../utils/object.utils';
+import { uuid } from '../../utils/uuid.utils';
+import { resolveColorForArea, resolveColorForBar, resolveColorForBaseLine, resolveColorForCandle, resolveColorForHistogram, resolveColorForLine, resolveColorForScatterPlot, resolveColorForTrendAndHollow, resolveDefaultColorForLabel } from './label-color.functions';
+import { LabelsGroups } from './price_labels/y-axis-labels.model';
+import { YAxisScaleHandler } from './y-axis-scale.handler';
+import { YAxisModel } from './y-axis.model';
+/**
+ * Y axis component. Contains all Y axis related logic.
+ */
+export class YAxisComponent extends ChartBaseElement {
+    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx) {
+        super();
+        this.eventBus = eventBus;
+        this.canvasModel = canvasModel;
+        this.scale = scale;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.cursors = cursors;
+        this.paneUUID = paneUUID;
+        this.extentIdx = extentIdx;
+        this.labelsColorByChartTypeMap = {};
+        this.axisTypeSetSubject = new Subject();
+        this.state = cloneUnsafe(config.components.yAxis);
+        //#region init yAxisScaleHandler
+        this.yAxisScaleHandler = new YAxisScaleHandler(eventBus, this.state, chartPanComponent, scale, canvasInputListeners, canvasBoundsContainer, canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(paneUUID, extentIdx)), auto => scale.autoScale(auto));
+        this.addChildEntity(this.yAxisScaleHandler);
+        //#endregion
+        this.model = new YAxisModel(this.paneUUID, eventBus, this.state, canvasBoundsContainer, canvasModel, scale, valueFormatter, dataSeriesProvider, extentIdx);
+        this.addChildEntity(this.model);
+        this.updateCursor();
+        this.registerDefaultLabelColorResolvers();
+    }
+    /**
+     * Registers default label color resolvers for different chart types.
+     * @private
+     * @function
+     * @name registerDefaultLabelColorResolver
+     * @returns {void}
+     */
+    registerDefaultLabelColorResolvers() {
+        this.registerLabelColorResolver('candle', resolveColorForCandle);
+        this.registerLabelColorResolver('bar', resolveColorForBar);
+        this.registerLabelColorResolver('line', resolveColorForLine);
+        this.registerLabelColorResolver('area', resolveColorForArea);
+        this.registerLabelColorResolver('scatterPlot', resolveColorForScatterPlot);
+        this.registerLabelColorResolver('histogram', resolveColorForHistogram);
+        this.registerLabelColorResolver('baseline', resolveColorForBaseLine);
+        this.registerLabelColorResolver('trend', resolveColorForTrendAndHollow);
+        this.registerLabelColorResolver('hollow', resolveColorForTrendAndHollow);
+    }
+    doActivate() {
+        this.addRxSubscription(this.scale.beforeStartAnimationSubject.subscribe(() => this.state.type === 'percent' && this.scale.haltAnimation()));
+    }
+    updateCursor() {
+        if (this.state.type === 'percent') {
+            this.cursors.setCursorForCanvasEl(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.extentIdx), this.state.resizeDisabledCursor);
+        }
+        else {
+            this.cursors.setCursorForCanvasEl(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.extentIdx), this.state.cursor);
+        }
+    }
+    /**
+     * Updates labels visual appearance on canvas
+     */
+    updateOrderedLabels(adjustYAxisWidth = false) {
+        this.model.fancyLabelsModel.updateLabels(adjustYAxisWidth);
+    }
+    /**
+     * Registers a label color resolver for a specific chart type.
+     *
+     * @param {BarType} chartType - The type of chart for which the label color resolver is being registered.
+     * @param {LabelColorResolver} resolver - The function that will be used to resolve the color of the labels for the specified chart type.
+     * @returns {void}
+     */
+    registerLabelColorResolver(chartType, resolver) {
+        this.labelsColorByChartTypeMap[chartType] = resolver;
+    }
+    /**
+     * Returns a function that resolves the color for a label based on the type of data series.
+     * @param {DataSeriesType} candlesType - The type of data series.
+     * @returns {Function} - A function that resolves the color for a label.
+     * If there is no color mapping for the given data series type, it returns the default color resolver function.
+     */
+    getLabelsColorResolver(candlesType) {
+        var _a;
+        return (_a = this.labelsColorByChartTypeMap[candlesType]) !== null && _a !== void 0 ? _a : resolveDefaultColorForLabel;
+    }
+    //#region public methods
+    /**
+     * You can add a custom labels provider for additional labels on YAxis (like for drawings, symbol last price, studies, etc..)
+     * @param groupName - a group in which labels position recalculation algorithm will be applied, usually it's subchart name
+     * @param provider
+     * @param id
+     */
+    registerYAxisLabelsProvider(provider, groupName = LabelsGroups.MAIN, id = uuid()) {
+        this.model.fancyLabelsModel.registerYAxisLabelsProvider(groupName, provider, id);
+        return id;
+    }
+    /**
+     * An easier way to manage custom y-axis labels, than y-axis labels providers.
+     * However, overlapping avoidance is not supported
+     * @param name
+     * @param label
+     */
+    addSimpleYAxisLabel(name, label) {
+        this.model.fancyLabelsModel.customLabels[name] = label;
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * @param name
+     */
+    deleteSimpleYAxisLabel(name) {
+        delete this.model.fancyLabelsModel.customLabels[name];
+        this.canvasModel.fireDraw();
+    }
+    getAxisType() {
+        return this.state.type;
+    }
+    /**
+     * Unregister a Y axis labels provider from the specified group.
+     * @param {string} groupName - The name of the group from which to unregister the provider. Defaults to LabelsGroups.MAIN.
+     * @param {string} id - The ID of the provider to unregister.
+     * @returns {string} - The ID of the unregistered provider.
+     */
+    unregisterYAxisLabelsProvider(groupName = LabelsGroups.MAIN, id) {
+        this.model.fancyLabelsModel.unregisterYAxisLabelsProvider(groupName, id);
+        return id;
+    }
+    getBounds() {
+        return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.extentIdx));
+    }
+    /**
+     * If custom pane has y-axis it has to register width contributor to correctly calculate overall y-axis width.
+     * @param contributor
+     */
+    registerYAxisWidthContributor(contributor) {
+        this.canvasBoundsContainer.yAxisBoundsContainer.registerYAxisWidthContributor(contributor);
+    }
+    /**
+     * Sets the type of axis: percent, regular or logarithmic.
+     * @param type - the type of axis
+     */
+    setAxisType(type) {
+        if (type !== this.state.type) {
+            this.state.type = type;
+            this.axisTypeSetSubject.next(type);
+            this.scale.autoScale(true);
+            this.model.fancyLabelsModel.updateLabels(true);
+            this.updateCursor();
+        }
+    }
+    /**
+     * Change YAxis position to left or to right
+     * @param align
+     */
+    setYAxisAlign(align) {
+        this.state.align = align;
+        this.canvasBoundsContainer.updateYAxisWidths();
+        this.eventBus.fireDraw();
+    }
+    /**
+     * Controls visibility of the y-axis
+     */
+    setVisible(isVisible) {
+        this.state.visible = isVisible;
+        this.eventBus.fireDraw();
+    }
+    /**
+     * If visible, when you can see the y-axis on the chart
+     */
+    isVisible() {
+        return this.state.visible;
+    }
+    /**
+     * Controls lockPriceToBarRatio of the y-axis
+     */
+    setLockPriceToBarRatio(value = false) {
+        this.scale.setLockPriceToBarRatio(value);
+    }
+    /**
+     * Changes the visual type of particular label.
+     * @param type - label type
+     * @param mode - visual mode
+     */
+    changeLabelMode(type, mode) {
+        this.state.labels.settings[type].mode = mode;
+        this.model.fancyLabelsModel.updateLabels();
+    }
+    /**
+     * Changes the visual type of particular label.
+     * @param type - label type
+     * @param mode - visual mode
+     */
+    changeLabelAppearance(type, mode) {
+        this.state.labels.settings[type].type = mode;
+        this.model.fancyLabelsModel.updateLabels();
+    }
+    /**
+     * Sets the inverse price scale mode. Inverts Y axis vertically.
+     * Inversion also works for candles, drawings and overlay studies.
+     * @param inverse - true or false
+     */
+    togglePriceScaleInverse(inverse) {
+        this.scale.state.inverse = inverse;
+        this.scale.inverseY = inverse;
+        this.scale.scaleInversedSubject.next(inverse);
+    }
+    /**
+     * Changes the visibility of the labels' descriptions.
+     * @param {boolean} descVisibility - A boolean value indicating whether the descriptions should be visible or not.
+     * @returns {void}
+     */
+    changeLabelsDescriptionVisibility(descVisibility) {
+        this.state.labels.descriptions = descVisibility;
+        //  recalculating labels is not needed, so just redraw YAxis
+        this.canvasModel.fireDraw();
+    }
+}