function Drawer({
marginTop = 20,
marginRight = 30,
marginBottom = 30,
marginLeft = 40,
width = 640,
height = 400,
xSamples = 30,
xType = d3.scaleUtc,
xDomain = [new Date("2022-01-01"), new Date("2023-01-01")],
xRange = [marginLeft, width - marginRight],
yType = d3.scaleLinear,
yDomain = [0, 1],
yRange = [height - marginBottom, marginTop],
yFormat,
yLabel,
curve = d3.curveLinear,
} = {}) {
const bisectX = d3.bisector(([x]) => x).center;
let data = [];
const xScale = xType(xDomain, xRange);
const yScale = yType(yDomain, yRange);
const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);
const line = d3.line()
.curve(curve)
.defined(([, y]) => y != null)
.x(([x]) => xScale(x))
.y(([, y]) => yScale(y));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.property("value", data);
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(xAxis);
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
.call(g => g.select(".domain").remove())
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(yLabel));
const path = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "none")
.attr("pointer-events", "all")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged));
function dragstarted() {
data = xScale.ticks(xSamples).map(x => [x, null]);
svg.property("value", data);
path.datum(data);
dragged.call(this);
}
function dragged({x, y}) {
const dx = xScale.invert(x);
const dy = yScale.invert(y);
let i = bisectX(data, dx);
data[i][1] = dy;
for (let k = i - 1; k >= 0; --k) {
if (data[k][1] != null) {
while (++k < i) data[k][1] = dy;
break;
}
}
for (let k = i + 1; k < data.length; ++k) {
if (data[k][1] != null) {
while (--k > i) data[k][1] = dy;
break;
}
}
path.attr("d", line);
svg.dispatch("input");
}
return svg.node();
}