Skip to content

gargantext
gargantext
Commit 02a15e20 authored by Mathieu Rodic's avatar Mathieu Rodic
Browse files
Options

Merge branch 'mat-angular' of ssh://delanoe.org:1979/gargantext into mat-master

parents 80dd36a9 dfc1d59b
Show whitespace changes
Inline Side-by-side
Showing with 149 additions and 75 deletions
static/js/angular-cookies.min.js 0 → 100644
View file @ 02a15e20
/*
AngularJS v1.2.28
(c) 2010-2014 Google, Inc. http://angularjs.org
License: MIT
*/
(function(p,f,n){'use strict';f.module("ngCookies",["ng"]).factory("$cookies",["$rootScope","$browser",function(e,b){var c={},g={},h,k=!1,l=f.copy,m=f.isUndefined;b.addPollFn(function(){var a=b.cookies();h!=a&&(h=a,l(a,g),l(a,c),k&&e.$apply())})();k=!0;e.$watch(function(){var a,d,e;for(a in g)m(c[a])&&b.cookies(a,n);for(a in c)d=c[a],f.isString(d)||(d=""+d,c[a]=d),d!==g[a]&&(b.cookies(a,d),e=!0);if(e)for(a in d=b.cookies(),c)c[a]!==d[a]&&(m(d[a])?delete c[a]:c[a]=d[a])});return c}]).factory("$cookieStore",
["$cookies",function(e){return{get:function(b){return(b=e[b])?f.fromJson(b):b},put:function(b,c){e[b]=f.toJson(c)},remove:function(b){delete e[b]}}}])})(window,window.angular);
//# sourceMappingURL=angular-cookies.min.js.map
static/js/gargantext.angular.js
View file @ 02a15e20
......@@ -86,12 +86,15 @@ var groupings = {
};
// application definition
var gargantext = angular.module('Gargantext', ['n3-charts.linechart']);
// Define the application
var gargantext = angular.module('Gargantext', ['n3-charts.linechart', 'ngCookies'])
// tuning the application's scope
angular.module('Gargantext').run(['$rootScope', function($rootScope){
// Customize the application's scope
angular.module('Gargantext').run(function($rootScope, $http, $cookies){
// Access Math library from anywhere in the scope of the application
$rootScope.Math = Math;
// Access to an HSB to RGB converter
$rootScope.getColor = function(i, n){
var h = .3 + (i / n) % 1;
var s = .7;
......@@ -116,6 +119,7 @@ angular.module('Gargantext').run(['$rootScope', function($rootScope){
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
return color;
};
// Access to a range function, very similar to the one available in Python
$rootScope.range = function(min, max, step){
if (max == undefined){
max = min;
......@@ -128,9 +132,12 @@ angular.module('Gargantext').run(['$rootScope', function($rootScope){
}
return output;
};
}]);
// For CSRF token compatibility with Django
$http.defaults.headers.post['X-CSRFToken'] = $cookies['csrftoken'];
});
// Controller for queries
gargantext.controller("QueryController", function($scope, $http) {
// query-specific information
$scope.filters = [];
......@@ -202,7 +209,7 @@ gargantext.controller("QueryController", function($scope, $http) {
}
});
// Controller for datasets
gargantext.controller("DatasetController", function($scope, $http) {
// query-specific information
$scope.mesured = 'nodes.count';
......@@ -267,7 +274,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
......@@ -276,13 +283,20 @@ gargantext.controller("DatasetController", function($scope, $http) {
}
});
// Controller for graphs
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 +319,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 +348,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 +374,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 +424,66 @@ 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();
});
});
// Only for debugging!
/*
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();
// // 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();
// // 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);
\ No newline at end of file
// // 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
View file @ 02a15e20
......@@ -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/>
......@@ -275,15 +277,32 @@
scale
<br/>
<hr/>
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 smoothing of smoothing:
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>
......@@ -312,6 +331,7 @@
-->
{% endverbatim %}
<script type="text/javascript" src="{% static "js/angular.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/angular-cookies.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/d3/d3.v2.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/d3/n3.line-chart.min.js" %}"></script>
<!-- <script type="text/javascript" src="{% static "js/d3/angular-charts.js" %}"></script> -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment