Add files via upload

node-red-custom-table-widget.json

@@ -0,0 +1 @@
+[{"id":"18d60280.ae51ce","type":"ui_template","z":"4ca6d44e.16a0ec","group":"1444eda7.0423a2","name":"D3 Chart Widget","order":0,"width":"16","height":"16","format":"<!-- external links -->\n<script src=\"http://d3js.org/d3.v3.min.js\"></script> \n<link rel=\"stylesheet\" href=\"http://billmill.org/css/style.css\" /> \n<style>\n<!-- D3 table style --> \ntable {\n  border-collapse: collapse;\n}\nth {\n  border-bottom: 2px solid #ddd;\n  padding: 8px;\n  font-weight: bold;\n}\ntd {\n  padding: 8px;\n  border-top: 1px solid #ddd;\n}\n#chart {\n  padding: 0px;\n}\n.xaxislabel {\n  font-size: 9px;\n}\n\n<!--spinner style --> \n\n/* Center the loader */\n#loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  z-index: 1;\n  width: 150px;\n  height: 150px;\n  margin: -75px 0 0 -75px;\n  border: 16px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 16px solid #3498db;\n  width: 120px;\n  height: 120px;\n  -webkit-animation: spin 2s linear infinite;\n  animation: spin 2s linear infinite;\n}\n\n@-webkit-keyframes spin {\n  0% { -webkit-transform: rotate(0deg); }\n  100% { -webkit-transform: rotate(360deg); }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Add animation to \"page content\" */\n.animate-bottom {\n  position: relative;\n  -webkit-animation-name: animatebottom;\n  -webkit-animation-duration: 1s;\n  animation-name: animatebottom;\n  animation-duration: 1s\n}\n\n@-webkit-keyframes animatebottom {\n  from { bottom:-100px; opacity:0 } \n  to { bottom:0px; opacity:1 }\n}.spinner {\n  margin: 100px auto;\n  width: 50px;\n  height: 40px;\n  text-align: center;\n  font-size: 10px;\n}\n\n.spinner > div {\n  background-color: #333;\n  height: 100%;\n  width: 6px;\n  display: inline-block;\n  \n  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;\n  animation: sk-stretchdelay 1.2s infinite ease-in-out;\n}\n\n.spinner .rect2 {\n  -webkit-animation-delay: -1.1s;\n  animation-delay: -1.1s;\n}\n\n.spinner .rect3 {\n  -webkit-animation-delay: -1.0s;\n  animation-delay: -1.0s;\n}\n\n.spinner .rect4 {\n  -webkit-animation-delay: -0.9s;\n  animation-delay: -0.9s;\n}\n\n.spinner .rect5 {\n  -webkit-animation-delay: -0.8s;\n  animation-delay: -0.8s;\n}\n\n@-webkit-keyframes sk-stretchdelay {\n  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  \n  20% { -webkit-transform: scaleY(1.0) }\n}\n\n@keyframes sk-stretchdelay {\n  0%, 40%, 100% { \n    transform: scaleY(0.4);\n    -webkit-transform: scaleY(0.4);\n  }  20% { \n    transform: scaleY(1.0);\n    -webkit-transform: scaleY(1.0);\n  }\n}\n\n@keyframes animatebottom { \n  from{ bottom:-100px; opacity:0 } \n  to{ bottom:0; opacity:1 }\n}\n</style>\n<h3 align=\"center\">Table With Embedded Line Chart </h3>\n<div id=\"datatable\" ng-if=\"msgReady\" ng-style=\"msgStyle\" ></div>\n<div class=\"spinner\"  ng-if=\"!msgReady\">\n  <div class=\"rect1\"></div>\n  <div class=\"rect2\"></div>\n  <div class=\"rect3\"></div>\n  <div class=\"rect4\"></div>\n  <div class=\"rect5\"></div>\n</div>\n\n<script>\n\n;(function(scope) {\n    \n  scope.msgReady = false;\n  scope.msgStyle = { 'height':'700px' };\n \n  \n  var timer = setInterval(function() { //check that D3 libs are loaded, if not wait\n    if (!window.d3) return;\n    clearInterval(timer);\n    \n    scope.msgReady = true;    \n    scope.$watch('msg', function (msg) { //watch for an incoming NR msg\n \n    if (msg) {\n        \n        d3.select(\"#datatable\").selectAll(\"*\").remove();\n        \n        var rows = msg.payload;\n \n        var table = d3.select(\"#datatable\").append(\"table\");\n            thead = table.append(\"thead\");\n            tbody = table.append(\"tbody\");\n\n        thead.append(\"th\").text(\"Date\");\n        thead.append(\"th\").text(\"Opponent\");\n        thead.append(\"th\").text(\"Result\");\n        thead.append(\"th\").text(\"Rating\");\n        thead.append(\"th\").text(\"\");\n\n        var tr = tbody.selectAll(\"tr\")\n                 .data(rows)\n                 .enter().append(\"tr\");\n\n        var td = tr.selectAll(\"td\")\n                .data(function(d) { return [d.dt, d.opp, d.result, d.mu]; })\n                .enter().append(\"td\")\n                .text(function(d) { return d; });\n\n        var width = 80,mx = 10, radius = 2,\n            height = d3.select(\"table\")[0][0].clientHeight;\n\n        // Now add the chart column\n        d3.select(\"#datatable tbody tr\").append(\"td\")\n          .attr(\"id\", \"chart\")\n          .attr(\"width\", width + \"px\")\n          .attr(\"rowspan\", rows.length);\n\n        var chart = d3.select(\"#chart\").append(\"svg\")\n                   .attr(\"class\", \"chart\")\n                   .attr(\"width\", width)\n                   .attr(\"height\", height);\n\n        var maxMu = 0;\n        var minMu = Number.MAX_VALUE;\n        for (i=0; i < rows.length; i++) {\n            if (rows[i].mu > maxMu) { maxMu = rows[i].mu; }\n            if (rows[i].mu < minMu) { minMu = rows[i].mu; }\n        }\n\n        var dates = rows.map(function(t) { return t.dt; });\n\n        var xscale = d3.scale.linear()\n                       .domain([minMu, maxMu])\n                       .range([mx, width-mx])\n                       .nice();\n\n        var yscale = d3.scale.ordinal()\n                       .domain(dates)\n                       .rangeBands([0, height]);\n\n        chart.selectAll(\".xaxislabel\")\n             .data(xscale.ticks(2))\n             .enter().append(\"text\")\n             .attr(\"class\", \"xaxislabel\")\n             .attr(\"x\", function(d) { return xscale(d); })\n             .attr(\"y\", 10)\n             .attr(\"text-anchor\", \"middle\")\n             .text(String)\n\n        chart.selectAll(\".xaxistick\")\n             .data(xscale.ticks(2))\n             .enter().append(\"line\")\n             .attr(\"x1\", function(d) { return xscale(d); })\n             .attr(\"x2\", function(d) { return xscale(d); })\n             .attr(\"y1\", 10)\n             .attr(\"y2\", height)\n             .attr(\"stroke\", \"#eee\")\n             .attr(\"stroke-width\", 1);\n\n        chart.selectAll(\".line\")\n             .data(rows)\n             .enter().append(\"line\")\n             .attr(\"x1\", function(d) { return xscale(d.mu); })\n             .attr(\"y1\", function(d) { return yscale(d.dt) + yscale.rangeBand()/2; })\n             .attr(\"x2\", function(d,i) { return rows[i+1] ? xscale(rows[i+1].mu) : xscale(d.mu); })\n             .attr(\"y2\", function(d,i) { return rows[i+1] ? yscale(rows[i+1].dt) + yscale.rangeBand()/2 : yscale(d.dt) + yscale.rangeBand()/2; })\n             .attr(\"stroke\", \"#777\")\n             .attr(\"stroke-width\", 1);\n\n        var pt = chart.selectAll(\".pt\")\n                      .data(rows)\n                      .enter().append(\"g\")\n                      .attr(\"class\", \"pt\")\n                      .attr(\"transform\", function(d) { return \"translate(\" + xscale(d.mu) + \",\" + (yscale(d.dt) + yscale.rangeBand()/2) + \")\"; });\n\n        pt.append(\"circle\")\n          .attr(\"cx\", 0)\n          .attr(\"cy\", 0)\n          .attr(\"r\", radius)\n          .attr(\"opacity\", .5)\n          .attr(\"fill\", \"#ff0000\");\n\n    } // if\n  }); // watch\n\n\n }, 3000); // close out the setInterval \n           // 3 secs for spinner demo\n\n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610.3002891540527,"y":367.8004493713379,"wires":[[]]},{"id":"1444eda7.0423a2","type":"ui_group","z":"","name":"","tab":"6bb5e46c.104aec","order":1,"disp":true,"width":"16","collapse":false},{"id":"6bb5e46c.104aec","type":"ui_tab","z":"","name":"UI Widget","icon":"dashboard","order":3}]