Ngx-charts: Hide pointer if click event is not available

[LionHeart7735]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

when there is no click function attached, pointer still show while hover mouse on chart item.

Expected behavior
No pointer show if there is no click function attached to it

Reproduction of the problem
(select)="item.options.clickable ? onSelect($event,item) : null"

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ngx-charts version:
  ngx-chart 6.0.0

• Angular version:
  Angular 4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[term29]

I'd love to see this implemented. Seems like a simple win.

[DavidMarquezF]

I believe this could be achieved by checking the observers in the onSelect Event Emitter like they do here:
https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/number-card/number-card.component.ts#L64-L66
The problem with this is that it will be executed in every Change Detection Cycle, so I don't think it's the best way to go.

The other option would be to assign a variable in the ngOnInit and then use class binding.

Most of the charts have pointer because of these lines:
https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/common/base-chart.component.scss#L11-L19

https://github.com/swimlane/ngx-charts/blob/2fbac55229190732b50abb3acc4c9711feef7f52/src/common/base-chart.component.scss#L55-L59

So this could be achieved by using a binding in chart.component.ts:
https://github.com/swimlane/ngx-charts/blob/6893f83443c1ebf10336aa67309def101ecbba57/src/common/charts/chart.component.ts#L22-L27

Here we could add [class.clickable]="clickable". Then you would just add .clickable before the .bar,.cell... classes.

Then you would need to change the other charts that don't use this, like linear-gauge (cursor in linera-gauge.component.scss), treemap-cell and heat-map-cell (I believe these are all).

It would be nice if someone else could implement it, as I don't currently have time to write, try and test what I've suggested.

[sebastiangug]

Is this purely cosmetic regarding to the mouse when hovering over a point with no function?

[DavidMarquezF]

Yes, it's purely for cosmetic purposes, but I believe it's important because it leads to confusion.

For example, our users try to click the charts and believe that something is broken because it doesn't do anything.

[sebastiangug]

Doesn't the tooltip show up & some animation happens to highlight that point? I think it's a lot clearer to have the pointer in that case. I'd make it an option for people that want to use it but personally I'd make the effort to have it the other way around