funnel-graph-js icon indicating copy to clipboard operation
funnel-graph-js copied to clipboard

[Feature request] Different texts for Labels and legends

Open yancorrea1995 opened this issue 5 years ago • 6 comments

Would it be possible to add this feature?

Add a setting to set legends (subtitles) and Labels separately. One field for each object.

Thanks!

yancorrea1995 avatar May 09 '19 12:05 yancorrea1995

Hi @yancorrea1995 , thanks for your interest! could you please clarify by "setting separately"? Currently, it is possible to set labels and sub-labels (legends):

data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    subLabels: ['Direct', 'Social Media', 'Ads'],
    ...
}

What would be wish to set the values?

greghub avatar May 09 '19 13:05 greghub

Hi Greg!

During mouse hover, add the possibility of customizing the text, so that it is different from the legend in the bottom of funnel. export

yancorrea1995 avatar May 09 '19 15:05 yancorrea1995

And, if possible, add an option to hide the zero values in the mouse hover. Example (hide "Idea 02: 0" because the "0" is not a necessary information. That will make the Funnel more clean and easy to view.

yancorrea1995 avatar May 10 '19 15:05 yancorrea1995

Agreed with removing zeroes for usability, but having to adapt the data to remove subsets with no values made for some efficient backend code 😛

lordplagus02 avatar May 16 '19 11:05 lordplagus02

Don't need to remove the values, just hide. Who to use chooses whether or not to hide with a flag (option) in the settings of the funnel.

yancorrea1995 avatar May 16 '19 11:05 yancorrea1995

I made a workaround to hide empty sublabel values. The last "if" hide also results with only 1 value, to avoid redundancy with main label.

$('div.svg-funnel-js ul.segment-percentage__list').each(function (i, list) {
    list = $(list);
    var listItems = list.find('span.percentage__list-label');
    listItems.each(function (j, elem) {
        elem = $(elem);
        if (elem.text().startsWith("0")) {
            elem.closest('li').addClass('hidden');
        }
    });

    if (list.find('li:not(.hidden)').length <= 1) {
        list.closest('.label__segment-percentages').addClass('hidden');
    }        
});

maitsa avatar Aug 06 '19 12:08 maitsa