Skip to content

gargantext
gargantext
Commit 379e815e authored by PkSM3's avatar PkSM3
Browse files
Options

[UPDATE] paginator with hyperlinks

parent 0a504107
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 128 deletions
templates/corpus_trial.html
View file @ 379e815e
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<p onclick="updateDocuments2();" 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> </a>
</h4> </h4>
</div> </div>
...@@ -167,131 +167,102 @@ ...@@ -167,131 +167,102 @@
<script> <script>
var datesbuffer = false;
var latest,oldest;
var clickinchart = false;
function pr(msg) { function pr(msg) {
console.log(msg) console.log(msg)
} }
function dateToInt(todayTime) { var latest,oldest;
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;
}
function updateDocuments2() { 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;
}
var isCollapsed=false; if ( TheBuffer != false ) {
var accordiontext = $("#collapseOne").attr("class") var past = TheBuffer[0]+"_"+TheBuffer[1]
if(accordiontext.indexOf("collapse in")>-1) isCollapsed=true;
if(!isCollapsed) { if( ! NewVal ) {
pr("it was not-collapsed and now it is collapsed") 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]
var TimeRange = AjaxRecords; if ( past != now ) {
console.log( " - - - - - - " )
if(datesbuffer) { console.log( "\tchanging to:" )
pr("\t\tapplying some timerange!!") console.log( NewVal )
var dataini = dateToInt(datesbuffer[0]) TheBuffer = NewVal;
var datafin = dateToInt(datesbuffer[1]) Final_UpdateTable( "changerange" )
pr("show me the pubs of the selected period") console.log( "- - - - - - -\n" )
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])
}
}
} }
pr("\t\tupdating the table!!") return 1;
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').process();
} }
} }
// I've clicked "Read Documents":
function updateDocuments(timerange) {
pr("offset left: "+$( "#collapseOne" ).offset().left) function Final_UpdateTable( action ) {
pr("The Class:") // (1) Identifying if the button is collapsed:
var isCollapsed=false; var isCollapsed=false;
var accordiontext = $("#collapseOne").attr("class") var accordiontext = $("#collapseOne").attr("class")
if(accordiontext.indexOf("collapse in")>-1) isCollapsed=true; if(accordiontext.indexOf("collapse in")>-1)
isCollapsed=true;
pr("is it collapsed????" +isCollapsed)
// // if "Read Documents" collapsible is close, then... show some me pubs!
// if ( pagenav || $( "#collapseOne" ).offset().left == 0) {
$.doTimeout( 500, function(){
if ( isCollapsed ) {
pr("\tso doing something!!")
// if u havent select a timerange from the blue chart, then show me all pubs
var TimeRange = AjaxRecords;
// ELSE, there's some timerange selected in the blue chart, so show me the pubs of that period
if(timerange && datesbuffer) {
pr("\t\tapplying some timerange!!")
var dataini = dateToInt(datesbuffer[0])
var datafin = dateToInt(datesbuffer[1])
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])
}
}
}
var UpdateTable = false
if ( (action == "click" && !isCollapsed) || (action=="changerange" && isCollapsed) ) {
UpdateTable = true;
}
pr("\t\tupdating the table!!") pr("update table??: "+UpdateTable)
MyTable = $('#my-ajax-table').dynatable({
dataset: { if ( ! UpdateTable ) return false; //stop whatever you wanted to do.
records: TimeRange
},
features: {
pushState: false, var TimeRange = AjaxRecords;
sort: false
},
writers: {
_rowWriter: ulWriter
// _cellWriter: customCellWriter
}
});
MyTable.data('dynatable').settings.dataset.originalRecords = [] var dataini = TheBuffer[0].toISOString().split("T")[0]
MyTable.data('dynatable').settings.dataset.originalRecords = TimeRange; var datafin = TheBuffer[1].toISOString().split("T")[0]
MyTable.data('dynatable').process(); 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: // STEP 01:
...@@ -313,15 +284,12 @@ $.ajax({ ...@@ -313,15 +284,12 @@ $.ajax({
} }
}); });
// STEP 02: // STEP 02:
// D3.js: Interactive timerange. // D3.js: Interactive timerange.
// 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 moveChart = dc.compositeChart("#monthly-move-chart");
var volumeChart = dc.barChart("#monthly-volume-chart"); var volumeChart = dc.barChart("#monthly-volume-chart");
// var yearlyBubbleChart = dc.bubbleChart("#yearly-bubble-chart");
d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) { d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
// since its a csv file we need to format the data a bit // since its a csv file we need to format the data a bit
var dateFormat = d3.time.format("%Y/%m/%d"); var dateFormat = d3.time.format("%Y/%m/%d");
...@@ -348,6 +316,8 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) { ...@@ -348,6 +316,8 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
var t1_month = latest[1] var t1_month = latest[1]
var t1_day = latest[2] 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 // feed it through crossfilter
var ndx = crossfilter(data); var ndx = crossfilter(data);
var all = ndx.groupAll(); var all = ndx.groupAll();
...@@ -435,17 +405,16 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) { ...@@ -435,17 +405,16 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
.renderlet(function (chart) { .renderlet(function (chart) {
chart.select("g.y").style("display", "none"); chart.select("g.y").style("display", "none");
moveChart.filter(chart.filter()); moveChart.filter(chart.filter());
datesbuffer = chart.filter();
}) })
.on("filtered", function (chart) { .on("filtered", function (chart) {
dc.events.trigger(function () { dc.events.trigger(function () {
var chartfilt = chart.filter() var chartfilt = chart.filter()
// tricky part: identifying when the moveChart changes.
if(chartfilt) { if(chartfilt) {
updateDocuments(true); Push2Buffer ( chart.filter() )
} else { } else {
if(datesbuffer) { if(TheBuffer) {
updateDocuments(false) Push2Buffer ( false )
} }
} }
moveChart.focus(chartfilt); moveChart.focus(chartfilt);
...@@ -453,18 +422,6 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) { ...@@ -453,18 +422,6 @@ d3.csv("/chart/corpus/{{ corpus.id }}/data.csv", function (data) {
}); });
dc.renderAll(); dc.renderAll();
// $(".chartBody").on("mousedown", function (evt) {
// pr("clickinchart = [true]")
// clickinchart = true;
// });
// $("body").on("mouseup", function (evt) {
// if(clickinchart) {
// pr("mouseup! clickinchart [true] -> [false]")
// clickinchart=false
// }
// });
} }
); );
...@@ -539,6 +496,7 @@ function ulWriter(rowIndex, record, columns, cellWriter) { ...@@ -539,6 +496,7 @@ function ulWriter(rowIndex, record, columns, cellWriter) {
return '<tr>' + tr + '</tr>'; return '<tr>' + tr + '</tr>';
} }
// (3) Get records and metadata for paginator
$.ajax({ $.ajax({
url: '/tests/paginator/corpus/'+corpusid, url: '/tests/paginator/corpus/'+corpusid,
success: function(data){ success: function(data){
...@@ -546,12 +504,17 @@ $.ajax({ ...@@ -546,12 +504,17 @@ $.ajax({
for(var i in data.records) { for(var i in data.records) {
var orig_id = parseInt(data.records[i].id) var orig_id = parseInt(data.records[i].id)
var arr_id = parseInt(i) var arr_id = parseInt(i)
RecDict[orig_id] = arr_id 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 data.records[i]["del"] = false
// console.log(data.records[i]["date"]+" : originalRecords["+arr_id+"] <- "+orig_id+" | "+data.records[i]["name"]) // console.log(data.records[i]["date"]+" : originalRecords["+arr_id+"] <- "+orig_id+" | "+data.records[i]["name"])
} }
AjaxRecords = data.records; // backup!! AjaxRecords = data.records; // backup!!
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])];
MyTable = $('#my-ajax-table').dynatable({ MyTable = $('#my-ajax-table').dynatable({
dataset: { dataset: {
records: data.records records: data.records
...@@ -564,7 +527,7 @@ $.ajax({ ...@@ -564,7 +527,7 @@ $.ajax({
// _cellWriter: customCellWriter // _cellWriter: customCellWriter
} }
}); });
console.log(RecDict) // console.log(RecDict)
} }
}); });
......
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