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");