Fix background grid for pie & doughnut charts + hide empty titles (#31)

* Remove background grid when working with circular charts * Avoid displaying empty title component
SalesforceLabs · Jan 25, 2021 · 5d8cc95 · 5d8cc95
1 parent f0f99e6
commit 5d8cc95
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/force-app/main/default/lwc/chartBuilder/chartBuilder.html b/force-app/main/default/lwc/chartBuilder/chartBuilder.html
@@ -22,26 +22,30 @@
               ></c-data>
             </template>
           </c-dataset>
-          <c-title
-            text={title}
-            fontfamily="'Salesforce Sans', Arial, sans-serif"
-            fontcolor="rgb(8, 7, 7)"
-          ></c-title>
+          <template if:true={title}>
+            <c-title
+              text={title}
+              fontfamily="'Salesforce Sans', Arial, sans-serif"
+              fontcolor="rgb(8, 7, 7)"
+            ></c-title>
+          </template>
           <c-legend
             position={legendPosition}
             label-fontfamily="'Salesforce Sans', Arial, sans-serif"
             label-fontcolor="rgb(8, 7, 7)"
           ></c-legend>
-          <template if:false={isRadial}>
-            <c-cartesian-linear-axis
-              axis="y"
-              ticks-beginatzero="true"
-            ></c-cartesian-linear-axis>
-          </template>
-          <template if:true={isRadial}>
-            <c-radial-linear-axis
-              ticks-beginatzero="true"
-            ></c-radial-linear-axis>
+          <template if:false={isCircular}>
+            <template if:false={isRadial}>
+              <c-cartesian-linear-axis
+                axis="y"
+                ticks-beginatzero="true"
+              ></c-cartesian-linear-axis>
+            </template>
+            <template if:true={isRadial}>
+              <c-radial-linear-axis
+                ticks-beginatzero="true"
+              ></c-radial-linear-axis>
+            </template>
           </template>
         </c-chart>
       </template>

diff --git a/force-app/main/default/lwc/chartBuilder/chartBuilder.js b/force-app/main/default/lwc/chartBuilder/chartBuilder.js
@@ -9,12 +9,9 @@ import {
 import getChartData from '@salesforce/apex/ChartBuilderController.getChartData';
 
 const RADIAL_TYPE = [POLARAREA_CHART_TYPE, RADAR_CHART_TYPE];
+const CIRCULAR_TYPE = [DOUGHNUT_CHART_TYPE, PIE_CHART_TYPE];
 
-const DIMENSIONABLE_TYPES = [
-  DOUGHNUT_CHART_TYPE,
-  PIE_CHART_TYPE,
-  ...RADIAL_TYPE
-];
+const DIMENSIONABLE_TYPES = [...CIRCULAR_TYPE, ...RADIAL_TYPE];
 
 export default class ChartBuilder extends LightningElement {
   containerClass = ChartBuilder.DEFAULT_CSS_CLASS;
@@ -148,6 +145,10 @@ export default class ChartBuilder extends LightningElement {
     }
   }
 
+  get isCircular() {
+    return CIRCULAR_TYPE.includes(this.type);
+  }
+
   get isRadial() {
     return RADIAL_TYPE.includes(this.type);
   }