function lineChart(lineData, w, h)
{
const unitX = w / lineData.length;
const unitXSquared = unitX * unitX;
const maxVal = Math.max(...lineData);
const yScale = (d) => d * (h / maxVal);
function getWidth(y1, y2) {
return Math.sqrt(unitXSquared + Math.pow(y2 - y1, 2));
}
let prev = yScale(lineData[0]);
const angles = lineData.slice(1).map( (d, i) => {
const value = yScale(d);
const start = prev;
const angle = Math.atan2(prev - value, unitX);
const width = getWidth(value, prev);
prev = value;
const ret = { angle, width, value, start };
return ret;
});
return html`
<div style="display: flex; height: ${h}px; width: ${w}px; padding: 16px;">
<div style="border-right: 1px solid black; font-size: .75em; font-family: Arial;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
height: calc(100% + 10px)">
<div>${maxVal}</div>
<div>0</div>
</div>
<div style="position: relative; height: 100%; width: 100%; border-bottom: 1px solid black;">
${angles.map( (d, i) => {
return `<div style="
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
bottom: ${d.value}px;
width: ${d.width}px;
height: 1px;
transform-origin: left;
transform: translate(${i * unitX}px, ${h - d.start}px) rotate(${d.angle}rad);
border: 1px solid orange;
background: orange;"
></div>`
}).join('')
}
</div>
</div>
`
}