AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-13 01:58:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chg: [d3 heatmap] v7 migration + fix tooltip

Browse source
This commit is contained in:
terrtia 2024-05-29 10:25:45 +02:00
parent ac05c95c45
commit 38da8054ef
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
1 changed files with 37 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
var/www/static/js/d3/heatmap_week_hour.js vendored
View file

@ -1,4 +1,4 @@
//Requirement: - D3v5 //Requirement: - D3v7
// - jquery // - jquery
// data input: var data = [{"count":0,"date":"2023-11-20","day":0,"hour":0} // data input: var data = [{"count":0,"date":"2023-11-20","day":0,"hour":0}
// based on gist nbremer/62cf60e116ae821c06602793d265eaf6 // based on gist nbremer/62cf60e116ae821c06602793d265eaf6
@ -33,10 +33,12 @@ const create_heatmap_week_hour = (container_id, data, options) => {
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// create a tooltip // create a tooltip
const tooltip = d3.select(container_id) const tooltip = d3.select("body")
.append("div") .append("div")
.attr("class", "tooltip_heatmap")
.style("opacity", 0) .style("opacity", 0)
.attr("class", "tooltip") .style("position", "absolute")
.style("pointer-events", "none")
.style("background-color", "white") .style("background-color", "white")
.style("border", "solid") .style("border", "solid")
.style("border-width", "2px") .style("border-width", "2px")
@ -44,24 +46,28 @@ const create_heatmap_week_hour = (container_id, data, options) => {
.style("padding", "5px") .style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell // Three function that change the tooltip when user hover / move / leave a cell
const mouseover = function(d) { const mouseover = function(event, d) {
tooltip.style("opacity", 1) d3.select(event.target)
d3.select(this)
.style("stroke", "black") .style("stroke", "black")
//.style("stroke-opacity", 1) .style("stroke-opacity", 1)
var xPosition = d3.mouse(this)[0] + margin.left; let d3_pageX = event.pageX;
var yPosition = d3.mouse(this)[1] + margin.top + window.scrollY + 100; let d3_pageY = event.pageY;
tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: <b>" + d.count + "</b> messages") tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: <b>" + d.count + "</b> messages")
.style("left", xPosition + "px") .style("left", (d3_pageX) + "px")
.style("top", yPosition + "px"); .style("top", (d3_pageY - 28) + "px");
tooltip.transition()
.duration(200)
.style("opacity", 1);
} }
const mouseleave = function(d) { const mouseleave = function(event, d) {
tooltip.style("opacity", 0) d3.select(event.target)
d3.select(this)
.style("stroke", "white") .style("stroke", "white")
//.style("stroke-opacity", 0.8) //.style("stroke-opacity", 0.8)
tooltip.transition()
.duration(200)
.style("opacity", 0)
} }
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
@ -114,22 +120,22 @@ const create_heatmap_week_hour = (container_id, data, options) => {
var heatMap = svg.selectAll(".hour") var heatMap = svg.selectAll(".hour")
.data(data) .data(data)
.enter().append("rect") .enter().append("rect")
.attr("x", function (d) { .attr("x", function (d) {
return (d.hour - 1) * gridSize; return (d.hour - 1) * gridSize;
}) })
.attr("y", function (d) { .attr("y", function (d) {
return (d.day - 1) * gridSize; return (d.day - 1) * gridSize;
}) })
.attr("class", "hour bordered") .attr("class", "hour bordered")
.attr("width", gridSize) .attr("width", gridSize)
.attr("height", gridSize) .attr("height", gridSize)
.style("stroke", "white") .style("stroke", "white")
.style("stroke-opacity", 0.6) .style("stroke-opacity", 0.6)
.style("fill", function (d) { .style("fill", function (d) {
return colorScale(d.count); return colorScale(d.count);
}) })
.on("mouseover", mouseover) .on("mouseover", mouseover)
.on("mouseleave", mouseleave); .on("mouseleave", mouseleave);
//Append title to the top //Append title to the top
svg.append("text") svg.append("text")
@ -221,8 +227,7 @@ const create_heatmap_week_hour = (container_id, data, options) => {
.attr("class", "axis") .attr("class", "axis")
.attr("transform", "translate(0," + (10) + ")") .attr("transform", "translate(0," + (10) + ")")
.call(xAxis); .call(xAxis);
// return svg ??? // return svg ???
// return svg // return svg