@devexperts/dxcharts-lite 2.7.4 → 2.7.6

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

@@ -367,11 +367,14 @@ export class CanvasBoundsContainer {
      */
     getXAxisBounds(nMap, canvas) {
         const xAxis = this.getBounds(CanvasElement.X_AXIS);
+        const isSingleYAxis = this.yAxisWidths.left.length + this.yAxisWidths.right.length === 1;
+        const leftOffset = isSingleYAxis ? 0 : this.yAxisWidths.left.reduce((acc, width) => (acc += width), 0);
+        const rightOffset = isSingleYAxis ? 0 : this.yAxisWidths.right.reduce((acc, width) => (acc += width), 0);
         if (this.config.components.xAxis.visible) {
             const xAxisHeight = this.getXAxisHeight();
-            xAxis.x = 0;
+            xAxis.x = leftOffset;
             xAxis.y = canvas.height - xAxisHeight - nMap.height;
-            xAxis.width = canvas.width;
+            xAxis.width = canvas.width - rightOffset;
             xAxis.height = xAxisHeight;
         }
         else {

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

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

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

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

@@ -9,10 +9,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 +137,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 +167,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/x_axis/x-axis-time-labels.drawer.js

@@ -61,6 +61,9 @@ export class XAxisTimeLabelsDrawer {
         ctx.fillStyle = color;
         for (const label of labels) {
             const x = this.viewportModel.toX(label.value) - calculateTextWidth(label.text, ctx, font) / 2;
+            if (x < bounds.x || x > bounds.width) {
+                continue;
+            }
             const y = bounds.y + fontHeight - 1 + offsetTop; // -1 for font drawing inconsistency
             const labelText = label.text;
             ctx.font = font;

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

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

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

@@ -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/model/visual-candle.d.ts

@@ -30,6 +30,7 @@ export default class VisualCandle extends VisualSeriesPoint {
     name: PriceMovement;
     candle: Candle;
     startUnit: Unit;
+    endUnit: Unit;
     hasBorder: boolean;
     isActive: boolean;
     isHollow: boolean;

package/dist/chart/model/visual-candle.js

@@ -23,6 +23,7 @@ export default class VisualCandle extends VisualSeriesPoint {
     constructor(x, width, open, close, high, low, name, candle, hasBorder = false, isActive = false, isHollow = false) {
         super(x, close);
         this.startUnit = x - width / 2;
+        this.endUnit = x + width / 2;
         this.width = width;
         this.open = open;
         this.high = high;