fix(chart): using single color on bar chart with single dataset (#883)

Co-authored-by: Udompanish, Sarin <[email protected]>
Refinitiv · Aug 4, 2023 · 5ca2c9a · 5ca2c9a
1 parent f779cba
commit 5ca2c9a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 48 deletions.
diff --git a/packages/elements/src/chart/__demo__/index.html b/packages/elements/src/chart/__demo__/index.html
@@ -225,41 +225,6 @@
       </script>
     </demo-block>
 
-    <demo-block layout="normal" header="Bar Chart - Single dataset (Mono Colour)">
-      <ef-chart id="singleSetBarMono"></ef-chart>
-      <script>
-        var singleSetBarMono = document.getElementById('singleSetBarMono');
-        customElements.whenDefined('ef-chart').then(() => {
-          setTimeout(() => {
-            singleSetBarMono.config = {
-              type: 'bar',
-              data: {
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                datasets: [
-                  {
-                    label: 'Bounce Rate',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    backgroundColor: singleSetBarMono.colors[0]
-                  }
-                ]
-              },
-              options: {
-                scales: {
-                  yAxes: [
-                    {
-                      ticks: {
-                        beginAtZero: true
-                      }
-                    }
-                  ]
-                }
-              }
-            };
-          });
-        });
-      </script>
-    </demo-block>
-
     <demo-block layout="normal" header="Stacked Bar Chart">
       <ef-chart id="stackedBar"></ef-chart>
       <script>

diff --git a/packages/elements/src/chart/__test__/chart.test.js b/packages/elements/src/chart/__test__/chart.test.js
@@ -299,14 +299,12 @@ describe('chart/Chart', () => {
       expect(check).to.equal(true, 'Number of colors and number of data should always be the same');
     });
 
-    it('Should apply color array to a single dataset bar chart', async () => {
+    it('Should apply single color to a single dataset bar chart', async () => {
       el.config = config.singlesetbar;
       await chartRendered(el);
       let datasets = el.config.data.datasets;
       expect(datasets, 'Chart should only have one dataset').to.have.lengthOf(1);
-      expect(datasets[0].backgroundColor, 'Should have a color count equal to the data length')
-        .to.be.an('array')
-        .that.has.lengthOf(datasets[0].data.length);
+      expect(Array.isArray(datasets[0].backgroundColor)).to.equal(false);
     });
 
     it('Should render legend labels colors correctly', async () => {

diff --git a/packages/elements/src/chart/index.ts b/packages/elements/src/chart/index.ts
@@ -374,23 +374,18 @@ export class Chart extends BasicElement {
   protected datasetInfo(dataset: Chart.ChartDataSets): Chart.ChartDataSets {
     const type = dataset.type || this.config?.type;
     let index = this.datasets.indexOf(dataset);
-    const isColorArray =
-      (!!type && ['pie', 'doughnut', 'polarArea'].includes(type)) ||
-      (type === 'bar' && this.datasets.length === 1);
+    const isColorArray = !!type && ['pie', 'doughnut', 'polarArea'].includes(type);
     const isSolidFill = !!type && !CHART_TYPE_OPAQUE.includes(type);
-
+    const colorsAmount =
+      isColorArray && dataset.data && !['bar', 'bubble'].includes(type) ? dataset.data.length : 1;
     // Doughnut chart using same color sequence for each data in datasets
     let borderColor = null;
     if (['pie', 'doughnut'].includes(type as string) && this.datasets.length > 1) {
       index = 0;
       borderColor = this.getComputedVariable('--multi-dataset-border-color', '#fff');
     }
 
-    const colors = this.generateColors(
-      isColorArray,
-      isColorArray && dataset.data ? dataset.data.length : 1,
-      index
-    );
+    const colors = this.generateColors(isColorArray, colorsAmount, index);
 
     return {
       type,