From 235a9138657e3e1fe52142dde80467b42beec198 Mon Sep 17 00:00:00 2001 From: terrtia Date: Fri, 24 Nov 2023 16:51:40 +0100 Subject: [PATCH] fix: [chat d3 heatmap] add missing function --- var/www/static/js/d3/heatmap_week_hour.js | 224 ++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 var/www/static/js/d3/heatmap_week_hour.js diff --git a/var/www/static/js/d3/heatmap_week_hour.js b/var/www/static/js/d3/heatmap_week_hour.js new file mode 100644 index 00000000..f41e8985 --- /dev/null +++ b/var/www/static/js/d3/heatmap_week_hour.js @@ -0,0 +1,224 @@ +//Requirement: - D3v5 +// - jquery +// data input: var data = [{"count":0,"date":"2023-11-20","day":0,"hour":0} +// based on gist nbremer/62cf60e116ae821c06602793d265eaf6 + +// container_id = #heatmapweekhour + +const create_heatmap_week_hour = (container_id, data, options) => { + + + var days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], + times = d3.range(24); + + var margin = { + top: 80, + right: 50, + bottom: 20, + left: 50 + }; + + var width = Math.max(Math.min(window.innerWidth, 1000), 500) - margin.left - margin.right - 20, + gridSize = Math.floor(width / times.length), + height = gridSize * (days.length + 2); + + var heatmap_font_size = width * 62.5 / 900; + +//SVG container + var svg = d3.select(container_id) + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + // create a tooltip + const tooltip = d3.select(container_id) + .append("div") + .style("opacity", 0) + .attr("class", "tooltip") + .style("background-color", "white") + .style("border", "solid") + .style("border-width", "2px") + .style("border-radius", "5px") + .style("padding", "5px") + + // Three function that change the tooltip when user hover / move / leave a cell + const mouseover = function(d) { + tooltip.style("opacity", 1) + d3.select(this) + .style("stroke", "black") + //.style("stroke-opacity", 1) + + tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: " + d.count + " messages") + } + const mouseleave = function(d) { + tooltip.style("opacity", 0) + d3.select(this) + .style("stroke", "white") + //.style("stroke-opacity", 0.8) + } + +/////////////////////////////////////////////////////////////////////////// +//////////////////////////// Draw Heatmap ///////////////////////////////// +/////////////////////////////////////////////////////////////////////////// + + var colorScale = d3.scaleLinear() + .domain([0, d3.max(data, function (d) { + return d.count; + }) / 2, d3.max(data, function (d) { + return d.count; + })]) + .range(["#FFFFF6", "#3E9583", "#1F2D86"]) + //.interpolate(d3.interpolateHcl); + + var dayLabels = svg.selectAll(".dayLabel") + .data(days) + .enter().append("text") + .text(function (d) { + return d; + }) + .attr("x", 0) + .attr("y", function (d, i) { + return i * gridSize; + }) + .style("text-anchor", "end") + .attr("transform", "translate(-36, -11)") + .attr("class", function (d, i) { + return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); + }) + .style("font-size", heatmap_font_size + "%"); + + var timeLabels = svg.selectAll(".timeLabel") + .data(times) + .enter().append("text") + .text(function (d) { + return d; + }) + .attr("x", function (d, i) { + return i * gridSize; + }) + .attr("y", 0) + .style("text-anchor", "middle") + .attr("transform", "translate(-" + gridSize / 2 + ", -36)") + .attr("class", function (d, i) { + return ((i >= 8 && i <= 17) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); + }) + .style("font-size", heatmap_font_size + "%"); + + var heatMap = svg.selectAll(".hour") + .data(data) + .enter().append("rect") + .attr("x", function (d) { + return (d.hour - 1) * gridSize; + }) + .attr("y", function (d) { + return (d.day - 1) * gridSize; + }) + .attr("class", "hour bordered") + .attr("width", gridSize) + .attr("height", gridSize) + .style("stroke", "white") + .style("stroke-opacity", 0.6) + .style("fill", function (d) { + return colorScale(d.count); + }) + .on("mouseover", mouseover) + .on("mouseleave", mouseleave); + +//Append title to the top + svg.append("text") + .attr("class", "title") + .attr("x", width / 2) + .attr("y", -60) + .style("text-anchor", "middle") + .text("Chat Messages"); + +/////////////////////////////////////////////////////////////////////////// +//////////////// Create the gradient for the legend /////////////////////// +/////////////////////////////////////////////////////////////////////////// + +//Extra scale since the color scale is interpolated + var countScale = d3.scaleLinear() + .domain([0, d3.max(data, function (d) { + return d.count; + })]) + .range([0, width]) + +//Calculate the variables for the temp gradient + var numStops = 10; + countRange = countScale.domain(); + countRange[2] = countRange[1] - countRange[0]; + countPoint = []; + for (var i = 0; i < numStops; i++) { + countPoint.push(i * countRange[2] / (numStops - 1) + countRange[0]); + } + +//Create the gradient + svg.append("defs") + .append("linearGradient") + .attr("id", "legend-heatmap") + .attr("x1", "0%").attr("y1", "0%") + .attr("x2", "100%").attr("y2", "0%") + .selectAll("stop") + .data(d3.range(numStops)) + .enter().append("stop") + .attr("offset", function (d, i) { + return countScale(countPoint[i]) / width; + }) + .attr("stop-color", function (d, i) { + return colorScale(countPoint[i]); + }); + +/////////////////////////////////////////////////////////////////////////// +////////////////////////// Draw the legend //////////////////////////////// +/////////////////////////////////////////////////////////////////////////// + + var legendWidth = Math.min(width * 0.8, 400); +//Color Legend container + var legendsvg = svg.append("g") + .attr("class", "legendWrapper") + .attr("transform", "translate(" + (width / 2) + "," + (gridSize * days.length) + ")"); // 319 + +//Draw the Rectangle + legendsvg.append("rect") + .attr("class", "legendRect") + .attr("x", -legendWidth / 2) + .attr("y", 0) + //.attr("rx", hexRadius*1.25/2) + .attr("width", legendWidth) + .attr("height", 10) + .style("fill", "url(#legend-heatmap)"); + +//Append title + legendsvg.append("text") + .attr("class", "legendTitle") + .attr("x", 0) + .attr("y", -10) + .style("text-anchor", "middle") + .text("Number of Messages"); + +//Set scale for x-axis + var xScale = d3.scaleLinear() + .range([-legendWidth / 2, legendWidth / 2]) + .domain([0, d3.max(data, function (d) { + return d.count; + })]); + +//Define x-axis + var xAxis = d3.axisBottom(xScale) + //.orient("bottom") + .ticks(5); + //.tickFormat(formatPercent) + +//Set up X axis + legendsvg.append("g") + .attr("class", "axis") + .attr("transform", "translate(0," + (10) + ")") + .call(xAxis); + + +// return svg ??? + // return svg + +}