You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@marmotta.apache.org by ss...@apache.org on 2014/03/17 09:54:54 UTC
[10/11] git commit: MARMOTTA-467: re-implemented dataview using
directly the google charts API
MARMOTTA-467: re-implemented dataview using directly the google charts API
Project: http://git-wip-us.apache.org/repos/asf/marmotta/repo
Commit: http://git-wip-us.apache.org/repos/asf/marmotta/commit/d5b0c6d2
Tree: http://git-wip-us.apache.org/repos/asf/marmotta/tree/d5b0c6d2
Diff: http://git-wip-us.apache.org/repos/asf/marmotta/diff/d5b0c6d2
Branch: refs/heads/MARMOTTA-450
Commit: d5b0c6d2fdd5144a2cdb7a9c90ea4f82dae82fd3
Parents: 2b732de
Author: Jakob Frank <ja...@apache.org>
Authored: Fri Mar 14 16:14:43 2014 +0100
Committer: Jakob Frank <ja...@apache.org>
Committed: Fri Mar 14 16:21:26 2014 +0100
----------------------------------------------------------------------
platform/marmotta-core/pom.xml | 4 -
.../src/main/resources/web/admin/dataview.html | 430 ++++++++++---------
2 files changed, 223 insertions(+), 211 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/marmotta/blob/d5b0c6d2/platform/marmotta-core/pom.xml
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/pom.xml b/platform/marmotta-core/pom.xml
index 3c2bb95..05ac758 100644
--- a/platform/marmotta-core/pom.xml
+++ b/platform/marmotta-core/pom.xml
@@ -324,10 +324,6 @@
</dependency>
<dependency>
<groupId>org.apache.marmotta.webjars</groupId>
- <artifactId>sgvizler</artifactId>
- </dependency>
- <dependency>
- <groupId>org.apache.marmotta.webjars</groupId>
<artifactId>strftime</artifactId>
</dependency>
<dependency>
http://git-wip-us.apache.org/repos/asf/marmotta/blob/d5b0c6d2/platform/marmotta-core/src/main/resources/web/admin/dataview.html
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/src/main/resources/web/admin/dataview.html b/platform/marmotta-core/src/main/resources/web/admin/dataview.html
index 2664624..b65917c 100644
--- a/platform/marmotta-core/src/main/resources/web/admin/dataview.html
+++ b/platform/marmotta-core/src/main/resources/web/admin/dataview.html
@@ -25,240 +25,245 @@
<meta charset="UTF-8"/>
<script type="text/javascript" src="../../webjars/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
- <script type="text/javascript" src="../../webjars/sgvizler/0.5.1/sgvizler.js" id="sgvzlr_script" ></script>
<script type="text/javascript">
+ google.load('visualization', '1.0', {'packages':['corechart']});
- var HAS_DATA = true;
+ $(document).ready(function() {
+ var colors = [ '#3366CC','#DC3912','#FF9900','#109618','#990099','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11',
+ 'blue','red','orange','green','navy','Crimson','DarkGreen','DarkTurquoise','DodgerBlue','OliveDrab','pink','violet',
+ 'GoldenRod','Fuchsia','Darkorange','DarkSlateBlue','GreenYellow','LightSeaGreen','Maroon','MediumVioletRed'];
- var SERVER_URL = _SERVER_URL;
-
- var colors = [ '#3366CC','#DC3912','#FF9900','#109618','#990099','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11',
- 'blue','red','orange','green','navy','Crimson','DarkGreen','DarkTurquoise','DodgerBlue','OliveDrab','pink','violet',
- 'GoldenRod','Fuchsia','Darkorange','DarkSlateBlue','GreenYellow','LightSeaGreen','Maroon','MediumVioletRed']
-
- sgvizler.option.libfolder = "../../webjars/sgvizler/0.5.1/lib";
-
- sgvizler.option.stylepath = _SERVER_URL + _CURRENT_STYLE;
-
- sgvizler.option.query.endpoint = SERVER_URL+"sparql/select";
- sgvizler.option.query.endpoint_output = 'json';
-
- function drawGraphs() {
- //$("#graphs").empty().append(loader());
-
- var query = "SELECT ?graph (COUNT(?s) AS ?triples) WHERE { GRAPH ?graph { ?s ?p ?o }} GROUP BY ?graph";
-
- $("#graphs").attr('data-sgvizler-query',query);
- $("#graphs").attr('data-sgvizler-chart','gPieChart');
- $("#graphs").attr('data-sgvizler-log',"2");
-
- var query = new sgvizler.query();
- $.extend(query,sgvizler.option.query,sgvizler.ui.getQueryOptionAttr(document.getElementById('graphs')));
- $.extend(query.chartOptions,sgvizler.ui.getChartOptionAttr(document.getElementById('graphs')));
- query.draw({
- 'select':function(chart,data) {
- var selection = chart.getSelection();
- if(selection.length > 0) {
- drawClasses(data.getValue(selection[0].row,0));
- }
- }
- },{is3D:true,title:'All Graphs in the system. Click to select!',colors:colors})
-
- if (document.getElementById('loading_graphs') != null) {
- var l_g = document.getElementById('loading_graphs');
- l_g.parentNode.removeChild(l_g);
+ function loader() {
+ return $("<img />", {'src':_SERVER_URL+'core/public/img/loader/lmf-loader_32.gif'});
}
- }
- function drawClasses(graph) {
- if(graph) {
- $("#classes_all").removeAttr("disabled").show();
+ function sparql(query,onsuccess,onfailure) {
+ $.ajax({
+ 'url': _SERVER_URL+"sparql/select?output=json&query="+encodeURIComponent(query),
+ 'success': onsuccess,
+ 'error': onfailure,
+ 'async': true
+ });
}
- else $("#classes_all").prop("disabled", "disabled").hide();
-
- var title = graph ? "Classes in graph "+graph : "Classes in all graphs";
- var query = graph ?
- "SELECT ?class (COUNT(?s) AS ?count) WHERE { GRAPH <"+graph+"> {{?s a ?class} UNION {SELECT ?s WHERE { GRAPH <"+graph+"> { ?s ?a ?b. FILTER NOT EXISTS{?s a ?class}}}GROUP BY ?s}}}GROUP BY ?class" :
- "SELECT ?class (COUNT(?s) AS ?count) WHERE {{?s a ?class} UNION {SELECT ?s WHERE{ ?s ?a ?b. FILTER NOT EXISTS{?s a ?class}}GROUP BY ?s}}GROUP BY ?class";
-
- $("#classes").attr('data-sgvizler-query',query);
- $("#classes").attr('data-sgvizler-chart','gPieChart');
- $("#classes").attr('data-sgvizler-log',"2");
-
- var query = new sgvizler.query();
- $.extend(query,sgvizler.option.query,sgvizler.ui.getQueryOptionAttr(document.getElementById('classes')));
- $.extend(query.chartOptions,sgvizler.ui.getChartOptionAttr(document.getElementById('classes')));
- query.draw({
- 'select':function(chart,data) {
- var selection = chart.getSelection();
- if(selection.length > 0) {
- drawResources(graph,data.getValue(selection[0].row,0),undefined,colors[selection[0].row]);
- }
- }
- },{is3D:true,title:title,colors:colors},function(data){
- drawResources(graph,data.getValue(0,0),undefined,colors[0]);
- });
- }
-
-
- function drawResources(graph,clazz,lim,color) {
- var limit = lim ? lim : 5;
- var query;
- var l_s = limit=="all" ? "":" LIMIT "+limit;
- if(graph) {
- if(clazz) {
- query = "SELECT ?a ?b ?c WHERE { GRAPH <"+graph+"> {?a ?b ?c.{SELECT ?a WHERE {GRAPH <"+graph+"> {?a a <"+clazz+">}}ORDER BY ?a "+l_s+"}}}";
- } else {
- query = "SELECT ?a ?b ?c WHERE { GRAPH <"+graph+"> {?a ?b ?c.{SELECT ?a WHERE {GRAPH <"+graph+"> {?a ?b ?c.FILTER NOT EXISTS {?a a ?class}}}ORDER BY ?a "+l_s+"}}}";
+ function toGoogleDataTable(data) {
+ function getValue(d) {
+ return d?d.value:"";
}
- } else {
- if(clazz) {
- query = "SELECT ?a ?b ?c WHERE {?a ?b ?c.{SELECT ?a WHERE {?a a <"+clazz+">}ORDER BY ?a "+l_s+"}}";
- } else {
- query = "SELECT ?a ?b ?c WHERE {?a ?b ?c.{SELECT ?a WHERE {?a ?b ?c.FILTER NOT EXISTS {?a a ?class}}ORDER BY ?a "+l_s+"}}";
+ var tbl = new google.visualization.DataTable(),
+ c1 = data.head.vars[0],
+ c2 = data.head.vars[1];
+ tbl.addColumn('string', c1);
+ tbl.addColumn('number', c2);
+ var bind = data.results.bindings;
+ for( var i = 0; i < bind.length; i++) {
+ tbl.addRow([ getValue(bind[i][c1]), parseInt( getValue(bind[i][c2]) )||0 ]);
}
+ return tbl;
}
- if (document.getElementById('loading_types') != null) {
- var l_t = document.getElementById('loading_types');
- l_t.parentNode.removeChild(l_t);
- }
-
- sparql(query,function(data){
- $("#resources").empty();
- if(data.results.bindings.length==0) return $("#resources").append("<p>Nothing to display!</p>");
- else {
- var sel = $("<select></select>")
- .append("<option>5</option>")
- .append("<option>10</option>")
- .append("<option>25</option>")
- .append("<option>50</option>")
- .append("<option>all</option>")
- .change(function(){
- drawResources(graph,clazz,$(this).val(),color);
- });
- sel.val(limit);
- var c_s = clazz ? " of type "+clazz : " without type relation";
- var g_s = graph ? " in graph "+graph : "";
- $("#resources").append($("<div></div>").append("Show ").append(sel).append(" items"+c_s+g_s));
- $("#resources").append(parse(data,color));
+ google.setOnLoadCallback(drawStatistics);
+ function drawStatistics() {
+ var target = $("#overview").empty().append(loader());
+ function error() {
+ target.text("Error loading statistics");
}
- },function(){alert("cannot show data")});
-
- if (document.getElementById('loading_resources') != null) {
- var l_r = document.getElementById('loading_resources');
- l_r.parentNode.removeChild(l_r);
+ var stats = {};
+ sparql("SELECT (COUNT (?s) AS ?triples) WHERE { ?s ?p ?o }",
+ function(data) {
+ stats.triples = data.results.bindings[0].triples.value;
+ if (stats.triples == 0) {
+ target.empty().text("System does not contain any data");
+ $("#details").hide();
+ return;
+ }
+ sparql("SELECT (COUNT (?s) AS ?subjects) WHERE { SELECT ?s WHERE { ?s ?p ?o } GROUP BY ?s }",
+ function(data){
+ stats.subjects = data.results.bindings[0].subjects.value;
+ sparql("SELECT (COUNT (?x) AS ?graphs) WHERE { SELECT ?x {GRAPH ?x { ?s ?p ?o }} GROUP BY ?x}",
+ function(data) {
+ stats.graphs = data.results.bindings[0].graphs.value;
+ var s = "System contains $2 subjects with overall $1 triples in $3 graphs.";
+ s = s.replace(/\$1/g,stats.triples);
+ s = s.replace(/\$2/g,stats.subjects);
+ s = s.replace(/\$3/g,stats.graphs);
+ target.empty().text(s);
+
+ $("#details").slideDown();
+ drawGraphs();
+ drawClasses(undefined);
+ },
+ error
+ );
+ },
+ error
+ );
+ },
+ error
+ );
}
- }
- //return a result object
- function parse(data,color) {
- var x = 0;
- var current;
- var table;
- var res = $("<div style='margin:10px'></div>");
- for(var i=0; i<data.results.bindings.length;i++) {
- var d = data.results.bindings[i];
- if(d.a.value!=current) {
- x = 0;
- current = d.a.value;
- table = $("<table class='resource' style='margin-bottom:10px'></table>").append("<th style='background-color:"+color+" !important' colspan='2'><a target='_blank' href='../../../../resource?uri="+encodeURIComponent(d.a.value)+"'>"+d.a.value+"</a></th>");
- res.append(table);
+ var _graph = undefined, _type = undefined;
+ function drawGraphs() {
+ var target = $("#graphs").empty().append(loader());
+ function error() {
+ target.empty().text("Could not load graphs");
}
- var style = x%2==0 ? "white" : "#efefef";
- x++;
- var value = d.c.type=="uri" ? "<a target='_blank' href='../../../../resource?uri="+encodeURIComponent(d.c.value)+"'>"+d.c.value+"</a>" : d.c.value;
- table.append($("<tr></tr>")
- .append("<td style='background-color:"+style+"'>"+d.b.value+"</td>")
- .append("<td style='background-color:"+style+"'>"+value+"</td></tr>"));
+ sparql("SELECT ?graph (COUNT(?s) AS ?triples) WHERE { GRAPH ?graph { ?s ?p ?o }} GROUP BY ?graph",
+ function(data){
+ var tbl = toGoogleDataTable(data),
+ options = {
+ is3D:true,
+ height: 350,
+ title:'All Graphs in the system. Click to select!',
+ slices: {},
+ colors:colors };
+
+ var chart = new google.visualization.PieChart(document.getElementById('graphs'));
+ google.visualization.events.addListener(chart, 'select', function() {
+ var selection = chart.getSelection()[0];
+ if (selection) {
+ _graph = tbl.getValue(selection.row, 0);
+ _type = undefined;
+ if (tbl.getNumberOfRows() > 1) {
+ if (options.slices[selection.row]) {
+ options.slices = {};
+ _graph = undefined;
+ } else {
+ options.slices = {};
+ options['slices'][selection.row] = { 'offset': .2};
+ }
+ }
+ chart.draw(tbl, options);
+ drawClasses(_graph);
+ }
+ });
+ chart.draw(tbl, options);
+ },
+ error
+ );
}
- return res;
- }
-
- function drawStatistics() {
-
- $("#view").append("<h2>Overview <img id='loading_overview' src='../public/img/loader/lmf-loader_32.gif'></h2>");
- $("#view").append("<div id='statistics'></div>");
- //$("#statistics").append(loader());
- count();
-
- function count() {
- var statistics = {};
-
- //count triples
- var Q1 = "SELECT (COUNT (?s) AS ?triples) WHERE { ?s ?p ?o }";
- sparql(Q1,function(data){
- statistics.triples = data.results.bindings[0].triples.value;
- },error);
-
- if(statistics.triples == 0) {
- draw(statistics);
- HAS_DATA = false;
- return;
+ function drawClasses(graph) {
+ _graph = graph || _graph;
+ $("#resources").empty().append(loader());
+ var target = $("#types").empty().append(loader()),
+ query = _graph ?
+ "SELECT ?class (COUNT(?s) AS ?count) WHERE { GRAPH <"+_graph+"> {{?s a ?class} UNION {SELECT ?s WHERE { GRAPH <"+_graph+"> { ?s ?a ?b. FILTER NOT EXISTS{?s a ?class}}}GROUP BY ?s}}}GROUP BY ?class" :
+ "SELECT ?class (COUNT(?s) AS ?count) WHERE {{?s a ?class} UNION {SELECT ?s WHERE{ ?s ?a ?b. FILTER NOT EXISTS{?s a ?class}}GROUP BY ?s}}GROUP BY ?class";
+ function error() {
+ target.empty().text("Could not load classes");
}
- //count subjects
- var Q2 = "SELECT (COUNT (?s) AS ?subjects) WHERE { SELECT ?s WHERE { ?s ?p ?o } GROUP BY ?s }";
- sparql(Q2,function(data){
- statistics.subjects = data.results.bindings[0].subjects.value;
- },error);
-
- //count graphs
- var Q3 = "SELECT (COUNT (?x) AS ?graphs) WHERE { SELECT ?x {GRAPH ?x { ?s ?p ?o }} GROUP BY ?x}";
- sparql(Q3,function(data){
- statistics.graphs = data.results.bindings[0].graphs.value;
- },error);
-
- draw(statistics);
-
+ sparql(query,
+ function(data) {
+ var tbl = toGoogleDataTable(data),
+ options = {
+ is3D:true,
+ height: 350,
+ title: "All classes in "+(_graph?_graph:"the System. Click to select!"),
+ slices: {},
+ colors:colors };
+
+ var chart = new google.visualization.PieChart(document.getElementById('types'));
+ google.visualization.events.addListener(chart, 'select', function() {
+ var selection = chart.getSelection()[0];
+ if (selection) {
+ _type = tbl.getValue(selection.row, 0);
+ var _c = colors[selection.row];
+ if (tbl.getNumberOfRows() > 1) {
+ if (options.slices[selection.row]) {
+ options.slices = {};
+ _type = undefined;
+ _c = "#333";
+ } else {
+ options.slices = {};
+ options['slices'][selection.row] = { 'offset': .2};
+ }
+ }
+ chart.draw(tbl, options);
+ drawResources(_graph, _type, undefined, _c);
+ }
+ });
+ chart.draw(tbl, options);
+ drawResources(_graph, _type, undefined, "#333");
+ },
+ error
+ );
}
- function draw(statistics) {
- if(statistics.triples == 0) {
- $("#statistics").empty().html("System does not contain any data");
- } else {
- var s = "System contains $2 subjects with overall $1 triples in $3 graphs";
- s = s.replace(/\$1/g,statistics.triples);
- s = s.replace(/\$2/g,statistics.subjects);
- s = s.replace(/\$3/g,statistics.graphs);
- $("#statistics").empty().text(s);
- }
- if (document.getElementById('loading_overview') != null) {
- var l_o = document.getElementById('loading_overview');
- l_o.parentNode.removeChild(l_o);
+ function drawResources(graph, type, limit, color) {
+ limit = limit || 5;
+ var target = $("#resources").empty().append(loader()),
+ query,
+ l_s = limit=="all" ? "":" LIMIT "+limit;
+
+ if(graph) {
+ if(type) {
+ query = "SELECT ?a ?b ?c WHERE { GRAPH <"+graph+"> {?a ?b ?c.{SELECT ?a WHERE {GRAPH <"+graph+"> {?a a <"+type+">}}ORDER BY ?a "+l_s+"}}}";
+ } else {
+ query = "SELECT ?a ?b ?c WHERE { GRAPH <"+graph+"> {?a ?b ?c.{SELECT ?a WHERE {GRAPH <"+graph+"> {?a ?b ?c.FILTER NOT EXISTS {?a a ?class}}}ORDER BY ?a "+l_s+"}}}";
+ }
+ } else {
+ if(type) {
+ query = "SELECT ?a ?b ?c WHERE {?a ?b ?c.{SELECT ?a WHERE {?a a <"+type+">}ORDER BY ?a "+l_s+"}}";
+ } else {
+ query = "SELECT ?a ?b ?c WHERE {?a ?b ?c.{SELECT ?a WHERE {?a ?b ?c.FILTER NOT EXISTS {?a a ?class}}ORDER BY ?a "+l_s+"}}";
+ }
}
- }
- function error() {
- alert("an error occurred!");
- }
- }
+ function error() {
+ target.empty().text("Could not load resources");
+ }
- function sparql(query,onsuccess,onfailure) {
- $.ajax({url:SERVER_URL+"sparql/select?output=json&query="+encodeURIComponent(query),success:onsuccess,error:onfailure,async:false});
- }
+ sparql(query, function(data) {
+ target.empty();
+ if(data.results.bindings.length==0) {
+ target.text("Nothing to display");
+ return;
+ }
- function loader() {
- return $("<img src='../public/img/loader/lmf-loader_32.gif'>");
- }
+ var sel = $("<select />")
+ .append("<option>5</option>")
+ .append("<option>10</option>")
+ .append("<option>25</option>")
+ .append("<option>50</option>")
+ .append("<option>all</option>")
+ .change(function(){
+ drawResources(graph,type,$(this).val(),color);
+ });
+ sel.val(limit);
+ var c_s = type ? " of type "+type : " without type relation";
+ var g_s = graph ? " in graph "+graph : "";
- sgvizler.go(function(){
- drawStatistics();
- if(HAS_DATA) {
- $("#view").append("<h2>Graphs <img id='loading_graphs' src='../public/img/loader/lmf-loader_32.gif'></h2>");
- $("#view").append("<div id='graphs' style='height:350px;'></div>");
- $("#view").append($("<h2>Types <img id='loading_types' src='../public/img/loader/lmf-loader_32.gif'></h2>").append($("<button id='classes_all' style='font-size: 12px;margin-left:5px;'>(show types of all graphs)</button>").click(function(){drawClasses()})));
- $("#view").append("<div id='classes' style='height:350px;'></div>");
- $("#view").append("<h2>Resources <img id='loading_resources' src='../public/img/loader/lmf-loader_32.gif'></h2>");
- $("#view").append("<div id='resources' style=''></div>");
- drawGraphs();
- drawClasses();
- }
- });
+ target.append($("<div />").append("Show ").append(sel).append(" items"+c_s+g_s));
+
+ var x = 0, current, table,
+ res = $("<div />", {'style':'margin:10px'});
+
+ for(var i=0; i<data.results.bindings.length;i++) {
+ var d = data.results.bindings[i];
+ if(d.a.value!=current) {
+ x = 0;
+ current = d.a.value;
+ table = $("<table />", {'class':'resource', 'style':'margin-bottom:10px'})
+ .append($("<th/>", {'style':"background-color:"+color+" !important", 'colspan':'2'})
+ .append($("<a/>", {'target':'_blank', 'href':_SERVER_URL+"resource?uri="+encodeURIComponent(d.a.value), 'text':d.a.value})));
+ res.append(table);
+ }
+ var style = x%2==0 ? "white" : "#efefef";
+ x++;
+ var value = (d.c.type=="uri" ? $("<a/>", {'target':'_blank', 'href':_SERVER_URL+"resource?uri="+encodeURIComponent(d.c.value)}) : $("<span/>")).text(d.c.value);
+ table.append($("<tr />")
+ .append($("<td />", {'style':"background-color:"+style+";", 'text':d.b.value}))
+ .append($("<td />", {'style':"background-color:"+style+";"}).append(value)));
+ }
+ target.append(res);
+ }, error);
+ }
+ });
</script>
<style type="text/css">
.resource {
@@ -286,7 +291,18 @@
<body>
<!--###BEGIN_CONTENT###-->
<h1>Dataview</h1>
- <div id="view"></div>
+ <div id="view">
+ <h2>Overview</h2>
+ <div id="overview"></div>
+ <div id="details" style="display: none;">
+ <h2>Graphs</h2>
+ <div id="graphs"></div>
+ <h2>Types</h2>
+ <div id="types"></div>
+ <h2>Resources</h2>
+ <div id="resources"></div>
+ </div>
+ </div>
<!--###END_CONTENT###-->
</body>
</html>