JSFiddle - React, Tailwind, and code Playground

by Zatcepin

HTML

<!doctype html>
<html>
<head>
    <title></title>
</head>

<body>
    <canvas width="100" height="30" id="weekline"> </canvas>
</body>
</html>

JavaScript

function getPoints(data) {
            var points = [];
            var len = data.length;
            var sum = 0;
            var count_valid = 0;
            var max;
            var min;
            var d;
            for(var i = 0; i< len; i++) {
                d = data[i];
                if (typeof d === 'number') {
                    if (typeof max !== 'number') {
                        max = d;
                        min = d;
                    }
                    max = d > max ? d : max;
                    min = d < max ? d : min;

                    count_valid += 1;

                    sum += data[i];
                }
            }
            var average = sum / count_valid;
            var middle = (max - min)/2;

            var range = max - min;

            for(var i = 0; i< len; i++) {
                d = data[i];
                if (typeof d === 'number') {
                    points.push({
                        val: 2 * ((d - min) / range - 0.5),
                        data: d,
                        index: i
                    });
                } else {
                    points.push(null);
                }
            }
            return points;
        }

        const draw = function(data, elCanvas = 'weekline') {

            var canvas = document.querySelector(elCanvas)
            if (!canvas) {
                return;
            }
            console.log(canvas)
            const width = 10
            const height = 10
            const len = data.length;
            canvas.style.width(width + "px")
            canvas.style.height(height + "px")
            const gap = width / (len - 1);
            const ctx = canvas.getContext('2d');

            var startPoint = null;

            var points = getPoints(data);
            var endPoint;
            var point;

            for(var i = 0; i < len; i++) {
                point = points[i];
                if (point) {
                    if (!startPoint) {
      ...