@devexperts/dxcharts-lite 1.0.2 → 2.0.0

package/dist/chart/canvas/canvas-chart-html.js

@@ -3,21 +3,19 @@
  * 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 default a=>`<div data-element="chartResizer" style="position: relative; min-height: 20px; height: 100%; width: 100%; touch-action: manipulation; z-index: 0;">
-	<div data-element="chartContainer" style="position: absolute; height: 100%; width: 100%;" class="chart chartArea--graph">
-		<div data-element="canvasArea" style="position: relative; height: 100%; width: 100%; touch-action: manipulation;">
-			<canvas data-element="snapshotCanvas" style="z-index: 0"></canvas>
-			<canvas data-element="backgroundCanvas" style="z-index: 1"></canvas>
-			<canvas data-element="mainCanvas" style="z-index: 2"></canvas>
-			<canvas data-element="staticDrawingCanvas" style="z-index: 3"></canvas>
-			<canvas data-element="dataSeriesCanvas" style="z-index: 5"></canvas>
-			<canvas data-element="overDataSeriesCanvas" style="z-index: 6"></canvas>
-			<canvas data-element="dynamicDrawingCanvas" style="z-index: 7"></canvas>
-			<canvas data-element="yAxisLabelsCanvas" style="z-index: 8"></canvas>
-			<canvas data-element="crossToolCanvas" style="z-index: 9"></canvas>
-			<canvas data-element="hitTestCanvas" style="z-index: 10"></canvas>
-${a?`			<p style="position: absolute; visibility: hidden;">If you have any suggestions or are experiencing any issues, please feel free to contact us at <a href="https://devexperts.com/dxcharts/">devexperts.com</a></p>
-`:""}		</div>
-	</div>
-</div>
-`;
+export default (devexpertsPromoLink) => '<div data-element="chartResizer" style="position: relative; min-height: 20px; height: 100%; width: 100%; touch-action: manipulation; z-index: 0;">\n' +
+    '\t<div data-element="chartContainer" style="position: absolute; height: 100%; width: 100%;" class="chart chartArea--graph">\n' +
+    '\t\t<div data-element="canvasArea" style="position: relative; height: 100%; width: 100%; touch-action: manipulation;">\n' +
+    '\t\t\t<canvas data-element="snapshotCanvas" style="z-index: 0"></canvas>\n' +
+    '\t\t\t<canvas data-element="backgroundCanvas" style="z-index: 1"></canvas>\n' +
+    '\t\t\t<canvas data-element="mainCanvas" style="z-index: 2"></canvas>\n' +
+    '\t\t\t<canvas data-element="dynamicObjectsCanvas" style="z-index: 3"></canvas>\n' +
+    '\t\t\t<canvas data-element="yAxisLabelsCanvas" style="z-index: 4"></canvas>\n' +
+    '\t\t\t<canvas data-element="crossToolCanvas" style="z-index: 5"></canvas>\n' +
+    '\t\t\t<canvas data-element="hitTestCanvas" style="z-index: 6"></canvas>\n' +
+    `${devexpertsPromoLink
+        ? '\t\t\t<p style="position: absolute; visibility: hidden;">If you have any suggestions or are experiencing any issues, please feel free to contact us at <a href="https://devexperts.com/dxcharts/">devexperts.com</a></p>\n'
+        : ''}` +
+    '\t\t</div>\n' +
+    '\t</div>\n' +
+    '</div>\n';

package/dist/chart/canvas/chart-elements.d.ts

@@ -8,10 +8,7 @@ export interface ChartElements {
     snapshotCanvas?: HTMLCanvasElement;
     backgroundCanvas?: HTMLCanvasElement;
     mainCanvas?: HTMLCanvasElement;
-    dataSeriesCanvas?: HTMLCanvasElement;
-    overDataSeriesCanvas?: HTMLCanvasElement;
-    staticDrawingCanvas?: HTMLCanvasElement;
-    dynamicDrawingCanvas?: HTMLCanvasElement;
+    dynamicObjectsCanvas?: HTMLCanvasElement;
     yAxisLabelsCanvas?: HTMLCanvasElement;
     crossToolCanvas?: HTMLCanvasElement;
     hitTestCanvas?: HTMLCanvasElement;

package/dist/chart/canvas/chart-elements.js

@@ -3,4 +3,25 @@
  * 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 validateChartElements=a=>{const n=a.canvasArea!==null,l=a.snapshotCanvas!==null,s=a.backgroundCanvas!==null,t=a.mainCanvas!==null,v=a.overDataSeriesCanvas!==null,i=a.staticDrawingCanvas!==null,o=a.dynamicDrawingCanvas!==null,c=a.yAxisLabelsCanvas!==null,r=a.crossToolCanvas!==null,e=a.hitTestCanvas!==null,C=a.chartResizer!==null,b=a.chartContainer!==null,A=a.dataSeriesCanvas!==null;return n&&l&&s&&t&&v&&i&&o&&c&&r&&e&&C&&b&&A};
+export const validateChartElements = (els) => {
+    const canvasAreaAvailable = els.canvasArea !== null;
+    const snapshotCanvasAvailable = els.snapshotCanvas !== null;
+    const backgroundCanvasAvailable = els.backgroundCanvas !== null;
+    const mainCanvasAvailable = els.mainCanvas !== null;
+    const yAxisLabelsCanvasAvailable = els.yAxisLabelsCanvas !== null;
+    const crossToolCanvasAvailable = els.crossToolCanvas !== null;
+    const hitTestCanvasAvailable = els.hitTestCanvas !== null;
+    const chartResizerAvailable = els.chartResizer !== null;
+    const chartContainerAvailable = els.chartContainer !== null;
+    const dynamicObjectsCanvasAvailable = els.dynamicObjectsCanvas !== null;
+    return (canvasAreaAvailable &&
+        snapshotCanvasAvailable &&
+        backgroundCanvasAvailable &&
+        mainCanvasAvailable &&
+        yAxisLabelsCanvasAvailable &&
+        crossToolCanvasAvailable &&
+        hitTestCanvasAvailable &&
+        chartResizerAvailable &&
+        chartContainerAvailable &&
+        dynamicObjectsCanvasAvailable);
+};

package/dist/chart/canvas/cursor.handler.js

@@ -3,4 +3,125 @@
  * 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 i}from"rxjs";import{distinctUntilChanged as n,throttleTime as a}from"rxjs/operators";import{ChartBaseElement as u}from"../model/chart-base-element";import{CanvasBoundsContainer as h}from"./canvas-bounds-container";export class CursorHandler extends u{constructor(e,t,s,r){super(),this.element=e,this.canvasInputListener=t,this.canvasBoundsContainer=s,this.hitTestCanvasModel=r,this.normalLayer=new Map,this.extensionLayer=new Map,this.cursorChangedSubject=new i}doActivate(){super.doActivate(),this.canvasInputListener.observeMouseMoveNoDrag().pipe(a(100,void 0,{trailing:!0})).subscribe(e=>{const t=this.hitTestCanvasModel.resolveCursor(e);if(t!==void 0){this.updateCursor(t);return}e&&(this.normalLayer.forEach(s=>{s.hitTest(e.x,e.y)&&this.updateCursor(s.cursor)}),this.extensionLayer.forEach(s=>{s.hitTest(e.x,e.y)&&this.updateCursor(s.cursor)}))})}setCursorForBounds(e,t,s,r=0){const o=h.hitTestOf(t,{extensionY:r});r?this.extensionLayer.set(e,{cursor:s,hitTest:o}):this.normalLayer.set(e,{cursor:s,hitTest:o})}setCursorForCanvasEl(e,t,s){this.observeCursorType(e,t,s)}removeCursorForCanvasEl(e){this.normalLayer.delete(e),this.extensionLayer.delete(e)}observeCursorChanged(){return this.cursorChangedSubject.pipe(n())}observeCursorType(e,t,s){const r=s?this.canvasBoundsContainer.getBoundsHitTest(e,{extensionY:s}):this.canvasBoundsContainer.getBoundsHitTest(e);s?this.extensionLayer.set(e,{cursor:t,hitTest:r}):this.normalLayer.set(e,{cursor:t,hitTest:r})}updateCursor(e){this.element.style.cursor!==e&&(this.element.style.cursor=e,this.cursorChangedSubject.next(e))}}
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
+import { ChartBaseElement } from '../model/chart-base-element';
+import { CanvasBoundsContainer } from './canvas-bounds-container';
+/**
+ * This class is responsible for changing cursor for different entities which are drawn on the canvas.
+ * @doc-tags chart-core,cursor
+ */
+export class CursorHandler extends ChartBaseElement {
+    constructor(element, canvasInputListener, canvasBoundsContainer, hitTestCanvasModel) {
+        super();
+        this.element = element;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.hitTestCanvasModel = hitTestCanvasModel;
+        this.normalLayer = new Map();
+        this.extensionLayer = new Map();
+        this.cursorChangedSubject = new Subject();
+    }
+    /**
+     * This method is called when the user activates the canvas. It subscribes to the mouse move event and checks if the mouse pointer is over any of the elements in the normalLayer or extensionLayer. If the mouse pointer is over any of the elements, it updates the cursor to the corresponding cursor of the element.
+     */
+    doActivate() {
+        super.doActivate();
+        this.canvasInputListener
+            .observeMouseMoveNoDrag()
+            .pipe(throttleTime(100, undefined, { trailing: true }))
+            .subscribe(point => {
+            const cursorFromHT = this.hitTestCanvasModel.resolveCursor(point);
+            if (cursorFromHT !== undefined) {
+                this.updateCursor(cursorFromHT);
+                return;
+            }
+            if (point) {
+                this.normalLayer.forEach(val => {
+                    if (val.hitTest(point.x, point.y)) {
+                        this.updateCursor(val.cursor);
+                    }
+                });
+                this.extensionLayer.forEach(val => {
+                    if (val.hitTest(point.x, point.y)) {
+                        this.updateCursor(val.cursor);
+                    }
+                });
+            }
+        });
+    }
+    /***
+     * @param elId
+     * @param bounds
+     * @param cursorType
+     * @param extension is an extra area beyond the borders of the bounds
+     */
+    setCursorForBounds(elId, bounds, cursorType, extension = 0) {
+        const hitTest = CanvasBoundsContainer.hitTestOf(bounds, { extensionY: extension });
+        if (extension) {
+            // extension layer has a higher priority, so if its hitTest intersects with other hitTests
+            // the cursor will be of type specified in extension layer
+            this.extensionLayer.set(elId, { cursor: cursorType, hitTest });
+        }
+        else {
+            this.normalLayer.set(elId, { cursor: cursorType, hitTest });
+        }
+    }
+    /**
+     * Sets a cursor for a canvas element
+     * @param {string} canvasEl - The canvas element to add the cursor to
+     * @param {CursorType} cursor - The type of cursor to add
+     * @param {number} [extensionRadius] - The extension radius of the cursor
+     */
+    setCursorForCanvasEl(canvasEl, cursor, extensionRadius) {
+        this.observeCursorType(canvasEl, cursor, extensionRadius);
+    }
+    /**
+     * Removes the cursor for a given canvas element.
+     *
+     * @param {string} canvasEl - The canvas element to remove the cursor from.
+     * @returns {void}
+     */
+    removeCursorForCanvasEl(canvasEl) {
+        this.normalLayer.delete(canvasEl);
+        this.extensionLayer.delete(canvasEl);
+    }
+    /**
+     * Returns an Observable that emits the latest CursorType value whenever the cursorChangedSubject emits a new value.
+     * The emitted value is guaranteed to be distinct from the previous one.
+     * @returns {Observable<CursorType>} An Observable that emits the latest CursorType value.
+     */
+    observeCursorChanged() {
+        return this.cursorChangedSubject.pipe(distinctUntilChanged());
+    }
+    /**
+     * Sets the cursor type for a given canvas element and optionally extends the hit test area.
+     * @param {string} canvasElement - The ID of the canvas element to observe.
+     * @param {CursorType} cursorType - The type of cursor to set.
+     * @param {number} [extensionY] - Optional extension of the hit test area in the Y axis.
+     * @returns {void}
+     */
+    observeCursorType(canvasElement, cursorType, extensionY) {
+        const hitTest = extensionY
+            ? this.canvasBoundsContainer.getBoundsHitTest(canvasElement, { extensionY })
+            : this.canvasBoundsContainer.getBoundsHitTest(canvasElement);
+        if (extensionY) {
+            this.extensionLayer.set(canvasElement, { cursor: cursorType, hitTest });
+        }
+        else {
+            this.normalLayer.set(canvasElement, { cursor: cursorType, hitTest });
+        }
+    }
+    /**
+     * Updates the cursor type of an element based on the mouse enter or leave event.
+     * @param {CursorType} cursorType - The type of cursor to be set on the element.
+     * @returns {void}
+     */
+    updateCursor(cursorType) {
+        if (this.element.style.cursor === cursorType) {
+            return;
+        }
+        this.element.style.cursor = cursorType;
+        this.cursorChangedSubject.next(cursorType);
+    }
+}

package/dist/chart/canvas/layout-creator.js

@@ -3,4 +3,37 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{validateChartElements as o}from"./chart-elements";import l from"./canvas-chart-html";export function createDefaultLayoutTemplate(t){const e=document.createElement("template");return e.innerHTML=l(t.devexpertsPromoLink),e}export function extractElements(t){const e={},n=Array.from(t.querySelectorAll("[data-element]"));if(n.length!==0&&n.forEach(a=>{var r;e[(r=a.getAttribute("data-element"))!==null&&r!==void 0?r:""]=a}),o(e))return e;throw new Error("Some chart elements are missing")}
+import { validateChartElements } from './chart-elements';
+import generateNewCanvasChartHTML from './canvas-chart-html';
+/**
+ * Creates a default layout template for a canvas chart.
+ * @function
+ * @returns {HTMLTemplateElement} - The default layout template for a canvas chart.
+ */
+export function createDefaultLayoutTemplate(config) {
+    const template = document.createElement('template');
+    template.innerHTML = generateNewCanvasChartHTML(config.devexpertsPromoLink);
+    return template;
+}
+/**
+ * Extracts chart elements from a given container and returns them as a validated object.
+ * @param {Element} container - The container element to search for chart elements.
+ * @returns {ValidatedChartElements} - An object containing the chart elements as properties.
+ * @throws {Error} - If some chart elements are missing.
+ */
+export function extractElements(container) {
+    const result = {};
+    const elements = Array.from(container.querySelectorAll('[data-element]'));
+    if (elements.length !== 0) {
+        elements.forEach(el => {
+            var _a;
+            result[(_a = el.getAttribute('data-element')) !== null && _a !== void 0 ? _a : ''] = el;
+        });
+    }
+    if (validateChartElements(result)) {
+        return result;
+    }
+    else {
+        throw new Error('Some chart elements are missing');
+    }
+}

package/dist/chart/canvas/y-axis-bounds.container.d.ts

@@ -3,12 +3,12 @@
  * 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, YAxisAlign } from '../chart.config';
+import { YAxisConfig, FullChartConfig } from '../chart.config';
 import { CanvasModel } from '../model/canvas.model';
 export interface YAxisWidthContributor {
     getLargestLabel: () => string;
     getYAxisIndex: () => number;
-    getYAxisAlign: () => YAxisAlign;
+    getYAxisState: () => YAxisConfig;
     getPaneUUID: () => string;
 }
 export type ExtentsOrder = Map<string, // uuid of the pane

package/dist/chart/canvas/y-axis-bounds.container.js

@@ -3,4 +3,70 @@
  * 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 g}from"../chart.config";import{calculateTextWidth as c}from"../utils/canvas/canvas-font-measure-tool.utils";export class YAxisBoundsContainer{constructor(t,i){this.config=t,this.mainCanvasModel=i,this.extentsOrder=new Map,this.yAxisWidthContributors=[]}registerYAxisWidthContributor(t){this.yAxisWidthContributors.push(t)}removeYAxisWidthContributor(t){this.yAxisWidthContributors=this.yAxisWidthContributors.filter(i=>i!==t)}getTextWidth(t){const i=g(this.config.components.yAxis);return c(t,this.mainCanvasModel.ctx,i)}getYAxisWidths(){this.extentsOrder.clear();const t=[],i=[],l=this.config.components.yAxis.labelBoxMargin.start+this.config.components.yAxis.labelBoxMargin.end;return this.yAxisWidthContributors.forEach(n=>{var o,r,h;const x=this.getTextWidth(n.getLargestLabel())+l,a=n.getYAxisIndex(),d=n.getPaneUUID(),s=(o=this.extentsOrder.get(d))!==null&&o!==void 0?o:{left:[],right:[]};if(n.getYAxisAlign()==="left"){const e=s.left.length;t[e]=Math.max((r=t[e])!==null&&r!==void 0?r:0,x),s.left.push(a)}else{const e=s.right.length;i[e]=Math.max((h=i[e])!==null&&h!==void 0?h:0,x),s.right.push(a)}this.extentsOrder.set(d,s)}),{left:t,right:i}}}
+import { getFontFromConfig } from '../chart.config';
+import { calculateTextWidth } from '../utils/canvas/canvas-font-measure-tool.utils';
+export class YAxisBoundsContainer {
+    constructor(config, mainCanvasModel) {
+        this.config = config;
+        this.mainCanvasModel = mainCanvasModel;
+        this.extentsOrder = new Map();
+        this.yAxisWidthContributors = [];
+    }
+    /**
+     * Registers a YAxisWidthContributor to the chart.
+     *
+     * @param {YAxisWidthContributor} contributor - The YAxisWidthContributor to be registered.
+     * @returns {void}
+     */
+    registerYAxisWidthContributor(contributor) {
+        this.yAxisWidthContributors.push(contributor);
+    }
+    /**
+     * Removes a YAxisWidthContributor from the chart.
+     *
+     * @param {YAxisWidthContributor} contributor - The YAxisWidthContributor to be removed.
+     * @returns {void}
+     */
+    removeYAxisWidthContributor(contributor) {
+        this.yAxisWidthContributors = this.yAxisWidthContributors.filter(c => c !== contributor);
+    }
+    /**
+     * Calculates the width of a given text using the font from the yAxis component of the chart configuration
+     * @param {string} text - The text to calculate the width of
+     * @returns {number} - The width of the text in pixels
+     */
+    getTextWidth(text) {
+        const font = getFontFromConfig(this.config.components.yAxis);
+        return calculateTextWidth(text, this.mainCanvasModel.ctx, font);
+    }
+    /**
+     * Updates width of Y axis.
+     * Considers max text of YAxis labels.
+     */
+    getYAxisWidths() {
+        this.extentsOrder.clear();
+        const left = [];
+        const right = [];
+        this.yAxisWidthContributors.forEach(c => {
+            var _a, _b, _c;
+            const state = c.getYAxisState();
+            const margin = state.labelBoxMargin.start + state.labelBoxMargin.end;
+            const width = this.getTextWidth(c.getLargestLabel()) + margin;
+            const idx = c.getYAxisIndex();
+            const uuid = c.getPaneUUID();
+            const extentOrder = (_a = this.extentsOrder.get(uuid)) !== null && _a !== void 0 ? _a : { left: [], right: [] };
+            if (state.align === 'left') {
+                const i = extentOrder.left.length;
+                left[i] = Math.max((_b = left[i]) !== null && _b !== void 0 ? _b : 0, width);
+                extentOrder.left.push(idx);
+            }
+            else {
+                const i = extentOrder.right.length;
+                right[i] = Math.max((_c = right[i]) !== null && _c !== void 0 ? _c : 0, width);
+                extentOrder.right.push(idx);
+            }
+            this.extentsOrder.set(uuid, extentOrder);
+        });
+        return { left, right };
+    }
+}

package/dist/chart/chart-container.js

@@ -3,4 +3,4 @@
  * 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{};
+export {};

package/dist/chart/chart.config.d.ts

@@ -223,7 +223,7 @@ export interface ChartScale {
      */
     lockPriceToBarRatio: boolean;
     /**
-     * Inverses the Y scale vertically. TODO move to components.yAxis.
+     * Inverses the Y scale vertically.
      */
     inverse: boolean;
     /**
@@ -261,7 +261,7 @@ export interface AutoScaleDisableOnDrag {
 export interface ChartComponents {
     chart: ChartConfigComponentsChart;
     xAxis: ChartConfigComponentsXAxis;
-    yAxis: ChartConfigComponentsYAxis;
+    yAxis: YAxisConfig;
     grid: GridComponentConfig;
     volumes: ChartConfigComponentsVolumes;
     offsets: ChartConfigComponentsOffsets;
@@ -362,7 +362,7 @@ export interface ChartConfigComponentsXAxis {
     fontStyle: string;
 }
 export type YAxisAlign = 'left' | 'right';
-export interface ChartConfigComponentsYAxis {
+export interface YAxisConfig {
     visible: boolean;
     /**
      * Type of Y axis. Currently supported 'regular', 'percent', 'logarithmic'.
@@ -699,7 +699,6 @@ export interface ChartAreaTheme {
     backgroundColor: string;
     backgroundGradientTopColor: string;
     backgroundGradientBottomColor: string;
-    axisColor: string;
     gridColor: string;
 }
 export type ChartColors = DeepPartial<FullChartColors>;
@@ -771,4 +770,4 @@ export interface ChartConfigComponentsEventsIcons {
     conferenceCalls?: CustomIcon;
 }
 export type CursorType = string;
-export declare const getFontFromConfig: (config: ChartConfigComponentsYAxis) => string;
+export declare const getFontFromConfig: (config: YAxisConfig) => string;