[FEATURE] Charts, ajout du dummy graph de Mathieu.

gargantext_web/urls.py

@@ -4,6 +4,7 @@ from django.contrib import admin
 
 from gargantext_web.views import home, projects, project, corpus
 from gargantext_web.views import add_corpus, delete_project, delete_corpus
+from gargantext_web.views import exploration
 from gargantext_web.views import explorer_graph, explorer_matrix
 
 admin.autodiscover()
@@ -28,6 +29,8 @@ urlpatterns = patterns('',
     
     url(r'^graph$', explorer_graph),
     url(r'^matrix$', explorer_matrix),
+    
+    url(r'^exploration$', exploration),
 )
 
 from django.conf import settings

gargantext_web/views.py

@@ -372,5 +372,17 @@ def explorer_matrix(request):
     
     return HttpResponse(html)
 
+def exploration(request):
+    t = get_template('exploration.html')
+    user = request.user
+    date = datetime.datetime.now()
+
+    html = t.render(Context({\
+            'user': user,\
+            'date': date,\
+            }))
+    
+    return HttpResponse(html)
+
 
 

static/js/charts/script.js

+/**
+ *
+ *  TODO:
+ *
+ *  +   change .plot().plot() into .feed([])
+ *
+ *  +   implement .view()
+ *
+ *  +   add legend, based on data.name
+ *
+ *  -   automatically identify if numeric/discrete,
+ *  +   automatically generate a list of all the possible values
+ *  +   automatically generate axis & grid
+ *
+ *  +   when 'data' is called, check if strings are encountered
+ *      as the first member of points (or second?)
+ *
+ *  +   check if points have 2 or 3 members (number of dimension)
+ *
+ *  -   implement viewing modes for 2D data:
+ *      -   sectors (only average)
+ *      +   histograms (with average & std)
+ *
+ *      -   points
+ *      +   lines
+ *      -   curves
+ *      -   areas
+ *      -   stacked areas
+ *
+ *      -   bars
+ *      -   stacked bars
+ *
+ *  -   implement viewing modes for 3D data:
+ *      -   heatmaps
+ *
+**/
+
+
+var dataList = [];
+for (var i=0; i<4; i++) {
+    var data = [];
+    var y = 3 + 1.5 * Math.random();
+    var dy = 0;
+    for (var x=1964; x<2014; x++) {
+        y += .1 * (Math.random() - .5);
+        // dy += .01 * (Math.random() - .5);
+        // y += dy;
+        if (y < 0) {
+            y = 0;
+        }
+        data.push([x, y]);
+    }
+    dataList.push(data);
+}
+
+var container = $('.graph');
+var graph = new Graph(container[0], container.width(), container.height())
+    .fill('#FFF')
+    .feed([
+        {name:'bees', data: dataList[0], options: {color:'#FC0', size:4}},
+        {name:'honey', data: dataList[1], options: {color:'#CF0', size:4}}
+    ])
+    // .view('lines', ['Year of publication', 'Term frequency'])
+    // .view('histograms', ['Term', 'Term frequency'])
+    // .view('sectors', ['Terms occurences'])
+
+
+$('select[name=view]').change(function(){
+    var value = $(this).val();
+    var options = {
+        'histogram': ['Year of publication', 'Term frequency'],
+        'line': ['Year of publication', 'Term frequency'],
+    };
+    graph.view(value, options[value])
+}).change();
+
+$(window).resize(function(){
+    var width = container.width();
+    var height = container.height();
+    graph.size(width, height);
+});

templates/corpus.html

@@ -28,7 +28,7 @@
 
 					{% if corpus %}
 						<h2>{{ corpus.name }} </h2>
-						<p>Created on {{ corpus.date }}, ({{ number}} docs)</p>
+						<p>Created on {{ corpus.date }} <br> ({{ number}} docs)</p>
 					{% endif %}
 
 					{% if number > 0 %}
@@ -53,7 +53,7 @@
     <div class="row">
         <div class="col-md-4">
         <div class="jumbotron">
-						<h3>Exploration</h3>
+						<h3><a href="/exploration">Exploration</a></h3>
 						<ol>
 								<li>Count frequency</li>
 								<li>Configurable Charts</li>

templates/exploration.html

+{% extends "menu.html" %}
 
+{% block css %}
+{% load staticfiles %}
+<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
+<link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
+{% endblock %}
 
+{% block content %}
 
+<div class="container theme-showcase" role="main">
+	<div class="jumbotron">
+			<h1> Exploration page</h1>
 
-<div id="hero-donut" style="height: 250px;"></div>    
+	</div>
+</div>
 
+
+<div class="container content">
+        <div class="graphWidget">
+            <h1>Bees vs. Honey</h1>
+            <select name="x">
+                <option value="year">X axis: year of publication</option>
+            </select>
+            <select name="y" style="margin-top:0">
+                <option value="frequency">Y axis: term frequency</option>
+            </select>
+            <select name="view">
+                <option value="line">View mode: curve</option>
+                <option value="histogram">View mode: histogram</option>
+            </select>
+            <div class="graph"></div>
+        </div>
+</div>
+
+
+				<script type="text/javascript" src="{% static "js/charts/raphael.js"%}"></script>
+				<script type="text/javascript" src="{% static "js/charts/plot.js"%}"></script>
+				<script type="text/javascript" src="{% static "js/charts/jquery.js"%}"></script>
+				<script type="text/javascript" src="{% static "js/charts/script.js"%}"></script>
+
+
+{% endblock %}