Merge branch 'mat-angular'

Intégration des modifs de Mathieu.

static/js/gargantext.angular.js

@@ -267,7 +267,7 @@ gargantext.controller("DatasetController", function($scope, $http) {
             }
             // event firing to parent(s)
             $scope.$emit('updateDataset', {
-                datasetId: $scope.$id,
+                datasetIndex: $scope.$index,
                 url: url,
                 filters: filters,
                 mesured: $scope.mesured
@@ -280,9 +280,16 @@ gargantext.controller("DatasetController", function($scope, $http) {
 gargantext.controller("GraphController", function($scope, $http, $element) {
     // initialization
     $scope.datasets = [{}];
-    $scope.resultsList = [];
-    $scope.queries = {};
     $scope.groupingKey = 'year';
+    $scope.options = {
+        stacking: false
+    };
+    $scope.seriesOptions = {
+        thicknessNumber: 3,
+        thickness: '3px',
+        type: 'area',
+        striped: false
+    };
     $scope.graph = {
         data: [],
         options: {
@@ -305,22 +312,22 @@ gargantext.controller("GraphController", function($scope, $http, $element) {
     // remove a dataset
     $scope.removeDataset = function(datasetIndex) {
         $scope.datasets.shift(datasetIndex);
+        $scope.query();
     };
     // show results on the graph
-    $scope.showResults = function(keys) {
+    $scope.showResults = function() {
         // Format specifications
-        var xKey = 0;
-        var yKey = 1;
         var grouping = groupings.datetime[$scope.groupingKey];
         var convert = function(x) {return new Date(x);};
         // Find extrema for X
         var xMin, xMax;
-        angular.forEach($scope.resultsList, function(results){
-            if (results.length == 0) {
+        angular.forEach($scope.datasets, function(dataset){
+            if (!dataset.results) {
                 return false;
             }
-            var xMinTmp = results[0][xKey];
-            var xMaxTmp = results[results.length - 1][xKey];
+            var results = dataset.results;
+            var xMinTmp = results[0][0];
+            var xMaxTmp = results[results.length - 1][0];
             if (xMin === undefined || xMinTmp < xMin) {
                 xMin = xMinTmp;
             }
@@ -334,17 +341,18 @@ gargantext.controller("GraphController", function($scope, $http, $element) {
         xMax = grouping.truncate(xMax);
         for (var x=xMin; x<=xMax; x=grouping.next(x)) {
             var row = [];
-            angular.forEach($scope.resultsList, function(results){
+            angular.forEach($scope.datasets, function(){
                 row.push(0);
             });
             dataObject[x] = row;
         }
         // Fill the dataObject with results
-        angular.forEach($scope.resultsList, function(results, resultsIndex){
+        angular.forEach($scope.datasets, function(dataset, datasetIndex){
+            var results = dataset.results;
             angular.forEach(results, function(result, r){
-                var x = grouping.truncate(result[xKey]);
-                var y = result[yKey];
-                dataObject[x][resultsIndex] += parseFloat(y);
+                var x = grouping.truncate(result[0]);
+                var y = result[1];
+                dataObject[x][datasetIndex] += parseFloat(y);
             });
         });
         // Convert this object back to a sorted array
@@ -359,26 +367,48 @@ gargantext.controller("GraphController", function($scope, $http, $element) {
         }
         // Finally, update the graph
         var series = [];
-        for (var i=0, n=$scope.resultsList.length; i<n; i++) {
-            series.push({
-                y: 'y'+i,
+        for (var i=0, n=$scope.datasets.length; i<n; i++) {
+            var seriesElement = {
+                id: 'series_'+ i,
+                y: 'y'+ i,
                 axis: 'y',
                 color: $scope.getColor(i, n)
+            };
+            angular.forEach($scope.seriesOptions, function(value, key) {
+                seriesElement[key] = value;
             });
+            series.push(seriesElement);
         }
         $scope.graph.options.series = series;
         $scope.graph.data = linearData;
+        // shall we stack?
+        if ($scope.options.stacking) {
+            var stack = {
+                axis: 'y',
+                series: []
+            };
+            angular.forEach(series, function(seriesElement) {
+                stack.series.push(seriesElement.id);
+            });
+            $scope.graph.options.stacks = [stack];
+        } else {
+            delete $scope.graph.options.stacks;
+        }
     };
     // perform a query on the server
     $scope.query = function() {
-        // reinitialize data
-        $scope.resultsList = new Array($scope.datasets.length);
-        $scope.indexById = {};
+        // number of requests made to the server
+        var requestsCount = 0;
+        // reinitialize graph data
         $scope.graph.data = [];
-        // add all the server request to the queue
-        var index = 0;
-        angular.forEach($scope.queries, function(query, datasetId) {
-            $scope.indexById[datasetId] = index++;
+        // queue all the server requests
+        angular.forEach($scope.datasets, function(dataset, datasetIndex) {
+            // if the results are already present, don't send a query
+            if (dataset.results !== undefined) {
+                return;
+            }
+            // format data to be sent as a query
+            var query = dataset.query;
             var data = {
                 filters: query.filters,
                 sort: ['metadata.publication_date.day'],
@@ -387,57 +417,65 @@ gargantext.controller("GraphController", function($scope, $http, $element) {
                     list: ['metadata.publication_date.day', query.mesured]
                 }
             };
+            // request to the server
             $http.post(query.url, data, {cache: true}).success(function(response) {
-                var index = $scope.indexById[datasetId];
-                $scope.resultsList[index] = response.results;
-                for (var i=0, n=$scope.resultsList.length; i<n; i++) {
-                    if ($scope.resultsList[i] == undefined) {
+                dataset.results = response.results;
+                for (var i=0, n=$scope.datasets.length; i<n; i++) {
+                    if ($scope.datasets[i].results == undefined) {
                         return;
                     }
                 }
-                $scope.showResults(response.retrieve);
+                $scope.showResults();
             }).error(function(response) {
                 console.error('An error occurred while retrieving the query response');
             });
+            requestsCount++;
         });
+        // if no request have been made at all, refresh the chart
+        if (requestsCount == 0) {
+            $scope.showResults();
+        }
     };
-    // update the queries (catches the vent thrown by children dataset controllers)
+    // update the datasets (catches the vent thrown by children dataset controllers)
     $scope.$on('updateDataset', function(e, data) {
-        $scope.queries[data.datasetId] = {
+        var dataset = $scope.datasets[data.datasetIndex]
+        dataset.query = {
             url: data.url,
             filters: data.filters,
             mesured: data.mesured
         };
+        dataset.results = undefined;
         $scope.query();
     });
 });
 
 
 
-// // For debugging only!
-// setTimeout(function(){
-//     var corpusId = $('div.corpus select option').last().val();
-//     // first dataset
-//     $('div.corpus select').val(corpusId).change();
-//     setTimeout(function(){
-//         $('div.filters button').last().click();
-//         var d = $('li.dataset').last();
-//         d.find('select').last().val('metadata').change();
-//         d.find('select').last().val('publication_date').change();
-//         d.find('select').last().val('>').change();
-//         d.find('input').last().val('2010').change();
+// For debugging only!
+setTimeout(function(){
+    // first dataset
+    $('div.corpus select').change();
+    $('button.add').first().click();
+    setTimeout(function(){
+        $('div.corpus select').change();
+    //     $('div.filters button').last().click();
+    //     var d = $('li.dataset').last();
+    //     d.find('select').last().val('metadata').change();
+    //     d.find('select').last().val('publication_date').change();
+    //     d.find('select').last().val('>').change();
+    //     d.find('input').last().val('2010').change();
         
-//         // second dataset
-//         // $('button.add').first().click();
-//         // var d = $('li.dataset').last();
-//         // d.find('select').change();
-//         // // second dataset's filter
-//         // d.find('div.filters button').last().click();
-//         // d.find('select').last().val('metadata').change();
-//         // d.find('select').last().val('abstract').change();
-//         // d.find('select').last().val('contains').change();
-//         // d.find('input').last().val('dea').change();
-//         // refresh
-//         $('button.refresh').first().click();
-//     }, 500);
-// }, 500);
+    //     // second dataset
+    //     // $('button.add').first().click();
+    //     // var d = $('li.dataset').last();
+    //     // d.find('select').change();
+    //     // // second dataset's filter
+    //     // d.find('div.filters button').last().click();
+    //     // d.find('select').last().val('metadata').change();
+    //     // d.find('select').last().val('abstract').change();
+    //     // d.find('select').last().val('contains').change();
+    //     // d.find('input').last().val('dea').change();
+    //     // refresh
+    //     // $('button.refresh').first().click();
+    }, 500);
+}, 250);
\ No newline at end of file

templates/tests/mvc.html

@@ -4,6 +4,7 @@
     <!-- {% load staticfiles %} -->
     <link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
     <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
+    <title>GarganText: Analyze your data with graphs</title>
 {% endblock %}
 
 
@@ -121,6 +122,7 @@
 -->
     
     <style type="text/css">
+        div.corpus button:first-child+select {color:#FFF;}
         div.list-results table {border-collapse: collapse;}
         div.list-results th, div.list-results td {border: solid 1px #888; padding: 0.5em;}
         div.list-results th {background: #444; color: #FFF}
@@ -266,7 +268,7 @@
             </div>
             <div class="graph-parameters">
                 X-axis: groups the results by
-                <select ng-model="groupingKey" ng-options="key for key in ['day', 'month', 'year', 'decade', 'century']" ng-change="showResults()">
+                <select ng-model="groupingKey" ng-options="key for key in ['day', 'month', 'year', 'decade', 'century']" ng-change="query()">
                 </select>
                 <br/>
 
@@ -274,15 +276,32 @@
                 <select ng-model="graph.options.axes.y.type" ng-options="type for type in ['log', 'linear']"></select>
                 scale
                 <br/>
+                
+                <hr/>
 
-                Interpolation:
-                <select ng-model="graph.options.lineMode">
-                    <option ng-repeat="mode in ['bundle', 'linear']" value="{{ mode }}">{{ mode }}</option>
-                </select>
-                <span ng-if="graph.options.lineMode != 'linear'">
-                    with a smoothing of smoothing:
-                    <input type="text" disabled="disabled" ng-model="graph.options.tension" />
-                    <input type="range" min="0" max="2" step=".1" ng-model="graph.options.tension" />
+                Represent data with
+                <select ng-model="seriesOptions.type" ng-options="type for type in ['line', 'area', 'column']" ng-change="query()"></select>
+                <span ng-show="seriesOptions.type == 'area'">
+                    (<select ng-model="seriesOptions.striped" ng-options="value as key for (key, value) in {'with':true, 'without':false}" ng-change="query()"></select> stripes)
+                </span>
+                <span ng-show="seriesOptions.type == 'area' || seriesOptions.type == 'column'">
+                    (<select ng-model="options.stacking" ng-options="value as key for (key, value) in {'with':true, 'without':false}" ng-change="query()"></select> stacking)
+                </span>
+                <br/>
+
+                <span ng-hide="seriesOptions.type == 'column'">
+                    Line thickness:
+                    <input ng-model="seriesOptions.thicknessNumber" type="range" min="1" max="8" ng-change="seriesOptions.thickness = seriesOptions.thicknessNumber + 'px'; query()" />
+                    <br/>
+                    Interpolation:
+                    <select ng-model="graph.options.lineMode">
+                        <option ng-repeat="mode in ['bundle', 'linear']" value="{{ mode }}">{{ mode }}</option>
+                    </select>
+                    <span ng-if="graph.options.lineMode != 'linear'">
+                        with a tension of
+                        <input type="text" disabled="disabled" ng-model="graph.options.tension" />
+                        <input type="range" min="0" max="2" step=".1" ng-model="graph.options.tension" />
+                    </span>
                 </span>
             </div>
         </div>