movitto/xrpl-dash1.html

## xrpl-dash1.html
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
    <script type="application/javascript" src="ripple-1.3.3-min.js"></script>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.js"></script>

    <!-- -->

    <script type="application/javascript">
      const SERVER = 'ws://localhost:6005';

      var svg;

      var width = 450
          height = 450
          margin = 40;

      var radius = Math.min(width, height) / 2 - margin


      var arcGenerator = d3.arc()
                           .innerRadius(0)
                           .outerRadius(radius)

      var arcHoverGenerator = d3.arc()
					                      .innerRadius(0)
      				                  .outerRadius(radius + 10);

      function draw_consensus(){
        svg = d3.select("#consensus_phase_container")
                .append("svg")
                  .attr("width", width)
                  .attr("height", height)
                .append("g")
                  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var data = {open: 3, establish: 3, accepted:3}

        var color = d3.scaleOrdinal()
                      .domain(data)
                      .range(["red", "yellow", "green"])

        var pie = d3.pie()
                    .value(function(d) {return d.value; })
        var data_ready = pie(d3.entries(data))

        svg.selectAll('mySlices')
           .data(data_ready)
           .enter()
           .append('path')
             .attr('d', arcGenerator)
             .attr('id', function(d) { return d.data.key })
             .attr('fill', function(d){ return(color(d.data.key)) })
             .attr("stroke", "black")
             .style("stroke-width", "2px")
             .style("opacity", 0.7);

        svg.selectAll('mySlices')
           .data(data_ready)
           .enter()
           .append('text')
           .text(function(d){ return d.data.key})
           .attr("transform", function(d) { return "translate(" + arcGenerator.centroid(d) + ")";  })
           .style("text-anchor", "middle")
           .style("font-size", 17)
      }

      function update_consensus(phase, ophase){
        phase = svg.select("#" + phase);
        ophase = svg.select("#" + ophase);

		    phase.transition()
		         .duration(150)
		         .attr("d", arcHoverGenerator);

		    ophase.transition()
		          .duration(150)
		          .attr("d", arcGenerator);
      }

      function update_status(sts){
        var s = "Base Fee: " + sts["base_fee"]      +
              " Load Base: " + sts["load_base"]     +
            " Load Factor: " + sts["load_factor"]   +
           " Server Status " + sts["server_status"] + "<br/>";
        $("#server_state_container").append(s);
      }

      function append_info(info){
        var div = $("<div />")
            div.css('display', 'flex');
            div.css("justify-content", "space-evenly")

        div.append("<div style='text-align: center'>Version:<br/>" + info["buildVersion"] + "</div>")
        div.append("<div style='text-align: center'>Ledgers:<br/>" + info["completeLedgers"] + "</div>")
        div.append("<div style='text-align: center'>Load Factor:<br/>" + info["loadFactor"] + "</div>")

        $("#header_container").append(div)
      }

      $(document).ready(function(){
        const RippleAPI = ripple.RippleAPI;

        $("#header_container").append("<div style='text-align: center;'><h1>XRPL Server: " + SERVER + "</h1></div>")
        draw_consensus();

        const api = new RippleAPI({server: SERVER});

        api.connection.on('serverStatus', msg => {
          update_status(msg);
        });

        var phase = "open";
        api.connection.on('consensusPhase', msg => {
          var ophase = phase;
          phase = msg["consensus"];
          update_consensus(phase, ophase);
        });

        api.connect().then(() => {
          api.getServerInfo()
             .then(info => {
               append_info(info);
             });

          api.connection.request({
            command: 'subscribe',
            streams: ['server', 'consensus']
          })
        }).then(() => {
          //return api.disconnect();
        }).catch(console.error);
      });
    </script>
  </head>

  <style>
    #main_container{
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    #header_container{
      border-bottom: 1px solid black;
    }

    #consensus_phase_container{
      flex-grow: 1;
      align-self: center;
    }

    #server_state_container{
    }
  </style>

  <body>
    <div id="main_container">
      <div id="header_container">
      </div>

      <div id="consensus_phase_container">
      </div>

      <div id="server_state_container">
        Status: <br/>
      </div>
    </div>
  </body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
	<script type="application/javascript" src="ripple-1.3.3-min.js"></script>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://d3js.org/d3.v4.js"></script>

	<!-- -->

	<script type="application/javascript">
	const SERVER = 'ws://localhost:6005';

	var svg;

	var width = 450
	height = 450
	margin = 40;

	var radius = Math.min(width, height) / 2 - margin


	var arcGenerator = d3.arc()
	.innerRadius(0)
	.outerRadius(radius)

	var arcHoverGenerator = d3.arc()
	.innerRadius(0)
	.outerRadius(radius + 10);

	function draw_consensus(){
	svg = d3.select("#consensus_phase_container")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var data = {open: 3, establish: 3, accepted:3}

	var color = d3.scaleOrdinal()
	.domain(data)
	.range(["red", "yellow", "green"])

	var pie = d3.pie()
	.value(function(d) {return d.value; })
	var data_ready = pie(d3.entries(data))

	svg.selectAll('mySlices')
	.data(data_ready)
	.enter()
	.append('path')
	.attr('d', arcGenerator)
	.attr('id', function(d) { return d.data.key })
	.attr('fill', function(d){ return(color(d.data.key)) })
	.attr("stroke", "black")
	.style("stroke-width", "2px")
	.style("opacity", 0.7);

	svg.selectAll('mySlices')
	.data(data_ready)
	.enter()
	.append('text')
	.text(function(d){ return d.data.key})
	.attr("transform", function(d) { return "translate(" + arcGenerator.centroid(d) + ")"; })
	.style("text-anchor", "middle")
	.style("font-size", 17)
	}

	function update_consensus(phase, ophase){
	phase = svg.select("#" + phase);
	ophase = svg.select("#" + ophase);

	phase.transition()
	.duration(150)
	.attr("d", arcHoverGenerator);

	ophase.transition()
	.duration(150)
	.attr("d", arcGenerator);
	}

	function update_status(sts){
	var s = "Base Fee: " + sts["base_fee"] +
	" Load Base: " + sts["load_base"] +
	" Load Factor: " + sts["load_factor"] +
	" Server Status " + sts["server_status"] + "<br/>";
	$("#server_state_container").append(s);
	}

	function append_info(info){
	var div = $("<div />")
	div.css('display', 'flex');
	div.css("justify-content", "space-evenly")

	div.append("<div style='text-align: center'>Version:<br/>" + info["buildVersion"] + "</div>")
	div.append("<div style='text-align: center'>Ledgers:<br/>" + info["completeLedgers"] + "</div>")
	div.append("<div style='text-align: center'>Load Factor:<br/>" + info["loadFactor"] + "</div>")

	$("#header_container").append(div)
	}

	$(document).ready(function(){
	const RippleAPI = ripple.RippleAPI;

	$("#header_container").append("<div style='text-align: center;'><h1>XRPL Server: " + SERVER + "</h1></div>")
	draw_consensus();

	const api = new RippleAPI({server: SERVER});

	api.connection.on('serverStatus', msg => {
	update_status(msg);
	});

	var phase = "open";
	api.connection.on('consensusPhase', msg => {
	var ophase = phase;
	phase = msg["consensus"];
	update_consensus(phase, ophase);
	});

	api.connect().then(() => {
	api.getServerInfo()
	.then(info => {
	append_info(info);
	});

	api.connection.request({
	command: 'subscribe',
	streams: ['server', 'consensus']
	})
	}).then(() => {
	//return api.disconnect();
	}).catch(console.error);
	});
	</script>
	</head>

	<style>
	#main_container{
	display: flex;
	flex-direction: column;
	height: 100%;
	}

	#header_container{
	border-bottom: 1px solid black;
	}

	#consensus_phase_container{
	flex-grow: 1;
	align-self: center;
	}

	#server_state_container{
	}
	</style>

	<body>
	<div id="main_container">
	<div id="header_container">
	</div>

	<div id="consensus_phase_container">
	</div>

	<div id="server_state_container">
	Status: <br/>
	</div>
	</div>
	</body>
	</html>