@flourish/info-popup

Flourish Info Popup

Enable popups with styling and data binding from Flourish

Install

npm install @flourish/info-popup

Initialization

The settings.yml file should be imported into your template’s template.yml file, like this:

  - Popups
  - property: mypopup
    import: "@flourish/info-popup"

var popup = Popup(state.mypopup, panel_container, popup_container) creates an Info Popup module with the defaults from state.mypopup. panel_container and popup_container are optional and are used to constrain the popup and panel.

Add column names to the popup by calling popup.addColumnNames(data.data.column_names).

Showing and hiding the Info Popup

You can specify specific user events when activating the Info Popup. So you only have to specify when the Info Popup was triggered by a click, clickout, mouse or mouseout - and the module will take care of sticky popups and when to enable/disable the panel.

popup.click(coords_or_node, data, id, callback) popup.clickout() popup.mouseover(coords_or_node, data, callback) popup.mouseout()

• coords_or_node – can be an array with x, y coordinates or a Node element.
• data – is an object with data to display in the popup.
• id – is an id to remember which id should be made sticky

If the visibility of the popup is triggered by something other than a user event, you can user popup.update(coords_or_node, d, callback). This is useful for complex templates or when showing/hiding sticky popup values.

Positional methods

popup.popupDirections(directions) – gets or sets the popup directions.

popup.margins() – gets the space on the visualisation edges being used for the panel. This is useful for when you don't want the panel to overlay over the content.

Setting a title and subtitle

It's possible to choose a data point that should be treated as a title or subtitle. The title and subtitle have different visual weight from the rest of the content.

popup.titleKey(data_binding_name) popup.subtitleKey(data_binding_name)

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 Info Popup. Adding data binding names between curly brackets, like {{name_of_data_binding}};

popup.popupDefaultTemplate(template_string) popup.panelDefaultTemplate(template_string)