feat(interactive-chart): add disabledLegend option to hide data legend (

#421) * fix(interactive-chart): revert render empty string solution * feat(interactive-chart): add disabledLegend option to series data * docs(interactive-chart): add docs disabledLegend in Custom legend * chore(interactive-chart): update series option name * docs(interactive-chart): update hide legend docs * test(interactive-chart): add test hide some chart legend * docs(interactive-chart): add legendVisible example code * docs(interactive-chart): remove example code * chore(interactive-chart): add demo legendVisible
Refinitiv · Aug 9, 2022 · 32a6d7b · 32a6d7b
1 parent a6c2479
commit 32a6d7b
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 7 deletions.
diff --git a/documents/src/pages/elements/interactive-chart.md b/documents/src/pages/elements/interactive-chart.md
@@ -1022,6 +1022,21 @@ line.config = {
 };
 ```
 
+Use `legendVisible` to hide a legend of any series.
+
+```javascript
+line.config = {
+  series: [
+    {
+      symbol: 'APPL.O',
+      legendVisible: false,
+      type: 'line',
+      data: [...]
+    }
+  ]
+};
+```
+
 By default, chart will display a raw value that passes from the data object in the legend. If you want to override the default formatting of the price, you can set your own formatter function to `legendPriceFormatter` in a series configuration object to override price format on the legend.
 
 For example, here's how you can format price to show three decimal places on the legend.

diff --git a/packages/elements/src/interactive-chart/__demo__/index.html b/packages/elements/src/interactive-chart/__demo__/index.html
@@ -315,6 +315,53 @@ <h3>Interactive Chart</h3>
     </script>
   </demo-block>
 
+  <demo-block layout="normal" header="No Legend Visible">
+    <ef-interactive-chart id="no-legend-visible"></ef-interactive-chart>
+    <script type="module">
+      const chart = document.getElementById('no-legend-visible');
+      chart.config = {
+        series: [
+          {
+            symbol: 'AAPL',
+            legendVisible: false,
+            type: 'area',
+            data: [
+              { time: '2018-12-22', value: 32.51 },
+              { time: '2018-12-23', value: 31.11 },
+              { time: '2018-12-24', value: 27.02 },
+              { time: '2018-12-25', value: 27.32 },
+              { time: '2018-12-26', value: 25.17 },
+              { time: '2018-12-27', value: 28.89 },
+              { time: '2018-12-28', value: 25.46 },
+              { time: '2018-12-29', value: 23.92 },
+              { time: '2018-12-30', value: 22.68 },
+              { time: '2018-12-31', value: 22.67 }
+            ]
+          },
+          {
+            symbol: 'AAPL2',
+            type: 'area',
+            data: [
+              { time: '2018-12-22', value: 42.51 },
+              { time: '2018-12-23', value: 51.11 },
+              { time: '2018-12-24', value: 67.02 },
+              { time: '2018-12-25', value: 17.32 },
+              { time: '2018-12-26', value: 45.17 },
+              { time: '2018-12-27', value: 38.89 },
+              { time: '2018-12-28', value: 75.46 },
+              { time: '2018-12-29', value: 13.92 },
+              { time: '2018-12-30', value: 9.68 },
+              { time: '2018-12-31', value: 11.67 }
+            ],
+            seriesOptions: {
+              priceScaleId: 'right'
+            }
+          }
+        ]
+      };
+    </script>
+  </demo-block>
+
   <demo-block layout="normal" header="Set symbol name">
     <ef-interactive-chart id="symbol_name"></ef-interactive-chart>
     <script type="module">

diff --git a/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js b/packages/elements/src/interactive-chart/__test__/interactive-chart.test.js
@@ -638,6 +638,28 @@ describe('interactive-chart/InteractiveChart', () => {
 
     });
 
+    it('When hide legend in chart series', async () => {
+      const config = line;
+      config.series[0].legendVisible = false;
+      el.config = config;
+      await nextFrame();
+      await elementUpdated();
+      expect(el.chart).to.not.be.undefined;
+      expect(el.chart).to.not.be.null;
+      expect(el.shadowRoot.querySelector('[part=legend]').textContent).to.be.empty;
+    });
+
+    it('When hide some legend in chart series', async () => {
+      const config = multiLine;
+      config.series[0].legendVisible = false;
+      el.config = config;
+      await nextFrame();
+      await elementUpdated();
+      expect(el.chart).to.not.be.undefined;
+      expect(el.chart).to.not.be.null;
+      expect(el.shadowRoot.querySelectorAll('[part=legend] > .row:not(:empty)').length).to.equal(multiLine.series.length - 1);
+    });
+
     it('Legend is not horizontal by default', async () => {
       el.config = line;
       await nextFrame();

diff --git a/packages/elements/src/interactive-chart/helpers/types.ts b/packages/elements/src/interactive-chart/helpers/types.ts
@@ -67,6 +67,7 @@ interface InteractiveChartSeries {
   type: string;
   symbol?: string;
   symbolName?: string;
+  legendVisible?: boolean;
   legendPriceFormatter?: (price: string | number) => string | number;
   data: SeriesData;
   seriesOptions?: SeriesPartialOptions<SeriesOptions>;

diff --git a/packages/elements/src/interactive-chart/index.ts b/packages/elements/src/interactive-chart/index.ts
@@ -56,7 +56,6 @@ export type {
 
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
-const HIDE_DATA_POINT = '';
 
 /**
  * A charting component that allows you to create several use cases of financial chart.
@@ -762,12 +761,12 @@ export class InteractiveChart extends ResponsiveElement {
       const chartType = this.internalConfig.series[idx].type;
       const dataSet = this.internalConfig.series[idx].data || [];
       const symbol = (this.internalConfig.series[idx].symbolName || this.internalConfig.series[idx].symbol) || '';
+      const isLegendVisible = this.internalConfig.series[idx].legendVisible !== false;
       // Create row legend element
       if (!rowLegend) {
         rowLegendElem = document.createElement('div');
         rowLegendElem.setAttribute('class', 'row');
-        this.createTextSymbol(rowLegendElem, symbol);
-
+        isLegendVisible && this.createTextSymbol(rowLegendElem, symbol);
         if (dataSet.length) {
           this.hasDataPoint = true;
           const lastData = dataSet[dataSet.length - 1];
@@ -801,7 +800,7 @@ export class InteractiveChart extends ResponsiveElement {
         }
         // when there's no data point in the series object.
         else if (!eventMove?.seriesPrices.get(this.seriesList[idx]) && eventMove?.time) {
-          value = symbol ? NO_DATA_POINT : HIDE_DATA_POINT;
+          value = NO_DATA_POINT;
           this.isCrosshairVisible = true;
           this.hasDataPoint = false;
         }
@@ -832,8 +831,9 @@ export class InteractiveChart extends ResponsiveElement {
    * @returns {void}
    */
   protected renderTextLegend (chartType: string, rowLegendElem: RowLegend, value: SeriesDataItem | number | string, priceColor: string, index: number): void {
+    const isLegendVisible = this.internalConfig.series[index].legendVisible !== false;
     // No need to render if disable legend
-    if (this.disabledLegend) {
+    if (this.disabledLegend || !isLegendVisible) {
       return;
     }
 
@@ -902,7 +902,7 @@ export class InteractiveChart extends ResponsiveElement {
         /**
          * Create a new span OHLC after displaying (--) or (N/A)
          */
-        if (spanElem.textContent === NOT_AVAILABLE_DATA || spanElem.textContent === NO_DATA_POINT || spanElem.textContent === HIDE_DATA_POINT) {
+        if (spanElem.textContent === NOT_AVAILABLE_DATA || spanElem.textContent === NO_DATA_POINT) {
           rowLegend[index].removeChild(spanElem);
           this.createSpanOHLC(rowLegend[index] as HTMLElement, rowData, priceColor);
         }
@@ -940,7 +940,7 @@ export class InteractiveChart extends ResponsiveElement {
   private createTextPrice (rowLegend: RowLegend, price: number | string, priceColor: string, index: number): void {
     const formatter = this.internalConfig.series[index].legendPriceFormatter;
     // Formats legend only when formatter and data point are provided
-    const formattedPrice = !!formatter && price !== NO_DATA_POINT && price !== HIDE_DATA_POINT ? formatter(price) : price;
+    const formattedPrice = !!formatter && price !== NO_DATA_POINT ? formatter(price) : price;
 
     // Create text price after chart has rendered
     if (rowLegend instanceof HTMLElement) {