@devexperts/dxcharts-lite 1.0.1

package/dist/chart/model/data-series.model.d.ts

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { YExtentComponent } from '../components/pane/extent/y-extent-component';
+import { DataSeriesYAxisLabelsProvider } from '../components/y_axis/price_labels/data-series-y-axis-labels.provider';
+import { AtLeastOne } from '../utils/object.utils';
+import { ChartBaseElement } from './chart-base-element';
+import { DataSeriesView } from './data-series-view';
+import { DataSeriesConfig, DataSeriesPaintConfig, DataSeriesType } from './data-series.config';
+import { HighLowWithIndex, ScaleModel } from './scale.model';
+import { HighLowProvider } from './scaling/auto-scale.model';
+import { Index, Unit, Viewable } from './scaling/viewport.model';
+/**
+ * Properties are named in order to match VisualCandle interface
+ */
+export declare class VisualSeriesPoint {
+    centerUnit: Unit;
+    close: Unit;
+    constructor(centerUnit: Unit, close: Unit);
+    /**
+     * returns y coordinate in pixels
+     */
+    y(viewable: Viewable): Unit;
+    /**
+     * returns x coordinate in pixels
+     */
+    x(viewable: Viewable): Unit;
+    clone(): VisualSeriesPoint;
+}
+export interface DataSeriesPoint {
+    timestamp: number;
+    close: Unit;
+}
+export interface DataSeriesViewportIndexes {
+    dataIdxStart: Index;
+    dataIdxEnd: Index;
+}
+/**
+ * DataSeriesModel represents single time series chart.
+ * Usually data source is presented as a one-dimension array, but here it can be presented as two-dimension array
+ * If the data is presented as two-dim array when every data array will be drawn as a separate time-series
+ * For example, linear chart type will be drawn with gaps on the chart
+ */
+export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint, V extends VisualSeriesPoint = VisualSeriesPoint> extends ChartBaseElement {
+    extentComponent: YExtentComponent;
+    id: number;
+    name: string;
+    hovered: boolean;
+    yAxisLabelProvider: DataSeriesYAxisLabelsProvider;
+    readonly config: DataSeriesConfig;
+    scaleModel: ScaleModel;
+    view: DataSeriesView;
+    protected _dataPoints: D[][];
+    pricePrecisions: number[];
+    /**
+     * Should be used for paint tools like rectangular drawing or diff cloud
+     */
+    linkedDataSeriesModels: DataSeriesModel<D, V>[];
+    highLowProvider: HighLowProvider;
+    get dataPoints2D(): D[][];
+    get dataPoints(): D[];
+    protected _dataPointsFlat: D[];
+    set dataPoints(points: D[][] | D[]);
+    protected _visualPoints: V[][];
+    protected _visualPointsFlat: V[];
+    dataIdxStart: Index;
+    dataIdxEnd: Index;
+    get visualPoints(): V[];
+    get visualPoints2D(): V[][];
+    set visualPoints(points: V[][] | V[]);
+    constructor(extentComponent: YExtentComponent, id: number, _config?: AtLeastOne<DataSeriesConfig>);
+    protected doActivate(): void;
+    /**
+     * Sets the data points and recalculates internal state
+     * @param {DataSeriesPoint[][] | DataSeriesPoint[]} points - The data points to set for the model. Can be an array of arrays or a single array.
+     * @returns {void}
+     */
+    setDataPoints(points: D[][] | D[]): void;
+    /**
+     * Returns the paint configuration object for a specific series part, or the default paint configuration object
+     * if the specified series part is not defined in the current DataSeriesView configuration.
+     *
+     * @param {number} seriesPart - The index of the series part to get the paint configuration for.
+     * @returns {DataSeriesPaintConfig} The paint configuration object for the specified series part, or the default paint configuration object.
+     */
+    getPaintConfig: (seriesPart: number) => DataSeriesPaintConfig;
+    protected _toVisualPoints(data: D[][]): V[][];
+    /**
+     * Moves the DataSeriesModel to the given extent.
+     * @param extent
+     */
+    moveToExtent(extent: YExtentComponent): void;
+    /**
+     * Transforms the given array of data points of type D into an array of visual points of type V.
+     * Each visual point object contains a centerUnit property with the index of the point in the input array,
+     * and a close property with the close value of the point.
+     *
+     * @param {D[]} data - The array of data points to transform into visual points.
+     * @returns {V[]} An array of visual points, each with a centerUnit and close property.
+     */
+    toVisualPoints(data: D[]): V[];
+    setType(type: DataSeriesType): void;
+    /**
+     * Recalculates the visual points of the DataSeriesView based on the current data points.
+     * The visual points are stored in the visualPoints property of the DataSeriesView.
+     * Should be called 1 time when data are set / updated to chart.
+     */
+    recalculateVisualPoints(): void;
+    /**
+     * Recalculates the indexes of the start and end points of the data viewport,
+     * based on the current xStart and xEnd values of the scale model, or on the given xStart and xEnd parameters.
+     *
+     * @param {number} [xStart=this.scaleModel.xStart] - The start value of the viewport on the x-axis. Defaults to the current xStart value of the scale model.
+     * @param {number} [xEnd=this.scaleModel.xEnd] - The end value of the viewport on the x-axis. Defaults to the current xEnd value of the scale model.
+     */
+    recalculateDataViewportIndexes(xStart?: number, xEnd?: number): void;
+    /**
+     * Calculates and returns the indexes of the start and end points of the data viewport,
+     * based on the given start and end units on the x-axis.
+     *
+     * @param {Unit} xStart - The start value of the viewport on the x-axis.
+     * @param {Unit} xEnd - The end value of the viewport on the x-axis.
+     * @returns {DataSeriesViewportIndexes} An object containing the calculated start and end indexes of the data viewport.
+     */
+    calculateDataViewportIndexes(xStart: Unit, xEnd: Unit): DataSeriesViewportIndexes;
+    /**
+     * Formats the given numerical value using the default value formatter.
+     *
+     * @param {number} value - The numerical value to be formatted.
+     * @returns {string} The formatted value as a string.
+     */
+    valueFormatter(value: number): string;
+    /**
+     * Returns the close value of the visual point at the given index, or 1 if the visual point is not defined.
+     * The index defaults to the data index start of the DataSeriesView.
+     *
+     * @param {number} [idx=this.dataIdxStart] - The index of the visual point to retrieve the close value for.
+     * @returns {Unit} The close value of the visual point at the given index, or 1 if the visual point is not defined.
+     */
+    getBaseLine: (idx?: number) => Unit;
+    /**
+     * Returns the string representation of the close value of the given visual point.
+     *
+     * @param {VisualSeriesPoint} point - The visual point to get the string representation of the close value for.
+     * @returns {string} The string representation of the close value of the given visual point.
+     */
+    getTextForPoint: (point: VisualSeriesPoint) => string;
+    /**
+     * Returns a two-dimensional array of the visual points in the viewport of the DataSeriesView.
+     * The viewport range can be customized by providing start and end units on the x-axis.
+     * If start or end units are not provided, the current viewport range of the DataSeriesView is used.
+     *
+     * @param {number} [xStart] - The start value of the viewport range on the x-axis.
+     * @param {number} [xEnd] - The end value of the viewport range on the x-axis.
+     * @returns {V[][]} A two-dimensional array of the visual points in the viewport of the DataSeriesView.
+     */
+    getSeriesInViewport(xStart?: number, xEnd?: number): V[][];
+    /**
+     * Returns last visible on the screen data series value
+     * @param seriesIndex
+     */
+    getLastVisualSeriesPoint: () => V | undefined;
+    /**
+     * Return last overall data series value (even if not visible)
+     * @param seriesIndex
+     */
+    getLastDataSeriesPoint: () => V | undefined;
+}
+export declare const calculateDataSeriesHighLow: (visualCandles: VisualSeriesPoint[]) => HighLowWithIndex;
+export declare const defaultValueFormatter: (value: number) => string;

package/dist/chart/model/data-series.model.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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{DataSeriesYAxisLabelsProvider as x}from"../components/y_axis/price_labels/data-series-y-axis-labels.provider";import{binarySearch as l,create2DArray as h,lastOf as P,slice2DArray as v}from"../utils/array.utils";import{floorToDPR as d}from"../utils/device/device-pixel-ratio.utils";import{MathUtils as g}from"../utils/math.utils";import{merge as p}from"../utils/merge.utils";import{cloneUnsafe as m}from"../utils/object.utils";import{ChartBaseElement as I}from"./chart-base-element";import{DataSeriesView as c}from"./data-series-view";import{DEFAULT_DATA_SERIES_CONFIG as u}from"./data-series.config";export class VisualSeriesPoint{constructor(t,i){this.centerUnit=t,this.close=i}y(t){return d(t.toY(this.close))}x(t){return d(t.toX(this.centerUnit))}clone(){return new VisualSeriesPoint(this.centerUnit,this.close)}}export class DataSeriesModel extends I{get dataPoints2D(){return this._dataPoints}get dataPoints(){return this._dataPointsFlat}set dataPoints(t){this._dataPoints=h(t),this._dataPointsFlat=this._dataPoints.flat(),this.visualPoints=this._toVisualPoints(this._dataPoints)}get visualPoints(){return this._visualPointsFlat}get visualPoints2D(){return this._visualPoints}set visualPoints(t){this._visualPoints=h(t),this._visualPointsFlat=this._visualPoints.flat()}constructor(t,i,e=m(u)){var a;super(),this.extentComponent=t,this.id=i,this.name="",this.hovered=!1,this._dataPoints=[],this.pricePrecisions=[2],this.linkedDataSeriesModels=[],this._dataPointsFlat=[],this._visualPoints=[],this._visualPointsFlat=[],this.dataIdxStart=0,this.dataIdxEnd=0,this.getPaintConfig=s=>{var n;return(n=this.config.paintConfig[s])!==null&&n!==void 0?n:this.config.paintConfig[0]},this.getBaseLine=(s=this.dataIdxStart)=>{var n,r;return(r=(n=this.visualPoints[s])===null||n===void 0?void 0:n.close)!==null&&r!==void 0?r:1},this.getTextForPoint=s=>`${s.close}`,this.getLastVisualSeriesPoint=()=>{const s=this.visualPoints,n=l(s,this.scaleModel.xEnd,r=>r.centerUnit).index;return s[n]},this.getLastDataSeriesPoint=()=>{const s=this.visualPoints;return P(s)},this.config=p(e,u),this.scaleModel=t.scaleModel,this.view=new c(this,this.scaleModel,()=>this.extentComponent.getAxisType(),this.getBaseLine),this.yAxisLabelProvider=new x(this,this.config,t.getYAxisBounds,(a=t.yAxisComponent)===null||a===void 0?void 0:a.state),this.highLowProvider=f(this),t.addDataSeries(this),this.activate()}doActivate(){this.addRxSubscription(this.scaleModel.xChanged.subscribe(()=>this.recalculateDataViewportIndexes())),this.addRxSubscription(this.scaleModel.scaleInversedSubject.subscribe(()=>this.recalculateVisualPoints()))}setDataPoints(t){this.dataPoints=t,this.extentComponent.paneComponent.updateView()}_toVisualPoints(t){return t.map(i=>this.toVisualPoints(i))}moveToExtent(t){var i;this.extentComponent.removeDataSeries(this),this.extentComponent=t,this.scaleModel=t.scaleModel,this.view=new c(this,this.scaleModel,()=>this.extentComponent.getAxisType(),this.getBaseLine),this.yAxisLabelProvider.yAxisBoundsProvider=t.getYAxisBounds,this.yAxisLabelProvider.axisState=(i=t.yAxisComponent)===null||i===void 0?void 0:i.state,this.deactivate(),this.activate(),t.addDataSeries(this)}toVisualPoints(t){return t.map((i,e)=>({centerUnit:e,close:i.close}))}setType(t){this.config.type=t,this.extentComponent.dataSeriesCanvasModel.fireDraw()}recalculateVisualPoints(){this.visualPoints=this._toVisualPoints(this.dataPoints2D)}recalculateDataViewportIndexes(t=this.scaleModel.xStart,i=this.scaleModel.xEnd){const{dataIdxStart:e,dataIdxEnd:a}=this.calculateDataViewportIndexes(t,i);this.dataIdxStart=e,this.dataIdxEnd=a}calculateDataViewportIndexes(t,i){const e=l(this.visualPoints,t,s=>s.centerUnit).index,a=l(this.visualPoints,i,s=>s.centerUnit).index;return{dataIdxStart:e,dataIdxEnd:a}}valueFormatter(t){return defaultValueFormatter(t)}getSeriesInViewport(t,i){let e=this.dataIdxStart,a=this.dataIdxEnd;if(i!==void 0&&t!==void 0){const s=this.calculateDataViewportIndexes(t,i);e=s.dataIdxStart,a=s.dataIdxEnd}return v(this.visualPoints2D,e,a)}}export const calculateDataSeriesHighLow=o=>{const t={high:Number.MIN_SAFE_INTEGER,low:Number.MAX_SAFE_INTEGER,highIdx:0,lowIdx:0};for(let i=0;i<o.length;i++){const e=o[i];e.close>t.high&&(t.high=e.close,t.highIdx=i),e.close<t.low&&(t.low=e.close,t.lowIdx=i)}return t};const f=o=>({isHighLowActive:()=>o.config.highLowActive,calculateHighLow:t=>{const i=calculateDataSeriesHighLow(o.getSeriesInViewport(t==null?void 0:t.xStart,t==null?void 0:t.xEnd).flat());return Object.assign(Object.assign({},i),{high:o.view.toAxisUnits(i.high),low:o.view.toAxisUnits(i.low)})}});export const defaultValueFormatter=o=>{const i=s=>Math.ceil(Math.log(Math.abs(s))*Math.LOG10E),a=((s,n=5)=>Math.max(0,n-Math.max(0,i(s))))(o);return g.makeDecimal(o,a)};

package/dist/chart/model/date-time.formatter.d.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { FullChartConfig, DateTimeFormatConfig } from '../chart.config';
+export interface TimeFormatterConfig {
+    shortDays?: string[];
+    shortMonths?: string[];
+}
+export interface DateTimeFormatter {
+    (date: Date | number): string;
+}
+export type DateTimeFormatterFactory = (format: string) => DateTimeFormatter;
+export declare const defaultDateTimeFormatter: () => (date: Date | number) => string;
+/**
+ * Default chart-core time formatter.
+ * @param config
+ * @param offsetFunction
+ * @doc-tags chart-core,default-config,date-formatter
+ */
+export declare const dateTimeFormatterFactory: (config: FullChartConfig, offsetFunction: (timezone: string) => (time: number) => Date) => DateTimeFormatterFactory;
+export declare const recalculateXFormatter: (xAxisLabelFormat: string | Array<DateTimeFormatConfig>, period: number, formatterFactory: (format: string) => (timestamp: number | Date) => string) => DateTimeFormatter;

package/dist/chart/model/date-time.formatter.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+export const defaultDateTimeFormatter=()=>e=>e.toString(),dateTimeFormatterFactory=(e,n)=>{var a;const d="date.get"+(n((a=e.timezone)!==null&&a!==void 0?a:"")?"":"UTC"),r={YYYY:t("FullYear"),YY:t("FullYear")+" % 100",MMM:s("shortMonths","Month"),MMMM:l(s("shortMonths","Month")),M:"1+"+t("Month"),d:t("Date"),H:t("Hours"),m:t("Minutes"),s:t("Seconds"),sss:t("Milliseconds"),EEE:s("shortDays","Day"),SSS:"this.addTwoZeros("+t("Milliseconds")+")",T:"date.getTime()"};["s","m","H","d","M"].forEach(function(o){r[o+o]="this.addZero("+r[o]+")"});const i=new RegExp(Object.keys(r).sort().reverse().join("|"),"g");function t(o){return d+o+"()"}function s(o,h){return"this."+o+"["+t(h)+"]"}function l(o){return o+".toUpperCase()"}function c(o){return"' + ("+r[o]+") + '"}return function(o){var h;const M={shortDays:p(e),shortMonths:f(e),addZero(u){return u<10?"0"+u:u},addTwoZeros(u){return(u<100?"0":"")+(u<10?"0":"")+u},tzDate:n((h=e.timezone)!==null&&h!==void 0?h:"")||function(u){return u instanceof Date?u:new Date(+u)}};return new Function("date","date=this.tzDate(date); return '"+o.replace(i,c)+"'").bind(M)}};function p(e){var n;return(n=e.shortDays)!==null&&n!==void 0?n:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}function f(e){var n;return(n=e.shortMonths)!==null&&n!==void 0?n:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}export const recalculateXFormatter=(e,n,a)=>{if(e){if(typeof e=="string")return a(e);if(Array.isArray(e)){const d=e.filter(r=>{if(r.showWhen){const i=[];return r.showWhen.periodLessThen&&i.push(()=>{var t,s;return n<((s=(t=r.showWhen)===null||t===void 0?void 0:t.periodLessThen)!==null&&s!==void 0?s:0)}),r.showWhen.periodMoreThen&&i.push(()=>{var t,s;return n>=((s=(t=r.showWhen)===null||t===void 0?void 0:t.periodMoreThen)!==null&&s!==void 0?s:0)}),i.every(t=>t())}else return!0});if(d.length>0){const r=d[0];if(r.format)return a(r.format);if(r.customFormatter)return r.customFormatter}}}return defaultDateTimeFormatter()};

package/dist/chart/model/hit-test-canvas.model.d.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { Observable } from 'rxjs';
+import { CanvasBoundsContainer } from '../canvas/canvas-bounds-container';
+import { CursorType, FullChartConfig } from '../chart.config';
+import { CanvasModel } from './canvas.model';
+import { DrawingManager } from '../drawers/drawing-manager';
+import EventBus from '../events/event-bus';
+import { CanvasInputListenerComponent, Point } from '../inputlisteners/canvas-input-listener.component';
+export type HitTestEvents = 'mousedown' | 'hover' | 'touchstart' | 'dblclick' | 'contextmenu' | 'zoom' | 'mouseup';
+type HitTestType = 'DRAWINGS' | 'DATA_SERIES' | 'EVENTS' | 'NEWS';
+export declare const HIT_TEST_ID_RANGE: Record<HitTestType, [number, number]>;
+/** HitTestCanvasModel
+ * Canvas layer for testing mouse events over the models such as Charts, Drawings, Volumes and etc.
+ * !!! always add new drawers to hit-test drawingManager BEFORE the DrawerType.HIT_TEST_DRAWINGS to save the hierarchy
+ *
+ * @doc-tags chart-core,hit-test
+ */
+export declare class HitTestCanvasModel extends CanvasModel {
+    private canvasInputListener;
+    private canvasBoundsContainer;
+    private hitTestSubscribers;
+    private eventsSubscriptions;
+    private hoverSubject;
+    private touchStartSubject;
+    private dblClickSubject;
+    private rightClickSubject;
+    constructor(eventBus: EventBus, canvas: HTMLCanvasElement, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, chartConfig: FullChartConfig, canvasModels: CanvasModel[], resizer?: HTMLElement);
+    /**
+     * Enables HitTestCanvasModel events listeners.
+     */
+    enableUserControls(): void;
+    /**
+     * Disables HitTestCanvasModel events listeners.
+     */
+    disableUserControls(): void;
+    /**
+     * Adds a new subscriber to the list of hit test subscribers.
+     * @param {HitTestSubscriber<unknown>} subscriber - The subscriber to be added.
+     * @returns {void}
+     */
+    addSubscriber(subscriber: HitTestSubscriber<unknown>): void;
+    /**
+     * Removes a subscriber from the list of hit test subscribers.
+     *
+     * @param {HitTestSubscriber<unknown>} subscriber - The subscriber to be removed.
+     * @returns {void}
+     */
+    removeSubscriber(subscriber: HitTestSubscriber<unknown>): void;
+    /**
+     * Converts a number to a hexadecimal color code.
+     * @param {number} id - The number to be converted.
+     * @returns {string} - The hexadecimal color code.
+     */
+    idToColor(id: number): string;
+    /**
+     * This function takes a number representing a color and returns the corresponding ID by dividing it by a big prime number.
+     *
+     * @param {number} color - The number representing the color.
+     * @returns {number} - The ID corresponding to the color.
+     */
+    colorToId(color: number): number;
+    /**
+     * Observes hovered on element event, provides hovered element model when move in.
+     */
+    observeHoverOnElement(): Observable<HitTestEvent>;
+    /**
+     * Observes touch start on element event, provides element model.
+     */
+    observeTouchStartOnElement(): Observable<HitTestEvent>;
+    /**
+     * Observes dblclicked on element event, provides dblclicked element model.
+     */
+    observeDblClickOnElement(): Observable<HitTestEvent>;
+    /**
+     * Observes rightclicked on element event, provides rightclicked element model.
+     */
+    observeRightClickOnElement(): Observable<HitTestEvent>;
+    private curImgData;
+    private prevAnimationFrameId;
+    /**
+     * Retrieves the pixel data at the specified coordinates.
+     *
+     * @private
+     * @param {number} x - The x-coordinate of the pixel.
+     * @param {number} y - The y-coordinate of the pixel.
+     * @returns {Uint8ClampedArray} - The pixel data at the specified coordinates.
+     */
+    private getPixel;
+    /**
+     * Resolves ht model based on the provided point
+     * @param point - The point for which to resolve model
+     */
+    resolveModel(point: Point): unknown;
+    /**
+     * Resolves cursor type based on the provided point
+     * @param point - The point for which to resolve cursor type
+     * @returns - The resolved cursor type, if any
+     */
+    resolveCursor(point: Point): CursorType | undefined;
+    /**
+     * Private method that handles hit test events.
+     * @param {Point} point - The point where the event occurred.
+     * @param {HitTestEvents} event - The type of event that occurred.
+     * @returns {void}
+     */
+    private eventHandler;
+}
+export interface HitTestSubscriber<T extends unknown = unknown> {
+    getIdRange(): [number, number];
+    lookup(id: number): T | undefined;
+    onMouseDown?(model: T | null, point?: Point): void;
+    onMouseUp?(model: T | null, point?: Point): void;
+    onHover?(model: T | null, point?: Point): void;
+    onTouchStart?(model: T | null, point?: Point): void;
+    onDblClick?(model: T, point?: Point): void;
+    onRightClick?(model: T, point?: Point): void;
+    onZoom?(model: T, point?: Point): void;
+    resolveCursor?(point: Point, model?: T): CursorType | undefined;
+}
+export interface HitTestEvent<T = unknown> {
+    readonly point: Point;
+    readonly model: T;
+}
+export {};

package/dist/chart/model/hit-test-canvas.model.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import{merge as C,Subject as d}from"rxjs";import{map as m,throttleTime as E}from"rxjs/operators";import{CanvasElement as x}from"../canvas/canvas-bounds-container";import{CanvasModel as H,initCanvasWithConfig as L}from"./canvas.model";import{animationFrameId as g}from"../utils/perfomance/request-animation-frame-throttle.utils";const k=317;export const HIT_TEST_ID_RANGE={DRAWINGS:[0,199],NEWS:[200,299],DATA_SERIES:[300,2999],EVENTS:[3e3,4e3]};export class HitTestCanvasModel extends H{constructor(e,s,i,n,u,o,a,b){super(e,s,u,a,b,{willReadFrequently:!0,desynchronized:!0}),this.canvasInputListener=i,this.canvasBoundsContainer=n,this.hitTestSubscribers=[],this.eventsSubscriptions=[],this.hoverSubject=new d,this.touchStartSubject=new d,this.dblClickSubject=new d,this.rightClickSubject=new d,this.curImgData=new Uint8ClampedArray(4),this.prevAnimationFrameId=-1,L(this,o),s.style.visibility="hidden",this.enableUserControls()}enableUserControls(){if(this.eventsSubscriptions.length===0){const e=this.canvasBoundsContainer.getBoundsHitTest(x.ALL_PANES),s=this.canvasInputListener.observeMouseMove().pipe(E(100,void 0,{trailing:!0})).subscribe(r=>this.eventHandler(r,"hover")),i=this.canvasInputListener.observeTouchStart().pipe(m(()=>this.canvasInputListener.currentPoint)).subscribe(r=>this.eventHandler(r,"touchstart")),n=C(this.canvasInputListener.observeMouseDown(e),this.canvasInputListener.observeTouchStart().pipe(m(()=>this.canvasInputListener.currentPoint))).subscribe(r=>this.eventHandler(r,"mousedown")),u=C(this.canvasInputListener.observeMouseUp(e),this.canvasInputListener.observeTouchEndDocument().pipe(m(()=>this.canvasInputListener.currentPoint))).subscribe(r=>this.eventHandler(r,"mouseup")),o=this.canvasInputListener.observeDbClick(e).subscribe(r=>this.eventHandler(r,"dblclick")),a=this.canvasInputListener.observeContextMenu(e).pipe(m(()=>Object.assign({},this.canvasInputListener.currentPoint))).subscribe(r=>{this.eventHandler(r,"contextmenu")}),b=this.canvasInputListener.observeWheel(e).subscribe(r=>setTimeout(()=>this.eventHandler(r,"zoom"),0));this.eventsSubscriptions.push(s,n,o,a,b,i,u)}}disableUserControls(){this.eventsSubscriptions.forEach(e=>e.unsubscribe()),this.eventsSubscriptions=[]}addSubscriber(e){this.hitTestSubscribers.push(e)}removeSubscriber(e){this.hitTestSubscribers=this.hitTestSubscribers.filter(s=>s===e)}idToColor(e){const s=(e*k).toString(16);return"#000000".substr(0,7-s.length)+s}colorToId(e){return e/k}observeHoverOnElement(){return this.hoverSubject.asObservable()}observeTouchStartOnElement(){return this.touchStartSubject.asObservable()}observeDblClickOnElement(){return this.dblClickSubject.asObservable()}observeRightClickOnElement(){return this.rightClickSubject.asObservable()}getPixel(e,s){const i=window.devicePixelRatio;return this.prevAnimationFrameId!==g&&(this.curImgData=this.ctx.getImageData(e*i,s*i,1,1).data,this.prevAnimationFrameId=g),this.curImgData}resolveModel(e){const s=this.getPixel(e.x,e.y),i=this.colorToId(s[0]*65536+s[1]*256+s[2]),n=Number(i),[u]=p(this.hitTestSubscribers,n);return u==null?void 0:u.lookup(i)}resolveCursor(e){var s;if(!this.hitTestSubscribers.some(b=>b.resolveCursor!==void 0))return;const i=this.getPixel(e.x,e.y),n=this.colorToId(i[0]*65536+i[1]*256+i[2]),u=Number(n),[o]=p(this.hitTestSubscribers,u),a=o==null?void 0:o.lookup(n);return(s=o==null?void 0:o.resolveCursor)===null||s===void 0?void 0:s.call(o,e,a)}eventHandler(e,s){var i,n,u,o,a,b,r;const S=this.getPixel(e.x,e.y),I=this.colorToId(S[0]*65536+S[1]*256+S[2]),f=Number(I),[t,h]=p(this.hitTestSubscribers,f),c=t==null?void 0:t.lookup(I),v={point:e,model:c};switch(s){case"mousedown":c&&((i=t==null?void 0:t.onMouseDown)===null||i===void 0||i.call(t,c,e)),h.forEach(l=>l.onMouseDown&&l.onMouseDown(null,e));break;case"mouseup":c&&((n=t==null?void 0:t.onMouseUp)===null||n===void 0||n.call(t,c,e)),h.forEach(l=>l.onMouseUp&&l.onMouseUp(null,e));break;case"hover":c&&((u=t==null?void 0:t.onHover)===null||u===void 0||u.call(t,c,e)),h.forEach(l=>l.onHover&&l.onHover(null,e)),this.hoverSubject.next(v);break;case"touchstart":c&&((o=t==null?void 0:t.onTouchStart)===null||o===void 0||o.call(t,c,e)),h.forEach(l=>l.onTouchStart&&l.onTouchStart(null,e)),this.touchStartSubject.next(v);break;case"dblclick":c&&((a=t==null?void 0:t.onDblClick)===null||a===void 0||a.call(t,c,e)),this.dblClickSubject.next(v);break;case"contextmenu":c&&((b=t==null?void 0:t.onRightClick)===null||b===void 0||b.call(t,c,e)),this.rightClickSubject.next(v);break;case"zoom":c&&((r=t==null?void 0:t.onZoom)===null||r===void 0||r.call(t,c,e)),h.forEach(l=>l.onZoom&&l.onZoom(null,e));break;default:break}}}const p=(T,e)=>{let s;const i=[];return T.forEach(n=>{const[u,o]=n.getIdRange();e>=u&&e<=o?s=n:i.push(n)}),[s,i]};

package/dist/chart/model/main-candle-series.model.d.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { ChartBaseModel } from '../components/chart/chart-base.model';
+import { ChartInstrument } from '../components/chart/chart.component';
+import { CandleWidthCalculator, VisualCandleCalculator } from '../components/chart/chart.model';
+import { YExtentComponent } from '../components/pane/extent/y-extent-component';
+import EventBus from '../events/event-bus';
+import { CandleSeriesColors, CandleSeriesModel } from './candle-series.model';
+import { Candle } from './candle.model';
+import { DataSeriesType } from './data-series.config';
+import { ScaleModel } from './scale.model';
+import VisualCandle from './visual-candle';
+/**
+ * This model represents main chart data series and is highly tied to chartBaseModel, @see ChartBaseModel
+ */
+export declare class MainCandleSeriesModel extends CandleSeriesModel {
+    private readonly baseModel;
+    constructor(baseModel: ChartBaseModel<'candle'>, extentComponent: YExtentComponent, id: number, eventBus: EventBus, scaleModel: ScaleModel, instrument: ChartInstrument, candlesTransformersByChartType: Partial<Record<DataSeriesType, VisualCandleCalculator>>, candleWidthByChartType: Partial<Record<DataSeriesType, CandleWidthCalculator>>, colors: CandleSeriesColors);
+    set visualPoints(candles: VisualCandle[] | VisualCandle[][]);
+    get visualPoints(): VisualCandle[];
+    set dataPoints(candles: Candle[] | Candle[][]);
+    get dataPoints(): Candle[];
+    recalculateMeanCandleWidth(visualCandles: VisualCandle[]): void;
+}

package/dist/chart/model/main-candle-series.model.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+import{CandleSeriesModel as r}from"./candle-series.model";export class MainCandleSeriesModel extends r{constructor(e,s,a,t,i,n,o,l,d){super(s,a,t,i,n,o,l,d),this.baseModel=e}set visualPoints(e){super.visualPoints=e,this.baseModel.mainVisualPoints=super.visualPoints}get visualPoints(){return super.visualPoints}set dataPoints(e){super.dataPoints=e,this.baseModel.mainDataPoints=super.dataPoints}get dataPoints(){return super.dataPoints}recalculateMeanCandleWidth(e){super.recalculateMeanCandleWidth(e),this.baseModel.meanDataWidth=this.meanCandleWidth}}

package/dist/chart/model/scale.model.d.ts

@@ -0,0 +1,180 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 } from 'rxjs';
+import { ChartConfigComponentsOffsets, ChartScale, FullChartConfig } from '../chart.config';
+import { CanvasAnimation } from '../animation/canvas-animation';
+import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
+import { ZoomXToZoomYRatio } from './scaling/lock-ratio.model';
+import { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
+import { BoundsProvider } from './bounds.model';
+export interface HighLowWithIndex {
+    high: Price;
+    low: Price;
+    highIdx: number;
+    lowIdx: number;
+}
+export interface ScaleHistoryItem {
+    xStart: Unit;
+    xEnd: Unit;
+    yStart: Unit;
+    yEnd: Unit;
+}
+export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
+export type ViewportPercent = number;
+type Constraints = (initialState: ViewportModelState, state: ViewportModelState) => ViewportModelState;
+/**
+ * The ScaleModel class represents the state of a chart's scale, including the current viewport, zoom level, and auto-scaling settings.
+ * It extends the ViewportModel class, which provides the underlying implementation for handling viewports and zoom levels.
+ * Controls current visible CHART viewport.
+ * Has additional logic:
+ * - auto-scale
+ * - locked scale
+ * - zooming functions
+ * - history
+ */
+export declare class ScaleModel extends ViewportModel {
+    config: FullChartConfig;
+    getBounds: BoundsProvider;
+    private canvasAnimation;
+    scaleInversedSubject: Subject<boolean>;
+    history: ScaleHistoryItem[];
+    autoScaleModel: AutoScaleViewportSubModel;
+    zoomXYRatio: ZoomXToZoomYRatio;
+    offsets: ChartConfigComponentsOffsets;
+    xConstraints: Constraints[];
+    readonly state: ChartScale;
+    constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
+    /**
+     * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
+     * The "constrait" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
+     * @param constraint
+     */
+    addXConstraint(constraint: Constraints): void;
+    /**
+     * The method updates the offsets for the scale model based on the provided "offsets" object.
+     * Note that the method modifies the offsets and triggers an autoscale
+     * @param offsets
+     */
+    updateOffsets(offsets: Partial<ChartConfigComponentsOffsets>): void;
+    /**
+     * @returns current offsets
+     */
+    getOffsets(): ChartConfigComponentsOffsets;
+    /**
+     * Zooms the X axis of the chart to a specified percentage of the viewport.
+     * @param viewportPercent The percentage of the viewport width to zoom to.
+     * @param zoomIn Whether to zoom in or out.
+     * @param forceNoAnimation Whether to skip animation.
+     * @param zoomSensitivity The sensitivity of the zoom.
+     */
+    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation?: boolean, zoomSensitivity?: number): void;
+    /**
+     * Zooms the X axis of the chart relativly to the end of the data range.
+     * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
+     * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
+     */
+    zoomXToEnd(zoomIn: boolean, zoomSensitivity?: number): void;
+    private haltAnimation;
+    private zoomXTo;
+    /**
+     * Moves the viewport to exactly xStart..xEnd place.
+     * (you need to fire DRAW event after this)
+     * @param xStart - viewport start in units
+     * @param xEnd - viewport end in units
+     * @param fireChanged
+     * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
+     */
+    setXScale(xStart: Unit, xEnd: Unit): void;
+    /**
+     * Moves both xStart and xEnd without changing the viewport width (zoom).
+     * WILL CHANGE the Y axis if scale.auto=true.
+     * @param xStart - starting point in units
+     */
+    moveXStart(xStart: Unit): void;
+    private scalePostProcessor;
+    /**
+     * Moves both yStart and yEnd without changing the viewport height (zoom).
+     * Will not move viewport if scale.auto=true
+     * @param yStart - starting point in units
+     */
+    moveYStart(yStart: Unit): void;
+    /**
+     * Automatically scales the chart to fit the data range.
+     * @param forceApply - If true, the chart will be forcefully auto-scaled even if animation is in progress.
+     */
+    doAutoScale(forceApply?: boolean): void;
+    /**
+     * Checks if viewport animation is currently in progress.
+     * @returns returns true if viewport animation is in progress, false otherwise.
+     */
+    isViewportAnimationInProgress(): boolean | undefined;
+    /**
+     * Adds an item to the scale history.
+     * @param item - The item to add to the history.
+     */
+    pushToHistory(item: ScaleHistoryItem): void;
+    /**
+     * Removes the most recent item from the scale history and returns it.
+     * @returns - The most recent item from the history, or undefined if the history is empty.
+     */
+    popFromHistory(): ScaleHistoryItem | undefined;
+    /**
+     * Clears the scale history.
+     */
+    clearHistory(): void;
+    /**
+     * Checks if the X axis bounds are the default values.
+     * @returns if false - it means there are candles and it's possible to do scaling and add drawings
+     */
+    isDefaultXBounds(): boolean;
+    /**
+     * Checks if the Y axis bounds are the default values.
+     * @returns if false - it means there are candles and it's possible to do scaling and add drawings
+     */
+    isDefaultYBounds(): boolean;
+    /**
+     * Checks if the scale is ready to be used.
+     * @returns - Returns true if the scale is ready, false otherwise.
+     */
+    isScaleReady(): boolean;
+    /**
+     * Enables or disables auto-scaling of the chart.
+     * @param auto - If true, the chart will be automatically scaled. If false, auto-scaling will be disabled.
+     */
+    autoScale(auto?: boolean): void;
+    /**
+     * Sets whether the price-to-bar ratio should be locked or not.
+     * @param value - If true, the price-to-bar ratio will be locked. If false, it will not be locked.
+     */
+    setLockPriceToBarRatio(value?: boolean): void;
+    /**
+     * Recalculates the zoom X/Y ratio based on the current zoom levels.
+     */
+    recalculateZoomXYRatio(): void;
+}
+/**
+ * The SyncedByXScaleModel class extends the ScaleModel class and adds support for synchronization with other ScaleModel instance, so both instances maintain the same X-axis bounds.
+ * This is useful for scenarios where multiple charts need to display the same X-axis data, but with different Y-axis scales.
+ */
+export declare class SyncedByXScaleModel extends ScaleModel {
+    private delegate;
+    config: FullChartConfig;
+    getBounds: BoundsProvider;
+    constructor(delegate: ViewportModel, config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
+    protected doActivate(): void;
+    get xStart(): Unit;
+    set xStart(value: Unit);
+    get xEnd(): Unit;
+    set xEnd(value: Unit);
+    get zoomX(): Zoom;
+    set zoomX(value: Zoom);
+    observeXChanged(): import("rxjs").Observable<{
+        start: number;
+        end: number;
+    }>;
+    fireChanged(): void;
+}
+export {};

package/dist/chart/model/scale.model.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 c}from"rxjs";import{startViewportModelAnimation as l}from"../animation/viewport-model-animation";import{cloneUnsafe as u}from"../utils/object.utils";import{AutoScaleViewportSubModel as d}from"./scaling/auto-scale.model";import{zoomConstraint as m}from"./scaling/constrait.functions";import{lockedYEndViewportCalculator as a,ratioFromZoomXY as p}from"./scaling/lock-ratio.model";import{moveXStart as f,moveYStart as S}from"./scaling/move-chart.functions";import{ViewportModel as g,compareStates as x}from"./scaling/viewport.model";import{zoomXToEndViewportCalculator as A,zoomXToPercentViewportCalculator as y}from"./scaling/x-zooming.functions";export const getDefaultHighLowWithIndex=()=>({high:Number.NEGATIVE_INFINITY,low:Number.POSITIVE_INFINITY,highIdx:0,lowIdx:0});export class ScaleModel extends g{constructor(t,s,e){super(),this.config=t,this.getBounds=s,this.canvasAnimation=e,this.scaleInversedSubject=new c,this.history=[],this.zoomXYRatio=0,this.xConstraints=[],this.scalePostProcessor=(o,i)=>this.xConstraints.reduce((n,h)=>h(o,n),i),this.state=u(t.scale),this.autoScaleModel=new d(this),this.offsets=this.config.components.offsets,this.addXConstraint((o,i)=>m(o,i,this.config.components.chart,this.getBounds))}addXConstraint(t){this.xConstraints=[...this.xConstraints,t]}updateOffsets(t){this.offsets=Object.assign(Object.assign({},this.offsets),t),this.doAutoScale(!0)}getOffsets(){return this.offsets}zoomXToPercent(t,s,e=!1,o=this.config.scale.zoomSensitivity){this.config.components.yAxis.type==="percent"&&this.haltAnimation();const i=this.export();y(this,i,t,o,s),this.zoomXTo(i,e)}zoomXToEnd(t,s=this.config.scale.zoomSensitivity){this.config.components.yAxis.type==="percent"&&this.haltAnimation();const e=this.export();A(this,e,s,t),this.zoomXTo(e)}haltAnimation(){var t;!((t=this.currentAnimation)===null||t===void 0)&&t.animationInProgress&&(this.currentAnimation.finishAnimation(),this.doAutoScale())}zoomXTo(t,s){const e=Object.assign({},t),o=this.scalePostProcessor(e,t);this.state.lockPriceToBarRatio&&a(o,this.zoomXYRatio),this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(o,!0),s?this.apply(o):l(this.canvasAnimation,this,o)}setXScale(t,s){const e=this.export();super.setXScale(t,s,!1);const o=this.export(),i=this.scalePostProcessor(e,o);this.state.lockPriceToBarRatio&&a(i,this.zoomXYRatio),this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(i,!0),this.apply(i)}moveXStart(t){const s=this.export(),e=Object.assign({},s);this.haltAnimation(),f(s,t);const o=this.scalePostProcessor(e,s);this.state.auto&&this.autoScaleModel.setAutoAndRecalculateState(o,!0),this.apply(o)}moveYStart(t){if(this.haltAnimation(),!this.state.auto){const s=this.export();S(s,t),this.apply(s)}}doAutoScale(t=!1){if(!this.isViewportAnimationInProgress()&&this.state.auto||t){const s=this.export();this.autoScaleModel.setAutoAndRecalculateState(s,!0),x(s,this.export())||this.apply(s)}}isViewportAnimationInProgress(){const t=this.currentAnimation;return t==null?void 0:t.animationInProgress}pushToHistory(t){this.history.push(t)}popFromHistory(){return this.history.pop()}clearHistory(){this.history=[]}isDefaultXBounds(){return this.xStart===0&&this.xEnd===0}isDefaultYBounds(){return this.yStart===0&&this.yEnd===0}isScaleReady(){return!this.isDefaultXBounds()&&!this.isDefaultYBounds()}autoScale(t=!0){this.config.components.yAxis.type==="percent"?this.state.auto=!0:this.state.auto=t,t&&(this.clearHistory(),this.doAutoScale())}setLockPriceToBarRatio(t=!1){const{type:s}=this.config.components.yAxis;if(s==="percent"||s==="logarithmic"){this.state.lockPriceToBarRatio=!1;return}t&&this.recalculateZoomXYRatio(),this.state.lockPriceToBarRatio=t}recalculateZoomXYRatio(){this.zoomXYRatio=p(this.zoomX,this.zoomY)}}export class SyncedByXScaleModel extends ScaleModel{constructor(t,s,e,o){super(s,e,o),this.delegate=t,this.config=s,this.getBounds=e}doActivate(){this.addRxSubscription(this.delegate.xChanged.subscribe(()=>this.doAutoScale(this.state.auto)))}get xStart(){return this.delegate.xStart}set xStart(t){this.delegate.xStart=t}get xEnd(){return this.delegate.xEnd}set xEnd(t){this.delegate.xEnd=t}get zoomX(){return this.delegate.zoomX}set zoomX(t){this.delegate.zoomX=t}observeXChanged(){return this.delegate.xChanged}fireChanged(){this.delegate.changed.next(),this.changed.next()}}