From 5d8cc95387c1f52c1fc38ca5728bcae191ade4aa Mon Sep 17 00:00:00 2001
From: Victor Garcia Zarco <victor.gzarco@gmail.com>
Date: Mon, 25 Jan 2021 18:14:55 +0100
Subject: [PATCH] Fix background grid for pie & doughnut charts + hide empty
 titles (#31)

* Remove background grid when working with circular charts

* Avoid displaying empty title component
---
 .../lwc/chartBuilder/chartBuilder.html        | 34 +++++++++++--------
 .../default/lwc/chartBuilder/chartBuilder.js  | 11 +++---
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/force-app/main/default/lwc/chartBuilder/chartBuilder.html b/force-app/main/default/lwc/chartBuilder/chartBuilder.html
index 55548e1..daa8759 100644
--- 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
index 5abd72b..706ac01 100644
--- 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);
   }