In slate, chart widget have label option that display legend (color dot + label name) at some place of the chart (top, left, bottom, ...).
I notice 2 limitations with this legend on bar chart and I would like to improve them on my Slate apps.
1 issue: label are ordered in the order series appears on the bar chart (from left to right).
2 issue: when segmented and not-segmented data are stacked on the bar chart, label of not-segmented data have wrong color (even if we set series color parameter, and if we don't color attribution is random and change from one loading to the next).
For that reason I decided to produce my on labels in an HTML widget. I get a nice result just with a function that sort label and return a <div class="bp3-label" style="background:${labelColor};">${labelName}<\div> for each label. But I loose the interactivity (this is a convenient function of labels).
Is there a way to transfer this interactivity to my "custom label" and make click on this selecting all relevant bars on my bar chart?
I'm thinking to use slClickEvent and slClickEventValue props on the DIVs to push data relative to the clicked Label in a variable and to make the bar chart "selectedValue" property dependant of this variable.
Is it the best ways ?
Will the bar be highlighted in accorance with chart "selectedValue"?
You're on the correct track here - I often build custom chart legends in an HTML widget to have more control over the appearance and interaction compared to the native legend. If you search on your Foundry instance, you'll even find a folder of Slate apps that are examples of different HTML widget patterns, including one called HTML - Legend that shows some examples with custom CSS and Blueprint styles.
For the interactivity, I'd probably go with using custom HTML selection, rather than custom HTML click events, because with the custom selection, Slate will automatically add a selected class to whatever element you've added the selection to, which will make it easy to update the styling to reflect the selection.
Nothing would stop you from doing this with custom clickEvents instead, but you'd then need to also do some more work to reflect the selection status in the legend or else go without that extra affordance.
If you search your Foundry instance for Line Chart Series Selection with Custom Legend you'll find an example that shows exactly this. In that specific example, the Line "selection" is indicated on the chart by changing the line styling; with a Bar chart, you'd actually want to template (with Handlebars) the selection status of the chart in the </> panel. Then, when the user makes a selection using the legend, the chart will reflect that selection as if they'd chosen by clicking on the bars themselves.
Currently, i have a few number of fields that shows up and hides on a button click.
I want to transfer some of those fields to a pop-Up (preferably using angular material) . Can you help me with some links?
Also this is in Angular !
Set id on parent tag and on button click hide show functionality.
Otherwise use [Toggle]: https://www.w3schools.com/jquery/event_toggle.asp functunality.
So I'm starting with angular and I would like filter a list depending on which div is currently selected.
They are selected by being cliked. I suppose this is exactly how radio buttons behave but they are ugly and I would like to have a completely designed div (not just label) which is to be clicked.
I've read that you can add label with for attribute and hide the radio button to have something similar. I suppose what I would like is to be able to add for on a div to bind it.
What would be the best way to achieve this The Angular Way ?
You will find your solution at angular ui bootstrap goto buttons sections
I need a list where for some items, there should be a checkbox available and user should be able to check multiple checkboxes i.e select multiple items.
So I made use of toolkit: "LongListMultiselector".
But I cannot figure out a way to hide the checkboxes for some element? Is there actually a way while using "LongListMultiselector" or should I change the control element.
Is there a setting that will automatically move tagged items when they are complete? For example, if I have a to-do list with check boxes, once a box is checked, is there a setting that would move the item to another page? Maybe a page I have designated as "Completed items"?
No. but you can use the Find Tags feature and tick the "Only show unchecked items" checkbox.