{% extends "document/document.html" %}

{% comment %}

Main page of the portal.

{% endcomment %}

{% block head %}

    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_URL }}treemap/design.css"/>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/d3/d3.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/d3/d3.layout.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/jquery-1.6.4.min.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/jquery-ui-1.8.16.custom.min.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/pure_min.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}treemap/treemap.js"></script>

{% endblock %}

    <section>

        <h2>Welcome, {{ user.username }}</h2>

        <p>This is the main page of the web portal.</p>

    </section>

{% block content %}

    <section>

    	<h2>Filtres</h2>

    	<button onclick="filterTreeMapData()">filtrer</button>

    </section>

    <h1>Treemap et sa timeline sous forme de streamgraph</h1>

	<div id="streamgraphTimeline"></div>

	<div id="treemap"></div>

	<div id="streamgraphTemplate">

		<img class="streamgraph_img" src="" alt=""/>

		<p class="title"></p>

	</div>

	<script type="text/javascript" src="{{ STATIC_URL }}treemap/donnees.js"> </script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/relations.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/couleurs.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/streamgraph.js"></script>

	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/treemap.js"></script>

{% endblock %}