chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("color", "gray")
.attr("font-size", 12);
svg.append("g")
.call(yAxis)
.selectAll("text")
.attr("color", "gray")
.attr("font-size", 18);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "darkgray")
.attr("stroke-miterlimit", 1)
.attr("stroke-width", 3)
.attr("stroke-dasharray", ("3, 3"))
.attr("d", lineNew(data));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "darkred")
.attr("stroke-miterlimit", 1)
.attr("stroke-width", 3)
.attr("d", avgLine(data));
const legendData = svg
.append("text")
.style("font", "30px sans-serif")
.attr("fill", "#ccc")
.attr("x", 10)
.attr("y", 100);
const legendR = svg
.append("text")
.style("font", "30px sans-serif")
.attr("fill", "#ccc")
.attr("x", 10)
.attr("y", 130);
const marker = svg
.append("circle")
.attr("r", 3)
.attr("cx", -100)
.attr("fill", "black")
.attr("fill-opacity", 0)
const formatTime = d3.utcFormat("%d/%m/%Y");
if (!mutable lookup) mutable lookup = new Date(data[0].date);
const bar = svg
.append("line")
.attr("stroke", "#ccc")
.attr("stroke-width", 1.5)
.attr("y2", height)
.attr("x1", xScale(mutable lookup))
.attr("x2", xScale(mutable lookup));
function update(date) {
const i = bisect.right(data, date);
if (i < data.length && i > 0) {
const date1 = data[i].parsedDate;
console.log(i, date1)
legendData.text(`${data[i].date}`);
legendR.text(`Média 7d.: ${data[i].weeklyAvg.toFixed(0)}`);
marker.attr("cx", xScale(date1)).attr("cy", yScaleNew(data[i].ml));
legendData.attr("x", (i > data.length/2)? xScale(date1) - 165 : xScale(date1))
legendR.attr("x", (i > data.length/2)? xScale(date1) - 210 : xScale(date1))
}
mutable lookup = new Date(date);
bar.attr("x1", xScale(mutable lookup)).attr("x2", xScale(mutable lookup));
}
svg.on("mousemove click touchmove", function() {
const m = d3.mouse(this);
update(xScale.invert(m[0]));
});
return svg.node();
}