treemap tooltip

Renato De Donato
1 parent 4143bce6
Showing 5 changed files with 275 additions and 15 deletions
controllets/room-controllet/room-controllet.html
datalets/datasetexplorer-datalet/datasetexplorer-datalet.html
datalets/datasetexplorer-datalet/demo/index.html
datalets/datasetexplorer-datalet/js/buildtreemap.js
datalets/datasetexplorer-datalet/treemap_tooltip.html
@@ -28,7 +28,6 @@
                 transform: scaleX(-1);
                 filter: FlipH;
                 -ms-filter: "FlipH";
-
             }
             paper-dialog {
@@ -52,8 +51,8 @@
             }
             p {
-                padding-top: 8px;
                 margin: 0px;
+                padding: 8px 0px 0px 0px;
                 white-space: nowrap;
             }
@@ -30,7 +30,7 @@
 -->
 <link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
-<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
+<link rel="import" href="treemap_tooltip.html">
 <!--
@@ -110,8 +110,11 @@ Example:
                 fill: #bbb;
             }
         </style>
-        <div id="treemap_placeholder"></div>
+        <div id="treemap_placeholder">
+            <treemap-tooltip id="treemap_tooltip"></treemap-tooltip>
+        </div>
         <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+        <!--<treemap-tooltip id="treemap_tooltip"></treemap-tooltip>-->
     </template>
     <script src="../shared_js/d3.js"></script>
@@ -10,14 +10,53 @@
 </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" />
+<script src="../../shared_js/webcomponents.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"]'-->
+<!--&gt;</datasetexplorer-datalet>-->
+
+<link rel="import" href="../treemap_tooltip.html" />
+
+<treemap-tooltip id="treemap_tooltip" color="yellowgreen" name="CKAN" description="Ckan datasets provider bla cjaijh aiughauiha hauihauiaha djisdjdijd. Thsos jnsuihsuhs dmodjod jjjjjd dijnaiosjf saojfioasjdf!!!" logo-url="http://essi-lab.eu/twiki/pub/GIcat/CKANProfilerGuide/logo-ckan.png" datasets="151" dataset-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c3b52992-ba61-4a73-a637-0f2e1ca26aab"></treemap-tooltip>
+
+<div class="box" style="background-color: yellowgreen" onmousemove="showTooltip(event, 'first')" onmouseout="hideTooltip()"></div>
+<div class="box" style="background-color: aqua" onmousemove="showTooltip(event, 'middle')" onmouseout="hideTooltip()"></div>
+<div class="box" style="background-color: orchid" onmousemove="showTooltip(event, 'last')" onmouseout="hideTooltip()"></div>
+
+<style>
+    .box {
+        height: 200px;
+        width: 200px;
+        cursor: pointer;
+    }
+</style>
+
+<script>
+    function showTooltip(e, lvl) {
+        switch (lvl) {
+            case "first":
+                    //setta dati tooltip
+                treemap_tooltip.color = "yellowgreen";
+                break;
+            case "middle":
+                treemap_tooltip.color = "aqua";
+                break;
+            case "last":
+                treemap_tooltip.color = "orchid";
+        }
-<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>
+        treemap_tooltip.showTooltip(e, lvl);
+    }
+    function hideTooltip() {
+        treemap_tooltip.hideTooltip();
+    }
+</script>
 </body>
 </html>
 \ No newline at end of file
@@ -129,8 +129,32 @@ function build(root, meta, place_holder, select_listener, width, height) {
         g.append("rect")
             .attr("class", "parent")
             .call(rect)
-            .append("title")
-            .text(function(d) { return d.name;  /*formatNumber(d.value);*/ });
+            .attr("onmousemove", function(d) {
+                //var data = ["lvl", "name", "color", "description", "logoUrl", "datasets", "datasetUrl"];
+                var data = ["", d.name, d.color, "", "", "0", ""];
+                //d.name.split(':')[1]???
+                if (d.depth == 1) {
+                    // FIRST LVL
+                    data[0] = "first";
+                    data[3] = "description";//???
+                    data[4] = "http://essi-lab.eu/twiki/pub/GIcat/CKANProfilerGuide/logo-ckan.png";//id???
+                    data[5] = "2222";//meta???
+                } else if (d._children && !d._children[0]._children) {
+                    // LAST LVL
+                    data[0] = "last";
+                    data[6] = "datasert url";//???
+                } else {
+                    // MIDDLE LVL
+                    data[0] = "middle";
+                    data[5] = "1111";//meta???
+                }
+                //console.log(data);
+                //console.log(data.toString());
+                return "showTooltip(event, '" + data + "')";
+            })
+            .attr("onmouseout", function() {return "hideTooltip()";})
+            //.append("title")
+            //.text(function(d) { return d.name;  /*formatNumber(d.value);*/ });
         g.append("text")
             .attr("dy", ".75em")
@@ -223,13 +247,10 @@ function build(root, meta, place_holder, select_listener, width, height) {
     }
     function checkProviderName(name) {
-        console.log(name);
         if (name.substr(0, 2) == 'p:') {
-            console.log("in");
             var pid = name.substr(2);
             name = meta[pid].title;
         }
-        console.log(name);
         return name;
     }
@@ -308,4 +329,22 @@ function build(root, meta, place_holder, select_listener, width, height) {
             ? name(d.parent) + "." + d.name
             : d.name;
     }
-};
 \ No newline at end of file
+
+};
+
+function showTooltip(e, data) {
+    var data = data.split(",");
+
+    treemap_tooltip.name = data[1];
+    treemap_tooltip.color = data[2];
+    treemap_tooltip.description = data[3];
+    treemap_tooltip.logoUrl = data[4];
+    treemap_tooltip.datasets = data[5];
+    treemap_tooltip.datasetUrl = data[6];
+
+    treemap_tooltip.showTooltip(e, data[0]);
+}
+
+function hideTooltip() {
+    treemap_tooltip.hideTooltip();
+}
 \ No newline at end of file
+<link rel="import" href="../../bower_components/polymer/polymer.html" />
+
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+
+<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
+<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
+
+<dom-module id="treemap-tooltip">
+
+    <template>
+
+        <style is="custom-style">
+
+            iron-icon {
+                padding: 0px;
+                margin: 0px;
+            }
+
+            iron-icon.this {
+                position: absolute;
+                top: -3px;
+                left: -3px;
+
+                -moz-transform: scaleX(-1);
+                -o-transform: scaleX(-1);
+                -webkit-transform: scaleX(-1);
+                transform: scaleX(-1);
+                filter: FlipH;
+                -ms-filter: "FlipH";
+            }
+
+            paper-dialog {
+                margin: 0px;
+            }
+
+            .tooltip {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                padding: 16px;
+                min-width: 200px;
+                max-width: 400px;
+                position: absolute;
+
+                /*position: relative*/
+                /*top: 20px;*/
+                /*left: 20px;*/
+            }
+
+            .tooltip_top {
+                display: flex;
+                margin: 0px;
+                padding: 0px;
+                height: 64px;
+            }
+
+            /*.tooltip_logo {*/
+            /*}*/
+
+            .tooltip_name {
+                height: 20px;
+                font-weight: 700;
+                padding: 22px;
+            }
+
+            .tooltip_img {
+                margin: 0px;
+                padding: 0px;
+                height: 64px;
+                width: 64px;
+            }
+
+            p {
+                margin: 0px;
+                padding: 8px 0px 0px 0px;
+            }
+
+            .ptop{
+                padding-top: 0px;
+            }
+
+        </style>
+
+        <paper-dialog id="first_info" class="tooltip">
+            <iron-icon icon="communication:call-made" class="this" style$="color: {{color}};"></iron-icon>
+            <div class="tooltip_top">
+                <div class="tooltip_logo"><img class="tooltip_img" src$={{logoUrl}}></div>
+                <div class="tooltip_name" style$="color: {{color}};">{{name}}</div>
+            </div>
+            <p><i>{{description}}</i></p>
+            <p>There are <b>{{datasets}}</b> datasets.</p>
+        </paper-dialog>
+
+        <paper-dialog id="middle_info" class="tooltip">
+            <iron-icon icon="communication:call-made" class="this" style$="color: {{color}};"></iron-icon>
+            <p class="ptop"><b style$="color: {{color}};">{{name}}</b></p>
+            <p>There are <b>{{datasets}}</b> datasets.</p>
+        </paper-dialog>
+
+        <paper-dialog id="last_info" class="tooltip">
+            <iron-icon icon="communication:call-made" class="this" style$="color: {{color}};"></iron-icon>
+            <p class="ptop"><b style$="color: {{color}};">{{name}}</b></p>
+            <p>Dataset URL: <b>{{datasetUrl}}</b></p>
+        </paper-dialog>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is : 'treemap-tooltip',
+
+            properties : {
+
+                name : {
+                    type  : String,
+                    value : ""
+                },
+
+                color : {
+                    type  : String,
+                    value : "#2196F3"
+                },
+
+                description : {
+                    type  : String,
+                    value : ""
+                },
+
+                logoUrl : {
+                    type  : String,
+                    value : ""
+                },
+
+                datasets : {
+                    type  : String,
+                    value : "0"
+                },
+
+                datasetUrl : {
+                    type  : String,
+                    value : ""
+                }
+
+            },
+
+            showTooltip: function(e, lvl) {
+                var x = e.layerX + 16;//clientX
+                var y = e.layerY + 16;
+
+                this.hideTooltip();
+
+                switch (lvl) {
+                    case "first":
+                        $("#first_info").css("top", y);
+                        $("#first_info").css("left", x);
+                        this.$.first_info.open();
+                        break;
+                    case "middle":
+                        $("#middle_info").css("top", y);
+                        $("#middle_info").css("left", x);
+                        this.$.middle_info.open();
+                        break;
+                    case "last":
+                        $("#last_info").css("top", y);
+                        $("#last_info").css("left", x);
+                        this.$.last_info.open();
+                }
+            },
+
+            hideTooltip: function() {
+                this.$.first_info.close();
+                this.$.middle_info.close();
+                this.$.last_info.close();
+            }
+
+        });
+
+    </script>
+
+</dom-module>
 \ No newline at end of file