esp_sensor_server/plot-raw-datalog.html

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <h3>Plot Recent Data from Datalog</h3>
  <!-- <pre id="result">working</pre> -->
  <div id="graph" style="width:100%;height:90%;"></div>

  <script>

  function hashed(hash, assign) {
    op=assign.split(/=/)
    if (op[1]) hash[op[0]]=op[1]
    return hash
  }

  let query = window.location.href.split(/\?/)[1]||''
  let args = query.split(/&/)
  let params = args.reduce(hashed,{})
  let slug = params.slug || 'testing-datalog'
  let chunk = params.chunk || 'hour'
  let keep = params.keep || 24

  function offset(n) {
    return fetch(`/plugin/datalog/${slug}/${chunk}/${n}`)
      .then(response => response.ok ? response.text() : '')
      .then(text => text.split(/\r?\n/).filter(line => line.length > 0).map(line => JSON.parse(line)))
      .catch(error => console.log(error)||[])
  }

  function sample() {
    let pages = []
    for (let n = keep*1-1; n >= 0; n--) {
      pages.push(offset(n))
    }
    Promise.all(pages)
      .then(json => {
        // result.innerHTML = JSON.stringify(json.flat(),null,2)
        plot(json.flat())
      })
  }

  function fahrenheit(readings) {
    let avg = readings.reduce((t, n) => t+n) / readings.length / 16
    return (9/5) * avg + 32
  }

  function plot (logs) {
    let traces = {}
    for (var i=0; i<logs.length; i++) {
      let log = logs[i]
      let date = new Date(log.clock)
      let results = log.result
      for (var j=0; j<results.length; j++) {
        let result = results[j]
        let name = result.name
        if (name) {
          let readings = Object.keys(result.data)
          if (readings.length>0) {
            for (var k=0; k<readings.length; k++) {
              let legend = readings[k]
              let value = result.data[legend]
              let fullname = `${name}-${legend}`
              trace = traces[fullname] = traces[fullname] || {x:[],y:[],name:fullname}
              trace.x.push(date)
              trace.y.push(value)              
            }
          }
        }
      }
    }
    Plotly.plot('graph', Object.values(traces))
  }

  sample()

  </script>
</body>