fix(interactive-chart): fix left position on legend

packages/elemental-theme/src/custom-elements/ef-interactive-chart.less

@@ -32,7 +32,6 @@
 
     [part=legend] {
         position: absolute;
-        left: 15px;
         top: 15px;
         z-index: 1000;
         color: var(--text-color);
@@ -46,12 +45,6 @@
         .ohlc {
             margin-right: 2px;
         }
-        &.yaxis-left{
-            left: 70px;
-        }
-        &.yaxis-right{
-            left: 15px;
-        }
         &.horizontal {
             display: flex;
             max-width: calc(100% - 75px); 

packages/elements/src/interactive-chart/__test__/interactive-chart.test.js

@@ -669,30 +669,28 @@ describe('interactive-chart/InteractiveChart', () => {
 
     });
 
-    it('Set via attribute horizontal legend to vertical', async () => {
-
+    it('Legend should have horizontal style class when set legend-style="horizontal" via attribute', async () => {
       el = await fixture('<ef-interactive-chart legend-style="horizontal"></ef-interactive-chart>');
-
       el.config = line;
       await elementUpdated();
+      await nextFrame();
 
       expect(el.chart).to.not.be.undefined;
       expect(el.chart).to.not.be.null;
-
-      el.legendStyle = 'horizontal';
-      await nextFrame();
+      expect(el.shadowRoot.querySelector('[part=legend]').className).to.include('horizontal');
+    });
+    it('Legend should not have horizontal style class when set legend-style="vertical" via attribute', async () => {
+      el = await fixture('<ef-interactive-chart legend-style="vertical"></ef-interactive-chart>');
+      el.config = line;
       await elementUpdated();
-      expect(el.shadowRoot.querySelector('[part=legend]').className).to.include('yaxis-right');
-
-      el.legendStyle = 'vertical';
       await nextFrame();
-      await elementUpdated();
-
-      expect(el.shadowRoot.querySelector('[part=legend]').className).to.not.include('yaxis-left');
 
+      expect(el.chart).to.not.be.undefined;
+      expect(el.chart).to.not.be.null;
+      expect(el.shadowRoot.querySelector('[part=legend]').className).to.not.include('horizontal');
     });
 
-    it('Switch horizontal legend to vertical', async () => {
+    it('LegendStyle should able to switch between horizontal and vertical', async () => {
       el.config = line;
       await nextFrame();
       await elementUpdated();
@@ -703,14 +701,13 @@ describe('interactive-chart/InteractiveChart', () => {
       el.legendStyle = 'horizontal';
       await nextFrame();
       await elementUpdated();
-      expect(el.shadowRoot.querySelector('[part=legend]').className).to.include('yaxis-right');
+      expect(el.shadowRoot.querySelector('[part=legend]').className).to.include('horizontal');
 
       el.legendStyle = 'vertical';
       await nextFrame();
       await elementUpdated();
 
-      expect(el.shadowRoot.querySelector('[part=legend]').className).to.not.include('yaxis-left');
-
+      expect(el.shadowRoot.querySelector('[part=legend]').className).to.not.include('horizontal');
     });
 
     it('When toggle jump button in chart', async () => {
@@ -865,5 +862,30 @@ describe('interactive-chart/InteractiveChart', () => {
       await elementUpdated();
       expect(el.shadowRoot.querySelector('[part=legend]').className).to.not.include('horizontal');
     });
+
+    it('Should has dynamic left position in legend when the chart set y axis at left', async () => {
+      el.config = linePositionLeft;
+      await elementUpdated();
+      await nextFrame();
+
+      expect(el.chart).to.not.be.undefined;
+      expect(el.chart).to.not.be.null;
+      const legendStyle = getComputedStyle(el.shadowRoot.querySelector('[part=legend]'));
+      const legendLeftPosition = Number(legendStyle.left.substring(0,legendStyle.left.indexOf('px')))
+      expect(legendStyle.position).to.equal('absolute');
+      expect(legendLeftPosition).to.greaterThan(el.DEFAULT_LEGEND_LEFT_POSITION);
+    });
+    it('Should has dynamic left position in legend when the chart set y axis at both edge', async () => {
+      el.config = twoPriceScales;
+      await elementUpdated();
+      await nextFrame();
+
+      expect(el.chart).to.not.be.undefined;
+      expect(el.chart).to.not.be.null;
+      const legendStyle = getComputedStyle(el.shadowRoot.querySelector('[part=legend]'))
+      const legendLeftPosition = Number(legendStyle.left.substring(0,legendStyle.left.indexOf('px')))
+      expect(legendStyle.position).to.equal('absolute');
+      expect(legendLeftPosition).to.greaterThan(el.DEFAULT_LEGEND_LEFT_POSITION);
+    });
   });
 });

packages/elements/src/interactive-chart/index.ts

@@ -86,6 +86,7 @@ export class InteractiveChart extends ResponsiveElement {
     LARGE_DASHED: 3,
     SPARSE_DOTTED: 4
   };
+  private DEFAULT_LEGEND_LEFT_POSITION = 15;
 
   private _legendStyle?: LegendStyle;
 
@@ -162,6 +163,7 @@ export class InteractiveChart extends ResponsiveElement {
 
   private hasDataPoint = false;
 
+
   /**
    * @returns return config of property component
    */
@@ -247,11 +249,11 @@ export class InteractiveChart extends ResponsiveElement {
 
   /**
   * Legend value observer
-  * @param value Legend value
+  * @param disabledLegend Legend value
   * @returns {void}
   */
-  private onLegendChange (value: boolean): void {
-    if (!value) {
+  private onLegendChange (disabledLegend: boolean): void {
+    if (!disabledLegend) {
       this.createLegend();
     }
     else {
@@ -342,9 +344,7 @@ export class InteractiveChart extends ResponsiveElement {
       this.mergeConfig(config);
       this.applyChartOptionSize(width, height);
 
-      if (!this.disabledLegend) {
-        this.createLegend();
-      }
+      this.onLegendChange(this.disabledLegend);
 
       if (this.legendStyle === 'horizontal') {
         this.legendContainer.classList.add(this.legendStyle);
@@ -394,6 +394,7 @@ export class InteractiveChart extends ResponsiveElement {
       this.legendContainer.textContent = '';
       this.chart.unsubscribeCrosshairMove(this.handleCrosshairMoved);
       this.legendInitialized = false;
+      this.chart.timeScale().unsubscribeSizeChange(this.onTimeScaleSizeChange);
     }
   }
 
@@ -410,7 +411,6 @@ export class InteractiveChart extends ResponsiveElement {
     this.applyTheme(config);
     this.applyLegendTextColor();
     this.applyStylesBranding();
-    this.applyStyleLegend();
   }
 
   /**
@@ -671,22 +671,6 @@ export class InteractiveChart extends ResponsiveElement {
     }
   }
 
-  /**
-   * Get position config for set position legend
-   * @returns {void}
-   */
-  private applyStyleLegend (): void {
-    if (this.chart) {
-      // Get position config for set position legend
-      const position = this.getPriceScalePosition();
-      if (position === 'left' || position === 'two-price') {
-        this.legendContainer.className = 'yaxis-left';
-      }
-      else {
-        this.legendContainer.className = 'yaxis-right';
-      }
-    }
-  }
 
   /**
    * Get position config for set position logo trading view on chart
@@ -734,6 +718,29 @@ export class InteractiveChart extends ResponsiveElement {
     this.createRowLegend(this.rowLegend, param);
   };
 
+  /**
+   * Callback uses for sizeChange event
+   * @returns {void}
+   */
+  private onTimeScaleSizeChange = (): void => {
+    this.handleLegendLeftPosition();
+  };
+
+  /**
+   * Handle left position of legend
+   * @returns {void}
+   */
+  private handleLegendLeftPosition (): void {
+    const position = this.getPriceScalePosition();
+    if (position === 'left' || position === 'two-price') {
+      const leftPriceScaleWidth = this.chart?.priceScale('left').width() || 0;
+      this.legendContainer.style.left = `${leftPriceScaleWidth + this.DEFAULT_LEGEND_LEFT_POSITION}px`;
+    }
+    else {
+      this.legendContainer.style.left = '15px';
+    }
+  }
+
   /**
    * Create legend element
    * @returns {void}
@@ -745,6 +752,8 @@ export class InteractiveChart extends ResponsiveElement {
         this.rowLegend = this.shadowRoot.querySelectorAll('.row');
       }
       this.chart.subscribeCrosshairMove(this.handleCrosshairMoved);
+      // Legend relates to value of each series that relate to priceScale. But the axis is no event for now. So use x-axis instead.
+      this.chart.timeScale().subscribeSizeChange(this.onTimeScaleSizeChange);
       this.legendInitialized = true;
     }
   }