Merge pull request #40 from jkga/feature/adaptive-charts

Feature/adaptive charts

Author: ianvizarra

app.js

@@ -129,14 +129,14 @@ 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) => {
+app.get('/history/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}/v2/historical/${summary.data.country}?lastdays=all`),
+        history = await axios.get(`${apiBaseURL}/historical/${summary.data.country}?lastdays=all`),
         s = summary.data,
         h = history.data;
 
@@ -146,7 +146,7 @@ app.get('/history/charts/:country', async (req, res, next) => {
         s.country, s.cases, s.todayCases, 
         s.deaths, s.todayDeaths, s.recovered, 
         s.active, s.critical, s.casesPerOneMillion,
-        s.updated, h, chartType, s.countryInfo
+        s.updated, h, chartType, s.countryInfo, chartSize
       )
     return null;
   }

bin/util/layout.js

@@ -0,0 +1,76 @@
+exports.md = {
+    grid: {},
+    header: {
+      grid: [0, 0, 2, 2]
+    },
+    table: {
+      grid: [0, 2, 2, 7]
+    },
+    bar: {
+      grid: [2, 4, 3, 3]
+    },
+    map: {
+      grid: [2, 0, 3, 4]
+    },
+    donut: {
+      grid: [2, 7, 3, 2]
+    },
+    line: {
+      grid: [5, 0, 4, 9]
+    },
+    footer: {
+      grid: [8, 0, 2, 9]
+    }
+}
+
+exports.lg = {
+    grid: {},
+    header: {
+        grid: [0, 0, 1, 10]
+    },
+    table: {
+        grid: [1, 0, 2, 10]
+    },
+    bar: {
+        grid: [3, 5, 3, 3]
+    },
+    map: {
+        grid: [3, 0, 3, 5]
+    },
+    donut: {
+        grid: [3, 8, 3, 2]
+    },
+    line: {
+        grid: [6, 0, 4, 10]
+    },
+    footer: {
+        grid: [9, 0, 2, 10]
+    }
+}
+
+exports.sm = {
+    grid: {},
+    header: {
+      grid: [0, 0, 2, 2]
+    },
+    table: {
+      grid: [2, 0, 2, 5],
+      columnSpacing: 3
+    },
+    bar: {
+      grid: [4, 0, 3, 3],
+      xOffset: 6
+    },
+    map: {
+      grid: [0, 2, 2, 3]
+    },
+    donut: {
+      grid: [4, 3, 3, 2]
+    },
+    line: {
+      grid: [7, 0, 3, 5]
+    },
+    footer: {
+      grid: [9, 0, 2, 5]
+    }
+  }

lib/cli/gfx/index.js

@@ -4,6 +4,7 @@ const
     say             =   require('../../sayings/threads.json'),
     serverUtil      =   require('./server-util')
     template        =   require ('./template.js'),
+    {sm, md, lg}    =   require('../../../bin/util/layout'),
     ts              =   Date.now(),
     date_ob         =   new Date(ts),
     date            =   date_ob.getDate(),
@@ -24,8 +25,6 @@ const
     ansiTwitter     =   twitterhandle+space+twitterhashtag,
     ansiGCash       =   '(GCash) '+gcashNum;
 
-
-// random sayings
 const randomSay = () => {
     let random = Math.floor(Math.random() * say.length);
     return say[random];
@@ -38,7 +37,7 @@ const patchBlessed = () => {
 
 patchBlessed();
 
-exports.historyCountryTracker = (req, res, n, c, tC, d, tD, r, a, cl, cPOM, u, h, chartType, countryInfo) => {
+exports.historyCountryTracker = (req, res, n, c, tC, d, tD, r, a, cl, cPOM, u, h, chartType, countryInfo, chartSize = 'sm') => {
     const   name = n, cases = c, todayCases = tC,
             deaths = d, todayDeaths = tD, recovered = r,
             active = a, critical = cl, casesPerOneMillion = cPOM,
@@ -51,11 +50,10 @@ exports.historyCountryTracker = (req, res, n, c, tC, d, tD, r, a, cl, cPOM, u, h
             defaultfooter = ansiBMC+ansiTwitter+br+br,
             specialfooter = ansiGCash+br+ansiBMC+ansiTwitter+br+br,
             defaultHeader = header+br+tagline,
-            footer = (n.toLowerCase() == 'philippines') ? tableFooter+br+specialfooter+br+source+br+repo : tableFooter+br+defaultfooter+br+source+br+repo;
-    
-    // load template with data
-    // serverUtil.loadTemplate(template, {jsonData}, callback)
-    serverUtil.loadTemplate(template, {
+            footer = (n.toLowerCase() == 'philippines') ? tableFooter+br+specialfooter+br+source+br+repo : tableFooter+br+defaultfooter+br+source+br+repo,
+            defaultChartStyle = chartSize === 'sm' ? sm : (chartSize === 'md' ? md : lg);
+
+    serverUtil.loadTemplate(template, defaultChartStyle, {
         name,
         cases,
         deaths,
@@ -78,6 +76,6 @@ exports.historyCountryTracker = (req, res, n, c, tC, d, tD, r, a, cl, cPOM, u, h
     }, (screen) => {
         res.send(screen+'\r\n'+'\033[?25h')
     })
-   
+    
 };
 

lib/cli/gfx/server-util.js

@@ -28,12 +28,11 @@ createScreen = (opt = {}) => {
   const output = new OutputBuffer({stream: opt.stream, cols: 250, rows: 50});
   const input = new InputBuffer(); //required to run under forever since it replaces stdin to non-tty
   const program = blessed.program({output: output, input: input});
-
   let screen = blessed.screen({program: program});
   return screen
 }
 
-loadTemplate = (gridTemplateClass, json, callback) => {
+loadTemplate = (gridTemplateClass, gridStyleTemplateClass, json, callback) => {
 
     blessed.Screen.global = null
     blessed.Program.global = null
@@ -48,7 +47,7 @@ loadTemplate = (gridTemplateClass, json, callback) => {
     if(!gridTemplateClass) throw new Error('No template loaded')
 
     // parse template
-    gridTemplateClass.load(grid, json)
+    gridTemplateClass.load(grid, json, gridStyleTemplateClass)
 
     customStream._transform = function (chunk,encoding,done) {
         result.push(chunk.toString())

lib/cli/gfx/template.js

@@ -2,9 +2,8 @@ const
     contrib  =  require('blessed-contrib'),
     chalk    =  require('chalk');  
 
-exports.load = (grid, data) => {
-
-    let markdown = grid.set(0, 0, 2, 2, contrib.markdown,{
+exports.load = (grid, data, chartStyle) => {
+    let markdown = grid.set(chartStyle.header.grid[0], chartStyle.header.grid[1], chartStyle.header.grid[2], chartStyle.header.grid[3], contrib.markdown,{
         style: {
             border: {
                 fg: 'black'
@@ -13,7 +12,7 @@ exports.load = (grid, data) => {
     })
     markdown.setMarkdown(data.defaultHeader)
 
-    let table = grid.set(0, 2, 2, 7, contrib.table,
+    let table = grid.set(chartStyle.table.grid[0], chartStyle.table.grid[1], chartStyle.table.grid[2], chartStyle.table.grid[3], contrib.table,
         { keys: true
         , fg: 'white'
         , selectedFg: 'white'
@@ -23,8 +22,8 @@ exports.load = (grid, data) => {
         , width: '30%'
         , height: '30%'
         , border: {type: "line", fg: "cyan"}
-        , columnSpacing: 10 //in chars
-        , columnWidth: [1,16, 12, 12, 12, 18],
+        , columnSpacing: chartStyle.table.columnSpacing || 10
+        , columnWidth: chartStyle.table.columnWidth || [1, 16, 12, 12, 12, 18],
         style: {
             border: {
                 fg: 'white'
@@ -41,7 +40,7 @@ exports.load = (grid, data) => {
             ]
         })
 
-    let map = grid.set(2, 0, 3, 4, contrib.map,{
+    let map = grid.set(chartStyle.map.grid[0], chartStyle.map.grid[1], chartStyle.map.grid[2], chartStyle.map.grid[3], contrib.map,{
             style: {
                 border: {
                     fg: 'black'
@@ -52,11 +51,11 @@ exports.load = (grid, data) => {
 
     map.addMarker({"lon" : data.countryInfo.long, "lat" : data.countryInfo.lat, color: 'magenta', char: '\u24E7'+` ${data.name}`})
 
-    let bar = grid.set(2, 4, 3, 3, contrib.bar,{
+    let bar = grid.set(chartStyle.bar.grid[0], chartStyle.bar.grid[1], chartStyle.bar.grid[2], chartStyle.bar.grid[3], contrib.bar,{
         barBgColor: 'red',
-        barWidth: 7,
-        barSpacing: 5,
-        xOffset: 3,
+        barWidth: chartStyle.bar.barWidth || 7,
+        barSpacing: chartStyle.bar.barSpacing || 7,
+        xOffset: chartStyle.bar.xOffset || 3,
         maxHeight: 9,
         style: {
             border: {
@@ -67,7 +66,7 @@ exports.load = (grid, data) => {
     screen.append(bar) //must append before setting data
     bar.setData({ titles: ['Cases', 'Deaths', 'Recovered', 'Active'], data: [data.cases, data.deaths, data.recovered, data.active]})
 
-    let donut = grid.set(2, 7, 3, 2, contrib.donut,{
+    let donut = grid.set(chartStyle.donut.grid[0], chartStyle.donut.grid[1], chartStyle.donut.grid[2], chartStyle.donut.grid[3], contrib.donut,{
         label: 'Mortality Rate',
         radius: 8,
         arcWidth: 3,
@@ -84,7 +83,7 @@ exports.load = (grid, data) => {
         ]
       });
 
-    let line = grid.set(5, 0, 4, 9, contrib.line,
+    let line = grid.set(chartStyle.line.grid[0], chartStyle.line.grid[1], chartStyle.line.grid[2], chartStyle.line.grid[3], contrib.line,
         { style:
           { line: "yellow"
           , text: "green"
@@ -128,7 +127,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(chartStyle.footer.grid[0], chartStyle.footer.grid[1], chartStyle.footer.grid[2], chartStyle.footer.grid[3], contrib.markdown,{
         style: {
             border: {
                 fg: 'black'