@flourish/data-popup

    4.0.0 • Public • Published

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

    Keywords

    none

    Install

    npm i @flourish/data-popup

    DownloadsWeekly Downloads

    19

    Version

    4.0.0

    License

    UNLICENSED

    Unpacked Size

    46.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • axwalker
    • shar.k
    • flourish-canva
    • declanvong
    • pinkopunko
    • vee_canva
    • florin.oprina
    • robinhouston
    • duncanclark
    • daanlouter
    • timbrock
    • hughsk
    • mark-kiln
    • animateddata
    • larsvers
    • luptilu
    • bobbysebolao
    • liakouras
    • oliviajanelawlor
    • hrobertson
    • eademoon
    • qubyte
    • chrisnewell
    • oampo
    • sebr
    • alextreppass
    • wearymonkey
    • mattcarter-canva
    • marcfallows
    • mafecafe
    • connormj
    • simonaats