andreasf/dashboard.html

## dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CO2 dashboard</title>
  <meta charset="utf-8">

  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

  <style>
    /* CSS to go here */
    select {
      display: inline-block;
      width: 200px;
      height: 38px;
      background-color: #fff;
      border: 1px solid #D1D1D1;
      border-radius: 4px;
      box-shadow: none;
      box-sizing: border-box;
      font-family: inherit;
      font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/
    }

    body {
      margin: 24px;
      font-family: sans-serif;
    }

    h1 {
      display: flex;
    }

    h1 .current {
      flex-grow: 1;
      text-align: right;
      font-weight: normal;
    }
  </style>
  <script>
    function updateChart(){
      var name = document.getElementById("select-name").value;
      var freq = document.getElementById("select-freq").value;
      var url = "/chart/"+name+"/"+freq;

      var setCurrentValues = function(data) {
        var co2Values = data[0].y;
        var tempValues = data[1].y;

        currentTemp = tempValues[tempValues.length - 1];
        currentCo2 = co2Values[co2Values.length - 1];

        var current = document.querySelector(".current");
        current.textContent = `${currentCo2}ppm, ${currentTemp}°C`;
      };

      Plotly.d3.json(url, function(err, fig) {
        Plotly.newPlot('chart', fig.data, fig.layout, fig.config);
        setCurrentValues(fig.data);
      });
    }
  </script>
</head>
<body>
  <h1>
    <div class="title">CO2 monitor dashboard</div>
    <div class="current"></div>
  </h1>
  <div id="controls">
    <select id="select-name" onchange="updateChart()">
      <!--option value="co2">co2</option>
      <option value="study" selected>study</option-->
      {% for fname, sel in files %}
        <option value="{{ fname }}" {{ 'selected' if sel else '' }}>{{ fname }}</option>
      {% endfor %}
    </select>
    <select id="select-freq" onchange="updateChart()">
      <option value="1H">Last hour</option>
      <option value="24H" selected>Last day</option>
      <option value="7D">Last week</option>
      <option value="30D">Last month</option>
      <option value="FULL">Full log</option>
    </select>
  </div>
  <!--div id="chart" style="width:90%;height:250px;"></div-->
  <div id="chart"></div>


  <!-- Render Charts for the first time-->
  <script type="text/javascript">
    updateChart();
    // Repeat every 30 seconds
    setInterval(function(){ updateChart(); }, 3000);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>CO2 dashboard</title>
	<meta charset="utf-8">

	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

	<style>
	/* CSS to go here */
	select {
	display: inline-block;
	width: 200px;
	height: 38px;
	background-color: #fff;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit; /https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body/
	}

	body {
	margin: 24px;
	font-family: sans-serif;
	}

	h1 {
	display: flex;
	}

	h1 .current {
	flex-grow: 1;
	text-align: right;
	font-weight: normal;
	}
	</style>
	<script>
	function updateChart(){
	var name = document.getElementById("select-name").value;
	var freq = document.getElementById("select-freq").value;
	var url = "/chart/"+name+"/"+freq;

	var setCurrentValues = function(data) {
	var co2Values = data[0].y;
	var tempValues = data[1].y;

	currentTemp = tempValues[tempValues.length - 1];
	currentCo2 = co2Values[co2Values.length - 1];

	var current = document.querySelector(".current");
	current.textContent = `${currentCo2}ppm, ${currentTemp}°C`;
	};

	Plotly.d3.json(url, function(err, fig) {
	Plotly.newPlot('chart', fig.data, fig.layout, fig.config);
	setCurrentValues(fig.data);
	});
	}
	</script>
	</head>
	<body>
	<h1>
	<div class="title">CO2 monitor dashboard</div>
	<div class="current"></div>
	</h1>
	<div id="controls">
	<select id="select-name" onchange="updateChart()">
	<!--option value="co2">co2</option>
	<option value="study" selected>study</option-->
	{% for fname, sel in files %}
	<option value="{{ fname }}" {{ 'selected' if sel else '' }}>{{ fname }}</option>
	{% endfor %}
	</select>
	<select id="select-freq" onchange="updateChart()">
	<option value="1H">Last hour</option>
	<option value="24H" selected>Last day</option>
	<option value="7D">Last week</option>
	<option value="30D">Last month</option>
	<option value="FULL">Full log</option>
	</select>
	</div>
	<!--div id="chart" style="width:90%;height:250px;"></div-->
	<div id="chart"></div>


	<!-- Render Charts for the first time-->
	<script type="text/javascript">
	updateChart();
	// Repeat every 30 seconds
	setInterval(function(){ updateChart(); }, 3000);
	</script>
	</body>
	</html>