Skip to content

gargantext
gargantext
Commit 0d3dedb9 authored by Mathieu Rodic's avatar Mathieu Rodic
Browse files
Options

[FEATURE] Started working on the implementation of the charts interface

parent 99bc46fb
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 52 deletions
gargantext_web/api.py
View file @ 0d3dedb9
...@@ -168,21 +168,64 @@ class CorpusController: ...@@ -168,21 +168,64 @@ class CorpusController:
corpus = cls.get(corpus_id) corpus = cls.get(corpus_id)
# query building # query building
cursor = connection.cursor() cursor = connection.cursor()
cursor.execute(_sql_cte + ''' # cursor.execute(_sql_cte + '''
SELECT key # SELECT key
# FROM (
# SELECT skeys(metadata) AS key, COUNT(*)
# FROM cte
# INNER JOIN %s AS node ON node.id = cte.id
# WHERE (NOT cte.id = \'%d\') AND (\'%d\' = ANY(cte."path"))
# ) AS keys
# GROUP BY key
# ORDER BY COUNT(*) DESC
# ''' % (Node._meta.db_table, corpus.id, corpus.id, ))
cursor.execute('''
SELECT key, COUNT(*) AS count, (
SELECT COUNT(DISTINCT metadata->key) FROM %s
) AS values
FROM ( FROM (
SELECT skeys(metadata) AS key SELECT skeys(metadata) AS key
FROM cte FROM %s
INNER JOIN %s AS node ON node.id = cte.id WHERE parent_id = \'%d\'
WHERE (NOT cte.id = \'%d\') AND (\'%d\' = ANY(cte."path"))
) AS keys ) AS keys
GROUP BY key GROUP BY key
ORDER BY COUNT(*) DESC ORDER BY count DESC
''' % (Node._meta.db_table, corpus.id, corpus.id, )) ''' % (Node._meta.db_table, Node._meta.db_table, corpus.id, ))
# response building # response building
return JsonHttpResponse({ collection = []
"list" : [row[0] for row in cursor.fetchall()], for row in cursor.fetchall():
}) type = 'string'
key = row[0]
split_key = key.split('_')
name = split_key[0]
if len(split_key) == 2:
if split_key[1] == 'date':
name = split_key[0]
type = 'datetime'
elif row[0] == 'language_fullname':
name = 'language'
type = 'string'
else:
continue
values = None
if row[2] < 32:
cursor.execute('''
SELECT DISTINCT metadata->'%s'
FROM %s
WHERE parent_id = %s
AND metadata ? '%s'
ORDER BY metadata->'%s'
''' % (key, Node._meta.db_table, corpus.id, key, key, ))
values = [row[0] for row in cursor.fetchall()]
collection.append({
'key': key,
'text': name,
'documents': row[1],
'valuesCount': row[2],
'values': values,
'type': type,
})
return JsonHttpResponse(collection)
@classmethod @classmethod
def data(cls, request, corpus_id): def data(cls, request, corpus_id):
......
static/js/charts/dygraph-combined.js 0 → 100644
View file @ 0d3dedb9
This source diff could not be displayed because it is too large. You can view the blob instead.
static/js/graph-it.js
View file @ 0d3dedb9
...@@ -203,39 +203,143 @@ ...@@ -203,39 +203,143 @@
})(jQuery); })(jQuery);
var projectId = 13409;
$('.tree').jstree({
'core' : {
'data' : { var selectProject = $('<select>').appendTo('.visualization');
'url' : function(node) { var selectCorpus = $('<select>').appendTo('.visualization');
var url = '/api/nodes?' + ((node.id === '#') var divFilter = $('<div>').appendTo('.visualization');
? 'type=Project'
: ('parent=' + node.id) // Load projects
); $.get('/api/nodes', {type:'Project'}, function(collection) {
console.log(url); selectProject.empty();
return url; for (var i=0; i<collection.length; i++) {
}, var node = collection[i];
}, $('<option>').val(node.id).text(node.text).appendTo(selectProject);
}, }
"plugins" : ["types"], selectProject.change();
"types" : {
"#" : {
"max_children" : 1,
"max_depth" : 4,
"valid_children" : ["root"]
},
"Project" : {
"icon" : "http://www.jstree.com/static/3.0.8/assets/images/tree_icon.png",
"valid_children" : ["default"]
},
"Corpus" : {
"valid_children" : ["default","file"]
},
"Document" : {
"icon" : "glyphicon glyphicon-file",
"valid_children" : []
}
},
}); });
// Load corpora
selectProject.change(function() {
var projectId = selectProject.val();
selectCorpus.empty();
$.get('/api/nodes', {type:'Corpus', parent:projectId}, function(collection) {
$.each(collection, function(i, node) {
$('<option>').val(node.id).text(node.text).appendTo(selectCorpus);
});
selectCorpus.change();
});
});
// Load metadata
selectCorpus.change(function() {
var corpusId = selectCorpus.val();
// alert(corpusId);
divFilter.empty();
//
$.get('/api/corpus/' + corpusId + '/metadata', function(collection) {
var selectType = $('<select>').appendTo(divFilter);
//
$('<option>').text('ngrams').appendTo(selectType);
var spanNgrams = $('<span>').appendTo(divFilter).hide();
var inputNgrams = $('<input>').appendTo(spanNgrams);
//
$('<option>').text('metadata').appendTo(selectType);
var spanMetadata = $('<span>').appendTo(divFilter).hide();
var selectMetadata = $('<select>').appendTo(spanMetadata);
var spanMetadataValue = $('<span>').appendTo(spanMetadata);
$.each(collection, function(i, metadata) {
$('<option>')
.data(metadata)
.text(metadata.text)
.appendTo(selectMetadata);
});
//
selectMetadata.change(function() {
var metadata = selectMetadata.find(':selected').data();
spanMetadataValue.empty();
if (metadata.type == 'datetime') {
$('<span>').text(' between: ').appendTo(spanMetadataValue);
$('<input>').appendTo(spanMetadataValue)
.blur(function() {
var input = $(this);
var date = input.val();
date += '2000-01-01'.substr(date.length);
input.val(date);
}).datepicker({dateFormat: 'yy-mm-dd'});
$('<span>').text(' and: ').appendTo(spanMetadataValue);
$('<input>').appendTo(spanMetadataValue)
.blur(function() {
var input = $(this);
var date = input.val();
date += '2000-01-01'.substr(date.length);
input.val(date);
}).datepicker({dateFormat: 'yy-mm-dd'});
} else if (metadata.values) {
$('<span>').text(' is: ').appendTo(spanMetadataValue);
var selectMetadataValue = $('<select>').appendTo(spanMetadataValue);
$.each(metadata.values, function(i, value) {
$('<option>').text(value).appendTo(selectMetadataValue);
});
selectMetadataValue.change().focus();
} else {
$('<span>').text(' contains: ').appendTo(spanMetadataValue);
$('<input>').appendTo(spanMetadataValue).focus();
}
});
//
selectType.change(function() {
divFilter.children().filter('span').hide();
switch (selectType.val()) {
case 'ngrams':
spanNgrams.show();
break;
case 'metadata':
spanMetadata.show();
break;
}
}).change();
});
});
// $('.tree').jstree({
// 'core' : {
// 'data' : {
// 'url' : function(node) {
// var url = '/api/nodes?' + ((node.id === '#')
// ? 'type=Project'
// : ('parent=' + node.id)
// );
// console.log(url);
// return url;
// },
// },
// },
// "plugins" : ["types"],
// "types" : {
// "#" : {
// "max_children" : 1,
// "max_depth" : 4,
// "valid_children" : ["root"]
// },
// "Project" : {
// "icon" : "http://www.jstree.com/static/3.0.8/assets/images/tree_icon.png",
// "valid_children" : ["default"]
// },
// "Corpus" : {
// "valid_children" : ["default","file"]
// },
// "Document" : {
// "icon" : "glyphicon glyphicon-file",
// "valid_children" : []
// }
// },
// });
// var graph = $('.graph-it').graphIt(640, 480); // var graph = $('.graph-it').graphIt(640, 480);
\ No newline at end of file
templates/graph-it.html
View file @ 0d3dedb9
{% extends "menu.html" %}
{% block css %} {% block css %}
{% load staticfiles %} <!-- {% load staticfiles %} -->
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}"> <link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}"> <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
<link rel="stylesheet" type="text/css" href="http://jun9.github.io/dc.js/css/dc.css" />
{% endblock %} {% endblock %}
...@@ -17,16 +13,28 @@ ...@@ -17,16 +13,28 @@
<p>A web platform to explore text-mining</p> <p>A web platform to explore text-mining</p>
</div> </div>
</div> </div>
<div class="container visualization"></div>
<div class="container tree"></div> <div class="container tree"></div>
<div class="container graph-it"></div> <div class="container graph-it"></div>
<script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script> <!-- <script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script> -->
<!--
<script type="text/javascript" src="{% static "js/jquery/jquery-1.9.1.min.js" %}"></script>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/xdan/datetimepicker/master/jquery.datetimepicker.css"/ >
<script type="text/javascript" src="{% static "js/jquery/jquery.datetimepicker.js" %}"></script>
-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.4/themes/default/style.min.css" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.4/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.4/jstree.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.4/jstree.min.js"></script>
-->
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script> <script type="text/javascript" src="{% static "js/charts/dygraph-combined.js" %}"></script>
<script type="text/javascript" src="{% static "js/graph-it.js" %}"></script> <script type="text/javascript" src="{% static "js/graph-it.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