Javascript library in a notebook: pig¶

Tries pig in a notebook. Example from index.html.

In [1]:
from jyquickhelper import RenderJS
css = None
libs = ['http://www.xavierdupre.fr/js/pig/pig.min.js']
script = """
var imageData = [
    {"filename": "nb_c3.thumb.png", "aspectRatio": 1},
    {"filename": "nb_viz.thumb.png", "aspectRatio": 1},
    {"filename": "nb_svg.thumb.png", "aspectRatio": 1},
    {"filename": "nb_vis.thumb.png", "aspectRatio": 1},
    {"filename": "nb_mermaid.thumb.png", "aspectRatio": 1},
];
var pig = new Pig(imageData, {
    urlForSize: function(filename, size) {
        return 'http://www.xavierdupre.fr/app/jyquickhelper/helpsphinx/_images/' + filename;
        },
    containerId: "__ID__",
}).enable();
"""
jr = RenderJS(script, css=css, libs=libs)
jr
Out[1]:
In [2]:
print(jr._repr_html_())

<div id="Mb16557ab711d4a17ab42d515fff41f66-cont"><div id="Mb16557ab711d4a17ab42d515fff41f66" style="width:100%;height:100%;"></div></div>
<script>

require(['http://www.xavierdupre.fr/js/pig/pig.min.js'], function() { 
var imageData = [
    {"filename": "nb_c3.thumb.png", "aspectRatio": 1},
    {"filename": "nb_viz.thumb.png", "aspectRatio": 1},
    {"filename": "nb_svg.thumb.png", "aspectRatio": 1},
    {"filename": "nb_vis.thumb.png", "aspectRatio": 1},
    {"filename": "nb_mermaid.thumb.png", "aspectRatio": 1},
];
var pig = new Pig(imageData, {
    urlForSize: function(filename, size) {
        return 'http://www.xavierdupre.fr/app/jyquickhelper/helpsphinx/_images/' + filename;
        },
    containerId: "Mb16557ab711d4a17ab42d515fff41f66",
}).enable();
 });

</script>

Not very successful.

In [3]: