Changeset 35121 for main

Timestamp:

2021-04-27T14:03:18+12:00 (3 years ago)

Author:

davidb

Message:

Commented out block of code that seeks to do a better job of displaying labels in a Treemap

File:

• main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/js/dataviz.js (modified) (1 diff)

main/trunk/model-sites-dev/eurovision-lod/collect/eurovision/js/dataviz.js

@@ -254 +254 @@
     }
 }
+
+/*
+function showInfo() {
+    var treechart = $("#sgvizler-div");
+
+    //var data = google.visualization.arrayToDataTable(heatmapData);
+
+    var chart = sgvizler2.sgvizler.Container.list[0]
+    var resultSparql = chart._chart._resultSparql;
+    var data = new sgvizler2.google.Data(resultSparql);
+    var data_table = data.getDataTable();
+
+    var num_rows = data_table.getNumberOfRows();
+
+    for (var ri=0; ri<num_rows; ri++) {
+    var country     = data_table.getValue(ri,0);
+    var total_votes = data_table.getValue(ri,1);
+    var diff_votes  = data_table.getValue(ri,2);
+    
+    var v = data_table.getValue(ri,3);
+    console.log("*** v = " + v);
+    
+    var replace_rec = { v: v, f: country + ": Tele vs Jury diff: " + v };
+    var formatted_val = country + ": Tele vs Jury diff: " + v;
+    data_table.setFormattedValue(ri,0, formatted_val);
+    }
+
+    var tree = new google.visualization.TreeMap(document.getElementById('sgvizler-div'));
+
+    var tree_options = sgvizler2.getChartOptions('sgvizler-div')
+    
+    tree.draw(data_table, tree_options);
+    
+    
+/ *
+ S.Container.list.forEach(
+        (container) => {
+            if(container.id === elementID) {
+                optionsChart = container.chart.newOptionsRaw
+            }
+        }
+    )
+* /
+    
+}
+function showInfo2() {
+    
+    var svg = treechart.find("svg");
+    var cells = svg.find("g");
+    cells.find("text").hide();
+    
+    cells.each(function(i, item) {
+    console.log("*** i = " + i);
+        var cell = $(item);
+        var xy = getCellCoordinates(cell);
+        var tableData = getTableData(i);
+        var cellColor = cell.find('rect').attr('fill');
+        //var cellColor = setColor(tableData);
+        var extraCell = makeInfoCell(tableData, xy, cellColor);
+        $("#page").append(extraCell);
+    });
+
+    function getCellCoordinates(cell) {
+        var top = window.pageYOffset || document.documentElement.scrollTop;
+        var rect = {
+            top: cell[0].getBoundingClientRect().top,
+            left: cell[0].getBoundingClientRect().left,
+            width: cell[0].getBoundingClientRect().width,
+            height: cell[0].getBoundingClientRect().height
+        };
+        if (top > 0) {
+            rect.top = rect.top + top;
+        }
+        return rect;
+    }
+    
+    function getTableData(row) {
+        row++; // 0-item is root
+        var dataObj = {
+            id: row, // int
+            name: data.getValue(row, 0), // str
+            val: data.getValue(row, 2), // int 
+            //dir: data.getValue(row, 4), // str
+            //perc: data.getValue(row, 5), // int
+            //supplierId: data.getValue(row, 6) // int
+        };
+        return dataObj;
+    }
+    
+    function makeInfoCell(data, xy, color) {
+        var paddingTop = 0;
+        var tooTight = "";
+        var tooLow = "";
+        var tooSmall = "";
+        var tagEl = "";
+    
+        if (xy.height > 67 && xy.height < 85) {
+            paddingTop = xy.height / 2 - 22;
+            tooLow = "tooLow";
+        } else if (xy.height > 45 && xy.height <= 67) {
+            paddingTop = xy.height / 2 - 20;
+        } else if (xy.height <= 45) {
+            paddingTop = 0;
+            tooSmall = "tooSmall";
+        } else {
+            paddingTop = xy.height - 82;
+        }
+    
+        if (xy.width <= 62) {
+            tooTight = "tooTight";
+            if (xy.width <= 30) {
+        tooSmall = "tooSmall";
+            }
+        }
+    
+        var style =
+            'style="left:' +
+            xy.left +
+            "px;top:" +
+            (xy.top - 1) +
+            "px;width:" +
+            xy.width +
+            "px;height:" +
+            xy.height +
+            "px;padding-top:" +
+            paddingTop +
+            "px;color:" +
+            color +
+            ";background:" +
+            color +
+            ';"';
+    
+        tagEl = '<a href="/" class="name">' + data.name + "</a>";
+    
+        var infoDiv =
+            '<div class="cellInfo ' +
+            tooTight +
+            " " +
+            tooLow +
+            " " +
+            tooSmall +
+            '" data-id="' +
+            data.supplierId +
+            '" ' +
+            style +
+            ">" +
+            tagEl;
+    
+        if (xy.height > 67) {
+            if (data.perc !== null) {
+        infoDiv +=
+            '<span class="perc arrow-' +
+            data.dir +
+            '"><span class="percValue">' +
+            data.perc +
+            "%</span></span>";
+            } else {
+        infoDiv += '<span class="perc nodata">No data</span>';
+            }
+        }
+    
+        infoDiv +=
+            '<span class="val">Risk: ' +
+            (data.val ? data.val.toFixed() : "-") +
+            "</span>" +
+            '<div class="hoverBox">' +
+            tagEl;
+    
+        if (data.perc !== null) {
+            infoDiv +=
+        '<span class="perc arrow-' +
+        data.dir +
+        '">' +
+        data.perc +
+        "%</span>";
+        }
+        infoDiv +=
+          "<span>Risk: " +
+            (data.val ? data.val.toFixed() : "-") +
+            "</span>" +
+            "</div></div>";
+        return infoDiv;
+    }
+}
+*/
+
+/*
+// position black panel (tootltip)
+$(".cellInfo").on("mouseenter touchstart", function(e) {
+    var cell = $(this);
+    var hoverBox = cell.find(".hoverBox");
+    var cellWidth = cell[0].getBoundingClientRect().width;
+    var cellHeight = cell[0].getBoundingClientRect().height;
+    var hoverBoxWidth = hoverBox[0].getBoundingClientRect().width;
+    var hoverBoxY = hoverBox[0].getBoundingClientRect().right;
+    var treemapDivY = treechart[0].getBoundingClientRect().right;
+    cell.addClass("zindex");
+    if (hoverBoxWidth > cellWidth) {
+        if (hoverBoxY >= treemapDivY) {
+            hoverBox.css({ right: 0 });
+        } else {
+            hoverBox.css({ left: 0 });
+        }
+    } else {
+        hoverBox.css({ left: 0 });
+    }
+    
+    if (cellHeight <= 64) {
+        hoverBox.css({ top: -hoverBox.outerHeight() + "px" });
+    }
+});
+
+$(".cellInfo").on("mouseleave touchend", function(e) {
+    var hoverBox = $(this).find(".hoverBox");
+    hoverBox.parent().removeClass("zindex");
+    hoverBox.css({ left: "auto", right: "auto" });
+});
+}
+*/
+
+/*
+function setColor(data) {
+    var riskVal = 0;
+    var colorScale = ["#14914c", "#1abf64", "#ddad00", "#ff6633", "#dc572b"]; //from low to high
+    var color = "";
+    
+    if (typeof data === "string" || data instanceof String) {
+    return;
+    }
+    
+    riskVal = data ? data.val : data;
+    setColorForRisk(riskVal);
+    
+    function setColorForRisk(riskVal) {
+    if (riskVal == null || riskVal === 0) {
+            color = "#c2c1bf";
+    } else if (riskVal <= 200) {
+            color = colorScale[0];
+    } else if (riskVal > 200 && riskVal <= 400) {
+            color = colorScale[1];
+    } else if (riskVal > 400 && riskVal <= 600) {
+            color = colorScale[2];
+    } else if (riskVal > 600 && riskVal <= 800) {
+            color = colorScale[3];
+    } else if (riskVal > 800) {
+            color = colorScale[4];
+    }
+    }
+    
+    return color;
+}
+
+*/
+