feat: add dashbord preview in browser

jkga · jkga · commit fe9db6981263 · 2020-12-27T20:43:14.000+08:00
diff --git a/app.js b/app.js
@@ -5,6 +5,7 @@ const express     = require('express'),
       axios       = require('axios'),
       covid19     = require('./lib/cli'),
       covid19GFX  = require('./lib/cli/gfx'),
+      EventEmitter = require('events'),
       pkg         = require('./package.json'),    // package.json info
       apiBaseURL  = "https://corona.lmao.ninja/v2",  // NovelCOVID API
       port        = process.env.port || 7070;     // set port
@@ -153,6 +154,59 @@ app.get('/history/charts/:country/:chartSize(sm|md|lg)?', async (req, res, next)
   return next();
 });
 
+
+// historical chart by country
+app.get('/history/web/charts/:country/:chartSize(sm|md|lg)?', async (req, res, next) => {
+  const userAgent = req.headers['user-agent'],
+        countryData = req.params.country,
+        chartType = req.params.chartType || 'cases',
+        chartSize = req.params.chartSize || 'sm',
+        summary = await axios.get(`${apiBaseURL}/countries/${countryData}`),
+        history = await axios.get(`${apiBaseURL}/historical/${summary.data.country}?lastdays=all`),
+        s = summary.data,
+        h = history.data,
+        terminator = `\r\n`+'\033[?25h',
+        xtermHTMLTemplate = require('./lib/cli/gfx/terminal-html-template'),
+        bufferEmitter = new EventEmitter();
+
+  let customHttpResponse = {
+      send: (data) => {
+          bufferEmitter.emit('screenBuffer', data)
+          this.data = data
+          return this;
+        },
+          get: () => {
+            return this.data
+          }
+      };
+
+  covid19GFX.historyCountryTracker(
+    req, customHttpResponse,
+    s.country, s.cases, s.todayCases, 
+    s.deaths, s.todayDeaths, s.recovered, 
+    s.active, s.critical, s.casesPerOneMillion,
+    s.updated, h, chartType, s.countryInfo, chartSize
+  );
+
+  let screenOutput = (await new Promise((resolve, reject) => {
+    bufferEmitter.on('screenBuffer', (screen) => {
+      resolve(screen)
+    })
+    setTimeout(() => {
+      resolve('')
+    },5000)
+  }));
+
+
+  if(!screenOutput.length || !h) res.send('Unable to load the chart.Please refresh the page')
+
+  return util.isCommandline(userAgent) ? res.send(screenOutput+terminator) : res.send(xtermHTMLTemplate(screenOutput.replace(terminator, '')))
+
+});
+
+app.use('/xterm', express.static(__dirname + '/node_modules/xterm'));
+app.use('/xterm/addons', express.static(__dirname + '/node_modules/xterm-addon-fit'));
+
 // route for web browser clients
 app.get('*', (req, res) => res.send(`
 Welcome to COVID-19 Tracker CLI v${pkg.version} by Waren Gonzaga\n
diff --git a/lib/cli/gfx/template.js b/lib/cli/gfx/template.js
@@ -36,7 +36,7 @@ exports.load = (grid, data, chartStyle) => {
             [
                 ['',data.cases, data.deaths, data.recovered, data.active, data.casesPerOneMillion],
                 ['','Today Cases', 'Today Deaths', 'Critical', 'Mortality %', 'Recovery %'],
-                ['',data.todayCases, data.todayDeaths, data.critical, data.mortalityPercentage, data.recoveredPercentage]
+                ['',data.todayCases, data.todayDeaths, data.critical, parseFloat(data.mortalityPercentage).toFixed(2), parseFloat(data.recoveredPercentage).toFixed(2)]
             ]
         })
         
diff --git a/lib/cli/gfx/terminal-html-template.js b/lib/cli/gfx/terminal-html-template.js
@@ -0,0 +1,33 @@
+
+const html = (data) => {
+    return (`<!doctype html>
+        <html>
+            <head>
+            <script src="/xterm/lib/xterm.js"></script>
+            <script src='/xterm/addons/lib/xterm-addon-fit.js'></script>
+            </head>
+            <body>
+            <div id="terminal" style='width: 105%;height: 100vh;padding-left: 2px;'></div>
+            </body>
+            <script>
+                var term = new Terminal();
+                var fitAddon = new FitAddon.FitAddon()
+                term.loadAddon(fitAddon);
+                term.open(document.getElementById('terminal'));
+                fitAddon.fit();
+                term.write('${data}')
+            </script>
+            <style>
+                body{
+                    background: #000; 
+                    margin:0;padding:0;
+                    overflow:hidden;
+                }
+                textarea, .xterm-char-measure-element, .xterm-scroll-area{
+                    display: none;
+                }
+            </style>
+        </html>`)
+}
+
+module.exports = html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
     "express": "^4.17.1",
     "figlet": "^1.3.0",
     "ora": "^4.0.3",
+    "xterm": "^4.9.0",
+    "xterm-addon-fit": "^0.3.0",
     "yargs": "^15.3.1"
   },
   "devDependencies": {

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ exports.load = (grid, data, chartStyle) => {`
`36`	`36`	`[`
`37`	`37`	`['',data.cases, data.deaths, data.recovered, data.active, data.casesPerOneMillion],`
`38`	`38`	`['','Today Cases', 'Today Deaths', 'Critical', 'Mortality %', 'Recovery %'],`
`39`		`- ['',data.todayCases, data.todayDeaths, data.critical, data.mortalityPercentage, data.recoveredPercentage]`
	`39`	`+ ['',data.todayCases, data.todayDeaths, data.critical, parseFloat(data.mortalityPercentage).toFixed(2), parseFloat(data.recoveredPercentage).toFixed(2)]`
`40`	`40`	`]`
`41`	`41`	`})`
`42`	`42`