Skip to content

gargantext
gargantext
Commit 96da88b7 authored by Administrator's avatar Administrator
Browse files
Options

[FEAT] Advanced charts.

parent 49f25748
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 43 deletions
gargantext_web/urls.py
View file @ 96da88b7
...@@ -31,8 +31,9 @@ urlpatterns = patterns('', ...@@ -31,8 +31,9 @@ urlpatterns = patterns('',
url(r'^project/(\d+)/corpus/(\d+)/corpus.csv$', views.corpus_csv), url(r'^project/(\d+)/corpus/(\d+)/corpus.csv$', views.corpus_csv),
# Visualizations # Visualizations
url(r'^corpus/(\d+)/explorer$', views.explorer_graph), url(r'^project/(\d+)/corpus/(\d+)/chart$', views.chart),
url(r'^corpus/(\d+)/matrix$', views.explorer_matrix), url(r'^corpus/(\d+)/explorer$', views.graph),
url(r'^corpus/(\d+)/matrix$', views.matrix),
# Data management # Data management
url(r'^chart/corpus/(\d+)/data.csv$', views.send_csv), url(r'^chart/corpus/(\d+)/data.csv$', views.send_csv),
......
gargantext_web/views.py
View file @ 96da88b7
...@@ -285,8 +285,8 @@ def corpus(request, project_id, corpus_id): ...@@ -285,8 +285,8 @@ def corpus(request, project_id, corpus_id):
project = Node.objects.get(id=project_id) project = Node.objects.get(id=project_id)
corpus = Node.objects.get(id=corpus_id) corpus = Node.objects.get(id=corpus_id)
#documents = corpus.children.all() type_doc = NodeType.objects.get(name="Document")
#number = corpus.children.count() number = Node.objects.filter(parent=corpus, type=type_doc).count()
# try: # try:
# sources = defaultdict(int) # sources = defaultdict(int)
...@@ -357,7 +357,7 @@ def corpus(request, project_id, corpus_id): ...@@ -357,7 +357,7 @@ def corpus(request, project_id, corpus_id):
'project': project,\ 'project': project,\
'corpus' : corpus,\ 'corpus' : corpus,\
'documents': documents,\ 'documents': documents,\
# 'number' : number,\ 'number' : number,\
'dates' : chart,\ 'dates' : chart,\
})) }))
...@@ -371,8 +371,22 @@ def delete_corpus(request, project_id, corpus_id): ...@@ -371,8 +371,22 @@ def delete_corpus(request, project_id, corpus_id):
Node.objects.filter(id=corpus_id).all().delete() Node.objects.filter(id=corpus_id).all().delete()
return HttpResponseRedirect('/project/' + project_id) return HttpResponseRedirect('/project/' + project_id)
def explorer_graph(request, corpus_id):
t = get_template('explorer.html') def chart(request, project_id, corpus_id):
''' Charts to compare, filter, count'''
t = get_template('chart.html')
user = request.user
date = datetime.datetime.now()
project = Node.objects.get(id=project_id)
html = t.render(Context({
'user': user,
'date': date,
'project' : project,
}))
return HttpResponse(html)
def matrix(request, corpus_id):
t = get_template('matrix.html')
user = request.user user = request.user
date = datetime.datetime.now() date = datetime.datetime.now()
corpus = Node.objects.get(id=corpus_id) corpus = Node.objects.get(id=corpus_id)
...@@ -385,8 +399,8 @@ def explorer_graph(request, corpus_id): ...@@ -385,8 +399,8 @@ def explorer_graph(request, corpus_id):
return HttpResponse(html) return HttpResponse(html)
def explorer_matrix(request, corpus_id): def graph(request, corpus_id):
t = get_template('matrix.html') t = get_template('explorer.html')
user = request.user user = request.user
date = datetime.datetime.now() date = datetime.datetime.now()
corpus = Node.objects.get(id=corpus_id) corpus = Node.objects.get(id=corpus_id)
...@@ -399,6 +413,10 @@ def explorer_matrix(request, corpus_id): ...@@ -399,6 +413,10 @@ def explorer_matrix(request, corpus_id):
return HttpResponse(html) return HttpResponse(html)
def exploration(request): def exploration(request):
t = get_template('exploration.html') t = get_template('exploration.html')
user = request.user user = request.user
......
templates/chart.html
View file @ 96da88b7
{% extends "menu.html" %} {% 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" %}">
<title>GarganText: Analyze your data with graphs</title>
<link rel="stylesheet" type="text/css" href="http://jun9.github.io/dc.js/css/dc.css"/>
<script type="text/javascript" src="http://jun9.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="http://jun9.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="http://jun9.github.io/dc.js/js/dc.js"></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container theme-showcase" role="main"> <div class="container theme-showcase" role="main">
<div class="jumbotron"> <div class="jumbotron">
<div class="container"> <h1>{{ project.name }}</h1>
<p>Advanced charts</p>
</div>
</div>
<div class="container">
<div id="test-container"></div>
</div>
<!-- All the templates used by the Javascript framework -->
{% verbatim %}
<!--
<script type="text/template" id="filter-template">
<span>...where</span>
<select name="entity">
<option value="metadata">metadata</option>
<option value="ngrams">ngrams</option>
</select>
<span class="entity metadata">
<select name="key"><% _.each(metadataList, function(metadata){ %>
<option><%= metadata.name %></option>
<% }); %></select>
</span>
<span class="entity ngrams">
<select name="key">
<option value="terms">terms</option>
<option value="n">terms count</option>
</select>
</span>
<select name="operator"></select>
<input name="value" />
<button class="remove">X</button>
</script>
<script type="text/template" id="filterlist-template">
<ul class="filters"></ul>
<button class="add">Add a filter...</button>
</script>
<script type="text/template" id="nodesquery-template">
<div ng-include="'filterlist-template'"></div>
</script>
-->
<!--
<script type="text/ejs" id="FilterView">
<li>
<span>...where the</span>
<select name="entity">
<option>metadata</option>
<option>ngrams</option>
</select>
<span class="entity metadata">
<select name="key"></select>
</span>
<span class="entity ngrams">
<select name="key">
<option value="terms">terms</option>
<option value="n">terms count</option>
</select>
</span>
</li>
</script>
<script type="text/ejs" id="FilterListView">
<div class="filters">
<ul class="filters"></ul>
<button class="create">Add a filter</button>
</div>
</script>
-->
<div class="row"> {% endverbatim %}
<div id="monthly-move-chart">
<strong>Title</strong> (Blue Line: Avg Index, Green Line: Index
Fluctuation)
<a class="reset" href="javascript:volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div> <script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script>
</div>
</div>
<div class="row"> {% verbatim %}
<div id="monthly-volume-chart"> <!--
</div> <div ng-app="Gargantext" ng-controller="FilterListController">
<p class="muted pull-left" style="margin-right: 15px;">Select a time range to zoom in</p> <ul>
</div> <li ng-repeat="(filterIndex, filter) in filters">
<span>...where the </span>
<select ng-model="filter.entity">
<option ng-repeat="(entityName, entityColumns) in entities" value="{{entityName}}">{{entityName}}</option>
</select>
<span ng-if="filter.entity">
<select ng-model="filter.column">
<option ng-repeat="column in entities[filter.entity] | orderBy:'key'" value="{{column.key}}">{{column.key}}</option>
</select>
<span ng-if="filter.column">
<span ng-repeat="column in entities[filter.entity] | filter : {'key':filter.column} : strict">
<select ng-model="filter.operator">
<option ng-repeat="operator in operators[column.type]" value="{{operator.key}}">{{operator.label}}</option>
</select>
<input type="text" ng-model="filter.value">
</span>
</span>
</span>
<button ng-click="removeFilter(filterIndex)" title="remove this filter">X</button>
</li>
</ul>
<button ng-click="addFilter()">Add a filter...</button>
</div>
-->
<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}
div.list-results tr:nth-child(even) td {background: #FFF; color: #111}
div.list-results tr:nth-child(odd) td {background: #EEE; color: #000}
</style>
<!--
TODO: use inclusions
</div> SEE: http://stackoverflow.com/questions/17801988/dynamically-loading-controllers-and-ng-include
</div>
-->
</div> <div class="container">
<!--
<div ng-app="Gargantext" ng-controller="QueryController">
<div class="corpus">
Chosen corpus:
<select ng-model="corpusId" ng-change="updateEntities()">
<option ng-repeat="corpus in corpora" value="{{corpus.id}}">{{corpus.name}}</option>
</select>
</div>
<div class="filters" ng-if="corpusId">
<hr/>
<ul>
<li ng-repeat="(filterIndex, filter) in filters">
<span>...where the </span>
<select ng-model="filter.entity">
<option ng-repeat="(entityName, entityColumns) in entities" value="{{entityName}}">{{entityName}}</option>
</select>
<span ng-if="filter.entity">
<select ng-model="filter.column">
<option ng-repeat="column in entities[filter.entity] | orderBy:'key'" value="{{column.key}}">{{column.key}}</option>
</select>
<span ng-if="filter.column">
<span ng-repeat="column in entities[filter.entity] | filter : {'key':filter.column} : strict">
<select ng-model="filter.operator">
<option ng-repeat="operator in operators[column.type]" value="{{operator.key}}">{{operator.label}}</option>
</select>
<input type="text" ng-model="filter.value">
</span>
</span>
</span>
<button ng-click="removeFilter(filterIndex)" title="remove this filter">X</button>
</li>
</ul>
<button ng-click="addFilter()">Add a filter...</button>
</div>
<div class="results" ng-if="corpusId">
<hr/>
<button ng-if="corpusId" ng-click="postQuery()">Refresh results</button>
<div class="list">
<div class="list-pagination">
<select ng-model="pagination.limit">
<option ng-repeat="limit in [5, 10, 20, 50, 100]" value="{{limit}}">{{limit}}</option>
</select>
results per page
<span ng-if="resultsCount != undefined">
showing page
<select ng-model="pagination.offset">
<option ng-repeat="x in range(0, resultsCount+1, pagination.limit)" value="{{ x }}">{{ Math.round(1+x/pagination.limit) }}</option>
</select>
out of
{{ Math.ceil(resultsCount / pagination.limit) }}
<strong>({{resultsCount}}</strong> results found)
</span>
</div>
<div class="list-wait" ng-if="loading">
<em>Loading, please wait...</em>
</div>
<div class="list-results" ng-if="!loading &amp;&amp; resultsCount != undefined">
<div ng-if="!results.length">
<em>No results were found.</em>
</div>
<table ng-if="results.length">
<thead>
<tr>
<th ng-repeat="(key, value) in results[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in results">
<td ng-repeat="(key, value) in result">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
-->
<div ng-app="Gargantext" ng-controller="GraphController">
<ul class="datasets">
<button class="add" ng-click="addDataset()">Add a dataset...</button>
<li class="dataset" ng-controller="DatasetController" ng-repeat="dataset in datasets">
<hr/>
<div class="corpus">
<button ng-click="removeDataset($index)" title="remove this dataset">X</button>
<select ng-model="mesured" style="background-color:{{ getColor($index, datasets.length) }}" ng-options="value as key for (key, value) in {'Documents count': 'nodes.count', 'Ngrams count': 'ngrams.count'}" ng-change="updateQuery()"></select>
in the corpus
<select ng-model="corpusId" ng-change="updateEntities()">
<option ng-repeat="corpus in corpora" value="{{corpus.id}}">{{corpus.name}}</option>
</select>
</div>
<div class="filters" ng-if="entities">
<ul>
<li ng-repeat="filter in filters">
<button ng-click="removeFilter($index)" title="remove this filter">x</button>
<span>...where the </span>
<select ng-model="filter.entity">
<option ng-repeat="(entityName, entityColumns) in entities" value="{{entityName}}">{{entityName}}</option>
</select>
<span ng-if="filter.entity">
<select ng-model="filter.column">
<option ng-repeat="column in entities[filter.entity] | orderBy:'key'" value="{{column.key}}">{{column.key}}</option>
</select>
<span ng-if="filter.column" ng-repeat="column in entities[filter.entity]">
<span ng-if="column.key == filter.column">
<select ng-model="filter.operator">
<option ng-repeat="operator in operators[column.type]" value="{{operator.key}}">{{operator.label}}</option>
</select>
<input type="text" ng-model="filter.value" ng-change="updateQuery()">
</span>
</span>
</span>
</li>
</ul>
<button ng-click="addFilter()">Add a filter...</button>
</div>
</li>
</ul>
<hr/>
<script src="http://code.jquery.com/jquery-latest.js"></script> <button style="width:100%" class="refresh" ng-click="query()">Refresh results</button>
<script src="http://jun9.github.io/dc.js/js/bootstrap.min.js"></script> <div class="graph">
<script src="{% static "js/d3/DC.js"%}"></script> <linechart data="graph.data" options="graph.options"></linechart>
</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="query()">
</select>
<br/>
Y-axis: use a
<select ng-model="graph.options.axes.y.type" ng-options="type for type in ['log', 'linear']"></select>
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 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>
</div>
<!--
<div ng-app="Gargantext" ng-controller="FilterController">
<span>...where the </span>
<select ng-model="entityName">
<option ng-repeat="(entityName, entityColumns) in entities" value="{{entityName}}">{{entityName}}</option>
</select>
<span ng-if="entityName">
<select ng-model="entityColumn.key">
<option ng-repeat="entityColumn in entities[entityName] | orderBy:'key'" value="{{entityColumn.key}}">{{entityColumn.key}}</option>
</select>
<span ng-if="entityColumn.key">
<span ng-repeat="entityColumn in entities[entityName] | filter : entityColumn : strict">
<select ng-model="operator.key">
<option ng-repeat="operator in operators[entityColumn.type]" value="{{operator.key}}">{{operator.label}}</option>
</select>
<input type="text">
</span>
</span>
</span>
</div>
-->
{% 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> -->
<script type="text/javascript" src="{% static "js/gargantext.angular.js" %}"></script>
<!--
<script type="text/javascript" src="{% static "js/underscore-min.js" %}"></script>
<script type="text/javascript" src="{% static "js/backbone.js" %}"></script>
<script type="text/javascript" src="{% static "js/gargantext.backbone.js" %}"></script>
<script type="text/javascript">
var filterList = new FilterListView({nodeId: 39576});
filterList.render().$el.appendTo('#test-container');
</script>
-->
<!--
<script type="text/javascript" src="{% static "js/can.custom.js" %}"></script>
<script type="text/javascript" src="{% static "js/gargantext.can.js" %}"></script>
<script type="text/javascript">
var f = new FilterListController('#test-container', {parent: 39576});
</script>
-->
{% endblock %} {% endblock %}
templates/corpus.html
View file @ 96da88b7
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="jumbotron"> <div class="jumbotron">
<h3><a href="/corpus/{{corpus.id}}/charts">Advanced charts</a></h3> <h3><a href="/project/{{project.id}}/corpus/{{corpus.id}}/chart">Advanced charts</a></h3>
<ol> <ol>
<li>Count</li> <!-- read, compute --> <li>Count</li> <!-- read, compute -->
<li>Filter</li> <!-- count, compute --> <li>Filter</li> <!-- count, compute -->
......
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