Legend selection highlighting

[barclayadam]

Hi,

I want the ability to highlight legend items that have an active filter. To do this the legend itself needs a class to indicate there are active filters, and then each legend item gets a class to indicate if it is active.

I modified dc.js legends with a couple of lines to support the scenarios I currently have, but I do not know if it could cover everything, or exactly the best way to integrate with current infrastructure:

The top of _legend.render method becomes:

        var legendables = _parent.legendables(),
            filters = _parent.filters();

        _parent.svg().select("g.dc-legend").remove();
        _g = _parent.svg().append("g")
            .attr("class", "dc-legend")
            // MODIFICATION: Add dc-legend-active-filters
            .classed("dc-legend-active-filters", filters.length > 0)
            .attr("transform", "translate(" + _x + "," + _y + ")");

        var itemEnter = _g.selectAll('g.dc-legend-item')
            .data(legendables)
            .enter()
            .append("g")
            // MODIFICATION: Add dc-legend-selected
            .attr("class", function (d) {
                return "dc-legend-item" + (filters.indexOf(d.name.toString()) === -1 ? "" : " dc-legend-selected");
            })

The bit I'm least sure about is adding the dc-legend-selected class, finding out whether that legend item is a currently filtered item.

For reference additional CSS I'm using is:

.dc-legend-active-filters .dc-legend-item {
    opacity: 0.8;
}

.dc-legend-active-filters .dc-legend-selected {
    opacity: 1;
}

Thanks,
Adam

[gordonwoodhull]

This sounds like useful functionality. A PR would be welcome!

[rrameshkumar76]

@barclayadam Thanks for the above solution. This works great for me in my project for html legends.

[ialarmedalien]

Could this be implemented? I keep running into problems where I am not sure which legend items are selected and which aren't. I'd be happy to implement it for the html legend, too.

[rrameshkumar76]

htmlLegend has the highlightSelected implemented in it. https://github.com/dc-js/dc.js/blob/develop/src/html-legend.js#L102-L108

The example page https://dc-js.github.io/dc.js/examples/html-legend.html has this set up also.

[gordonwoodhull]

Very cool, I hadn't noticed that. Looks like it should be easy to port to the SVG legend.

[Tahirhan]

I checked the documentation but there is no method for highligting selected legends in SVG type. Is it implemented?

[gordonwoodhull]

Hi @Tahirhan, clearly the functionality has not been copied over yet.

If you want to give it a shot, it’s just a matter of copying all the sections having to do with highlightSelected from one class to the other.

I can get it into the next release if you make a PR!

[Tahirhan]

Ok, i will try :)

[gordonwoodhull]

Thanks @Tahirhan, merged for release 3.1.9