index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <style>body { padding: 0; margin: 0; }</style>

  <script src="elm.js"></script>

  <!-- These scripts link to the Vega/Vega-Lite runtime -->
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>

<div id="elm-app"></div>


<div id="outages-counts-summary"></div>
<div id="outages-lengths-summary"></div>


<script>
  Elm.Main
    .init({
        node: document.getElementById("elm-app")
    })
    .ports.elmToJS.subscribe(function(namedSpecs) {
       for (let name of Object.keys(namedSpecs)) {
          vegaEmbed(`#${name}`, namedSpecs[name], {
            actions: false,
            logLevel: vega.Warn
          }).catch(console.warn);
        }

    });
</script>


</body>
</html>