RhoInc / Webcharts

Reusable, flexible, interactive charts with JavaScript
MIT License
34 stars 6 forks source link

Add easy way to "select all" in multi-value subsetters #254

Open jwildfire opened 5 years ago

jwildfire commented 5 years ago

Either add an "All" option at the top of the multi-select (and set that as the default), or add some kind of button/link in the label that selects all values when clicked.

[Based on feedback from @xni7]

samussiah commented 3 years ago

@sibyllwangxxxx suggested the options in multi-select filter dropdowns be selected. Right now the options are not by default selected. This update would at least make the initial selections apparent to the user.

samussiah commented 3 years ago

I tried out and really liked slim-select, a low-profile select framework: "slim-select": "^1.26.1"

    input.each(function (d, i, selection) {
        d.select = new SlimSelect({
            select: this,
        });
    });

    input.on('change', function (event, d) {
        // Update filter object with current selection.
        d.value = d.select.selected();

        // Flag records in the data that should be excluded.
        main.data.forEach((d) => {
            d.include = main.settings.filters.every((filter) => {
                return filter.value.includes(d[filter.var]);
            });
        });
    });

image

samussiah commented 3 years ago

And as a select-all this option should work:

image

But it doesn't work as a deselect-all...