In [1]:

    

import jinja2
import json
from IPython.display import display, display_pretty, Javascript, HTML
from IPython import get_ipython


def render_card(card):
    ipython = get_ipython()
    display(Javascript("""
    require.config({
        paths: {
            feed: '//localhost:5000/static/dist/experiment.bundle',
        },
    });
    """))

    display(HTML("""
      <link href="//localhost:5000/static/dist/index.css" rel="stylesheet" type="text/css">
    """));

    display(HTML("""<div id="card"/>"""))


    template = jinja2.Template("""
        require(["feed"], function(feed) {
        var React = feed.React;
        var ReactDOM = feed.ReactDOM;
        var card = {{ card }};

        ReactDOM.render(
            React.createElement(feed.wrapper, {card: card}, feed.cardMap(card)),
            document.getElementById('card')
            );
        });
    """)
    display(Javascript(template.render(card=json.dumps(card))))


    

In [2]:

    

card = {
    "card_type": "pie",
    "control_period": {},
    "created_at": "Sun, 17 Jan 2016 18:51:21 GMT",
    "data": {
        "battle_measures": [],
        "measure": "count",
        "values": [
            {
                "label": "new",
                "value": 44
            },
            {
                "label": "returning",
                "value": 1
            }
        ]
    },
    "description": "",
    "feedback": {
        "favorite": False,
        "first_showed_at": "Sun, 17 Jan 2016 18:51:21 GMT",
        "impressions": [
            {
                "position": -1,
                "showed_at": "Sun, 17 Jan 2016 18:51:21 GMT"
            }
        ],
        "last_showed_at": "Sun, 17 Jan 2016 18:51:21 GMT"
    },
    "id": "569901ade68a632c114a0882",
    "published_at": "Fri, 15 Jan 2016 14:26:53 GMT",
    "tags": [],
    "target_period": {
        "period_end": "Fri, 01 Jan 2016 00:00:00 GMT",
        "period_length": "month",
        "period_meaning": "last month",
        "period_start": "Tue, 01 Dec 2015 00:00:00 GMT"
    },
    "title": "New vs Returning Customers",
    "user_id": "569656d8daf4e85c04d9ef0b"
}


    

In [3]:

    

render_card(card)


    

In [ ]: