deploy

resources/css/styles.css

@@ -0,0 +1,63 @@
+.navbar {
+  background-color: #003a80;
+}
+
+body {
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #0073ff;
+}
+
+a:hover,
+a:focus {
+  color: #0073ff;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover {
+    background-color: #002858;
+}
+
+.navbar-inverse .navbar-nav > li > a:focus {
+    background-color: #002858;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+    background-color: #002858;
+}
+
+.button {
+  color: #ffffff;
+  padding: 20px 40px;
+  font-size: 20px;
+  border: none;
+
+  border-radius: 5px;
+
+  margin: 5px;
+}
+
+.button.forecasts {
+  color: #fff;
+  background-color: #003a80;
+}
+
+.button.reports {
+  color: #fff;
+  background-color: #64a621;
+}
+
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  background-color: #003a80;
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    header {
+    padding-bottom: 89.2px !important;
+    }
+}

resources/predtimechart.js

@@ -0,0 +1,63 @@
+import App from 'https://cdn.jsdelivr.net/gh/reichlab/[email protected]/dist/predtimechart.bundle.js';
+document.predtimechart = App;  // for debugging
+
+function replace_chars(the_string) {
+    // replace all non-alphanumeric characters, except dashes and underscores, with a dash
+    return the_string.replace(/[^a-zA-Z0-9-_]/g, '-');
+}
+
+const root = "https://raw.githubusercontent.com/hubverse-org/hub-dashboard-template/refs/heads/ptc/data/";
+
+function _fetchData(isForecast, targetKey, taskIDs, referenceDate) {
+    // ex taskIDs: {"scenario_id": "A-2022-05-09", "location": "US"} . NB: key order not sorted
+    console.info("_fetchData(): entered.", isForecast, `"${targetKey}"`, taskIDs, `"${referenceDate}"`);
+
+    const targetKeyStr = replace_chars(targetKey);
+
+    // get .json file name: 1) get taskIDs values ordered by sorted keys, 2) clean up ala `json_file_name()`
+    const taskIDsValsSorted = Object.keys(taskIDs).sort().map(key => taskIDs[key]);
+    const taskIDsValsStr = replace_chars(taskIDsValsSorted.join(' '));
+
+    let target_path;
+    const file_name = `${targetKeyStr}_${taskIDsValsStr}_${referenceDate}.json`;
+    if (isForecast) {
+        target_path = `${root}/forecasts/${file_name}`;
+    } else {
+        target_path = `${root}/targets/${file_name}`;
+    }
+    return fetch(target_path);  // Pwomise?
+}
+
+
+// load options and then initialize the component
+fetch(`${root}/predtimechart-options.json`)
+    .then(response => response.json())
+    .then((data) => {
+        console.info("fetch(): done. calling App.initialize().", data);
+
+        // componentDiv, _fetchData, isIndicateRedraw, options, _calcUemForecasts:
+        App.initialize('forecastViz_row', _fetchData, false, data, null);
+    })
+    .then(function() {
+        // ZNK 2024-09-16: update for bootstrap 5
+        var divs = document.querySelectorAll("div[class^='col-md']");
+        for (var div of divs) {
+          if (div.className.match("g-col") == null) {
+            var n = div.className.match("col-md-(.{1,2})")[1];
+            div.classList.add("g-col-"+n);
+          }
+        }
+    });
+
+window.addEventListener('DOMContentLoaded', function() {
+  var divs = document.querySelectorAll("div[class^='col-md']");
+  for (var div of divs) {
+    if (div.className.match("g-col") == null) {
+      var n = div.className.match("col-md-(.{1,2})")[1];
+      div.classList.add("g-col-"+n);
+    }
+  }
+});
+
+
+

search.json

@@ -0,0 +1,30 @@
+[
+  {
+    "objectID": "forecast.html",
+    "href": "forecast.html",
+    "title": "Example Hub Dashboard Website",
+    "section": "",
+    "text": "this is replaced"
+  },
+  {
+    "objectID": "about.html",
+    "href": "about.html",
+    "title": "About the team",
+    "section": "",
+    "text": "This is our staff\n\n\n\n\n\nDale is the boss\n\n\n\n\n\n\n\n\nBubblegum is the scientist"
+  },
+  {
+    "objectID": "about.html#introduction",
+    "href": "about.html#introduction",
+    "title": "About the team",
+    "section": "",
+    "text": "This is our staff\n\n\n\n\n\nDale is the boss\n\n\n\n\n\n\n\n\nBubblegum is the scientist"
+  },
+  {
+    "objectID": "index.html",
+    "href": "index.html",
+    "title": "Introduction",
+    "section": "",
+    "text": "View The Latest Forecasts\n\nThis Dashboard is build with Quarto. To learn more about Quarto websites visit https://quarto.org/docs/websites.\nAuthors can use \\(\\LaTeX\\) to write equations and even put in callouts:\n\n\n\n\n\n\nNote\n\n\n\nLook at this note!"
+  }
+]