drawLine = {
const dimensions = {
width: 6,
height: 0.5,
marginTop: 0
};
const xAccessor = (d) => d.date;
const yAccessor = (d) => d.value;
return (data) => {
const xDomain = d3.extent(data, xAccessor);
const xScale = d3.scaleTime().domain(xDomain).range([0, dimensions.width]);
const yDomain = [0, d3.max(data, yAccessor)];
const yScale = d3
.scaleLinear()
.domain(yDomain)
.range([dimensions.height, dimensions.marginTop]);
const svg = d3.select(
html`<svg viewBox="0 0 ${dimensions.width} ${dimensions.height}"></svg>`
);
const lineGenerator = d3
.line()
.x((d) => xScale(xAccessor(d)))
.y((d) => yScale(yAccessor(d)))
.curve(d3.curveBumpX);
const line = svg
.append("path")
.datum(data)
.attr("d", lineGenerator)
.attr("stroke", `${colStroke}`)
.attr("stroke-width", 0.1)
.attr("stroke-linejoin", "round")
.attr("fill", "none");
const areaGenerator = d3
.area()
.x((d) => xScale(xAccessor(d)))
.y1((d) => yScale(yAccessor(d)))
.y0(dimensions.height)
.curve(d3.curveBumpX);
const area = svg
.append("path")
.datum(data)
.attr("d", areaGenerator)
.attr("fill", `${colFill}`);
return svg.node();
};
}