From e0204971af03e41f7f0e6bf87eb2d279a5173c00 Mon Sep 17 00:00:00 2001 From: pras7430 Date: Tue, 10 Aug 2021 19:28:58 +0530 Subject: [PATCH 1/2] html code added for tooltip --- docs/assets/scripts/hedwig-main.umd.js | 33 ++++++++++++-- src/line-graph.js | 59 +++++++++++++++++++------- src/styles/main.css | 31 +++++++++++--- 3 files changed, 97 insertions(+), 26 deletions(-) diff --git a/docs/assets/scripts/hedwig-main.umd.js b/docs/assets/scripts/hedwig-main.umd.js index 86bdf8c..caf4b2e 100644 --- a/docs/assets/scripts/hedwig-main.umd.js +++ b/docs/assets/scripts/hedwig-main.umd.js @@ -7259,8 +7259,8 @@ } } - var css_248z = "div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n width:100px;\n height:70px;\n padding:2px;\n font :12px sans-serif;\n background:lightsteelblue;\n border:0px;\n pointer-events:none;\n}"; - var stylesheet="div.tooltip {\n opacity: 0;\n position : absolute;\n text-align : center;\n width:100px;\n height:70px;\n padding:2px;\n font :12px sans-serif;\n background:lightsteelblue;\n border:0px;\n pointer-events:none;\n}"; + 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({ @@ -7411,6 +7411,11 @@ cursor: "pointer" }).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 + }; lines.selectAll('dot').data(d.datapoints).enter().append("circle").attrs({ "r": 4, "cx": function (d) { @@ -7424,11 +7429,11 @@ "stroke": d.color, "fill": "none", "stroke-width": "2px" - }).on("mouseover", function (d) { + }).on("mouseover", d => { select(this).transition().duration(200).style("opacity", 0.9); // add opacity in case of hover div.transition().duration(200).style("opacity", .9); - div.html(d.time + "
" + Utils.roundUnitsValue(unit, d.value)).styles({ + div.html(this.toolTipHtml(d, toltipDat)).styles({ "left": event.pageX + 10 + "px", "top": event.pageY - 28 + "px", "pointer-events": "none" @@ -7580,6 +7585,26 @@ svg.append("g").attr("id", "brushArea").attr("class", "brush").call(brush); } + toolTipHtml(d, ttlD) { + return ` + + + + + + + + +
+ ${timeFormat("%c")(d.time)} +
+ ${ttlD.group} + + ${Utils.roundUnitsValue(ttlD.unit, d.value)} +
+ `; + } + } customElements.define('line-graph', LineGraph); diff --git a/src/line-graph.js b/src/line-graph.js index 143c45d..2570bb2 100644 --- a/src/line-graph.js +++ b/src/line-graph.js @@ -118,13 +118,12 @@ export class LineGraph extends HTMLElement { var xScale = d3.scaleTime() .domain(d3.extent(Utils.maxTime(data))) .range([0, width - margin.bottom]); - // Create Y linear scale var yScale = d3.scaleLinear() .domain(d3.extent(Utils.maxValue(data))) .range([height - margin.left, 0]); - + // create color scale for each line // Define a div and add styling for tooltip @@ -140,7 +139,7 @@ export class LineGraph extends HTMLElement { .append('g') .attr("transform", `translate(${margin.top}, 0)`); - this.setBrush(svg,xScale,height, width); + this.setBrush(svg, xScale, height, width); // Create the lines var line = d3.line() .x(d => xScale(d.time)) @@ -181,6 +180,9 @@ export class LineGraph extends HTMLElement { cursor: "pointer" }) .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 + lines.selectAll('dot') .data(d.datapoints) .enter() @@ -200,7 +202,7 @@ export class LineGraph extends HTMLElement { "fill": "none", "stroke-width": "2px" }) - .on("mouseover", function (d) { + .on("mouseover", (d)=> { d3.select(this) .transition() .duration(200) @@ -208,7 +210,7 @@ export class LineGraph extends HTMLElement { div.transition() .duration(200) .style("opacity", .9); - div.html(d.time + "
" + Utils.roundUnitsValue(unit, d.value)) + div.html(this.toolTipHtml(d,toltipDat)) // ToolTip Html template binding .styles({ "left": (d3.event.pageX + 10) + "px", "top": (d3.event.pageY - 28) + "px", @@ -252,7 +254,7 @@ export class LineGraph extends HTMLElement { "fill": "#000" }) this.setLegend(svg, height, data); - + } setTitle(svg, width) { @@ -375,14 +377,14 @@ export class LineGraph extends HTMLElement { }); } - setBrush(svg,xScale,height, width){ - + setBrush(svg, xScale, height, width) { + let brush = d3.brushX() // Add the brush feature using the d3.brush function .extent([ [0, 0], - [width-50, height-50] + [width - 50, height - 50] ]) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area - .on("end", () =>{ + .on("end", () => { let extent = d3.event.selection; if (extent) { this.dispatchEvent(new CustomEvent("areaSelected", { @@ -393,16 +395,43 @@ export class LineGraph extends HTMLElement { end: xScale.invert(extent[1]) } })); - + let getBrushArea = d3.select(this.shadowRoot.getElementById('brushArea')); getBrushArea.call(brush.move, null); } }); - svg.append("g") - .attr("id","brushArea") + svg.append("g") + .attr("id", "brushArea") .attr("class", "brush") - .call(brush) - + .call(brush) + + } + + /** + * + * @param d Data points object [value,time] + * @param ttlD An object with key unit and color and group + * @returns Tooltip html body + */ + + toolTipHtml(d,ttlD){ + return ` + + + + + + + + +
+ ${d3.timeFormat("%c")(d.time)} +
+ ${ttlD.group} + + ${Utils.roundUnitsValue(ttlD.unit, d.value)} +
+ ` } } diff --git a/src/styles/main.css b/src/styles/main.css index cb84eea..33362f2 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -2,11 +2,28 @@ div.tooltip { opacity: 0; position : absolute; text-align : center; - width:100px; - height:70px; - padding:2px; - font :12px sans-serif; - background:lightsteelblue; - border:0px; + padding:.3rem; + font-family: "Open Sans", "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + background:#EEEEEE; pointer-events:none; -} \ No newline at end of file + color:black; + border-radius: 5px; +} +.color-box span { + padding: 3px; + padding-left: 5px; + margin: 0px; + margin-right: 5px; + border-radius: 3px; + } + .color-box { + padding: 4px; + border-radius: 2px; + } + .paddingleft { + padding-left: 1rem; + } + + + + From 5a20d2a5e6800cfb5cef6ceafd49df73967ba380 Mon Sep 17 00:00:00 2001 From: pras7430 Date: Tue, 10 Aug 2021 19:52:43 +0530 Subject: [PATCH 2/2] function renamed --- src/line-graph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/line-graph.js b/src/line-graph.js index 2570bb2..6892422 100644 --- a/src/line-graph.js +++ b/src/line-graph.js @@ -210,7 +210,7 @@ export class LineGraph extends HTMLElement { div.transition() .duration(200) .style("opacity", .9); - div.html(this.toolTipHtml(d,toltipDat)) // ToolTip Html template binding + div.html(this.tooltipTemplate(d,toltipDat)) // ToolTip Html template binding .styles({ "left": (d3.event.pageX + 10) + "px", "top": (d3.event.pageY - 28) + "px", @@ -414,7 +414,7 @@ export class LineGraph extends HTMLElement { * @returns Tooltip html body */ - toolTipHtml(d,ttlD){ + tooltipTemplate(d,ttlD){ return `