Fix chart builder type and color (#6)

* Change the way data component are created It allow to have pie, doughnut, line, bar chart and even mix chart with the chart builder Doughnut, Pie and Polar chart need to display dimension in different color (instead of bar where dimension should be in the same color)
SalesforceLabs · Sep 11, 2020 · 30ee676 · 30ee676
1 parent 3b8c57b
commit 30ee676
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 43 deletions.
diff --git a/__tests__/unit/chartBuilder.test.js b/__tests__/unit/chartBuilder.test.js
@@ -58,7 +58,7 @@ describe('call server and get chart data when', () => {
     element.handler = 'FakeHandler';
 
     return flushPromises().then(() => {
-      expect(element.details).toMatchObject([]);
+      expect(element.details).toBeNull();
     });
   });
 });

diff --git a/force-app/main/default/classes/ChartBuilderControllerTest.cls b/force-app/main/default/classes/ChartBuilderControllerTest.cls
@@ -23,8 +23,8 @@ private class ChartBuilderControllerTest {
     );
     Test.stopTest();
     System.assertEquals(
-      OPPORTUNITY_STAGE_NAME,
-      chartDatas[0].label,
+      new List<String>{ OPPORTUNITY_STAGE_NAME },
+      chartDatas[0].labels,
       'chartDatas.label must equals ' + OPPORTUNITY_STAGE_NAME
     );
     System.assertEquals(
@@ -68,9 +68,9 @@ private class ChartBuilderControllerTest {
     );
     Test.stopTest();
     System.assertEquals(
-      ChartDataProviderTest.TEST_LABEL,
-      chartDatas[0].label,
-      'chartDatas.label must equals ' + ChartDataProviderTest.TEST_LABEL
+      ChartDataProviderTest.TEST_LABELS,
+      chartDatas[0].labels,
+      'chartDatas.label must equals ' + ChartDataProviderTest.TEST_LABELS
     );
     System.assertEquals(
       ChartDataProviderTest.TEST_DATA,

diff --git a/force-app/main/default/classes/ChartDataProvider.cls b/force-app/main/default/classes/ChartDataProvider.cls
@@ -25,7 +25,7 @@ public inherited sharing abstract class ChartDataProvider {
      * @description contains the label for this data
      */
     @AuraEnabled
-    public String label;
+    public List<String> labels;
 
     /*******************************************************************************************************
      * @description contains the values for this data

diff --git a/force-app/main/default/classes/ChartDataProviderTest.cls b/force-app/main/default/classes/ChartDataProviderTest.cls
@@ -20,9 +20,9 @@ public class ChartDataProviderTest {
     final List<ChartDataProvider.ChartData> chartDatas = aChartDataProvider.getData();
     Test.stopTest();
     System.assertEquals(
-      TEST_LABEL,
-      chartDatas[0].label,
-      'chartDatas.label must equals ' + TEST_LABEL
+      TEST_LABELS,
+      chartDatas[0].labels,
+      'chartDatas.label must equals ' + TEST_LABELS
     );
     System.assertEquals(
       TEST_DATA,
@@ -46,14 +46,14 @@ public class ChartDataProviderTest {
     public override List<ChartDataProvider.ChartData> getData() {
       final List<ChartDataProvider.ChartData> chartDatas = new List<ChartDataProvider.ChartData>();
       ChartDataProvider.ChartData aChartData = new ChartDataProvider.ChartData();
-      aChartData.label = TEST_LABEL;
+      aChartData.labels = TEST_LABELS;
       aChartData.detail = TEST_DATA;
       aChartData.bgColor = TEST_COLOR;
       chartDatas.add(aChartData);
       return chartDatas;
     }
   }
-  public static final String TEST_LABEL = 'test';
+  public static final List<String> TEST_LABELS = new List<String>{ 'test' };
   public static final List<Decimal> TEST_DATA = new List<Decimal>{ 42 };
   public static final String TEST_COLOR = 'test';
 }
diff --git a/force-app/main/default/classes/SOQLDataProvider.cls b/force-app/main/default/classes/SOQLDataProvider.cls
@@ -64,21 +64,23 @@ public inherited sharing virtual class SOQLDataProvider extends ChartDataProvide
       );
     }
 
-    final List<ChartDataProvider.ChartData> chartDatas = new List<ChartDataProvider.ChartData>();
     // When building the chart in the app builder and using :recordId in the query
     // The context is not set and :recordId is undefined
     // In this case we can't get not data but it is still possible to build the chart in the App Builder
     if (this.query.contains(UNDEFINED_RECORDID)) {
-      return chartDatas;
+      return new List<ChartDataProvider.ChartData>();
     }
+
+    final ChartDataProvider.ChartData aChartData = new ChartDataProvider.ChartData();
+    aChartData.labels = new List<String>();
+    aChartData.detail = new List<Object>();
+
     for (AggregateResult aResult : Database.query(this.query)) {
-      ChartDataProvider.ChartData aChartData = new ChartDataProvider.ChartData();
-      aChartData.label = (String) aResult.get(LABEL_ALIAS);
-      aChartData.detail = new List<Object>{ aResult.get(VALUE_ALIAS) };
-      chartDatas.Add(aChartData);
+      aChartData.labels.add((String) aResult.get(LABEL_ALIAS));
+      aChartData.detail.add(aResult.get(VALUE_ALIAS));
     }
 
-    return chartDatas;
+    return new List<ChartDataProvider.ChartData>{ aChartData };
   }
 
   public class SOQLDataProviderException extends Exception {

diff --git a/force-app/main/default/classes/SOQLDataProviderTest.cls b/force-app/main/default/classes/SOQLDataProviderTest.cls
@@ -146,8 +146,8 @@ private class SOQLDataProviderTest {
     final List<ChartDataProvider.ChartData> chartDatas = aSOQLDataProvider.getData();
     Test.stopTest();
     System.assertEquals(
-      OPPORTUNITY_STAGE_NAME,
-      chartDatas[0].label,
+      new List<String>{ OPPORTUNITY_STAGE_NAME },
+      chartDatas[0].labels,
       'chartDatas.label must equals ' + OPPORTUNITY_STAGE_NAME
     );
     System.assertEquals(

diff --git a/force-app/main/default/lwc/chartBuilder/chartBuilder.html b/force-app/main/default/lwc/chartBuilder/chartBuilder.html
@@ -10,11 +10,11 @@
           stylecss={styleCss}
           onlwccerror={handleError}
         >
-          <c-dataset labels={detailsLabels}>
+          <c-dataset labels={dimensionsLabels}>
             <template for:each={details} for:item="data">
               <c-data
                 key={data.uuid}
-                label={data.label}
+                label={data.labels}
                 detail={data.detail}
                 fill={data.fill}
                 bordercolor={data.bgColor}
@@ -35,7 +35,7 @@
           <template if:false={isRadial}>
             <c-cartesian-linear-axis
               axis="y"
-              ticks-beginatzero="true"
+              tick-beginatzero="true"
             ></c-cartesian-linear-axis>
           </template>
           <template if:true={isRadial}>

diff --git a/force-app/main/default/lwc/chartBuilder/chartBuilder.js b/force-app/main/default/lwc/chartBuilder/chartBuilder.js
@@ -1,8 +1,21 @@
 import { LightningElement, api } from 'lwc';
 import { nanoid } from 'c/nanoid';
-import { POLARAREA_CHART_TYPE, RADAR_CHART_TYPE } from 'c/constants';
+import {
+  POLARAREA_CHART_TYPE,
+  RADAR_CHART_TYPE,
+  PIE_CHART_TYPE,
+  DOUGHNUT_CHART_TYPE
+} from 'c/constants';
 import getChartData from '@salesforce/apex/ChartBuilderController.getChartData';
 
+const RADIAL_TYPE = [POLARAREA_CHART_TYPE, RADAR_CHART_TYPE];
+
+const DIMENSIONABLE_TYPES = [
+  DOUGHNUT_CHART_TYPE,
+  PIE_CHART_TYPE,
+  ...RADIAL_TYPE
+];
+
 export default class ChartBuilder extends LightningElement {
   containerClass = ChartBuilder.DEFAULT_CSS_CLASS;
 
@@ -37,14 +50,15 @@ export default class ChartBuilder extends LightningElement {
   @api
   fill = false;
 
+  dimensionsLabels = [];
   _detailsLabels = [];
   @api
   get detailsLabels() {
     return this._detailsLabels;
   }
   set detailsLabels(v) {
     try {
-      this._detailsLabels = JSON.parse(v);
+      this._detailsLabels = Array.isArray(v) ? v : JSON.parse(v);
     } catch (e) {
       this._detailsLabels = [];
     }
@@ -57,32 +71,31 @@ export default class ChartBuilder extends LightningElement {
   _details = [];
   @api
   get details() {
-    if (!this._details) {
-      return null;
-    }
-    let data;
+    return this._details;
+  }
+  set details(v) {
     try {
+      const data = v ? (Array.isArray(v) ? v : JSON.parse(v)) : [];
       // Build the data structure to use to iterate
       // and create data component in the template
       const palette = ChartBuilder.DEFAULT_PALETTE[this.colorPalette];
-      data = this._details.map((x, i) => {
+      this.dimensionsLabels = [...new Set(data.map(x => x.labels).flat())];
+      this._details = data.map((x, i) => {
         const val = { ...x };
+        val.labels = this._detailsLabels[i];
         val.uuid = val.uuid || nanoid(4);
-        val.bgColor = val.bgColor || palette[i % palette.length];
+        // Filter on type (pie doughnut radar polar area)
+        val.bgColor =
+          val.bgColor || this.isDimensionable
+            ? val.detail.map((_, j) => palette[j % palette.length])
+            : palette[i % palette.length];
         val.fill = this.fill;
         return val;
       });
       this.error = false;
     } catch (error) {
       this.errorCallback(error);
-      this._details = null;
-      data = null;
     }
-    return data;
-  }
-  set details(v) {
-    // Ensure value is clean from the AppBuilder
-    this._details = v ? (Array.isArray(v) ? v : JSON.parse(v)) : [];
     this.isLoaded = true;
   }
 
@@ -126,7 +139,11 @@ export default class ChartBuilder extends LightningElement {
   }
 
   get isRadial() {
-    return [POLARAREA_CHART_TYPE, RADAR_CHART_TYPE].includes(this.type);
+    return RADIAL_TYPE.includes(this.type);
+  }
+
+  get isDimensionable() {
+    return DIMENSIONABLE_TYPES.includes(this.type);
   }
 
   isLoaded = false;
@@ -136,6 +153,9 @@ export default class ChartBuilder extends LightningElement {
   errorCallback(error, stack) {
     this.error = error;
     this.stack = stack;
+    this._details = null;
+    this._detailsLabels = null;
+    this.dimensionsLabels = null;
   }
 
   handleError(evt) {

diff --git a/force-app/sample/default/classes/DemoDataProvider.cls b/force-app/sample/default/classes/DemoDataProvider.cls
@@ -20,14 +20,14 @@ public inherited sharing class DemoDataProvider extends ChartDataProvider {
   public override List<ChartDataProvider.ChartData> getData() {
     final List<ChartDataProvider.ChartData> chartDatas = new List<ChartDataProvider.ChartData>();
     ChartDataProvider.ChartData aChartData = new ChartDataProvider.ChartData();
-    aChartData.label = DEMO_LABEL;
+    aChartData.labels = DEMO_LABEL;
     aChartData.detail = DEMO_DATA;
     aChartData.bgColor = DEMO_COLOR;
     chartDatas.add(aChartData);
     return chartDatas;
   }
 
-  public static final String DEMO_LABEL = '';
+  public static final List<String> DEMO_LABEL = new List<String>{ '' };
   public static final List<Decimal> DEMO_DATA = new List<Decimal>{
     10,
     20,

diff --git a/force-app/sample/default/classes/DemoDataProviderTest.cls b/force-app/sample/default/classes/DemoDataProviderTest.cls
@@ -21,7 +21,7 @@ private class DemoDataProviderTest {
     Test.stopTest();
     System.assertEquals(
       DemoDataProvider.DEMO_LABEL,
-      chartDatas[0].label,
+      chartDatas[0].labels,
       'chartDatas.label must equals ' + DemoDataProvider.DEMO_LABEL
     );
     System.assertEquals(