From ab77b03a4704acd959da64ba989209730d2384a0 Mon Sep 17 00:00:00 2001
From: lucvic <vicidomini@gmail.com>
Date: Thu, 5 Nov 2015 17:56:53 +0100
Subject: [PATCH] Added datasetexplorer-datalet

---
 datalets/datasetexplorer-datalet/datasetexplorer-datalet.html | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 datalets/datasetexplorer-datalet/datasetexplorer-datalet.png  | Bin 0 -> 1622 bytes
 datalets/datasetexplorer-datalet/demo/index.html              |  23 +++++++++++++++++++++++
 datalets/datasetexplorer-datalet/docs.html                    |  12 ++++++++++++
 datalets/datasetexplorer-datalet/js/buildtreemap.js           | 230 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 490 insertions(+), 0 deletions(-)
 create mode 100644 datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
 create mode 100644 datalets/datasetexplorer-datalet/datasetexplorer-datalet.png
 create mode 100644 datalets/datasetexplorer-datalet/demo/index.html
 create mode 100644 datalets/datasetexplorer-datalet/docs.html
 create mode 100644 datalets/datasetexplorer-datalet/js/buildtreemap.js

diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
new file mode 100644
index 0000000..2fd120a
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
@@ -0,0 +1,225 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="http://deep.routetopa.eu/COMPONENTS/datalets/base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
+
+<!--
+
+`datasetexplorer-datalet` is a treemap datalet based on d3js treemap project http://bl.ocks.org/mbostock/4063582
+A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value.
+This is an enhanced version designed to help users to navigate associated dataset providers.
+
+At this moment it requires server-side elaboration, but later version will hopefully be completely client-side.
+
+Example:
+
+    <datasetexplorer-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2"]'>
+    </datasetexplorer-datalet>
+
+@element datasetexplorer-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module id="datasetexplorer-datalet">
+    <template>
+        <style is="custom-style">
+
+            :host ::content h6 {
+                color: red;
+            }
+
+            :host ::content #treemap_placeholder {
+                width: 100%;
+                height: 70%;
+                min-height: 500px;
+                background: #ddd;
+            }
+
+            :host ::content text {
+                pointer-events: none;
+            }
+
+            :host ::content .grandparent text {
+                font-weight: bold;
+            }
+
+            :host ::content rect {
+                fill: none;
+                stroke: #fff;
+            }
+
+            :host ::content rect.parent,
+            .grandparent rect {
+                stroke-width: 2px;
+            }
+
+            :host ::content .grandparent rect {
+                fill: orange;
+            }
+
+            :host ::content .grandparent:hover rect {
+                fill: #ee9700;
+            }
+
+            :host ::content .children rect.parent,
+            .grandparent rect {
+                cursor: pointer;
+            }
+
+            :host ::content .children rect.parent {
+                fill: #bbb;
+                -fill-opacity: .5;
+                fill-opacity: 1;
+            }
+
+            :host ::content .children:hover rect.child {
+                fill: #bbb;
+            }
+        </style>
+        <div id="treemap_placeholder"></div>
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+    </template>
+
+    <script src="http://deep.routetopa.eu/COMPONENTS/datalets/shared_js/d3.js"></script>
+    <script src="js/buildtreemap.js"></script>
+    <script>
+
+        var DatasetexplorerBehavior = {
+
+            map : {
+                name : "",
+                children : []
+            },
+
+            transformData: function(e)
+            {
+                var treemapData = [];
+                DatasetexplorerBehavior.map.name = this._component.name;
+
+                if(this.data.length > 1) {
+                    for (i = 0; i < this.data.length; i++) {
+                        var propName = this.data[i].name;
+
+                        for (var j = 0; j < this.data[i].data.length; j++) {
+                            if (i == 0) treemapData[j] = {};
+                            currObj = {};
+                            currObj[propName] = this.data[i].data[j];
+                            jQuery.extend(treemapData[j], currObj);
+                        }
+                    }
+                }else{
+                    treemapData = this.data[0].data;
+                }
+
+                this.map.children = [];
+
+                for(var i = 0; i < treemapData.length; i++){
+                    this.checkAggragationField(treemapData[i], this._component.fields.length - 1, this._component.fields.length - 1);
+                }
+
+                var json = JSON.stringify(this.map);
+
+            },
+
+            findChild: function(child, category){
+                var children = child.children;
+                for (var i=0; i<children.length; i++) {
+                    if (children[i].name == category)
+                        return children[i];
+                }
+                var nchild = {name : category , children : []};
+                children.push(nchild);
+                return nchild;
+            },
+
+            checkAggragationField: function(object, levels, value_index){
+                var curchild = this.map;
+                var keys = Object.keys(object);
+                for(var level= 0; level < levels; level++){
+
+                    var child = this.findChild(curchild, object[keys[level]]);
+                    curchild = child;
+                }
+
+                if (curchild.value === undefined)
+                    curchild.value = 0;
+
+                var value = curchild.value + parseFloat(object[keys[value_index]]);
+                curchild.children = null;
+                curchild.value = value;
+            },
+
+            presentData: function(){
+                build(this.map, "treemap_placeholder");
+            }
+        };
+
+
+        Polymer({
+            is : 'datasetexplorer-datalet' ,
+
+            properties: {
+                /**
+                 * It's the name for treemap
+                 *
+                 * @attribute name
+                 * @type String
+                 * @default ''
+                 */
+                name: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                }
+            },
+
+            ready: function(){
+                this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, DatasetexplorerBehavior);
+                this.async(function(){this.behavior.init(this)},1000);
+            }
+
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png
new file mode 100644
index 0000000..a9fd8c6
Binary files /dev/null and b/datalets/datasetexplorer-datalet/datasetexplorer-datalet.png differ
diff --git a/datalets/datasetexplorer-datalet/demo/index.html b/datalets/datasetexplorer-datalet/demo/index.html
new file mode 100644
index 0000000..4345369
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/demo/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+
+    <script>
+    </script>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+<link rel="import" href="../datasetexplorer-datalet.html" />
+
+<datasetexplorer-datalet
+        data-url="http://spod.routetopa.eu/openwall/api/datasetTree"
+        fields='["result,provider_name","result,organization_name","result,package_name","result,resource_name","result,url","result,w"]'
+></datasetexplorer-datalet>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/docs.html b/datalets/datasetexplorer-datalet/docs.html
new file mode 100644
index 0000000..4b99f6f
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/docs.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="import"  href="../../bower_components/iron-component-page/iron-component-page.html">
+    <meta charset="UTF-8">
+</head>
+<body>
+
+<iron-component-page src="datasetexplorer-datalet.html"></iron-component-page>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/datasetexplorer-datalet/js/buildtreemap.js b/datalets/datasetexplorer-datalet/js/buildtreemap.js
new file mode 100644
index 0000000..879a76f
--- /dev/null
+++ b/datalets/datasetexplorer-datalet/js/buildtreemap.js
@@ -0,0 +1,230 @@
+/**
+ * Created by Utente on 17/07/2015.
+ */
+
+function build(root, place_holder) {
+
+    var plwidth = $("#" + place_holder).width(),
+        plheight = $("#" + place_holder).height();
+
+    var margin = {top: 20, right: 0, bottom: 0, left: 0},
+        //width = 960,
+        //height = 500 - margin.top - margin.bottom,
+        width  = plwidth,
+        height =  plheight - margin.top - margin.bottom,
+        formatNumber = d3.format(",d"),
+        transitioning;
+
+    var x = d3.scale.linear()
+        .domain([0, width])
+        .range([0, width]);
+
+    var y = d3.scale.linear()
+        .domain([0, height])
+        .range([0, height]);
+
+    var treemap = d3.layout.treemap()
+        .children(function(d, depth) { return depth ? null : d._children; })
+        .sort(function(a, b) { return a.value - b.value; })
+        .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
+        .round(false);
+
+    var svg = d3.select("#" + place_holder).append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.bottom + margin.top)
+        .style("margin-left", -margin.left + "px")
+        .style("margin.right", -margin.right + "px")
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+        .style("shape-rendering", "crispEdges");
+
+    var grandparent = svg.append("g")
+        .attr("class", "grandparent");
+
+    var dataletContainer = null;
+
+    grandparent.append("rect")
+        .attr("y", -margin.top)
+        .attr("width", width)
+        .attr("height", margin.top);
+
+    grandparent.append("text")
+        .attr("x", 6)
+        .attr("y", 6 - margin.top)
+        .attr("dy", ".75em");
+
+    //d3.json
+    initialize(root);
+    accumulate(root);
+    layout(root);
+    display(root);
+
+    function interpolate(min, max, value) {
+        var colors = ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"];
+        var ratio = value / (max - 1 - min) * Math.max(colors.length - 1, 1);
+        var infI = Math.floor(ratio);
+        var supI = Math.ceil(ratio);
+        var subratio = supI == infI ? 0 : (ratio - infI) / (supI - infI);
+        var color = d3.interpolateHsl( colors[infI], colors[supI] )( subratio );
+        return color;
+    }
+
+    function initialize(root) {
+        root.x = root.y = 0;
+        root.dx = width;
+        root.dy = height;
+        root.depth = 0;
+    }
+
+    // Aggregate the values for internal nodes. This is normally done by the
+    // treemap layout, but not here because of our custom implementation.
+    // We also take a snapshot of the original children (_children) to avoid
+    // the children being overwritten when when layout is computed.
+    function accumulate(d) {
+        return (d._children = d.children)
+            ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0)
+            : d.value;
+    }
+
+    // Compute the treemap layout recursively such that each group of siblings
+    // uses the same size (1×1) rather than the dimensions of the parent cell.
+    // This optimizes the layout for the current zoom state. Note that a wrapper
+    // object is created for the parent node for each group of siblings so that
+    // the parent’s dimensions are not discarded as we recurse. Since each group
+    // of sibling was laid out in 1×1, we must rescale to fit using absolute
+    // coordinates. This lets us use a viewport to zoom.
+    function layout(d) {
+        if (d._children) {
+            treemap.nodes({_children: d._children});
+            var i = 0;
+            d._children.forEach(function(c) {
+                c.x = d.x + c.x * d.dx;
+                c.y = d.y + c.y * d.dy;
+                c.dx *= d.dx;
+                c.dy *= d.dy;
+                c.parent = d;
+                c.depth = d.depth + 1;
+                c.color = c.depth < 2
+                        ? interpolate(0, d._children.length, i++)
+                        : d3.rgb(d.color).brighter(.5);
+                layout(c);
+            });
+        }
+    }
+
+    function display(d) {0
+        grandparent
+            .datum(d.parent)
+            .on("click", transition)
+            .select("text")
+            .text(name(d));
+
+        var g1 = svg.insert("g", ".grandparent")
+            .datum(d)
+            .attr("class", "depth");
+
+        var g = g1.selectAll("g")
+            .data(d._children)
+            .enter().append("g");
+
+        g.filter(function(d) { return d._children; })
+            .classed("children", true)
+            .on("click", transition);
+
+        g.selectAll(".child")
+            .data(function(d) { return d._children || [d]; })
+            .enter().append("rect")
+            .attr("class", "child")
+            .call(rect);
+
+        g.append("rect")
+            .attr("class", "parent")
+            .call(rect)
+            .append("title")
+            .text(function(d) { return formatNumber(d.value); });
+
+        g.append("text")
+            .attr("dy", ".75em")
+            .text(function(d) { return (d._children) ? d.name : ''; })
+            .call(text);
+
+        function transition(d) {
+            if (transitioning || !d) return;
+            transitioning = true;
+
+            if (dataletContainer) {
+                //svg.select("foreignObject")
+                //svg.remove(dataletContainer);
+                dataletContainer.remove();
+                dataletContainer = null;
+            }
+
+            var g2 = display(d),
+                t1 = g1.transition().duration(750),
+                t2 = g2.transition().duration(750);
+
+            // Update the domain only after entering new elements.
+            x.domain([d.x, d.x + d.dx]);
+            y.domain([d.y, d.y + d.dy]);
+
+            // Enable anti-aliasing during the transition.
+            svg.style("shape-rendering", null);
+
+            // Draw child nodes on top of parent nodes.
+            svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
+
+            // Fade-in entering text.
+            g2.selectAll("text").style("fill-opacity", 0);
+
+            // Transition to the new view.
+            t1.selectAll("text").call(text).style("fill-opacity", 0);
+            t2.selectAll("text").call(text).style("fill-opacity", 1);
+            t1.selectAll("rect").call(rect);
+            t2.selectAll("rect").call(rect);
+
+            // Remove the old node when the transition is finished.
+            t1.remove().each("end", function() {
+                svg.style("shape-rendering", "crispEdges");
+                transitioning = false;
+            });
+        }
+
+        if (!d._children[0]._children) {
+            var dataurl = d._children[0].name;
+            var pageurl = dataurl.replace(/\/download\/.*/, '');
+console.log(dataurl);
+console.log(pageurl);
+            dataletContainer = svg
+                .append("foreignObject")
+                .attr("width", 480)
+                .attr("height", 500)
+                    .append("xhtml:body")
+                    .html('<iframe src="'+pageurl+'" width="'+root.dx+'" height="'+root.dy+'"></iframe>');
+
+        }
+
+        return g;
+    }
+
+
+
+    function text(text) {
+        text.attr("x", function(d) { return x(d.x) + 6; })
+            .attr("y", function(d) { return y(d.y) + 6; });
+    }
+
+    function rect(rect) {
+        rect.attr("x", function(d) { return x(d.x); })
+            .attr("y", function(d) { return y(d.y); })
+            .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
+            .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
+            .style("fill", function(d, i) { return d.color; })
+            ;
+    }
+
+    function name(d) {
+        return d.parent
+            ? name(d.parent) + "." + d.name
+            : d.name;
+    }
+};
\ No newline at end of file
--
libgit2 0.21.4