$(document).ready(function () {
    GRAPH = $("#price_chart")[0];

    var layout = {
        dragmode: "pan"
    };

    var config = {
        scrollZoom: true,
        displayModeBar: false,
        responsive: true,
    };

    Plotly.newPlot(GRAPH, [{
        x: [1, 2, 3, 4, 5],
        y: [1, 2, 4, 8, 100]
    }], layout, config);

    var socket = io();

    $("#button").click(function () {
        var row = $(this).closest("tr")[0];
        var id = row.firstElementChild.textContent;

        socket.emit("close", {
            id: id
        })
    })

    socket.on("connect", function(socket) {
        $("#connectedtoast").toast("show")
    });

    socket.on("disconnect", function(socket) {
        $("#disconnectedtoast").toast("show")
    });

     socket.on("new_tick", function(data) {
        console.log("Tick " + data['tick'] + "| Price: " + data['price']);
    });

});