const fs = require('fs');

const data = [
    [10, 100],
    [80, 800],
    [20, 200],
    [95, 400],
    [50, 500],
];

const full = 100 + 200 + 500 + 800 + 400;
const height = 100;
const width = 1000;

function prepareSVG() {
    const points = data.map(
        ([likes, duration]) => {
            const h = height * (likes / 100);
            const w = width * (duration / full)

            return { w, h };
        }
    )
    .reduce(
        (res, cur) => res.concat(calculateNext(res, cur)),
        ` 0,${height}`
    )
    .concat(` ${width},${height}`)
    .trim();

    return `
        <svg width="1000" height="1000">
            <polyline points="${points}" style="fill:rgba(95, 107, 144, 0.424);stroke:blue;stroke-width:1"/>
        </svg>
    `;
}

function parsePrevPosition(path) {
    const [ x, y ] = path.slice(path.lastIndexOf(' ')).split(',');

    return { x: +x, y: +y };
}

function calculateNext(path, { w, h }) {
    const { x, y } = parsePrevPosition(path);

    const nextX = x + w;
    const nextY = height - h;

    return ` ${nextX},${nextY}`;
};


fs.createWriteStream('./index.svg')
    .end(prepareSVG());