Add option to show active points on line and multi-lines charts

[thomaschampagne]

This PR includes:

• Option to show active points on line and multi-lines charts
• Documentation samples to use this new feature.

Screenshot of the added documentation (tab "data"):

Hope this helps!

Thomas

[wlach]

Thanks for the patch! I will try to make some time to look at it tomorrow.

[hamilton]

This is such a great PR @thomaschampagne! I had one small nit re: adding unneeded circles to the DOM I'm hoping can get fixed (something we'll have to correct elsewhere in the codebase) but it is otherwise a fantastic addition.

[hamilton]

Is there a way we can actually subset args.data[i] to produce only the data points we need? This d3 call will produce extra circles for every data point even if it is not visible, which will add a bunch of weight to the DOM that is probably not needed. We are already committing this sin in MG, so I'm hoping to keep us from bringing in an even heavier DOM down the line.

[thomaschampagne]

You right. It's a bit dirty :/. I will try to fix that this weekend.
The use case is the same than my 2 other PRs => https://twitter.com/champagnethomas/status/972161893384228866

[hamilton]

Great - thanks @thomaschampagne!

[hamilton]

btw, really neat to see how you're using MG. Don't hesitate to send along more screenshots.

[thomaschampagne]

@hamilton I can suggest that improvement:

      if (args.active_point_on_lines) {
        svg.selectAll('circle-' + line_id)
          .data(args.data[i])
          .enter()
          .filter((d) => {
            return d[args.active_point_accessor];
          })
          .append('circle')
          .attr('class', 'mg-area' + (line_id) + '-color mg-shown-active-point')
          .attr('cx', args.scalefns.xf)
          .attr('cy', args.scalefns.yf)
          .attr('r', (d) => {
            console.warn(d)
            return args.active_point_size;
          });
      }

I introduced a filter() between enter() and append('circle'). With this code only active points will create 'circle' elements in the DOM . Tested and verified on my side.

Let me know if this solution is sufficient for you.

Sending more screenshot of my app :)? Or screenshots related to this PR?

[thomaschampagne]

@hamilton @wlach Does my latests changes (82bc917) are OK for you? Or i have to review my work?

[wlach]

Sorry for the delay on reviewing this. Everything looks good to me here, I will merge!