From 7036024f2787407bfac30dac1a892abdcff74309 Mon Sep 17 00:00:00 2001 From: farajia Date: Fri, 22 Jul 2022 09:59:55 -0500 Subject: [PATCH] add fix for hover event --- docs/Gemfile | 6 +- docs/Gemfile.lock | 70 +++++++------ docs/assets/scripts/hedwig-main.umd.js | 131 +++++++++++++++---------- package-lock.json | 4 + src/line-graph.js | 6 +- 5 files changed, 132 insertions(+), 85 deletions(-) diff --git a/docs/Gemfile b/docs/Gemfile index 2bf1ac7..dfdd082 100644 --- a/docs/Gemfile +++ b/docs/Gemfile @@ -8,10 +8,10 @@ source "https://rubygems.org" # # This will help ensure the proper Jekyll version is running. # Happy Jekylling! -gem "jekyll", "~> 3.8.5" +gem "jekyll" # This is the default theme for new Jekyll sites. You may change this to anything you like. -gem "minima", "~> 2.0" +gem "minima" # If you want to use GitHub Pages, remove the "gem "jekyll"" above and # uncomment the line below. To upgrade, run `bundle update github-pages`. @@ -28,3 +28,5 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] # Performance-booster for watching directories on Windows gem "wdm", "~> 0.1.0" if Gem.win_platform? + +gem "webrick", "~> 1.7" diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index d5ecb09..479dcd5 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -4,69 +4,77 @@ GEM addressable (2.8.0) public_suffix (>= 2.0.2, < 5.0) colorator (1.1.0) - concurrent-ruby (1.1.9) - em-websocket (0.5.2) + concurrent-ruby (1.1.10) + em-websocket (0.5.3) eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) + http_parser.rb (~> 0) eventmachine (1.2.7) - ffi (1.15.3) + ffi (1.15.5) forwardable-extended (2.6.0) - http_parser.rb (0.6.0) - i18n (0.9.5) + http_parser.rb (0.8.0) + i18n (1.12.0) concurrent-ruby (~> 1.0) - jekyll (3.8.7) + jekyll (4.2.2) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) - i18n (~> 0.7) - jekyll-sass-converter (~> 1.0) + i18n (~> 1.0) + jekyll-sass-converter (~> 2.0) jekyll-watch (~> 2.0) - kramdown (~> 1.14) + kramdown (~> 2.3) + kramdown-parser-gfm (~> 1.0) liquid (~> 4.0) - mercenary (~> 0.3.3) + mercenary (~> 0.4.0) pathutil (~> 0.9) - rouge (>= 1.7, < 4) + rouge (~> 3.0) safe_yaml (~> 1.0) - jekyll-feed (0.13.0) + terminal-table (~> 2.0) + jekyll-feed (0.16.0) jekyll (>= 3.7, < 5.0) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-seo-tag (2.6.1) - jekyll (>= 3.3, < 5.0) + jekyll-sass-converter (2.2.0) + sassc (> 2.0.1, < 3.0) + jekyll-seo-tag (2.8.0) + jekyll (>= 3.8, < 5.0) jekyll-watch (2.2.1) listen (~> 3.0) - kramdown (1.17.0) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) liquid (4.0.3) - listen (3.5.0) + listen (3.7.1) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) - mercenary (0.3.6) + mercenary (0.4.0) minima (2.5.1) jekyll (>= 3.5, < 5.0) jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (4.0.6) - rb-fsevent (0.11.0) + public_suffix (4.0.7) + rb-fsevent (0.11.1) rb-inotify (0.10.1) ffi (~> 1.0) - rouge (3.26.0) + rexml (3.2.5) + rouge (3.29.0) safe_yaml (1.0.5) - sass (3.7.4) - sass-listen (~> 4.0.0) - sass-listen (4.0.0) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) + sassc (2.4.0) + ffi (~> 1.9) + terminal-table (2.0.0) + unicode-display_width (~> 1.1, >= 1.1.1) + unicode-display_width (1.8.0) + webrick (1.7.0) PLATFORMS ruby DEPENDENCIES - jekyll (~> 3.8.5) + jekyll jekyll-feed (~> 0.6) - minima (~> 2.0) + minima tzinfo-data + webrick (~> 1.7) BUNDLED WITH - 2.1.4 + 2.3.18 diff --git a/docs/assets/scripts/hedwig-main.umd.js b/docs/assets/scripts/hedwig-main.umd.js index 2a9dfb3..356992f 100644 --- a/docs/assets/scripts/hedwig-main.umd.js +++ b/docs/assets/scripts/hedwig-main.umd.js @@ -7094,6 +7094,42 @@ transition.prototype.attrs = transition_attrs; transition.prototype.styles = transition_styles; + function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } + } + + var css_248z = "div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n padding:.3rem;\n font-family: \"Open Sans\", \"Roboto\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n background:#EEEEEE;\n pointer-events:none;\n color:black;\n border-radius: 5px;\n}\n.color-box span {\n padding: 3px;\n padding-left: 5px;\n margin: 0px;\n margin-right: 5px;\n border-radius: 3px;\n }\n .color-box {\n padding: 4px;\n border-radius: 2px;\n }\n .paddingleft {\n padding-left: 1rem;\n }\n \n \n\n\n"; + var stylesheet="div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n padding:.3rem;\n font-family: \"Open Sans\", \"Roboto\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n background:#EEEEEE;\n pointer-events:none;\n color:black;\n border-radius: 5px;\n}\n.color-box span {\n padding: 3px;\n padding-left: 5px;\n margin: 0px;\n margin-right: 5px;\n border-radius: 3px;\n }\n .color-box {\n padding: 4px;\n border-radius: 2px;\n }\n .paddingleft {\n padding-left: 1rem;\n }\n \n \n\n\n"; + styleInject(css_248z); + + var styleSheet = /*#__PURE__*/Object.freeze({ + 'default': css_248z, + stylesheet: stylesheet + }); + class Utils { /** * Convert bytes to largest unit @@ -7190,6 +7226,16 @@ } } + static randomColor() { + var arr = []; + + for (var i = 0; i <= 70; i++) { + arr.push("#" + ((1 << 24) * Math.random() | 0).toString(16)); + } + + return arr; + } + static roundUnitsValue(measurmentUnit, value) { switch (measurmentUnit) { case measurmentUnit === 'bytes': @@ -7222,7 +7268,7 @@ case measurmentUnit === 'octets': return this.roundOffValue(value) + ' ' + measurmentUnit; - case measurmentUnit == '%': + case measurmentUnit == 'percent': return this.roundOffValue(value) + ' %'; default: @@ -7232,42 +7278,6 @@ } - function styleInject(css, ref) { - if ( ref === void 0 ) ref = {}; - var insertAt = ref.insertAt; - - if (!css || typeof document === 'undefined') { return; } - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - style.type = 'text/css'; - - if (insertAt === 'top') { - if (head.firstChild) { - head.insertBefore(style, head.firstChild); - } else { - head.appendChild(style); - } - } else { - head.appendChild(style); - } - - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } - } - - var css_248z = "div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n padding:.3rem;\n font-family: \"Open Sans\", \"Roboto\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n background:#EEEEEE;\n pointer-events:none;\n color:black;\n border-radius: 5px;\n}\n.color-box span {\n padding: 3px;\n padding-left: 5px;\n margin: 0px;\n margin-right: 5px;\n border-radius: 3px;\n }\n .color-box {\n padding: 4px;\n border-radius: 2px;\n }\n .paddingleft {\n padding-left: 1rem;\n }\n \n \n\n\n"; - var stylesheet="div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n padding:.3rem;\n font-family: \"Open Sans\", \"Roboto\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif;\n background:#EEEEEE;\n pointer-events:none;\n color:black;\n border-radius: 5px;\n}\n.color-box span {\n padding: 3px;\n padding-left: 5px;\n margin: 0px;\n margin-right: 5px;\n border-radius: 3px;\n }\n .color-box {\n padding: 4px;\n border-radius: 2px;\n }\n .paddingleft {\n padding-left: 1rem;\n }\n \n \n\n\n"; - styleInject(css_248z); - - var styleSheet = /*#__PURE__*/Object.freeze({ - 'default': css_248z, - stylesheet: stylesheet - }); - const spclCharRegx = /[&\/\\#, +()$~%.'":*?<>{}]/g; /** * @name LineGraph @@ -7318,6 +7328,7 @@ return requestBody.map((item, i) => { let pointsArray = []; let group = Utils.findByProp(item.data, grouping); + let metric_name = item.data.metricName; let valuesArray = Object.keys(item.data.values); // loop through each time property for (const obj of valuesArray) { @@ -7328,6 +7339,7 @@ } return { + metric_name, group, datapoints: pointsArray, color: this.lineColor[i] @@ -7343,9 +7355,8 @@ getDataLineColor(colors) { var arr = []; var arrColor; - var defaults = new Defaults(); colors.split(',').map(value => arr.push(value)); - arrColor = [...arr, ...defaults.schemeCategory10Color]; + arrColor = [...arr, ...Utils.randomColor()]; this.lineColor.push.apply(this.lineColor, arrColor); } /** @@ -7370,7 +7381,8 @@ var margin = JSON.parse(this.dataset.margin); var height = parseInt(this.dataset.height); var width = parseInt(this.dataset.width); - var unit = this.dataset.unit; // Create X time scale + var unit = this.dataset.unit; + if (unit === 'undefined') unit = ""; // Create X time scale var xScale = time().domain(extent(Utils.maxTime(data))).range([0, width - margin.bottom]); // Create Y linear scale @@ -7412,6 +7424,7 @@ }).each((d, i) => { // loop through datapoints to fetch time and value to create tooltip hover events with value. var toltipDat = { + metric_name: d.metric_name, group: d.group, color: d.color, unit @@ -7479,10 +7492,15 @@ setLegend(svg, height, data) { - var j = -1; + // These variables are used to create legends and also adjust distance between different legends + var j = 6; var k = 12; - var l = -1; + var l = 6; var m = 12; + var n = 18; + var o = 24; + var p = 18; + var q = 24; var legend = svg.append("g").attrs({ "class": "legend", 'transform': `translate(0,${height - 40})` @@ -7523,13 +7541,20 @@ } if (i >= 6 && i < 12) { - j = j + 2; return (i - j) * 20 + 30; } if (i >= 12 && i < 18) { return (i - k) * 20 + 30; } + + if (i >= 18 && i < 24) { + return (i - p) * 20 + 30; + } + + if (i >= 24 && i < 30) { + return (i - q) * 20 + 30; + } }, "width": 10, "height": 10 @@ -7569,25 +7594,31 @@ } if (i >= 6 && i < 12) { - l = l + 2; return (i - l) * 20 + 39; } if (i >= 12 && i < 18) { return (i - m) * 20 + 39; } + + if (i >= 18 && i < 24) { + return (i - n) * 20 + 39; + } + + if (i >= 24 && i < 30) { + return (i - o) * 20 + 39; + } } }).text(d => { if (d.group) { let spltdGro = d.group.split('/'); - let nwgrp = spltdGro[spltdGro.length - 1]; + let nwgrp = spltdGro[spltdGro.length - 1]; // taking Last part of legend if "/" exist + if (nwgrp.length >= 20) return nwgrp.substring(0, 20) + '...';else return nwgrp; } else { let spltdGro = this.dataset.field.split('/'); let nwgrp = spltdGro[spltdGro.length - 1]; - if (nwgrp.length >= 20) return nwgrp.substring(0, 20) + '...';else { - return nwgrp; - } + if (nwgrp.length >= 20) return nwgrp.substring(0, 20) + '...';else return nwgrp; } }) // Legend text Click .on('click', function (d, i) { @@ -7640,7 +7671,7 @@ - ${ttlD.group} + ${ttlD.group || ttlD.metric_name} ${Utils.roundUnitsValue(ttlD.unit, d.value)} @@ -7654,7 +7685,7 @@ customElements.define('line-graph', LineGraph); var unit$1 = { - percentage: "%", + percent: "%", bytes: "b", "packets/sec": "packets/s", kilobytes: "kb", diff --git a/package-lock.json b/package-lock.json index 05e4752..6fbf507 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1185,6 +1185,7 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", "dev": true, + "optional": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -2108,6 +2109,7 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz", "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==", "dev": true, + "optional": true, "requires": { "anymatch": "~3.1.1", "braces": "~3.0.2", @@ -4364,6 +4366,7 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "dev": true, + "optional": true, "requires": { "is-glob": "^4.0.1" } @@ -9189,6 +9192,7 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz", "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==", "dev": true, + "optional": true, "requires": { "picomatch": "^2.2.1" } diff --git a/src/line-graph.js b/src/line-graph.js index a745592..0c19121 100644 --- a/src/line-graph.js +++ b/src/line-graph.js @@ -60,6 +60,7 @@ export class LineGraph extends HTMLElement { return requestBody.map((item, i) => { let pointsArray = []; let group = Utils.findByProp(item.data, grouping); + let metric_name = item.data.metricName; let valuesArray = Object.keys(item.data.values); // loop through each time property for (const obj of valuesArray) { @@ -69,6 +70,7 @@ export class LineGraph extends HTMLElement { }); } return { + metric_name, group, datapoints: pointsArray, color: this.lineColor[i] @@ -179,7 +181,7 @@ export class LineGraph extends HTMLElement { .each((d, i) => { // loop through datapoints to fetch time and value to create tooltip hover events with value. - var toltipDat = {group:d.group, color:d.color, unit}; // collection properties for Tooltip + var toltipDat = {metric_name: d.metric_name, group:d.group, color:d.color, unit}; // collection properties for Tooltip lines.selectAll('dot') .data(d.datapoints) @@ -491,7 +493,7 @@ export class LineGraph extends HTMLElement { - ${ttlD.group} + ${ttlD.group || ttlD.metric_name} ${Utils.roundUnitsValue(ttlD.unit, d.value)}