Skip to content

Commit

Permalink
Merge pull request #94 from racker/toolTipFormation-MNRVA-829
Browse files Browse the repository at this point in the history 
html code added for tooltip
  • Loading branch information
@pras7430
pras7430 authored Aug 16, 2021
2 parents dd9eac5 + 5a20d2a commit 4c3a846
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 26 deletions.
33 changes: 29 additions & 4 deletions docs/assets/scripts/hedwig-main.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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) {
Expand All @@ -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 + "<br/>" + 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"
Expand Down Expand Up @@ -7580,6 +7585,26 @@
svg.append("g").attr("id", "brushArea").attr("class", "brush").call(brush);
}

toolTipHtml(d, ttlD) {
return `
<table>
<tr>
<td colspan="2" class="color-box paddingleft">
${timeFormat("%c")(d.time)}
</td>
</tr>
<tr>
<td class="color-box">
<span style="background:${ttlD.color}"></span> ${ttlD.group}
</td>
<td class="color-box">
${Utils.roundUnitsValue(ttlD.unit, d.value)}
</td>
</tr>
</table>
`;
}

}
customElements.define('line-graph', LineGraph);

Expand Down
59 changes: 44 additions & 15 deletions src/line-graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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))
Expand Down Expand Up @@ -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()
Expand All @@ -200,15 +202,15 @@ export class LineGraph extends HTMLElement {
"fill": "none",
"stroke-width": "2px"
})
.on("mouseover", function (d) {
.on("mouseover", (d)=> {
d3.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 + "<br/>" + Utils.roundUnitsValue(unit, d.value))
div.html(this.tooltipTemplate(d,toltipDat)) // ToolTip Html template binding
.styles({
"left": (d3.event.pageX + 10) + "px",
"top": (d3.event.pageY - 28) + "px",
Expand Down Expand Up @@ -252,7 +254,7 @@ export class LineGraph extends HTMLElement {
"fill": "#000"
})
this.setLegend(svg, height, data);

}

setTitle(svg, width) {
Expand Down Expand Up @@ -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", {
Expand All @@ -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
*/

tooltipTemplate(d,ttlD){
return `
<table>
<tr>
<td colspan="2" class="color-box paddingleft">
${d3.timeFormat("%c")(d.time)}
</td>
</tr>
<tr>
<td class="color-box">
<span style="background:${ttlD.color}"></span> ${ttlD.group}
</td>
<td class="color-box">
${Utils.roundUnitsValue(ttlD.unit, d.value)}
</td>
</tr>
</table>
`
}

}
Expand Down
31 changes: 24 additions & 7 deletions src/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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;
}




0 comments on commit 4c3a846

Please sign in to comment.