feat: chart view via browser

jkga · jkga · commit df099be526e3 · 2020-04-13T21:30:51.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",  // NovelCOVID API
       port        = process.env.port || 7070;     // set port
@@ -129,7 +130,6 @@ app.get('/history/:country/:chartType(cases|deaths)?', async (req, res, next) =>
   return next();
 });
 
-
 // historical chart by country
 app.get('/history/charts/:country', async (req, res, next) => {
  const userAgent = req.headers['user-agent'],
@@ -139,23 +139,49 @@ app.get('/history/charts/:country', async (req, res, next) => {
         history = await axios.get(`${apiBaseURL}/v2/historical/${summary.data.country}?lastdays=all`),
         s = summary.data,
         h = history.data;
+        terminator = '\r\n'+'\033[?25h',
+        xtermHTMLTemplate = require('./lib/cli/gfx/terminal-template'),
+        bufferEmitter = new EventEmitter();
+
+    let customHttpResponse = {
+        send: (data) => {
+            bufferEmitter.emit('screenBuffer', data)
+            this.data = data
+            return this;
+        },
+            get: () => {
+            return this.data
+        }
+    };
 
-  if (util.isCommandline(userAgent)) { 
-      covid19GFX.historyCountryTracker(
-        req, res,
+    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
-      )
-    return null;
-  }
-  return next();
-});
+    );
+    
+    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))
+})
+
+app.use('/xterm', express.static(__dirname + '/node_modules/xterm'));
+app.use('/xterm/addons', express.static(__dirname + '/node_modules/xterm-addon-fit'));
 
 app.get('*', (req, res) => res.send(`
 Welcome to COVID-19 Tracker CLI v${pkg.version} by Waren Gonzaga\n
 Please visit: https://warengonza.ga/covid19-tracker-cli
 \n`));
 
-app.listen(port, () => console.log(`COVID-19 Tracker v${pkg.version} is listening on port ${port}!`));
+app.listen(port, () => console.log(`COVID-19 Tracker v${pkg.version} is listening on port ${port}!`));
diff --git a/lib/cli/gfx/index.js b/lib/cli/gfx/index.js
@@ -76,7 +76,7 @@ exports.historyCountryTracker = (req, res, n, c, tC, d, tD, r, a, cl, cPOM, u, h
         defaultHeader,
         footer,
     }, (screen) => {
-        res.send(screen+'\r\n'+'\033[?25h')
+        res.send(screen)
     })
    
 };
diff --git a/lib/cli/gfx/template.js b/lib/cli/gfx/template.js
@@ -84,7 +84,7 @@ exports.load = (grid, data) => {
         ]
       });
 
-    let line = grid.set(5, 0, 4, 9, contrib.line,
+    let line = grid.set(5, 0, 5, 9, contrib.line,
         { style:
           { line: "yellow"
           , text: "green"
@@ -128,7 +128,7 @@ exports.load = (grid, data) => {
     screen.append(line) //must append before setting data
     line.setData([series1, series2, series3])
     
-    let markdownFooter = grid.set(8, 0, 2, 9, contrib.markdown,{
+    let markdownFooter = grid.set(9, 0, 2, 9, contrib.markdown,{
         style: {
             border: {
                 fg: 'black'
diff --git a/lib/cli/gfx/terminal-template.js b/lib/cli/gfx/terminal-template.js
@@ -0,0 +1,34 @@
+
+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.5.0",
+    "xterm-addon-fit": "^0.3.0",
     "yargs": "^15.3.1"
   },
   "devDependencies": {
