JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/API/GenerateRandomDist.js"></script>
<script src="http://lavancier.com/brockCharts/API/LineChartPro.js"></script>
<div id='clickDiv'></div>
<div class='cumulativereturns'></div>
<div class='portfolioreturns'></div>
<canvas id="residuals-canvas" style='background-color: rgba(20,20,20,0.01); cursor: crosshair'></canvas>
<canvas id="cumulative-canvas" style='background-color: rgba(20,20,20,0.01); cursor: crosshair'></canvas>

CSS

#clickDiv {
    width: 100px;
    height: 100px;
    background-color: orange;
}

JavaScript

standard_deviation = 1;
mean_increase = 0;

CumulativeReturn = 1;
portfolioValue = 1;

portfolioArray = [];
cumulativeArray = [];
inTheMarket = false;
$("body").keypress(function () {
    if (inTheMarket === false) {
        inTheMarket = true;
    } else {
        inTheMarket = false;
    }
});
var myVar = setInterval(function () {
    GenerateRandomDist(standard_deviation, mean_increase);
    CumulativeReturn = CumulativeReturn * DailyReturn;
    if (inTheMarket === true) {
        portfolioValue = portfolioValue * DailyReturn;
    }
    $(".cumulativereturns").html('');
    $(".cumulativereturns").append(CumulativeReturn);

    $(".portfolioreturns").html('');
    $(".portfolioreturns").append(portfolioValue);

    portfolioArray.push(portfolioValue);
    cumulativeArray.push(CumulativeReturn);
    
    settings = {
        array: portfolioArray,
        width: window.innerWidth,
        height: window.innerHeight * 0.5,
        graphShift: 0,
        lineProperties: {
            lineWidth: 1,
            fillColor: "grey",
            areaChart: false,
            lineColor: "orange"
        },
        textProperties: {
            titleProperties: {
                title: " ",
                fontSize: "12pt",
                fontFamily: "Helvetica",
                fontColor: "Black",
                titlePadding: 0.05
            },
            axisProperties: {
                axis: true,
                xAxis: false,
                axisSize: "0.7vw",
                axisColor: "Gray",
                axisPadding: 0.01
            }
        },
        gridLines: false,
        logScale: false,
        mousePosition: false,
        canvasName: "residuals-canvas"
    };
    drawLine();
    settings = {
        array: cumulativeArray,
        width: window.innerWidth,
        height: window.innerHeight * 0.5,
        graphShift: 0,
        lineProperties: {
            lineWidth: 1,
            fillColor: "grey",
            areaChart: false,
           ...