@flourish/data-popup
v4.0.0
Published
Popup with data insertion
Downloads
673
Maintainers
Keywords
Readme
Flourish data popup
Enable popups with styling and data binding from Flourish
Install
npm install @flourish/data-popup
Usage
The settings.yml
file should be imported into your template’s template.yml
file, like this:
- Popups
- property: mypopup
import: "@flourish/data-popup"
Popup(container, state)
creates a Popup appended to container
.
Pass only the state for the popup. For example: Popup("#wrapper", state.mypopup)
Add column names to the popup by calling popup.addColumnNames(data.data.column_names)
.
popup.point(x, y)
points the popup at the given coordinates.
popup.point(element)
points the popup at the center of the given element.
popup.html(html).draw()
shows the popup with the given html. If you don't specify an argument in .html()
it will return the popup html.
popup.draw(datapoint)
passes a data point (eg. from D3) for rendering depending on the settings. You can also pass a decorator function to this call, which will get back the root DOM element for the popup, which you can use to apply additional styling.
For example:
data_popup.point(this).draw(d, function(el) {
el.querySelector("h1").style.color = "red";
});
Specifying a default template
It's also possible to specify a different template for the popup content. For instance if you want to add an tag or content needs to show in a specific order.
It's possible to pass in a default template when initializing the data popup. Adding data binding names between curly brackets, like {{name_of_data_binding}}
;
For example:
var popup_template = "<img src='{{image}}' /><br /><p>{{name}}</p>";
Popup(container, state, popup_template);
Specifying a popup title
It's possible to add a title to the popup. On default it looks for a data binding called id
and turns that into an <h1>
tag. It's possible to overwrite this in the 4th argument when initializing the Data Popup. For example, when you want to turn a data binding called "name" into the popup title:
Popup(container, state, null, "name");