sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed tooltip

Browse Source
This commit is contained in:
Sam Hadow 2024-01-14 15:25:04 +01:00
parent 963dd97e3c
commit b9e7b5a81b
1 changed files with 20 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
web/app.html
View File

@ -8,23 +8,21 @@
<div id="graphs"></div>
<script>
// set the dimensions and margins of the graph
// set the margins of the graph
const margin = {
top: 10,
right: 30,
bottom: 30,
left: 60
},
width = 1600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
left: 30
};
// get window size
const width = window.innerWidth - margin.right - margin.left -10;
// set fixed graph height
const height = 400;
// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.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})`);
// reload page when window is resized
// (resizes every elements)
window.onresize = function(){ location.reload(); }
d3.csv('http://127.0.0.1/output.csv', d => {
return {
@ -46,12 +44,14 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.data(nestedData.keys())
.enter().append("div")
.attr("class", "graph-container");
// console.log(graphDivs);
// Append SVG elements to each div
const svgs = graphDivs.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('viewBox', `0 0 ${width} ${height}`)
.attr("transform", `translate(${margin.left},${margin.top})`);
var dict_xAxis = {};
@ -91,21 +91,23 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.attr("class", "myCircle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 8)
.attr("r", 5)
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill", "white");
// interaction
// Create a tooltip for each graph
const Tooltip = d3.select("body").append("div")
console.log(d3.select(this.parentNode.parentNode));
const Tooltip = d3.select(this.parentNode.parentNode).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");
.style("padding", "5px")
.style("position", "absolute");
// Interaction functions for each graph
const mouseover = function(event, d) {
@ -113,10 +115,11 @@ d3.csv('http://127.0.0.1/output.csv', d => {
};
const mousemove = function(event, d) {
console.log(event.pageX + 10);
Tooltip
.html("Exact value: " + d.value)
.style("left", `${event.pageX + 10}px`)
.style("top", `${event.pageY}px`);
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY + 10) + "px")
};
const mouseleave = function(event, d) {
@ -138,122 +141,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave);
// // zoom
// // Add a clipPath for each graph
// var clip = svg.append("defs").append("svg:clipPath")
// .attr("id", "clip-" + key)
// .append("svg:rect")
// .attr("width", width)
// .attr("height", height)
// .attr("x", 0)
// .attr("y", 0);
//
// // Create zoom behavior for each graph
// var zoom = d3.zoom()
// .scaleExtent([1, Infinity])
// .translateExtent([
// [0, 0],
// [width, height]
// ])
// .extent([
// [0, 0],
// [width, height]
// ])
// .on("zoom", updateChart);
//
// // Add the line variable: where both the line and the brush take place
// var line = svg.append('g')
// .attr("clip-path", "url(#clip-" + key + ")")
// .call(zoom);
//
// // Create a brush for each graph
// var brush = d3.brushX()
// .extent([
// [0, 0],
// [width, height]
// ])
// .on("end", updateChart);
//
// // Add the line
// line.append("path")
// .datum(dataSubset)
// .attr("class", "line") // I add the class line to be able to modify this line later on.
// .attr("fill", "none")
// .attr("stroke", "steelblue")
// .attr("stroke-width", 1.5)
// .attr("d", d3.line()
// .x(function(d) {
// return x(d.date)
// })
// .y(function(d) {
// return y(d.value)
// })
// );
//
// // Add the brushing
// line.append("g")
// .attr("class", "brush")
// .call(brush);
//
// // A function that set idleTimeOut to null
// let idleTimeout
//
// function idled() {
// idleTimeout = null;
// }
//
// // A function that update the chart for given boundaries
// function updateChart(event, d) {
// // What are the selected boundaries?
// var extent = event.selection
//
// // If no selection, back to initial coordinate. Otherwise, update X axis domain
// if (!extent) {
// x.domain([4, 8]);
// } else {
// x.domain([x.invert(extent[0]), x.invert(extent[1])]);
// line.select(".brush").call(brush.move, null); // This removes the grey brush area as soon as the selection has been done
// }
//
// // Update axis and line position
// dict_xAxis[dataSubset].transition().duration(1000).call(d3.axisBottom(x));
// line
// .select('.line')
// .transition()
// .duration(1000)
// .attr("d", d3.line()
// .x(function(d) {
// return x(d.date)
// })
// .y(function(d) {
// return y(d.value)
// })
// );
// }
//
// // If user double click, reinitialize the chart
// svg.on("dblclick", function() {
// x.domain(d3.extent(data, function(d) {
// return d.date;
// }))
// dict_xAxis[dataSubset].transition().call(d3.axisBottom(x));
// line
// .select('.line')
// .transition()
// .attr("d", d3.line()
// .x(function(d) {
// return x(d.date)
// })
// .y(function(d) {
// return y(d.value)
// })
// );
// });
//
//
});
})