Improve chart clickability

addon/components/simple-chart-bar.js

@@ -18,6 +18,7 @@ export default Component.extend(ChartProperties, {
     const hover = get(this, 'hover');
     const leave = get(this, 'leave');
     const click = get(this, 'click');
+    const isClickable = get(this, 'isClickable');
     const dataOrArray = data?data:[{data: 1, label: '', empty: true}];
     const svg = select(this.element);
     const color = scaleOrdinal(schemeCategory10);
@@ -57,20 +58,25 @@ export default Component.extend(ChartProperties, {
           }
         });
 
-        rect.on('click', data => {
-          if (click) {
-            click(data);
-          }
-        });
-
-        bars.selectAll('text').data(dataOrArray).enter()
+        const text = bars.selectAll('text').data(dataOrArray).enter()
           .append("text")
           .attr("fill", "#ffffff")
           .style("font-size", ".8rem")
           .attr("text-anchor", "middle")
           .attr('x', d => `${xScale(d.label	) + xScale.bandwidth() / 2}%`)
           .attr('y', d => `${110 - yScale(d.data)}%`)
           .text(d => d.label);
+
+        if (isClickable) {
+          rect.on('click', data => {
+            click(data);
+          });
+          rect.style("cursor", "pointer");
+          text.on('click', data => {
+            click(data);
+          });
+          text.style("cursor", "pointer");
+        }
       }
   },
 });

addon/components/simple-chart-donut.js

@@ -23,6 +23,7 @@ export default Component.extend(ChartProperties, {
     const hover = get(this, 'hover');
     const leave = get(this, 'leave');
     const click = get(this, 'click');
+    const isClickable = get(this, 'isClickable');
     const color = scaleOrdinal(schemeCategory10);
     const donutWidth = width * .2;
 
@@ -67,20 +68,25 @@ export default Component.extend(ChartProperties, {
         }
       });
 
-      path.on('click', ({data}) => {
-        if (click) {
-          click(data);
-        }
-      });
-
-      chart.selectAll('.slice')
+      const text = chart.selectAll('.slice')
         .append("text")
         .attr("fill", "#ffffff")
         .style("font-size", ".8rem")
         .attr('transform', d => "translate(" + createLabelArc.centroid(d) + ")")
         .attr("dy", ".40rem")
         .attr("text-anchor", "middle")
         .text(d => d.data.label);
+
+      if (isClickable) {
+        path.on('click', data => {
+          click(data);
+        });
+        path.style("cursor", "pointer");
+        text.on('click', data => {
+          click(data);
+        });
+        text.style("cursor", "pointer");
+      }
     }
   },
 });

addon/components/simple-chart-horz-bar.js

@@ -18,6 +18,7 @@ export default Component.extend(ChartProperties, {
     const hover = get(this, 'hover');
     const leave = get(this, 'leave');
     const click = get(this, 'click');
+    const isClickable = get(this, 'isClickable');
     const dataOrArray = data?data:[{data: 1, label: '', empty: true}];
     const svg = select(this.element);
     const color = scaleOrdinal(schemeCategory10);
@@ -57,13 +58,7 @@ export default Component.extend(ChartProperties, {
           }
         });
 
-        rect.on('click', data => {
-          if (click) {
-            click(data);
-          }
-        });
-
-        bars.selectAll('text').data(dataOrArray).enter()
+        const text = bars.selectAll('text').data(dataOrArray).enter()
           .append("text")
           .attr("fill", "#ffffff")
           .style("font-size", ".8rem")
@@ -73,6 +68,17 @@ export default Component.extend(ChartProperties, {
           .attr('y', d => `${yScale(d.label) + (yScale.bandwidth() / 2)}%`)
           .attr('x', d => `${xScale(d.data) - 3}%`)
           .text(d => d.label);
+
+        if (isClickable) {
+          rect.on('click', data => {
+            click(data);
+          });
+          rect.style("cursor", "pointer");
+          text.on('click', data => {
+            click(data);
+          });
+          text.style("cursor", "pointer");
+        }
       }
   },
 });

addon/components/simple-chart-pie.js

@@ -23,6 +23,7 @@ export default Component.extend(ChartProperties, {
     const isIcon = get(this, 'isIcon');
     const leave = get(this, 'leave');
     const click = get(this, 'click');
+    const isClickable = get(this, 'isClickable');
     const color = scaleOrdinal(schemeCategory10);
 
     let createArc = arc().innerRadius(0).outerRadius(radius);
@@ -66,20 +67,25 @@ export default Component.extend(ChartProperties, {
         }
       });
 
-      path.on('click', ({data}) => {
-        if (click) {
-          click(data);
-        }
-      });
-
-      chart.selectAll('.slice')
+      const text = chart.selectAll('.slice')
         .append("text")
         .attr("fill", "#ffffff")
         .style("font-size", ".8rem")
         .attr('transform', d => "translate(" + createLabelArc.centroid(d) + ")")
         .attr("dy", ".40rem")
         .attr("text-anchor", "middle")
         .text(d => d.data.label);
+
+      if (isClickable) {
+        path.on('click', data => {
+          click(data);
+        });
+        path.style("cursor", "pointer");
+        text.on('click', data => {
+          click(data);
+        });
+        text.style("cursor", "pointer");
+      }
     }
   }
 });

addon/components/simple-chart.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { set, get, computed } from '@ember/object';
+import { isPresent } from '@ember/utils';
 import layout from '../templates/components/simple-chart';
 
 export default Component.extend({
@@ -13,6 +14,10 @@ export default Component.extend({
     const name = this.get('name');
     return `simple-chart-${name}`;
   }),
+  isClickable: computed('click', function () {
+    const click = get(this, 'click');
+    return isPresent(click);
+  }),
   actions: {
     async handleHover(data, tooltipTarget) {
       const hover = get(this, 'hover');

addon/mixins/chart-properties.js

@@ -14,6 +14,7 @@ export default Mixin.create(ResizeAware, {
   data: null,
   isIcon: false,
   resizeListener: null,
+  isClickable: false,
   didReceiveAttrs() {
     // Anytime we get an update schedule a draw
     run.scheduleOnce('afterRender', this, this.doDraw);

addon/templates/components/simple-chart.hbs

@@ -4,6 +4,7 @@
   hover=(action 'handleHover')
   click=(action 'handleClick')
   leave=(action 'handleLeave')
+  isClickable=isClickable
 }}
 
 {{#if tooltipTarget}}