Skip to content

gargantext
gargantext
Commit 6b29957f authored by PkSM3's avatar PkSM3
Browse files
Options

[UPDATE] new paginator inside corpus.html

parent 4a2ebbce
Hide whitespace changes
Inline Side-by-side
Showing with 539 additions and 770 deletions
gargantext_web/views.py
View file @ 6b29957f
......@@ -318,7 +318,7 @@ def corpus_trial(request, project_id, corpus_id):
except ValueError:
raise Http404()
t = get_template('corpus_trial.html')
t = get_template('corpus.html')
user = request.user
date = datetime.datetime.now()
......@@ -373,6 +373,7 @@ def newpaginatorJSON(request , corpus_id):
type_document_id = cache.NodeType['Document'].id
documents = session.query(Node).filter(Node.parent_id==corpus_id , Node.type_id == type_document_id ).all()
filtered_docs = []
for doc in documents:
if "publication_date" in doc.metadata:
......@@ -391,6 +392,7 @@ def newpaginatorJSON(request , corpus_id):
results = sorted(filtered_docs, key=lambda x: x["date"])
for i in results:
i["date"] = i["date"].strftime("%Y-%m-%d")
print( i["date"] , i["id"] , i["name"])
finaldict = {
"records":results,
......
static/js/dyna_chart_and_table.js 0 → 100644
View file @ 6b29957f
console.log("hola mundo")
function pr(msg) {
console.log(msg)
}
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var latest,oldest;
var TheBuffer = false
function Push2Buffer( NewVal ) {
if ( TheBuffer == false) {
if( ! NewVal ) {
var limits = [ new Date( oldest[0],oldest[1],oldest[2] ) , new Date( latest[0],latest[1],latest[2] ) ];
NewVal = limits;
}
console.log( " - - - - - - " )
console.log( "\tchanging to:" )
console.log( NewVal )
TheBuffer = NewVal;
Final_UpdateTable( "changerange" )
console.log( "- - - - - - -\n" )
return 1;
}
if ( TheBuffer != false ) {
var past = TheBuffer[0]+"_"+TheBuffer[1]
if( ! NewVal ) {
var limits = [ new Date( oldest[0],oldest[1],oldest[2] ) , new Date( latest[0],latest[1],latest[2] ) ];
NewVal = limits;
}
var now = NewVal[0]+"_"+NewVal[1]
if ( past != now ) {
console.log( " - - - - - - " )
console.log( "\tchanging to:" )
console.log( NewVal )
TheBuffer = NewVal;
Final_UpdateTable( "changerange" )
console.log( "- - - - - - -\n" )
}
return 1;
}
}
function Final_UpdateTable( action ) {
// (1) Identifying if the button is collapsed:
var isCollapsed=false;
var accordiontext = $("#collapseOne").attr("class")
if(accordiontext.indexOf("collapse in")>-1)
isCollapsed=true;
var UpdateTable = false
if ( (action == "click" && !isCollapsed) || (action=="changerange" && isCollapsed) ) {
UpdateTable = true;
}
pr("update table??: "+UpdateTable)
if ( ! UpdateTable ) return false; //stop whatever you wanted to do.
var TimeRange = AjaxRecords;
var dataini = TheBuffer[0].toISOString().split("T")[0]
var datafin = TheBuffer[1].toISOString().split("T")[0]
pr("show me the pubs of the selected period")
pr("\tfrom ["+dataini+"] to ["+datafin+"]")
TimeRange = []
for (var i in AjaxRecords) {
if(AjaxRecords[i].date>=dataini && AjaxRecords[i].date<=datafin){
// pr( AjaxRecords[i].date+" : "+AjaxRecords[i].id )
TimeRange.push(AjaxRecords[i])
}
}
MyTable = $('#my-ajax-table').dynatable({
dataset: {
records: TimeRange
},
features: {
pushState: false,
sort: false
},
writers: {
_rowWriter: ulWriter
// _cellWriter: customCellWriter
}
});
MyTable.data('dynatable').settings.dataset.originalRecords = []
MyTable.data('dynatable').settings.dataset.originalRecords = TimeRange;
MyTable.data('dynatable').paginationPage.set(1);
MyTable.data('dynatable').process();
}
// STEP 01:
// Get all the duplicates using the Django-Garg API
var current_docs = {}
var BIS_dict = {}
var corpusid = window.location.href.split("corpus")[1].replace(/\//g, '')//replace all the slashes
var theurl = "/api/nodes/"+corpusid+"/children/duplicates?keys=title&limit=9999"
$.ajax({
url: theurl,
success: function(data) {
bisarray = data.data
for(var i in bisarray) {
untitlebis = bisarray[i].values
BIS_dict[untitlebis[0]] = [bisarray[i].count , 0];// [ total amount , removed ]
}
pr(BIS_dict)
if(Object.keys(BIS_dict).length>0) $("#delAll").css("visibility", "visible"); $("#delAll").show();
}
});
// STEP 02:
// D3.js: Interactive timerange.
var moveChart = dc.compositeChart("#monthly-move-chart");
var volumeChart = dc.barChart("#monthly-volume-chart");
var dateFormat = d3.time.format("%Y-%m-%d");
var numberFormat = d3.format(".2f");
var MyTable;
var RecDict={};
var AjaxRecords = []
var Garbage = {}
function getRecord(rec_id) {
return MyTable.data('dynatable').settings.dataset.originalRecords[rec_id];
// return AjaxRecords[rec_id]
}
function getRecords() {
return MyTable.data('dynatable').settings.dataset.originalRecords;
}
function transformContent2(rec_id) {
// pr("\t\ttransformContent2: "+rec_id)
var elem = AjaxRecords[rec_id];
// pr("\t\t\t"+elem.date)
var result = {}
if (elem["del"]) {
result["id"] = elem["id"]
result["date"] = '<strike>'+elem["date"]+'</strike>'
result["name"] = '<strike>'+elem["name"]+'</strike>'
result["del"] = '<input id='+rec_id+' onclick="overRide(this)" type="checkbox" checked/>'
} else {
result["id"] = elem["id"]
result["date"] = elem["date"]
result["name"] = elem["name"]
result["del"] = '<input id='+rec_id+' onclick="overRide(this)" type="checkbox"/>'
}
return result;
}
function overRide(elem) {
var id = elem.id
var val = elem.checked
console.log("striking: ")
console.log(AjaxRecords[id])
// MyTable.data('dynatable').settings.dataset.originalRecords[id]["del"] = val;
AjaxRecords[id]["del"] = val;
if(val) Garbage[id] = true;
else delete Garbage[id];
if(Object.keys(Garbage).length>0) $("#move2trash").show();
else $("#move2trash").hide();
// console.log(MyTable.data('dynatable').settings.dataset.originalRecords[id])
MyTable.data('dynatable').dom.update();
}
function transformContent(rec_id , header , content) {
if(header=="del") {
// pr("\t\ttransformContent1: "+rec_id)
if(content==true) return '<input id='+rec_id+' onclick="overRide(this)" type="checkbox" checked/>'
if(content==false) return '<input id='+rec_id+' onclick="overRide(this)" type="checkbox"/>'
} else return content;
}
//generic enough
function ulWriter(rowIndex, record, columns, cellWriter) {
// pr("\tulWriter: "+record.id)
var tr = '';
var cp_rec = {}
if(!MyTable) {
for(var i in record) {
cp_rec[i] = transformContent(RecDict[record.id], i , record[i])
}
} else {
// pr("\t\tbfr transf2: rec_id="+record.id+" | arg="+RecDict[record.id])
cp_rec = transformContent2(RecDict[record.id])
}
// grab the record's attribute for each column
for (var i = 0, len = columns.length; i < len; i++) {
tr += cellWriter(columns[i], cp_rec);
}
return '<tr>' + tr + '</tr>';
}
// (3) Get records and metadata for paginator
$.ajax({
url: '/tests/paginator/corpus/'+corpusid,
success: function(data){
console.log(data)
var justdates = {}
for(var i in data.records) {
var orig_id = parseInt(data.records[i].id)
var arr_id = parseInt(i)
RecDict[orig_id] = arr_id;
data.records[i]["name"] = '<a target="_blank" href="/nodeinfo/'+orig_id+'">'+data.records[i]["name"]+'</a>'
data.records[i]["del"] = false
var date = data.records[i]["date"];
if ( ! justdates[date] ) justdates[date] = 0;
justdates[date]++;
// console.log(data.records[i]["date"]+" : originalRecords["+arr_id+"] <- "+orig_id+" | "+data.records[i]["name"])
}
AjaxRecords = data.records; // backup!!
// $("#move2trash").prop('disabled', true);
$("#move2trash")
.click(function(){
var ids2trash = []
for(var i in Garbage)
ids2trash.push(AjaxRecords[i].id);
console.log("ids to the trash:")
console.log(ids2trash)
$.ajax({
url: "/tests/move2trash/",
data: "nodeids="+JSON.stringify(ids2trash),
type: 'POST',
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
},
success: function(data) {
console.log("in #move2trash")
console.log(data)
location.reload();
},
error: function(result) {
console.log("Data not found in #move2trash");
console.log(result)
}
});
})
.hide();
var t0 = AjaxRecords[0].date.split("-").map(Number)
var t1 = AjaxRecords.slice(-1)[0].date.split("-").map(Number)
oldest = t0;
latest = t1;
TheBuffer = [new Date(t0[0],(t0[1]-1),t0[2]), new Date(t1[0],(t1[1]-1),t1[2])];
var arrayd3 = []
for(var e in data.records) {
var date = data.records[e]["date"];
if(justdates[date]!=false) {
var info = {}
info.date = date
info.dd = dateFormat.parse(date)
info.month = d3.time.month(info.dd)
info.volume = justdates[date]
arrayd3.push(info)
justdates[date] = false;
}
}
for(var i in justdates)
delete justdates[i];
delete justdates;
var ndx = crossfilter(arrayd3);
var all = ndx.groupAll();
//volumeChart:(1)
//moveChart:(1)
// monthly index avg fluctuation in percentage
var moveMonths = ndx.dimension(function (d) {
return d.month;
});
//moveChart:(3)
var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
return d.volume;
//return Math.abs(+d.close - +d.open);
});
//volumeChart:(2)
var volumeByMonthGroup = moveMonths.group().reduceSum(function (d) {
return d.volume / 500000;
});
//moveChart:(2)
var indexAvgByMonthGroup = moveMonths.group().reduce(
function (p, v) {
++p.days;
p.total += (+v.open + +v.close) / 2;
p.avg = Math.round(p.total / p.days);
return p;
},
function (p, v) {
--p.days;
p.total -= (+v.open + +v.close) / 2;
p.avg = p.days == 0 ? 0 : Math.round(p.total / p.days);
return p;
},
function () {
return {days: 0, total: 0, avg: 0};
}
);
moveChart.width(800)
.height(150)
.transitionDuration(1000)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(moveMonths)
.group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.x(d3.time.scale().domain([new Date(t0[0],t0[1],t0[2]), new Date(t1[0],t1[1],t1[2])]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(true)
.renderHorizontalGridLines(true)
.brushOn(false)
.compose([
dc.lineChart(moveChart).group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.renderArea(true)
.stack(monthlyMoveGroup, function (d) {
return d.value;
})
.title(function (d) {
var value = d.value.avg ? d.value.avg : d.value;
if (isNaN(value)) value = 0;
return dateFormat(d.key) + "\n" + numberFormat(value);
})
])
.xAxis();
volumeChart.width(800)
.height(100)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(moveMonths)
.group(volumeByMonthGroup)
.centerBar(true)
.gap(0)
.x(d3.time.scale().domain([new Date(t0[0],t0[1],t0[2]), new Date(t1[0],t1[1],t1[2])]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.renderlet(function (chart) {
chart.select("g.y").style("display", "none");
moveChart.filter(chart.filter());
})
.on("filtered", function (chart) {
dc.events.trigger(function () {
var chartfilt = chart.filter()
// tricky part: identifying when the moveChart changes.
if(chartfilt) {
Push2Buffer ( chart.filter() )
} else {
if(TheBuffer) {
Push2Buffer ( false )
}
}
moveChart.focus(chartfilt);
});
});
dc.renderAll();
MyTable = $('#my-ajax-table').dynatable({
dataset: {
records: data.records
},
features: {
sort: false //i need to fix the sorting function... the current one just sucks
},
writers: {
_rowWriter: ulWriter
// _cellWriter: customCellWriter
}
});
// console.log(RecDict)
}
});
console.log("the end")
\ No newline at end of file
templates/corpus.html
View file @ 6b29957f
......@@ -9,6 +9,8 @@
<link rel="stylesheet" type="text/css" href="{% static "css/jquery.easy-pie-chart.css"%}">
<link rel="stylesheet" type="text/css" href="{% static "css/dc.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "css/jquery.dynatable.css"%}"/>
<script type="text/javascript" src="{% static "js/charts/d3.js"%}"></script>
<script type="text/javascript" src="{% static "js/charts/crossfilter.js"%}"></script>
......@@ -30,70 +32,84 @@
{% block content %}
<div class="container theme-showcase" role="main">
<div class="jumbotron">
{% if project %}
<h1>{{ project.name }}, {{ corpus.name }}
</h1>
{% endif %}
{% if corpus %}
<p>
{{ number}} docs, Created on {{ corpus.date }}
</p>
{% endif %}
<!-- <a class="btn btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.id }}/">Add file</a> -->
<a class="btn btn-primary btn-lg" role="button" href="/project/{{project.id}}/corpus/{{ corpus.id }}/corpus.csv">Save as</a>
<a class="btn btn-primary btn-lg" role="button" href="/delete/{{ corpus.id }}">Delete</a></p>
{% if number == 0 %}
<a class="btn btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.id }}/">Add documents</a></p>
{% endif %}
</div>
<div class="jumbotron">
{% if project %}
<h1>{{ project.name }}, {{ corpus.name }}
</h1>
{% endif %}
{% if corpus %}
<p>
{{ number}} docs, Created on {{ corpus.date }}
</p>
{% endif %}
<!-- <a class="btn btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.id }}/">Add file</a> -->
<a class="btn btn-primary btn-lg" role="button" href="/project/{{project.id}}/corpus/{{ corpus.id }}/corpus.csv">Save as</a>
<a class="btn btn-primary btn-lg" role="button" href="/delete/{{ corpus.id }}">Delete</a></p>
{% if number == 0 %}
<a class="btn btn-primary btn-lg" role="button" href="/admin/documents/corpus/{{ corpus.id }}/">Add documents</a></p>
{% endif %}
</div>
</div>
<div class="container">
<div class="container">
<div class="row">
<div id="monthly-move-chart">
<center>
<strong>Title</strong> (Blue bars: all, Green line: zoom)
<a class="reset" href="javascript:volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</center>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart"></div>
<p class="muted pull-left" style="margin-right: 15px;">Select a time range to zoom in</p>
</div>
</div>
<p align="center">
<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a></p>
<div class="container">
<div class="container">
<div class="row">
<div id="monthly-move-chart">
<center>
<strong>Title</strong> (Blue bars: all, Green line: zoom)
<a class="reset" href="javascript:volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</center>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart"></div>
<p class="muted pull-left" style="margin-right: 15px;">Select a time range to zoom in</p>
</div>
</div>
<p align="center">
<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a></p>
<div class="container">
<div class="jumbotron">
<div class="jumbotron">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-body">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<p onclick="updateDocuments();" class="btn btn-primary btn-lg" align="right">Read documents</h2></p>
<p onclick='Final_UpdateTable("click")' class="btn btn-primary btn-lg" align="right">Read documents</h2></p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse no-transition" role="tabpanel">
<div class="panel-body">
<p align="right">
<!--{% include "subcorpus.html" %}-->
<div id="subcorpusdiv"></div>
<p align="right">
<button id="move2trash" class="btn btn-primary btn-lg" >Move to trash!</button>
<!-- <p onclick='console.log("move to trash bitches")' class="btn btn-primary btn-lg" align="left">Move to Trash!</p> -->
</p>
<p align="right">
<table id="my-ajax-table" class="table table-bordered">
<thead>
<!-- <th data-dynatable-column="id">ID</th> -->
<th data-dynatable-column="date">Date</th>
<th data-dynatable-column="name">Title</th>
<th data-dynatable-column="del" data-dynatable-no-sort="true">Trash</th>
</thead>
<tbody>
</tbody>
</table>
</p>
</div>
</div>
......@@ -104,293 +120,58 @@
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="jumbotron">
<h3><a href="/project/{{project.id}}/corpus/{{corpus.id}}/chart">Advanced charts</a></h3>
<ol>
<li>Count</li> <!-- read, compute -->
<li>Filter</li> <!-- count, compute -->
<li>Compare</li> <!-- select, cut -->
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
<div class="col-md-4">
<div class="jumbotron">
<h3><a href="/project/{{project.id}}/corpus/{{corpus.id}}/matrix">Matrix</a></h3>
<ol>
<li>Sort</li>
<li>Group</li>
<li>Cluster</li>
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
<div class="col-md-4">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<div class="jumbotron">
<h3><a href="/project/{{project.id}}/corpus/{{corpus.id}}/chart">Advanced charts</a></h3>
<ol>
<li>Count</li> <!-- read, compute -->
<li>Filter</li> <!-- count, compute -->
<li>Compare</li> <!-- select, cut -->
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
<div class="col-md-4">
<div class="jumbotron">
<h3><a href="/project/{{project.id}}/corpus/{{corpus.id}}/matrix">Matrix</a></h3>
<ol>
<li>Sort</li>
<li>Group</li>
<li>Cluster</li>
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
<div class="col-md-4">
<div class="jumbotron">
{% if processing >= "1" %}
<h3> <img width="20px" src="{% static "js/libs/img2/loading-bar.gif" %}"></img> Graph (later)</h3>
{% else %}
<h3><a href="/project/{{project.id}}/corpus/{{ corpus.id }}/explorer">Graph</a></h3>
<h3><a href="/project/{{project.id}}/corpus/{{ corpus.id }}/explorer">Graph</a></h3>
{% endif %}
<ol>
<li>Visualize</li>
<li>Explore</li>
<li>Read</li>
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
</div>
<ol>
<li>Visualize</li>
<li>Explore</li>
<li>Read</li>
</ol>
<h4><a href="/project/{{project.id}}/corpus/{{corpus.id}}/">Back to corpus</a></h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{% static "js/jquery/jquery.min.js" %}"></script>
<script src="{% static "js/charts/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/jquery/jquery.dynatable.js" %}"></script>
<script>
var datesbuffer = false;
var latest,oldest;
function pr(msg) {
console.log(msg)
}
function dateToInt(todayTime) {
var month = (todayTime .getMonth() + 1);
var day = (todayTime .getDate());
var year = (todayTime .getFullYear());
if(month<10) month = "0"+month;
if(day<10) day = "0"+day;
return year+""+month+""+day;
}
// I've clicked "Read Documents":
function updateDocuments(pagenumber,pagenav) {
pagenav = (pagenav)?pagenav:true;
pagenumber = (pagenumber)?pagenumber:1;
pr("in here pagenav:"+pagenav+" - pagenumber:"+pagenumber)
pr("offset left: "+$( "#collapseOne" ).offset().left)
// if "Read Documents" collapsible is close, then... show some me pubs!
if ( pagenav || $( "#collapseOne" ).offset().left == 0) {
// Here u ask for the server some paginated results (pubs)
// if u havent select a timerange from the blue chart, then show me all pubs
if(!datesbuffer) {
var dataini = oldest.join("")
var datafin = latest.join("")
//http://localhost:8000/project/37525/corpus/37526/timerange/20040117/20040125?page=1
var base = window.location.href;
var theurl = base+"timerange/"+dataini+"/"+datafin+"?page="+pagenumber;
pr("theurl: "+theurl)
$.ajax({
url: theurl,
success: function(data) {
// console.log(data)
$('#subcorpusdiv').html(data);
return true;
}
});
}
// there's some timerange selected in the blue chart, so show me the pubs of that period
else {
var dataini = dateToInt(datesbuffer[0])
var datafin = dateToInt(datesbuffer[1])
//http://localhost:8000/project/37525/corpus/37526/timerange/20040117/20040125?page=1
var base = window.location.href;
var theurl = base+"timerange/"+dataini+"/"+datafin+"?page="+pagenumber;
pr("theurl: "+theurl)
$.ajax({
url: theurl,
success: function(data) {
// console.log(data)
$('#subcorpusdiv').html(data);
}
});
}
}
//else: "Read Documents" collapsible is open!, so do nothing
}
<!-- custom-lib for dynatable.js and dc.js -->
<script type="text/javascript" src="{% static "js/dyna_chart_and_table.js" %}"></script>
var current_docs = {}
var BIS_dict = {}
var corpusid = window.location.href.split("corpus")[1].replace(/\//g, '')//replace all the slashes
var theurl = "/api/nodes/"+corpusid+"/children/duplicates?keys=title&limit=9999"
$.ajax({
url: theurl,
success: function(data) {
bisarray = data.data
for(var i in bisarray) {
untitlebis = bisarray[i].values
BIS_dict[untitlebis[0]] = [bisarray[i].count , 0];// [ total amount , removed ]
}
pr(BIS_dict)
if(Object.keys(BIS_dict).length>0) $("#delAll").css("visibility", "visible"); $("#delAll").show();
}
});
// var gainOrLossChart = dc.pieChart("#gain-loss-chart");
// var fluctuationChart = dc.barChart("#fluctuation-chart");
// var quarterChart = dc.pieChart("#quarter-chart");
// var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
var moveChart = dc.compositeChart("#monthly-move-chart");
var volumeChart = dc.barChart("#monthly-volume-chart");
// var yearlyBubbleChart = dc.bubbleChart("#yearly-bubble-chart");
// set dc.js version in title
d3.selectAll("#version").text(dc.version);
// load data from a csv file
//
//
//
//
d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
// since its a csv file we need to format the data a bit
var dateFormat = d3.time.format("%Y/%m/%d");
var numberFormat = d3.format(".2f");
var justdates = {}
data.forEach(function (e) {
e.dd = dateFormat.parse(e.date);
e.month = d3.time.month(e.dd); // pre-calculate month for better performance
justdates[e.date] = true;
});
var orderDates = Object.keys(justdates).reverse();
// console.log(orderDates)
latest = orderDates[0].split("/")
oldest = orderDates[orderDates.length-1].split("/")
var t0_year = oldest[0]
var t0_month = oldest[1]
var t0_day = oldest[2]
var t1_year = latest[0]
var t1_month = latest[1]
var t1_day = latest[2]
// feed it through crossfilter
var ndx = crossfilter(data);
var all = ndx.groupAll();
//volumeChart:(1)
//moveChart:(1)
// monthly index avg fluctuation in percentage
var moveMonths = ndx.dimension(function (d) {
return d.month;
});
//moveChart:(3)
var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
return d.volume;
//return Math.abs(+d.close - +d.open);
});
//volumeChart:(2)
var volumeByMonthGroup = moveMonths.group().reduceSum(function (d) {
return d.volume / 500000;
});
//moveChart:(2)
var indexAvgByMonthGroup = moveMonths.group().reduce(
function (p, v) {
++p.days;
p.total += (+v.open + +v.close) / 2;
p.avg = Math.round(p.total / p.days);
return p;
},
function (p, v) {
--p.days;
p.total -= (+v.open + +v.close) / 2;
p.avg = p.days == 0 ? 0 : Math.round(p.total / p.days);
return p;
},
function () {
return {days: 0, total: 0, avg: 0};
}
);
moveChart.width(800)
.height(150)
.transitionDuration(1000)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(moveMonths)
.group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.x(d3.time.scale().domain([new Date(t0_year,t0_month,t0_day), new Date(t1_year,t1_month,t1_day)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(true)
.renderHorizontalGridLines(true)
.brushOn(false)
.compose([
dc.lineChart(moveChart).group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.renderArea(true)
.stack(monthlyMoveGroup, function (d) {
return d.value;
})
.title(function (d) {
var value = d.value.avg ? d.value.avg : d.value;
if (isNaN(value)) value = 0;
return dateFormat(d.key) + "\n" + numberFormat(value);
})
])
.xAxis();
volumeChart.width(800)
.height(100)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(moveMonths)
.group(volumeByMonthGroup)
.centerBar(true)
.gap(0)
.x(d3.time.scale().domain([new Date(t0_year,t0_month,t0_day), new Date(t1_year,t1_month,t1_day)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.renderlet(function (chart) {
chart.select("g.y").style("display", "none");
moveChart.filter(chart.filter());
datesbuffer = chart.filter();
})
.on("filtered", function (chart) {
dc.events.trigger(function () {
moveChart.focus(chart.filter());
});
});
dc.renderAll();
}
);
</script>
<script type="text/javascript" src="{% static "js/jquery/jquery.ba-dotimeout.min.js"%}"></script>
{% endblock %}
templates/corpus_trial.html
View file @ 6b29957f
......@@ -100,7 +100,7 @@
<p align="right">
<table id="my-ajax-table" class="table table-bordered">
<thead>
<th data-dynatable-column="id">ID</th>
<!-- <th data-dynatable-column="id">ID</th> -->
<th data-dynatable-column="date">Date</th>
<th data-dynatable-column="name">Title</th>
<th data-dynatable-column="del" data-dynatable-no-sort="true">Trash</th>
......@@ -168,453 +168,10 @@
<script src="{% static "js/charts/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/jquery/jquery.dynatable.js" %}"></script>
<!-- custom-lib for dynatable.js and dc.js -->
<script type="text/javascript" src="{% static "js/dyna_chart_and_table.js" %}"></script>
<script>
function pr(msg) {
console.log(msg)
}
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var latest,oldest;
var TheBuffer = false
function Push2Buffer( NewVal ) {
if ( TheBuffer == false) {
if( ! NewVal ) {
var limits = [ new Date( oldest[0],oldest[1],oldest[2] ) , new Date( latest[0],latest[1],latest[2] ) ];
NewVal = limits;
}
console.log( " - - - - - - " )
console.log( "\tchanging to:" )
console.log( NewVal )
TheBuffer = NewVal;
Final_UpdateTable( "changerange" )
console.log( "- - - - - - -\n" )
return 1;
}
if ( TheBuffer != false ) {
var past = TheBuffer[0]+"_"+TheBuffer[1]
if( ! NewVal ) {
var limits = [ new Date( oldest[0],oldest[1],oldest[2] ) , new Date( latest[0],latest[1],latest[2] ) ];
NewVal = limits;
}
var now = NewVal[0]+"_"+NewVal[1]
if ( past != now ) {
console.log( " - - - - - - " )
console.log( "\tchanging to:" )
console.log( NewVal )
TheBuffer = NewVal;
Final_UpdateTable( "changerange" )
console.log( "- - - - - - -\n" )
}
return 1;
}
}
function Final_UpdateTable( action ) {
// (1) Identifying if the button is collapsed:
var isCollapsed=false;
var accordiontext = $("#collapseOne").attr("class")
if(accordiontext.indexOf("collapse in")>-1)
isCollapsed=true;
var UpdateTable = false
if ( (action == "click" && !isCollapsed) || (action=="changerange" && isCollapsed) ) {
UpdateTable = true;
}
pr("update table??: "+UpdateTable)
if ( ! UpdateTable ) return false; //stop whatever you wanted to do.
var TimeRange = AjaxRecords;
var dataini = TheBuffer[0].toISOString().split("T")[0]
var datafin = TheBuffer[1].toISOString().split("T")[0]
pr("show me the pubs of the selected period")
pr("\tfrom ["+dataini+"] to ["+datafin+"]")
TimeRange = []
for (var i in AjaxRecords) {
if(AjaxRecords[i].date>=dataini && AjaxRecords[i].date<=datafin){
// pr( AjaxRecords[i].date+" : "+AjaxRecords[i].id+"|"+RecDict[AjaxRecords[i].id] )
TimeRange.push(AjaxRecords[i])
}
}
MyTable = $('#my-ajax-table').dynatable({
dataset: {
records: TimeRange
},
features: {
pushState: false,
sort: false
},
writers: {
_rowWriter: ulWriter
// _cellWriter: customCellWriter
}
});
MyTable.data('dynatable').settings.dataset.originalRecords = []
MyTable.data('dynatable').settings.dataset.originalRecords = TimeRange;
MyTable.data('dynatable').paginationPage.set(1);
MyTable.data('dynatable').process();
}
// STEP 01:
// Get all the duplicates using the Django-Garg API
var current_docs = {}
var BIS_dict = {}
var corpusid = window.location.href.split("corpus")[1].replace(/\//g, '')//replace all the slashes
var theurl = "/api/nodes/"+corpusid+"/children/duplicates?keys=title&limit=9999"
$.ajax({
url: theurl,
success: function(data) {
bisarray = data.data
for(var i in bisarray) {
untitlebis = bisarray[i].values
BIS_dict[untitlebis[0]] = [bisarray[i].count , 0];// [ total amount , removed ]
}
pr(BIS_dict)
if(Object.keys(BIS_dict).length>0) $("#delAll").css("visibility", "visible"); $("#delAll").show();
}
});
// STEP 02:
// TO BE REMOVED!
// D3.js: Interactive timerange.
var moveChart = dc.compositeChart("#monthly-move-chart");
var volumeChart = dc.barChart("#monthly-volume-chart");
d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
// since its a csv file we need to format the data a bit
var dateFormat = d3.time.format("%Y/%m/%d");
var numberFormat = d3.format(".2f");
var justdates = {}
data.forEach(function (e) {
e.dd = dateFormat.parse(e.date);
e.month = d3.time.month(e.dd); // pre-calculate month for better performance
justdates[e.date] = true;
});
var orderDates = Object.keys(justdates).reverse();
// console.log(orderDates)
latest = orderDates[0].split("/")
oldest = orderDates[orderDates.length-1].split("/")
var t0_year = oldest[0]
var t0_month = oldest[1]
var t0_day = oldest[2]
var t1_year = latest[0]
var t1_month = latest[1]
var t1_day = latest[2]
// TheBuffer = [new Date(t0_year,t0_month,t0_day), new Date(t1_year,t1_month,t1_day)];
// feed it through crossfilter
console.log("crossfilter shit:")
console.log(data)
var ndx = crossfilter(data);
var all = ndx.groupAll();
//volumeChart:(1)
//moveChart:(1)
// monthly index avg fluctuation in percentage
var moveMonths = ndx.dimension(function (d) {
return d.month;
});
//moveChart:(3)
var monthlyMoveGroup = moveMonths.group().reduceSum(function (d) {
return d.volume;
//return Math.abs(+d.close - +d.open);
});
//volumeChart:(2)
var volumeByMonthGroup = moveMonths.group().reduceSum(function (d) {
return d.volume / 500000;
});
//moveChart:(2)
var indexAvgByMonthGroup = moveMonths.group().reduce(
function (p, v) {
++p.days;
p.total += (+v.open + +v.close) / 2;
p.avg = Math.round(p.total / p.days);
return p;
},
function (p, v) {
--p.days;
p.total -= (+v.open + +v.close) / 2;
p.avg = p.days == 0 ? 0 : Math.round(p.total / p.days);
return p;
},
function () {
return {days: 0, total: 0, avg: 0};
}
);
moveChart.width(800)
.height(150)
.transitionDuration(1000)
.margins({top: 10, right: 50, bottom: 25, left: 40})
.dimension(moveMonths)
.group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.x(d3.time.scale().domain([new Date(t0_year,t0_month,t0_day), new Date(t1_year,t1_month,t1_day)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.elasticY(true)
.renderHorizontalGridLines(true)
.brushOn(false)
.compose([
dc.lineChart(moveChart).group(indexAvgByMonthGroup)
.valueAccessor(function (d) {
return d.value.avg;
})
.renderArea(true)
.stack(monthlyMoveGroup, function (d) {
return d.value;
})
.title(function (d) {
var value = d.value.avg ? d.value.avg : d.value;
if (isNaN(value)) value = 0;
return dateFormat(d.key) + "\n" + numberFormat(value);
})
])
.xAxis();
volumeChart.width(800)
.height(100)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(moveMonths)
.group(volumeByMonthGroup)
.centerBar(true)
.gap(0)
.x(d3.time.scale().domain([new Date(t0_year,t0_month,t0_day), new Date(t1_year,t1_month,t1_day)]))
.round(d3.time.month.round)
.xUnits(d3.time.months)
.renderlet(function (chart) {
chart.select("g.y").style("display", "none");
moveChart.filter(chart.filter());
})
.on("filtered", function (chart) {
dc.events.trigger(function () {
var chartfilt = chart.filter()
// tricky part: identifying when the moveChart changes.
if(chartfilt) {
Push2Buffer ( chart.filter() )
} else {
if(TheBuffer) {
Push2Buffer ( false )
}
}
moveChart.focus(chartfilt);
});
});
dc.renderAll();
}
);
var MyTable;
var RecDict={};
var AjaxRecords = []
var Garbage = {}
function getRecord(rec_id) {
return MyTable.data('dynatable').settings.dataset.originalRecords[rec_id];
// return AjaxRecords[rec_id]
}
function getRecords() {
return MyTable.data('dynatable').settings.dataset.originalRecords;
}
function transformContent2(rec_id) {
// pr("\t\ttransformContent2: "+rec_id)
var elem = AjaxRecords[rec_id];
// pr("\t\t\t"+elem.date)
var result = {}
if (elem["del"]) {
result["id"] = elem["id"]
result["date"] = '<strike>'+elem["date"]+'</strike>'
result["name"] = '<strike>'+elem["name"]+'</strike>'
result["del"] = '<input id='+rec_id+' onclick="overRide(this)" type="checkbox" checked/>'
} else {
result["id"] = elem["id"]
result["date"] = elem["date"]
result["name"] = elem["name"]
result["del"] = '<input id='+rec_id+' onclick="overRide(this)" type="checkbox"/>'
}
return result;
}
function overRide(elem) {
var id = elem.id
var val = elem.checked
console.log("striking: ")
console.log(AjaxRecords[id])
// MyTable.data('dynatable').settings.dataset.originalRecords[id]["del"] = val;
AjaxRecords[id]["del"] = val;
if(val) {
Garbage[id] = true;
} else {
delete Garbage[id];
}
if(Object.keys(Garbage).length>0) $("#move2trash").show();
else $("#move2trash").hide();
// console.log(MyTable.data('dynatable').settings.dataset.originalRecords[id])
MyTable.data('dynatable').dom.update();
}
function transformContent(rec_id , header , content) {
if(header=="del") {
// pr("\t\ttransformContent1: "+rec_id)
if(content==true) return '<input id='+rec_id+' onclick="overRide(this)" type="checkbox" checked/>'
if(content==false) return '<input id='+rec_id+' onclick="overRide(this)" type="checkbox"/>'
} else return content;
}
//generic enough
function ulWriter(rowIndex, record, columns, cellWriter) {
// pr("\tulWriter: "+record.id)
var tr = '';
var cp_rec = {}
if(!MyTable) {
for(var i in record) {
cp_rec[i] = transformContent(RecDict[record.id], i , record[i])
}
} else {
// pr("\t\tbfr transf2: rec_id="+record.id+" | arg="+RecDict[record.id])
cp_rec = transformContent2(RecDict[record.id])
}
// grab the record's attribute for each column
for (var i = 0, len = columns.length; i < len; i++) {
tr += cellWriter(columns[i], cp_rec);
}
return '<tr>' + tr + '</tr>';
}
// (3) Get records and metadata for paginator
$.ajax({
url: '/tests/paginator/corpus/'+corpusid,
success: function(data){
console.log(data)
for(var i in data.records) {
var orig_id = parseInt(data.records[i].id)
var arr_id = parseInt(i)
RecDict[orig_id] = arr_id;
data.records[i]["name"] = '<a target="_blank" href="/nodeinfo/'+orig_id+'">'+data.records[i]["name"]+'</a>'
data.records[i]["del"] = false
// console.log(data.records[i]["date"]+" : originalRecords["+arr_id+"] <- "+orig_id+" | "+data.records[i]["name"])
}
AjaxRecords = data.records; // backup!!
// $("#move2trash").prop('disabled', true);
$("#move2trash").click(function(){
var ids2trash = []
for(var i in Garbage)
ids2trash.push(AjaxRecords[i].id);
console.log("ids to the trash:")
console.log(ids2trash)
$.ajax({
url: "/tests/move2trash/",
data: "nodeids="+JSON.stringify(ids2trash),
type: 'POST',
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
},
success: function(data) {
console.log("in #move2trash")
console.log(data)
location.reload();
},
error: function(result) {
console.log("Data not found in #move2trash");
console.log(result)
}
});
});
$("#move2trash").hide();
var t0 = AjaxRecords[0].date.split("-")
var t1 = AjaxRecords.slice(-1)[0].date.split("-")
TheBuffer = [new Date(t0[0],t0[1],t0[2]), new Date(t1[0],t1[1],t1[2])];
// TO-DO: here we could plug this data inside the dc.js
//... but i need additionally in the JSON the "volume" attribute per each timestamp
//... or maybe do in memory: group by date and count the frecuency.
MyTable = $('#my-ajax-table').dynatable({
dataset: {
records: data.records
},
features: {
sort: false //i need to fix the sorting function... the current one just sucks
},
writers: {
_rowWriter: ulWriter
// _cellWriter: customCellWriter
}
});
// console.log(RecDict)
}
});
</script>
<script type="text/javascript" src="{% static "js/jquery/jquery.ba-dotimeout.min.js"%}"></script>
{% endblock %}
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