MARMOTTA-467: Changed to official sgvizler webjar in marmotta-sparql module MARMOTTA-416: marmotta-sgvizler-webjar replaced by org.webjars:sgvizler - d3.js is no longer used/required.
Project: http://git-wip-us.apache.org/repos/asf/marmotta/repo Commit: http://git-wip-us.apache.org/repos/asf/marmotta/commit/7ece0f0f Tree: http://git-wip-us.apache.org/repos/asf/marmotta/tree/7ece0f0f Diff: http://git-wip-us.apache.org/repos/asf/marmotta/diff/7ece0f0f Branch: refs/heads/develop Commit: 7ece0f0fbeec71952793c7d98104bb4b3e214d54 Parents: b25a268 Author: Jakob Frank <[email protected]> Authored: Mon Mar 17 11:31:53 2014 +0100 Committer: Jakob Frank <[email protected]> Committed: Mon Mar 17 11:41:52 2014 +0100 ---------------------------------------------------------------------- platform/marmotta-sparql/pom.xml | 3 +- .../src/main/resources/kiwi-module.properties | 2 + .../main/resources/web/admin/configuration.js | 1 - .../src/main/resources/web/admin/sgvizler.html | 186 +++++++++---------- 4 files changed, 87 insertions(+), 105 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/marmotta/blob/7ece0f0f/platform/marmotta-sparql/pom.xml ---------------------------------------------------------------------- diff --git a/platform/marmotta-sparql/pom.xml b/platform/marmotta-sparql/pom.xml index 501061d..76feb65 100644 --- a/platform/marmotta-sparql/pom.xml +++ b/platform/marmotta-sparql/pom.xml @@ -191,8 +191,9 @@ <artifactId>snorql</artifactId> </dependency> <dependency> - <groupId>org.apache.marmotta.webjars</groupId> + <groupId>org.webjars</groupId> <artifactId>sgvizler</artifactId> + <version>0.6</version> </dependency> <dependency> http://git-wip-us.apache.org/repos/asf/marmotta/blob/7ece0f0f/platform/marmotta-sparql/src/main/resources/kiwi-module.properties ---------------------------------------------------------------------- diff --git a/platform/marmotta-sparql/src/main/resources/kiwi-module.properties b/platform/marmotta-sparql/src/main/resources/kiwi-module.properties index 4d1fe2d..ffdaa86 100644 --- a/platform/marmotta-sparql/src/main/resources/kiwi-module.properties +++ b/platform/marmotta-sparql/src/main/resources/kiwi-module.properties @@ -41,3 +41,5 @@ adminpage.2.link=/admin/snorql.html adminpage.3.title=Update Interface adminpage.3.link=/admin/update.html +adminpage.4.title=Sgvizler +adminpage.4.link=/admin/sgvizler.html http://git-wip-us.apache.org/repos/asf/marmotta/blob/7ece0f0f/platform/marmotta-sparql/src/main/resources/web/admin/configuration.js ---------------------------------------------------------------------- diff --git a/platform/marmotta-sparql/src/main/resources/web/admin/configuration.js b/platform/marmotta-sparql/src/main/resources/web/admin/configuration.js index 64431dc..39e5c35 100644 --- a/platform/marmotta-sparql/src/main/resources/web/admin/configuration.js +++ b/platform/marmotta-sparql/src/main/resources/web/admin/configuration.js @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/* SOLR CONFIGURATION */ $(function() { var settings = { host : _SERVER_URL, http://git-wip-us.apache.org/repos/asf/marmotta/blob/7ece0f0f/platform/marmotta-sparql/src/main/resources/web/admin/sgvizler.html ---------------------------------------------------------------------- diff --git a/platform/marmotta-sparql/src/main/resources/web/admin/sgvizler.html b/platform/marmotta-sparql/src/main/resources/web/admin/sgvizler.html index 98e6ba8..f897b8e 100644 --- a/platform/marmotta-sparql/src/main/resources/web/admin/sgvizler.html +++ b/platform/marmotta-sparql/src/main/resources/web/admin/sgvizler.html @@ -1,103 +1,95 @@ +<!-- + + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml";> <head> + <script type="text/javascript"> + var _SERVER_URL = "http://localhost:8080/";; + var _BASIC_URL = "http://localhost:8080/";; + </script> + <!--###BEGIN_HEAD###--> <title>Sgvizler</title> <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" src="../../webjars/sgvizler/0.6/sgvizler.min.js" ></script> <script type="text/javascript" src="../../webjars/codemirror/3.16/lib/codemirror.js"></script> <script type="text/javascript" src="../../webjars/codemirror/3.16/addon/hint/show-hint.js"></script> <script type="text/javascript" src="../../webjars/codemirror/3.16/mode/sparql/sparql.js"></script> <script type="text/javascript"> - // CONFIGURATION Sgvizler 0.5: Set variables to fit your setup. - // NB! Do not let the last item in a list end with a comma. - - //// Query settings. The defaults settings are listed. - sgvizler.option.query = { - // Default query. - 'query': "SELECT ?class (count(?instance) AS ?noOfInstances)\nWHERE{ ?instance a ?class }\nGROUP BY ?class\nORDER BY ?class", - - // Endpoint URL. - 'endpoint': _BASIC_URL + 'sparql/select', - - // Endpoint output format. - 'endpoint_output': 'json' // 'xml' or 'json' - - // This string is appended the 'endpoint' variable and the query to it again to give a link to the "raw" query results. - //'endpoint_query_url': "?output=text&query=", - - // URL to SPARQL validation service. The query is appended to it. - //'validator_query_url': "http://www.sparql.org/query-validator?languageSyntax=SPARQL&outputFormat=sparql&linenumbers=true&query=";, - - // Default chart type. - //'chart': 'gLineChart', - - // Default log level. Must be either 0, 1, or 2. - //'loglevel': 2 - }; - - //// Prefixes - // Add convenient prefixes for your dataset. rdf, rdfs, xsd, owl - // are already set. Examples: - //sgvizler.option.namespace['wd'] = 'http://sws.ifi.uio.no/d2rq/resource/'; - //sgvizler.option.namespace['w'] = 'http://sws.ifi.uio.no/ont/world.owl#'; - - //// Your chart drawing preferences. The defaults are listed. - // See the Google visualization API for available options for - // Google charts, and the Sgvizler homepage for other - // options. Options applicable to all charts are put in the - // "root" of sgvizler.chartOptions. Chart specific options are - // put in a "child" with the chart's id as name, - // e.g. 'gGeoMap'. - sgvizler.option.chart = { - //'width': '800', - //'height': '400', - //'chartArea': { left: '5%', top: '5%', width: '75%', height: '80%' }, - // 'gGeoMap': { - // 'dataMode': 'markers' - // }, - // 'gMap': { - // 'dataMode': 'markers', - // }, - // 'sMap': { - // 'dataMode': 'markers', - // 'showTip': true, - // 'useMapTypeControl': true - // } - }; - - var editor; - $(document).ready(function(){ - jQuery("#sgvzlr_cQuery").addClass("editor_cm"); - - }); - - sgvizler.ui.setElementValue = function (elementID, value) { - if (sgvizler.ui.isElement(elementID)) { - $('#' + elementID).val(value); - } - if(elementID == "sgvzlr_cQuery") { - if(editor) editor.toTextArea(); - editor = CodeMirror.fromTextArea(document.getElementById("sgvzlr_cQuery"),{ - lineNumbers : true, - matchBrackets : true, - extraKeys: {"Ctrl-Space": "sparqlAutocomplete"}, - mode: "application/x-sparql-query" - }); + $(document).ready(function() { + // Default settings + sgvizler.defaultEndpointURL(_SERVER_URL + "sparql/select"); + sgvizler.defaultEndpointOutputFormat("json"); +// sgvizler.defaultLogContainer("sgMessage"); + + // List available charts + var charts = sgvizler.registryChartFunctions().sort(), + group = undefined, + select = $("#sgChart").empty(); + for (var i = 0; i < charts.length; i++) { + var c = charts[i], + g = c.split('.')[0]; + if (!group || group.attr('label') != g) { + group = $("<optgroup />", {label: g}).appendTo(select); + } + group.append($("<option/>", {'value': c, 'title':c, 'text': c.replace(/.*\./, '') })); } - }; - - //// Leave this as is. Ready, steady, GO! - $(document).ready(sgvizler.go()); + // preselect default query and chart + $("#sgQuery").val("SELECT ?class (count(?instance) AS ?noOfInstances)\nWHERE { ?instance a ?class }\nGROUP BY ?class\nORDER BY ?class"); + select.val("google.visualization.PieChart"); + + // use codemirror for the SPARQL editor + var editor = CodeMirror.fromTextArea(document.getElementById("sgQuery"), { + mode: 'sparql', + value: "SELECT ?class (count(?instance) AS ?noOfInstances)\nWHERE { ?instance a ?class }\nGROUP BY ?class\nORDER BY ?class", + extraKeys: {"Ctrl-Space": "sparqlAutocomplete"}, + matchBrackets : true, + lineNumbers: true, + autofocus: true + }); + + // Build the Chart + $("#sgSubmit").click(function(event) { + editor.save(); + var Q = new sgvizler.Query(); + Q.query(editor.getValue()) + .chartFunction(select.val()||"google.visualization.PieChart") + .chartHeight(parseInt($("#sgHeight").val())||400) + .chartWidth(parseInt($("#sgWidth").val())||800) + .draw("chart"); + + event.preventDefault(); + }); + }); </script> <link rel="stylesheet" href="../../webjars/codemirror/3.16/lib/codemirror.css" /> + <!-- <link rel="stylesheet" href="../../webjars/codemirror/3.16/adon/hint/show-hint.css" /> + --> <style type="text/css"> .CodeMirror { background-color: #fff; + border: 1px solid #666; } </style> <!--###END_HEAD###--> @@ -107,34 +99,22 @@ <h2>Visualize SPARQL Query Results</h2> This page allows you to enter custom SPARQL queries and visualize their results in different kinds of charts. -The implementation is based on <a href="http://code.google.com/p/sgvizler/";>Sqvizler</a>, so you can evaluate query -visualisations here and then build your own custom LMF+Sgvizler applications. +The implementation is based on <a href="http://dev.data2000.no/sgvizler/";>Sqvizler</a>, so you can evaluate query +visualisations here and then build your own custom Marmotta + Sgvizler applications. <div id="queryarea"> - <pre id="sgvzlr_cPrefix"></pre> - <textarea id="sgvzlr_cQuery" rows="10" cols="80"></textarea> - <form method="get" id="sgvzlr_formQuery"> - <p> - <input type="hidden" value="" name="query" id="sgvzlr_strQuery"/> - Width: <input name="width" id="sgvzlr_strWidth" type="text" size="3"/> - Height: <input name="height" id="sgvzlr_strHeight" type="text" size="3"/> - Chart Type: <select name="chart" id="sgvzlr_optChart"></select> - <input type="button" value="GO!" onclick="editor.save(); sgvizler.ui.submitQuery()"/> - </p> - </form> - <div id="sgvzlr_cMessage"></div> -</div> -<div id="sgvzlr_gchart" style="width:800px; height:400px;"></div> -<div style="font-size: 80%; font-style: italic; margin-top: 10px;"> - <!-- Please leave a link to the Sgvizler homepage --> + <label for="sgQuery">Query:</label><br /> + <pre id="sgPrefix" style="display: none;"></pre> + <textarea id="sgQuery" rows="10" cols="80"></textarea> <p> - Sgvizler visualizes the result of SPARQL SELECT queries using - javascript and the Google Visualization API. For more - information, see - the <a href="http://code.google.com/p/sgvizler/";>Sgvizler</a> - homepage. (c) 2011 Martin G. Skjæveland. + <label for="sgWidth">Width:</label> <input name="width" id="sgWidth" type="text" value="800" size="3"/> + <label for="sgHeight">Height:</label> <input name="height" id="sgHeight" type="text" value="400" size="3"/> + <label for="sgChart">Chart Type:</label> <select name="chart" id="sgChart"></select><br /> + <input id="sgSubmit" type="button" value="Query" /> </p> + <div id="sgMessage" style="display: none;"></div> </div> +<div id="chart" style="width:800px; height:400px;"></div> <!--###END_CONTENT###--> </body> </html>
