.. _nbtreantrst:

========================================
Javascript library in a notebook: treant
========================================


.. only:: html

    **Links:** :download:`notebook <nb_treant.ipynb>`, :downloadlink:`html <nb_treant2html.html>`, :download:`PDF <nb_treant.pdf>`, :download:`python <nb_treant.py>`, :downloadlink:`slides <nb_treant.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_treant.ipynb|*`


`treant-js <http://www.xavierdupre.fr/app/jupytalk/helpsphinx/notebooks/jsonly_treant.html#jsonlytreantrst>`__
in a notebook.

.. code:: ipython3

    css = ["http://fperucic.github.io/treant-js/Treant.css"]
    libs = ["http://fperucic.github.io/treant-js/vendor/raphael.js",
            "http://fperucic.github.io/treant-js/Treant.js"]

.. code:: ipython3

    style = """
    .chart { height: 1200px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
    .tennis-draw {
        font-size: 10px;
        width: 100px;
    }
    .tennis-draw.winner { height: 38px; }
    .tennis-draw.winner:hover {
        background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat;
    }
    .tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }
    .tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }
    .tennis-draw .node-desc { padding: 2px; color: #999; }
    .tennis-draw.first-draw .node-title,
    .tennis-draw.first-draw .node-name,
    .tennis-draw.first-draw img { position: absolute; top: -8px; }
    .tennis-draw.first-draw:hover img { width: 20px; top: -12px; }
    .tennis-draw.first-draw { width: 165px; height: 20px; }
    .tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }
    .tennis-draw.first-draw .node-title { margin-top: 3px; }
    .tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }
    .tennis-draw.first-draw.bye .node-name { color: #999; }
    """

.. code:: ipython3

    script = """
    // source:
    // http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013
    var tree_structure = {
        chart: {
            container: "#__ID__",
            levelSeparation:    20,
            siblingSeparation:  15,
            subTeeSeparation:   15,
            rootOrientation: "EAST",
            node: {
                HTMLclass: "tennis-draw",
                drawLineThrough: true
            },
            connectors: {
                type: "straight",
                style: {
                    "stroke-width": 2,
                    "stroke": "#ccc"
                }
            }
        },
        nodeStructure: {
            text: {
                name: {val: "Djokovic, Novak",
                       href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"}
            },
            HTMLclass: "winner",
            children: [
                {
                    text: { name: "Djokovic, Novak", desc: "4-6, 6-2, 6-2" },
                    children: [
                        {
                            text: { name: "Djokovic, Novak", desc: "4-6, 6-1, 6-4" },
                            children: [
                                {
                                    text: { name: "Djokovic, Novak", desc: "4-6, 6-1, 6-4" },
                                    children: [
                                        {
                                            text: { name: "Djokovic, Novak", title: 1 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg",
                                            HTMLclass: "first-draw",
                                        },
                                        {
                                            text: { name: "Bye", title: 2 },
                                            HTMLclass: "first-draw bye"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Youzhny, Mikhail", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Youzhny, Mikhail", title: 3 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Gimeno-Traver, Daniel", title: 4 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            text: { name: "Monaco, Juan", desc: "6-0, 3-6, 6-3" },
                            children: [
                                {
                                    text: { name: "Gulbis, Ernests", desc: "4-6, 6-2, 6-3" },
                                    children: [
                                        {
                                            text: { name: "Gulbis, Ernests", title: 5 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Isner, John", title: 6 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Monaco, Juan", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Klizan, Martin", title: 7 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Monaco, Juan", title: 8 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    text: { name: "Nieminen, Jarkko", desc: "6-3, 1-6, 7-6(3)" },
                    children: [
                        {
                            text: { name: "Nieminen, Jarkko", desc: "4-6, 6-1, 6-4" },
                            children: [
                                {
                                    text: { name: "Raonic, Milos", desc: "6-1, 6-4" },
                                    children: [
                                        {
                                            text: { name: "Raonic, Milos", title: 9 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Benneteau, Julien", title: 10 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Nieminen, Jarkko", desc: "6-1, 6-2" },
                                    children: [
                                        {
                                            text: { name: "Nieminen, Jarkko", title: 11 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Troicki, Viktor", title: 12 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            text: { name: "Del Potro, Juan Martin", desc: "6-2, 6-4" },
                            children: [
                                {
                                    text: { name: "Dolgopolov, Alexandr", desc: "4-6, 6-2, 6-3" },
                                    children: [
                                        {
                                            text: { name: "Dolgopolov, Alexandr", title: 13 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Tomic, Bernard", title: 14 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Del Potro, Juan Martin", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Bye", title: 15 },
                                            HTMLclass: "first-draw bye"
                                        },
                                        {
                                            text: { name: "Del Potro, Juan Martin", title: 16 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    };
    new Treant( tree_structure );
    """

.. code:: ipython3

    from jyquickhelper import RenderJS
    RenderJS(script=script, css=css, libs=libs, style=style,
             div_class="chart", height=None, width=None)






.. raw:: html

    <div id="M1df31047da564e7ba6ca05e26b8da2b0-css"><link rel="stylesheet" href="http://fperucic.github.io/treant-js/Treant.css" type="text/css" /><div class="chart" id="M1df31047da564e7ba6ca05e26b8da2b0" style="
    .chart { height: 1200px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
    .tennis-draw {
        font-size: 10px;
        width: 100px;
    }
    .tennis-draw.winner { height: 38px; }
    .tennis-draw.winner:hover {
        background: url('http://fperucic.github.io/treant-js/examples/tennis-draw/trophy.png') right 0 no-repeat;
    }
    .tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }
    .tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }
    .tennis-draw .node-desc { padding: 2px; color: #999; }
    .tennis-draw.first-draw .node-title,
    .tennis-draw.first-draw .node-name,
    .tennis-draw.first-draw img { position: absolute; top: -8px; }
    .tennis-draw.first-draw:hover img { width: 20px; top: -12px; }
    .tennis-draw.first-draw { width: 165px; height: 20px; }
    .tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }
    .tennis-draw.first-draw .node-title { margin-top: 3px; }
    .tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }
    .tennis-draw.first-draw.bye .node-name { color: #999; }
    "></div></div>
    <script>

    require(['http://fperucic.github.io/treant-js/vendor/raphael.js','http://fperucic.github.io/treant-js/Treant.js'], function() { 
    // source:
    // http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013
    var tree_structure = {
        chart: {
            container: "#M1df31047da564e7ba6ca05e26b8da2b0",
            levelSeparation:    20,
            siblingSeparation:  15,
            subTeeSeparation:   15,
            rootOrientation: "EAST",
            node: {
                HTMLclass: "tennis-draw",
                drawLineThrough: true
            },
            connectors: {
                type: "straight",
                style: {
                    "stroke-width": 2,
                    "stroke": "#ccc"
                }
            }
        },
        nodeStructure: {
            text: {
                name: {val: "Djokovic, Novak",
                       href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"}
            },
            HTMLclass: "winner",
            children: [
                {
                    text: { name: "Djokovic, Novak", desc: "4-6, 6-2, 6-2" },
                    children: [
                        {
                            text: { name: "Djokovic, Novak", desc: "4-6, 6-1, 6-4" },
                            children: [
                                {
                                    text: { name: "Djokovic, Novak", desc: "4-6, 6-1, 6-4" },
                                    children: [
                                        {
                                            text: { name: "Djokovic, Novak", title: 1 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg",
                                            HTMLclass: "first-draw",
                                        },
                                        {
                                            text: { name: "Bye", title: 2 },
                                            HTMLclass: "first-draw bye"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Youzhny, Mikhail", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Youzhny, Mikhail", title: 3 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/rus.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Gimeno-Traver, Daniel", title: 4 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/esp.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            text: { name: "Monaco, Juan", desc: "6-0, 3-6, 6-3" },
                            children: [
                                {
                                    text: { name: "Gulbis, Ernests", desc: "4-6, 6-2, 6-3" },
                                    children: [
                                        {
                                            text: { name: "Gulbis, Ernests", title: 5 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/lat.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Isner, John", title: 6 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/usa.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Monaco, Juan", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Klizan, Martin", title: 7 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/slo.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Monaco, Juan", title: 8 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    text: { name: "Nieminen, Jarkko", desc: "6-3, 1-6, 7-6(3)" },
                    children: [
                        {
                            text: { name: "Nieminen, Jarkko", desc: "4-6, 6-1, 6-4" },
                            children: [
                                {
                                    text: { name: "Raonic, Milos", desc: "6-1, 6-4" },
                                    children: [
                                        {
                                            text: { name: "Raonic, Milos", title: 9 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/can.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Benneteau, Julien", title: 10 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fra.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Nieminen, Jarkko", desc: "6-1, 6-2" },
                                    children: [
                                        {
                                            text: { name: "Nieminen, Jarkko", title: 11 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/fin.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Troicki, Viktor", title: 12 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/srb.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            text: { name: "Del Potro, Juan Martin", desc: "6-2, 6-4" },
                            children: [
                                {
                                    text: { name: "Dolgopolov, Alexandr", desc: "4-6, 6-2, 6-3" },
                                    children: [
                                        {
                                            text: { name: "Dolgopolov, Alexandr", title: 13 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/ukr.jpg",
                                            HTMLclass: "first-draw"
                                        },
                                        {
                                            text: { name: "Tomic, Bernard", title: 14 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/aus.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                },
                                {
                                    text: { name: "Del Potro, Juan Martin", desc: "6-4, 6-0" },
                                    children: [
                                        {
                                            text: { name: "Bye", title: 15 },
                                            HTMLclass: "first-draw bye"
                                        },
                                        {
                                            text: { name: "Del Potro, Juan Martin", title: 16 },
                                            image: "http://fperucic.github.io/treant-js/examples/tennis-draw/flags/arg.jpg",
                                            HTMLclass: "first-draw"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    };
    new Treant( tree_structure );
     });

    </script>