npm - @devexperts/dxcharts-lite - Versions diffs - 2.7.5 → 2.7.7 - Mend

@devexperts/dxcharts-lite 2.7.5 → 2.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/README.md CHANGED Viewed

@@ -3,14 +3,14 @@
   <img src="docs/images/logo.png" alt="devexperts-logo" width="294px" height="100px"/>
 </p>
-<h1 align="center">DXCharts Lite - one of the most powerful financial charting tools</h1>
+<h1 align="center">DXCharts Lite: Powerful financial charting tool</h1>
 <p align="center">
   <i>
-    DXcharts Lite is a modern solution made for visualization financial data with full variety of charts.<br>
-    It's been created and tempered as a part of big tradings apps with millions of users.<br>
-    Now it's grown enough to be recognized as independent product capable to support any from your needs<br>
-    as a simple widget for blog and as a part of big enterprise solution for trading.
+    DXcharts Lite is a modern solution for visualizing financial data with a wide variety of chart types.<br>
+    Originally developed as part of large tradings applications used by millions of users,<br>
+	  DXcharts Lite has matured into an independent product.<br>
+    It can be used as a simple widget for blogs or as a component in enterprise trading solutions.<br>
   </i>
   <br>
 </p>
@@ -37,7 +37,7 @@
 ## Overview
-Get started with DXCharts Lite, install the library and configure it as you want.
+Get started with DXCharts Lite by installing the library and configuring it to your needs.
 -   🚀 [Quick start](#quick-start)
     -   📦 [Installation](#installation)
@@ -53,7 +53,7 @@ Get started with DXCharts Lite, install the library and configure it as you want
 ### Installation
-Install library to your project:
+Install the library in your project:
 ```js
 npm install @devexperts/dxcharts-lite
@@ -70,7 +70,7 @@ Your `package.json` after installation:
 ### Create chart
-If you use webpack or any other bundler - import `createChart` method and pass element where the chart will be rendered as a first argument.
+If you use webpack or another bundler, import the `createChart` method and pass the element where the chart will be rendered as the first argument.
 ```js
 export const createChartInstance = () => {
@@ -80,23 +80,22 @@ export const createChartInstance = () => {
 };
 ```
-`createChart` - method, that creates a new chart instance using ChartBootstrap class and returns it.
+The `createChart` method creates a new chart instance using `ChartBootstrap` class and returns it.
-Method accepts 2 parameters:
+It accepts two parameters:
--   `element` - The HTML element where the chart will be rendered
--   `config` (optional) - instance of [ChartConfig](/chart/chart-config/overview)
+-   `element`: The HTML element where the chart will be rendered.
+-   `config` (optional): An instance of [ChartConfig](/chart/chart-config/overview).
-> Also, please, set `width: 100%` and `height: 100%` for parent container
-> by default chart is auto-resizing to parent
-> you can change it by setting `fixedSize` in config
+> Note: Set `width: 100%` and `height: 100%` for the parent container.
+> By default, the chart auto-resizes to the parent, but you can change this by setting `fixedSize` in the config.
-Now you should have empty chart on screen.
+You should now see an empty chart on the screen.
 ### Set data
-Let's pass in some data i.e. `Candles`. You can use bundled function to generate some mock data.
-Import `generateCandlesData` and call it to generate candles.
+To display data (e.g. `Candles`), you can use the bundled function to generate mock data.
+Import `generateCandlesData` and use it to generate candles.
 ```js
 export const generateMockData = () => {
@@ -105,7 +104,7 @@ export const generateMockData = () => {
 };
 ```
-Now you should see chart just like image below:
+You should now see a basic chart like the image below:
 <p align="center">
   <img src="docs/images/basicchart.png" width="1000px" alt="Basic chart"/>
@@ -113,7 +112,7 @@ Now you should see chart just like image below:
 ### HTML-markup
-Here is full quick-start code example:
+Here is complete quick-start code example:
 ```html
 <html>
@@ -145,39 +144,38 @@ Here is full quick-start code example:
 ## Configuration
-You can configure chart with `ChartConfig` object. It is optional.
+You can configure the chart using a `ChartConfig` object (optional).
-`ChartConfig` is used to set initial properties for chart instance.
-Below you can see full table of it, and other options, that `ChartConfig` consists of.
+`ChartConfig` sets the initial properties for the chart instance.
+Below is a table of available options (see documentation for details).
 -   [`FullChartConfig`](docs/generated/FullChartConfig.md)
 ## API
-Every chart component has an API allowing change a lot of params on the fly.
-Change appearance at runtime.
-Subscribe on different events in chart (like HOVER on candle)
-Here are the links of the main components:
--   [`ChartComponent`](docs/generated/ChartComponent.md) - set data, subscribe on data changes
--   [`XAxisComponent`](docs/generated/XAxisComponent.md) - configure x-labels
--   [`YAxisComponent`](docs/generated/YAxisComponent.md) - configure labels and set y-axis type
--   [`CrossToolComponent`](docs/generated/CrossToolComponent.md) - cross-hair type, OHLC magnet
--   [`EventsComponent`](docs/generated/EventsComponent.md) - set events data
--   [`VolumesComponent`](docs/generated/VolumesComponent.md) - set volumes
--   [`WaterMarkComponent`](docs/generated/WaterMarkComponent.md) - create and manage a watermark
--   [`NavigationMapComponent`](docs/generated/NavigationMapComponent.md) - create a navigation map
--   [`SnapshotComponent`](docs/generated/SnapshotComponent.md) - create a snapshot
--   [`HighlightsComponent`](docs/generated/HighlightsComponent.md) - allows to draw highlights of some canvas objects such as labels
--   [`PaneManager`](docs/generated/PaneManager.md) - create and manage panes
--   [`PaneComponent`](docs/generated/PaneComponent.md) - create and manage panes data series
+Each chart component has an API that allows you to change many parameters on the fly, modify appearance at runtime, and subscribe to various chart events (such as hovering over a candle).
+Main components include:
+-   [`ChartComponent`](docs/generated/ChartComponent.md): Set data, subscribe to data changes
+-   [`XAxisComponent`](docs/generated/XAxisComponent.md): Configure x-axis labels
+-   [`YAxisComponent`](docs/generated/YAxisComponent.md): Configure y-axis labels and type
+-   [`CrossToolComponent`](docs/generated/CrossToolComponent.md): Crosshair type, OHLC magnet
+-   [`EventsComponent`](docs/generated/EventsComponent.md): Set events data
+-   [`VolumesComponent`](docs/generated/VolumesComponent.md): Set volume data
+-   [`WaterMarkComponent`](docs/generated/WaterMarkComponent.md): Create and manage a watermark
+-   [`NavigationMapComponent`](docs/generated/NavigationMapComponent.md): Create a navigation map
+-   [`SnapshotComponent`](docs/generated/SnapshotComponent.md): Create a snapshot
+-   [`HighlightsComponent`](docs/generated/HighlightsComponent.md): Draw highlights on canvas objects such as labels
+-   [`PaneManager`](docs/generated/PaneManager.md): Create and manage panes
+-   [`PaneComponent`](docs/generated/PaneComponent.md): Create and manage pane data series
 ## Examples
-We have created a lot of examples with different chart configuration.
+We have created many examples with different chart configurations.
 You can find them [here](https://github.com/devexperts/dxcharts-lite/tree/master/docs/how-to).
 ## Demo
-To show you how it's beautiful, we have created [Demo version](https://devexperts.com/dxcharts-demo/), based on DXCharts Lite. Feel all power of our library!
+To demonstrate its capabilities, we've created a [Demo version](https://devexperts.com/dxcharts-demo/) based on DXCharts Lite.
+Explore the full power of our library!

package/dist/chart/canvas/canvas-bounds-container.d.ts CHANGED Viewed

@@ -63,6 +63,7 @@ export declare class CanvasBoundsContainer {
     canvasOnPageLocation: Bounds;
     panesOrder: Array<string>;
     panesOrderChangedSubject: Subject<string[]>;
+    paneMovedSubject: Subject<void>;
     paneVisibilityChangedSubject: Subject<void>;
     xAxisHeight: number | undefined;
     yAxisWidths: YAxisWidths;

package/dist/chart/canvas/canvas-bounds-container.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
 /*
  * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
@@ -74,6 +79,7 @@ export class CanvasBoundsContainer {
         // holds ordered "top to bottom" array of panes UUID's (studies in past)
         this.panesOrder = [];
         this.panesOrderChangedSubject = new Subject();
+        this.paneMovedSubject = new Subject();
         this.paneVisibilityChangedSubject = new Subject();
         // both will be calculated based on font/content size
         this.xAxisHeight = undefined;
@@ -147,6 +153,7 @@ export class CanvasBoundsContainer {
             this.recalculateBounds();
             this.eventBus.fireDraw();
             this.panesOrderChangedSubject.next(this.panesOrder);
+            this.paneMovedSubject.next();
         }
     }
     /**
@@ -161,6 +168,7 @@ export class CanvasBoundsContainer {
             this.recalculateBounds();
             this.eventBus.fireDraw();
             this.panesOrderChangedSubject.next(this.panesOrder);
+            this.paneMovedSubject.next();
         }
     }
     /**

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

@@ -200,6 +200,7 @@ export interface FullChartConfig extends TimeFormatterConfig {
      * Initial visual order of chart drawers. Reorder to put volumes on top of candles for example.
      */
     drawingOrder: DrawerType[];
+    intlFormatter: IntlFormatter;
     useUTCTimeOverride: boolean;
     animation: AnimationConfig;
     devexpertsPromoLink: boolean;
@@ -265,6 +266,10 @@ export interface AutoScaleDisableOnDrag {
      */
     yDiff: number;
 }
+export interface IntlFormatter {
+    decimalSeparator?: string;
+    thousandsSeparator?: string;
+}
 export interface ChartComponents {
     chart: ChartConfigComponentsChart;
     xAxis: ChartConfigComponentsXAxis;

package/dist/chart/chart.config.js CHANGED Viewed

@@ -30,6 +30,10 @@ export const getDefaultConfig = () => ({
     shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     rtl: false,
+    intlFormatter: {
+        decimalSeparator: '.',
+        thousandsSeparator: '',
+    },
     scale: {
         keepZoomXOnYAxisChange: true,
         auto: true,

package/dist/chart/components/chart/candle.functions.js CHANGED Viewed

@@ -35,6 +35,7 @@ export const prepareCandle = (candle) => {
             idx: candle.idx,
             impVolatility: candle.impVolatility,
             vwap: preparedVwap,
+            typicalPrice: candle.typicalPrice,
         };
     }
     catch (e) {

package/dist/chart/components/highlights/highlights.drawer.js CHANGED Viewed

@@ -66,7 +66,10 @@ export class HighlightsDrawer {
                             const fromXCandle = this.chartModel.candleFromTimestamp(item.from);
                             const fromXCandleWidth = unitToPixels(fromXCandle.width, this.chartModel.scale.zoomX);
                             const fromX = fromXCandle.xStart(this.chartModel.scale);
-                            const toXCandle = this.chartModel.candleFromTimestamp(item.to);
+                            // currently endTime timestamp for PRE_MARKET type includes same timestamp for REGULAR type startTime
+                            // so we have to take previous timestamp based on current period to exclude PRE_MARKET highlighting
+                            const xCandleTimestamp = item.to - this.chartModel.chartBaseModel.period;
+                            const toXCandle = this.chartModel.candleFromTimestamp(xCandleTimestamp);
                             const toXCandleWidth = unitToPixels(toXCandle.width, this.chartModel.scale.zoomX);
                             const toX = toXCandle.xStart(this.chartModel.scale) + toXCandleWidth;
                             // draw highlight' borders

package/dist/chart/components/pane/extent/y-extent-component.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export interface YExtentCreationOptions {
     paneFormatters: YExtentFormatters;
     increment: number | null;
     initialYAxisState: YAxisConfig;
+    inverse: boolean;
+    lockToPriceRatio: boolean;
 }
 export declare class YExtentComponent extends ChartBaseElement {
     paneUUID: string;
@@ -71,7 +73,7 @@ export declare class YExtentComponent extends ChartBaseElement {
      */
     removeDataSeries(series: DataSeriesModel): void;
     valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;
-    get regularFormatter(): (value: number) => string;
+    get regularFormatter(): (value: number, precision?: number | undefined) => string;
     /**
      * Sets the pane value formatters for the current instance.
      * @param {YExtentFormatters} formatters - The pane value formatters to be set.

package/dist/chart/components/pane/extent/y-extent-component.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
 /*
  * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
@@ -35,9 +40,20 @@ export class YExtentComponent extends ChartBaseElement {
             return (_b = (_a = this.mainDataSeries) === null || _a === void 0 ? void 0 : _a.view.toY(value)) !== null && _b !== void 0 ? _b : 1;
         };
         this.valueFormatter = (value, dataSeries) => {
-            var _a;
-            const formatter = (_a = this.formatters[this.yAxis.getAxisType()]) !== null && _a !== void 0 ? _a : this.formatters.regular;
-            return formatter(value, dataSeries);
+            if (!this.formatters[this.yAxis.getAxisType()]) {
+                return this.formatters.regular(value);
+            }
+            const { regular, percent, logarithmic } = this.formatters;
+            switch (this.yAxis.getAxisType()) {
+                case 'regular':
+                    return this.formatters.regular(value);
+                case 'percent':
+                    return percent ? percent(value, dataSeries) : regular(value);
+                case 'logarithmic':
+                    return logarithmic ? logarithmic(value) : regular(value);
+                default:
+                    return this.regularFormatter(value);
+            }
         };
         this.addChildEntity(scale);
         this.setValueFormatters(createYExtentFormatters(this));

package/dist/chart/components/pane/pane-manager.component.js CHANGED Viewed

@@ -195,11 +195,16 @@ export class PaneManager extends ChartBaseElement {
     moveDataSeriesToPane(dataSeries, initialPane, initialExtent, options) {
         const { paneUUID, extent, direction, align, extentIdx, isForceKeepPane, index = 0 } = options;
         const pane = paneUUID && this.panes[paneUUID];
-        const initialYAxisState = align ? Object.assign(Object.assign({}, this.panes[CHART_UUID].yAxis.state), { align }) : undefined;
+        const initialYAxisState = align ? Object.assign(Object.assign({}, initialExtent.yAxis.state), { align }) : undefined;
         const onNewScale = extentIdx && extentIdx > 0;
         if (!pane) {
             const order = direction && direction === 'above' ? index : index + 1;
-            const newPane = this.createPane(paneUUID, { order, initialYAxisState });
+            const newPane = this.createPane(paneUUID, {
+                order,
+                initialYAxisState,
+                inverse: initialExtent.scale.state.inverse,
+                lockToPriceRatio: initialExtent.scale.state.lockPriceToBarRatio,
+            });
             newPane.moveDataSeriesToExistingExtentComponent(dataSeries, initialPane, initialExtent, newPane.mainExtent, isForceKeepPane);
             !isForceKeepPane && initialPane.yExtentComponents.length === 0 && this.removePane(initialPane.uuid);
             return;

package/dist/chart/components/pane/pane.component.d.ts CHANGED Viewed

@@ -160,7 +160,7 @@ export declare class PaneComponent extends ChartBaseElement {
      */
     canMoveDown(): boolean;
     valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;
-    get regularFormatter(): (value: number) => string;
+    get regularFormatter(): (value: number, precision?: number | undefined) => string;
     /**
      * Sets the pane value formatters for the current instance.
      * @param {YExtentFormatters} formatters - The pane value formatters to be set.
@@ -174,7 +174,7 @@ export declare class PaneComponent extends ChartBaseElement {
     regularValueFromY(y: number): number;
 }
 export interface YExtentFormatters {
-    regular: (value: number) => string;
+    regular: (value: number, precision?: number) => string;
     percent?: (value: number, dataSeries?: DataSeriesModel) => string;
     logarithmic?: (value: number) => string;
 }

package/dist/chart/components/pane/pane.component.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
+ * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
 /*
  * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
@@ -9,10 +14,12 @@ import { areBoundsChanged, CanvasElement, } from '../../canvas/canvas-bounds-con
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { SyncedByXScaleModel } from '../../model/scale.model';
 import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
+import { cloneUnsafe } from '../../utils/object.utils';
 import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
 import { GridComponent } from '../grid/grid.component';
 import { YAxisComponent } from '../y_axis/y-axis.component';
 import { createDefaultYExtentHighLowProvider, YExtentComponent, } from './extent/y-extent-component';
+import { merge } from '../../utils/merge.utils';
 export class PaneComponent extends ChartBaseElement {
     get scale() {
         return this.mainExtent.scale;
@@ -135,6 +142,8 @@ export class PaneComponent extends ChartBaseElement {
         yExtentComponent.addSubscription(unsub);
         yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));
         (options === null || options === void 0 ? void 0 : options.paneFormatters) && yExtentComponent.setValueFormatters(options.paneFormatters);
+        yExtentComponent.yAxis.togglePriceScaleInverse(options === null || options === void 0 ? void 0 : options.inverse);
+        yExtentComponent.scale.setLockPriceToBarRatio(options === null || options === void 0 ? void 0 : options.lockToPriceRatio);
         const useDefaultHighLow = (_b = options === null || options === void 0 ? void 0 : options.useDefaultHighLow) !== null && _b !== void 0 ? _b : true;
         if (useDefaultHighLow) {
             scaleModel.autoScaleModel.setHighLowProvider('default', createCandlesOffsetProvider(() => ({ top: 10, bottom: 10, left: 0, right: 0, visible: true }), createDefaultYExtentHighLowProvider(yExtentComponent)));
@@ -163,7 +172,17 @@ export class PaneComponent extends ChartBaseElement {
      * Create new pane extent and attach data series to it
      */
     moveDataSeriesToNewExtentComponent(dataSeries, initialPane, initialExtent, align = 'right') {
-        const extent = this.createExtentComponent();
+        const yAxisConfigCopy = cloneUnsafe(initialExtent.yAxis.state);
+        const scaleConfigCopy = cloneUnsafe(initialExtent.scale.state);
+        const initialYAxisState = merge(yAxisConfigCopy, this.config.components.yAxis, {
+            overrideExisting: false,
+            addIfMissing: true,
+        });
+        const extent = this.createExtentComponent({
+            initialYAxisState,
+            inverse: scaleConfigCopy.inverse,
+            lockToPriceRatio: scaleConfigCopy.lockPriceToBarRatio,
+        });
         extent.yAxis.setYAxisAlign(align);
         dataSeries.forEach(series => series.moveToExtent(extent));
         initialExtent.dataSeries.size === 0 && initialPane.removeExtentComponents([initialExtent]);

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.js CHANGED Viewed

@@ -98,7 +98,10 @@ export class LastCandleLabelsProvider {
         const boxColor = getLabelColorBySeries(series.lastPriceMovement, series.colors);
         // if the label is for the main candle series
         if (primary) {
-            const textColor = getPrimaryLabelTextColor(series.lastPriceMovement, colors);
+            const isScatterPlot = series.config.type === 'scatterPlot';
+            const textColor = isScatterPlot
+                ? rectLabelTextColor
+                : getPrimaryLabelTextColor(series.lastPriceMovement, colors);
             return {
                 bgColor: boxColor,
                 textColor: appearanceType === 'plain'

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

@@ -149,7 +149,7 @@ export declare class YAxisComponent extends ChartBaseElement {
      * Inversion also works for candles, drawings and overlay studies.
      * @param inverse - true or false
      */
-    togglePriceScaleInverse(inverse: boolean): void;
+    togglePriceScaleInverse(inverse?: boolean): void;
     /**
      * Changes the visibility of the labels' descriptions.
      * @param {boolean} descVisibility - A boolean value indicating whether the descriptions should be visible or not.

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

@@ -244,7 +244,7 @@ export class YAxisComponent extends ChartBaseElement {
      * Inversion also works for candles, drawings and overlay studies.
      * @param inverse - true or false
      */
-    togglePriceScaleInverse(inverse) {
+    togglePriceScaleInverse(inverse = false) {
         this.scale.state.inverse = inverse;
         this.scale.inverseY = inverse;
         this.model.fancyLabelsModel.updateLabels();

package/dist/chart/drawers/chart-type-drawers/area.drawer.js CHANGED Viewed

@@ -11,6 +11,8 @@ export class AreaDrawer {
         this.config = config;
     }
     draw(ctx, points, model, hitTestDrawerConfig) {
+        var _a;
+        const isHitTestDrawer = !!hitTestDrawerConfig.color;
         if (model instanceof CandleSeriesModel) {
             // @ts-ignore
             const visualCandles = flat(points);
@@ -23,7 +25,10 @@ export class AreaDrawer {
             else {
                 ctx.strokeStyle = model.colors.areaTheme.lineColor;
             }
-            if (model.highlighted) {
+            if (isHitTestDrawer) {
+                ctx.lineWidth = (_a = hitTestDrawerConfig.hoverWidth) !== null && _a !== void 0 ? _a : this.config.selectedWidth * 3;
+            }
+            else if (model.highlighted) {
                 ctx.lineWidth = this.config.selectedWidth;
             }
             else {
@@ -63,7 +68,9 @@ export class AreaDrawer {
                                     fillColor)
                                 : '';
                     }
-                    ctx.fill();
+                    if (!isHitTestDrawer) {
+                        ctx.fill();
+                    }
                 }
                 else {
                     ctx.lineTo(lineX, closeY);

package/dist/chart/drawers/data-series-drawers/data-series-drawers.utils.d.ts CHANGED Viewed

@@ -5,4 +5,5 @@
  */
 import { VisualSeriesPoint } from '../../model/data-series.model';
 import { Viewable } from '../../model/scaling/viewport.model';
+export declare const buildSectionPath: (point: VisualSeriesPoint, ctx: CanvasRenderingContext2D, view: Viewable, idx: number) => void;
 export declare const buildLinePath: (points: VisualSeriesPoint[], ctx: CanvasRenderingContext2D, view: Viewable) => void;

package/dist/chart/drawers/data-series-drawers/data-series-drawers.utils.js CHANGED Viewed

@@ -3,19 +3,22 @@
  * 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 buildSectionPath = (point, ctx, view, idx) => {
+    const { centerUnit, close } = point;
+    const x = view.toX(centerUnit);
+    const y = view.toY(close);
+    if (idx === 0) {
+        ctx.moveTo(x, y);
+    }
+    else {
+        ctx.lineTo(x, y);
+    }
+};
 export const buildLinePath = (points, ctx, view) => {
     if (points.length !== 0) {
         // Recognizing line gaps by candles idx.
         points.forEach((p, idx) => {
-            const { centerUnit, close } = p;
-            const x = view.toX(centerUnit);
-            const y = view.toY(close);
-            if (idx === 0) {
-                ctx.moveTo(x, y);
-            }
-            else {
-                ctx.lineTo(x, y);
-            }
+            buildSectionPath(p, ctx, view, idx);
         });
     }
 };

package/dist/chart/drawers/data-series-drawers/difference-cloud.drawer.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@
  */
 import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model';
 import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+import { Viewable } from '../../model/scaling/viewport.model';
+import { Point } from '../../inputlisteners/canvas-input-listener.component';
 /**
  * Point used to draw difference type indicator (clouds) (e.g. Ichimoku indicator)
  */
@@ -15,7 +17,8 @@ export declare class DifferenceCloudDrawer implements SeriesDrawer {
     constructor();
     draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
     private drawLine;
-    private drawDifference;
-    private fillCloud;
+    protected drawDifference(ctx: CanvasRenderingContext2D, lineColor: string, nextLineColor: string, diffPoints: DifferencePoint[], curSeries: DataSeriesModel, nextSeries: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
+    protected fillCloud(ctx: CanvasRenderingContext2D, color: string, linePoints: Point[], nextLinePoints: Point[], hitTestDrawerConfig: HTSeriesDrawerConfig): void;
+    protected mapDataSeriesDiffPointsIntoPoints(points: VisualSeriesPoint[], view: Viewable): Point[];
 }
 export declare const isDifferenceTool: (type: string) => boolean;

package/dist/chart/drawers/data-series-drawers/difference-cloud.drawer.js CHANGED Viewed

@@ -30,7 +30,8 @@ export class DifferenceCloudDrawer {
                     const allPointsMain = mainSeries.getSeriesInViewport(mainSeries.scale.xStart - 1, mainSeries.scale.xEnd + 1);
                     const allPointsLinked = linkedSeries.getSeriesInViewport(linkedSeries.scale.xStart - 1, linkedSeries.scale.xEnd + 1);
                     allPointsMain.forEach((points, idx) => {
-                        const to = Math.min(points.length, allPointsLinked[idx].length);
+                        var _a, _b;
+                        const to = Math.min(points.length, (_b = (_a = allPointsLinked[idx]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
                         for (let k = 0; k < to; k++) {
                             const diffPoints = [
                                 points[k].clone(),
@@ -60,8 +61,8 @@ export class DifferenceCloudDrawer {
             linePoints.push(point);
             nextLinePoints.push(nextPoint);
         });
-        const curSeriesPoints = mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
-        const nextSeriesPoints = mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
+        const curSeriesPoints = this.mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
+        const nextSeriesPoints = this.mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
         this.fillCloud(ctx, nextLineColor, curSeriesPoints, nextSeriesPoints, hitTestDrawerConfig);
         this.fillCloud(ctx, lineColor, nextSeriesPoints, curSeriesPoints, hitTestDrawerConfig);
     }
@@ -99,13 +100,13 @@ export class DifferenceCloudDrawer {
         ctx.fill();
         ctx.restore();
     }
+    mapDataSeriesDiffPointsIntoPoints(points, view) {
+        return points.map(p => {
+            const { centerUnit, close } = p;
+            const x = view.toX(centerUnit);
+            const y = view.toY(close);
+            return { x, y };
+        });
+    }
 }
-const mapDataSeriesDiffPointsIntoPoints = (points, view) => {
-    return points.map(p => {
-        const { centerUnit, close } = p;
-        const x = view.toX(centerUnit);
-        const y = view.toY(close);
-        return { x, y };
-    });
-};
 export const isDifferenceTool = (type) => type === 'DIFFERENCE';

package/dist/chart/drawers/data-series-drawers/trend-histogram.drawer.d.ts CHANGED Viewed

@@ -8,5 +8,5 @@ import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
 export declare class TrendHistogramDrawer implements SeriesDrawer {
     constructor();
     draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
-    private previousValue;
 }
+export declare const previousValue: (arr: VisualSeriesPoint[], idx: number) => number | undefined;

package/dist/chart/drawers/data-series-drawers/trend-histogram.drawer.js CHANGED Viewed

@@ -17,11 +17,11 @@ export class TrendHistogramDrawer {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             // odd width is crucial to draw histogram without antialiasing
             // 2 colors: Negative and Positive
+            const previousClose = previousValue(allPointsFlat, idx);
+            const isNegativeTrend = previousClose && point.close < previousClose;
             if (((_a = config.multiplyColors) === null || _a === void 0 ? void 0 : _a.length) === 2) {
                 ctx.strokeStyle =
-                    (_b = hitTestDrawerConfig.color) !== null && _b !== void 0 ? _b : ((point.close < this.previousValue(allPointsFlat, idx)
-                        ? config.multiplyColors[1]
-                        : config.multiplyColors[0]) ||
+                    (_b = hitTestDrawerConfig.color) !== null && _b !== void 0 ? _b : ((isNegativeTrend ? config.multiplyColors[1] : config.multiplyColors[0]) ||
                         config.color ||
                         '#FF00FF');
                 ctx.beginPath();
@@ -34,20 +34,19 @@ export class TrendHistogramDrawer {
             }
             // 4 colors: Negative and Down, Negative and Up, Positive and Down, Positive and Up
             if (((_c = config.multiplyColors) === null || _c === void 0 ? void 0 : _c.length) === 4) {
-                const prevPointClose = this.previousValue(allPointsFlat, idx);
-                if (point.close < prevPointClose && point.close < 0) {
+                if (isNegativeTrend && point.close < 0) {
                     ctx.strokeStyle =
                         (_d = hitTestDrawerConfig.color) !== null && _d !== void 0 ? _d : (config.multiplyColors[0] || config.color || '#FF00FF');
                 }
-                if (point.close > prevPointClose && point.close < 0) {
+                if (!isNegativeTrend && point.close < 0) {
                     ctx.strokeStyle =
                         (_e = hitTestDrawerConfig.color) !== null && _e !== void 0 ? _e : (config.multiplyColors[1] || config.color || '#FF00FF');
                 }
-                if (point.close < prevPointClose && point.close > 0) {
+                if (isNegativeTrend && point.close > 0) {
                     ctx.strokeStyle =
                         (_f = hitTestDrawerConfig.color) !== null && _f !== void 0 ? _f : (config.multiplyColors[2] || config.color || '#FF00FF');
                 }
-                if (point.close > prevPointClose && point.close > 0) {
+                if (!isNegativeTrend && point.close > 0) {
                     ctx.strokeStyle =
                         (_g = hitTestDrawerConfig.color) !== null && _g !== void 0 ? _g : (config.multiplyColors[3] || config.color || '#FF00FF');
                 }
@@ -69,11 +68,11 @@ export class TrendHistogramDrawer {
             ctx.stroke();
         });
     }
-    //weird but works
-    previousValue(arr, idx) {
-        do {
-            idx--;
-        } while (idx >= 0 && !isFinite(arr[idx] && arr[idx].close));
-        return arr[idx] ? arr[idx].close : Number.NaN;
-    }
 }
+// weird but works
+export const previousValue = (arr, idx) => {
+    do {
+        idx--;
+    } while (idx >= 0 && !isFinite(arr[idx] && arr[idx].close));
+    return arr[idx] ? arr[idx].close : undefined;
+};