text: // NOTE: The contents of this file will only be executed if
  // you uncomment its entry in "assets/js/app.js".
  
  
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',
  
      // The data for our dataset
      data: {
          labels: [],
          datasets: [{
              label: "Blocks in the BlockChain",
              backgroundColor: 'rgb(255, 99, 132)',
              borderColor: 'rgb(255, 99, 132)',
              data: [],
          }]
      },
  
      // Configuration options go here
      options: {}
  });
  
  var ctx1 = document.getElementById('myChart1').getContext('2d');
  var chart1 = new Chart(ctx1, {
      // The type of chart we want to create
      type: 'line',
  
      // The data for our dataset
      data: {
          labels: [],
          datasets: [{
              label: "Average time to mine a Block (in seconds)",
              backgroundColor: 'rgb(0, 255, 0)',
              borderColor: 'rgb(0, 255, 0)',
              data: [],
          }]
      },
  
      // Configuration options go here
      options: {}
  });
  
  function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
  }
  
  
  
  // To use Phoenix channels, the first step is to import Socket
  // and connect at the socket path in "lib/web/endpoint.ex":
  import {Socket} from "phoenix"
  
  let socket = new Socket("/socket", {params: {token: window.userToken}});
  
  // When you connect, you'll often need to authenticate the client.
  // For example, imagine you have an authentication plug, `MyAuth`,
  // which authenticates the session and assigns a `:current_user`.
  // If the current user exists you can assign the user's token in
  // the connection for use in the layout.
  //
  // In your "lib/web/router.ex":
  //
  //     pipeline :browser do
  //       ...
  //       plug MyAuth
  //       plug :put_user_token
  //     end
  //
  //     defp put_user_token(conn, _) do
  //       if current_user = conn.assigns[:current_user] do
  //         token = Phoenix.Token.sign(conn, "user socket", current_user.id)
  //         assign(conn, :user_token, token)
  //       else
  //         conn
  //       end
  //     end
  //
  // Now you need to pass this token to JavaScript. You can do so
  // inside a script tag in "lib/web/templates/layout/app.html.eex":
  //
  //     <script>window.userToken = "<%= assigns[:user_token] %>";</script>
  //
  // You will need to verify the user token in the "connect/2" function
  // in "lib/web/channels/user_socket.ex":
  //
  //     def connect(%{"token" => token}, socket) do
  //       # max_age: 1209600 is equivalent to two weeks in seconds
  //       case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
  //         {:ok, user_id} ->
  //           {:ok, assign(socket, :user, user_id)}
  //         {:error, reason} ->
  //           :error
  //       end
  //     end
  //
  // Finally, pass the token on connect as below. Or remove it
  // from connect if you don't care about authentication.
  
  socket.connect();
  
  // Now that you are connected, you can join channels with a topic:
  let channel = socket.channel("room:bitcoin", {});
  channel.join()
    .receive("ok", resp => { console.log("Joined successfully", resp) })
    .receive("error", resp => { console.log("Unable to join", resp) });
  
  channel.on("chain", res => {
      updateCharts(chart, chart1, res);
      updateCounters(res);
  });
  
  function updateCharts(chart, chart1, res) {
      addData(chart,  chart.data.labels.length, res.response);
      addData(chart1, chart.data.labels.length, res.rate);
  }
  
  function updateCounters(res) {
      var blocks = Number($('#blocks').html());
      var txn    = Number($('#txn').html());
      var fee = Number($('#fee').html());
      $('#blocks').html(blocks+1);
      $('#txn').html(txn+Number(res.btcoins));
      $('#fee').html(fee+Number(res.fee));
  }
  
  export default socket;
  