feat: different chart sizes - sm, md, lg

Author: jkga

app.js

@@ -129,12 +129,12 @@ 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 || 'md',
         summary = await axios.get(`${apiBaseURL}/countries/${countryData}`),
         history = await axios.get(`${apiBaseURL}/v2/historical/${summary.data.country}?lastdays=all`),
         s = summary.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;
   }

lib/cli/gfx/index.js

@@ -38,7 +38,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 = 'md') => {
     const   name = n, cases = c, todayCases = tC,
             deaths = d, todayDeaths = tD, recovered = r,
             active = a, critical = cl, casesPerOneMillion = cPOM,
@@ -51,11 +51,13 @@ 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;
-    
+            footer = (n.toLowerCase() == 'philippines') ? tableFooter+br+specialfooter+br+source+br+repo : tableFooter+br+defaultfooter+br+source+br+repo,
+            allowedDefaultChartSize = ['sm', 'md', 'lg'],
+            defaultChartStyle = require(`../gfx/layout/${allowedDefaultChartSize.indexOf(chartSize) != -1 ? chartSize: allowedDefaultChartSize[1] }.json`);
+
     // load template with data
     // serverUtil.loadTemplate(template, {jsonData}, callback)
-    serverUtil.loadTemplate(template, {
+    serverUtil.loadTemplate(template, defaultChartStyle, {
         name,
         cases,
         deaths,

lib/cli/gfx/layout/lg.json

@@ -0,0 +1,24 @@
+{
+  "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]
+  }
+}

lib/cli/gfx/layout/md.json

@@ -0,0 +1,24 @@
+{
+  "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]
+  }
+}

lib/cli/gfx/layout/sm.json

@@ -0,0 +1,25 @@
+{
+  "grid": {},
+  "header": {
+    "grid": [0, 0, 2, 2]
+  },
+  "table": {
+    "grid": [2, 0, 2, 5],
+    "columnSpacing": 5
+  },
+  "bar": {
+    "grid": [4, 0, 3, 3]
+  },
+  "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/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,7 +22,7 @@ exports.load = (grid, data) => {
         , width: '30%'
         , height: '30%'
         , border: {type: "line", fg: "cyan"}
-        , columnSpacing: 10 //in chars
+        , columnSpacing: chartStyle.table.columnSpacing || 10 //in chars
         , columnWidth: [1,16, 12, 12, 12, 18],
         style: {
             border: {
@@ -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,7 +51,7 @@ 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,
@@ -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'