Initial support for dashboard

Author: scinorandex

package.json

@@ -30,6 +30,7 @@
     "license": "GPL-3.0",
     "devDependencies": {
         "@types/asciichart": "^1.5.4",
+        "@types/blessed": "^0.1.17",
         "@types/express": "^4.17.11",
         "@types/minimist": "^1.2.1",
         "@types/morgan": "^1.9.2",
@@ -43,10 +44,13 @@
     "dependencies": {
         "asciichart": "^1.5.25",
         "axios": "^0.21.1",
+        "blessed": "^0.1.81",
+        "blessed-contrib": "^4.8.21",
         "colors": "^1.4.0",
         "express": "^4.17.1",
         "minimist": "^1.2.5",
         "morgan": "^1.10.0",
-        "typescript": "^4.2.3"
+        "typescript": "^4.2.3",
+        "world-countries": "^4.0.0"
     }
 }

src/api.ts

@@ -1,5 +1,6 @@
 import express from "express";
 import morgan from "morgan";
+import { dashboardRouter } from "./api/dashboardRouter";
 import { errorHandler } from "./api/errorHandler";
 import { plainRouter } from "./api/plainRouter";
 import { regularRouter } from "./api/regularRouter";
@@ -10,8 +11,12 @@ const port = parseInt(process.env.PORT!) || 7070;
 
 const app = express();
 app.use(morgan("common"));
+app.use("/history/web/charts", dashboardRouter);
+
 app.use(userAgentMiddleware);
 
+app.use("/history/charts", dashboardRouter);
+
 /**
  * Plain CMD/Basic routes have both quiet and full modes
  * Same with regular / routes with ansi color codes

src/api/dashboardRouter.ts

@@ -0,0 +1,54 @@
+import { Request, Router } from "express";
+import {
+    globalDashboard,
+    DashboardSize,
+    countryDashboard,
+} from "../utils/routes/dashboard/dashboardHandlers";
+import handleAsync from "./handleAsync";
+import { isTerminal } from "./userAgent";
+
+export const dashboardRouter = Router({ mergeParams: true });
+
+/**
+ *
+ * @param req Express request
+ * @returns True if the request is from a not from wget, curl or httpie
+ */
+const isWeb: (req: Request) => boolean = (req) => {
+    // Check if the link is asking for web version of dashboard
+    const link = req.baseUrl.startsWith("/history/web/charts");
+    // Check if the user agent is NOT coming from terminal based application
+    const isNotTerminal = !isTerminal(req.headers["user-agent"]);
+    return link && isNotTerminal;
+};
+
+dashboardRouter.get(
+    "/:size?",
+    handleAsync(async (req, res, next) => {
+        // Get parameters from request
+        let size = req.params.size as DashboardSize;
+
+        // Set default size and check then check if size var matches
+        if (size === undefined) size = "sm";
+        if (!["sm", "md", "lg"].includes(size)) return next();
+
+        let response = await globalDashboard(size, isWeb(req));
+        res.send(response);
+    })
+);
+
+dashboardRouter.get(
+    "/:country/:size?",
+    handleAsync(async (req, res, next) => {
+        // Get parameters from request
+        let country = req.params.country;
+        let size = req.params.size as DashboardSize;
+
+        // Set default size and check then check if size var matches
+        if (size === undefined) size = "sm";
+        if (!["sm", "md", "lg"].includes(size)) return next();
+
+        let response = await countryDashboard(country, size, isWeb(req));
+        res.send(response);
+    })
+);

src/api/userAgent.ts

@@ -13,7 +13,9 @@ export type Handler = (
  * @param userAgent The user agent of the requester
  * @returns A boolean that is true of the user agent provided is from curl / wget / httpie
  */
-const isTerminal: (userAgent: string | undefined) => boolean = (userAgent) => {
+export const isTerminal: (userAgent: string | undefined) => boolean = (
+    userAgent
+) => {
     if (userAgent === undefined) return false;
     if (/curl|wget|httpie/i.test(userAgent)) return true;
     return false;

src/utils/getInformation.ts

@@ -11,6 +11,7 @@ axios.defaults.baseURL = "https://disease.sh/v3/covid-19";
 export const getAllInfo: () => Promise<{
     updated: number;
     data: {
+        active: number;
         cases: number;
         deaths: number;
         recovered: number;
@@ -19,13 +20,14 @@ export const getAllInfo: () => Promise<{
     };
 }> = async () => {
     let { data: globalData } = await axios.get("/all");
-    let { cases, deaths, recovered, updated } = globalData;
+    let { cases, deaths, recovered, updated, active } = globalData;
     let deathRate = (deaths / cases) * 100;
     let recoveryRate = (recovered / cases) * 100;
 
     return {
         updated,
         data: {
+            active,
             cases,
             deaths,
             recovered,
@@ -131,9 +133,10 @@ export async function getHistorical(
     const dates = Object.keys(mode === "all" ? chartData["cases"] : chartData);
 
     // Label for chart
-    const date = `${
-        mode.charAt(0).toUpperCase() + mode.slice(1)
-    } from ${dates.shift()} to ${dates.pop()}`;
+    const informationType =
+        mode === "all" ? "Data" : mode.charAt(0).toUpperCase() + mode.slice(1);
+
+    const date = `${informationType} from ${dates.shift()} to ${dates.pop()}`;
 
     if (mode === "all") {
         return {

src/utils/libs/columnizeData.ts

@@ -0,0 +1,40 @@
+/**
+ *
+ * @param data An object containing your keys and values
+ * @returns A 2 row column containing your keys and values
+ */
+export const columnizeData: (
+    data: { [key: string]: string },
+    padding?: number
+) => string = (data, padding) => {
+    // Generate table
+    let table = "";
+
+    // Create columns
+    let normalizedArray: string[] = [];
+    Object.keys(data).forEach((key) => {
+        let value = data[key];
+        let line = `${key.padEnd(15, " ")}| ${value.padEnd(13, " ")}`; // create a line with length 30;
+        normalizedArray.push(line);
+    });
+
+    while (normalizedArray.length > 0) {
+        let left = normalizedArray.shift();
+        let right = normalizedArray.shift();
+
+        //right may be undefined, so default to empty string
+        if (right === undefined) right = "";
+
+        table += `${left}${right}`;
+        if (normalizedArray.length !== 0) table += `\n`; // do not add whitespace at the end of the table
+    }
+
+    if (padding !== undefined) {
+        table = table
+            .split("\n")
+            .map((line) => " ".repeat(padding) + line)
+            .join("\n");
+    }
+
+    return table;
+};

src/utils/routes/dashboard/blessedConfig.ts

@@ -0,0 +1,115 @@
+import { DashboardSize } from "./dashboardHandlers";
+
+interface BlessedSizeConfiguration {
+    // MOCKSTDOUT
+    // Touching the arguments here will mess up with the screenshot function
+    // Generally, making the numbers bigger will affect the response string because the output will take up more space
+    // However, making the numbers smaller is just going to add invisible padding on the bottom and the right
+    mockStdout: number[];
+    screenshot: number[];
+
+    // position: number[]
+    // grid.set(a, b, c, d);
+    // a = starting position across the y axis
+    // b = starting position across the x axis
+    // c = span across the y axis
+    // d = span across the x axis
+    header: {
+        position: number[];
+    };
+    map: {
+        position: number[];
+    };
+    table: {
+        position: number[];
+        tableXOffset: number;
+    };
+    bar: {
+        position: number[];
+        barXOffset: number;
+    };
+    donut: {
+        position: number[];
+    };
+    line: {
+        position: number[];
+    };
+}
+
+// To the future person who has to touch this, may god have mercy on your soul
+export const blessedConfig: {
+    [key in DashboardSize]: BlessedSizeConfiguration;
+} = {
+    sm: {
+        mockStdout: [180, 40],
+        screenshot: [90, 36],
+        header: {
+            position: [0, 0, 4, 4],
+        },
+        map: {
+            position: [0, 4, 4, 5],
+        },
+        table: {
+            position: [4, 0, 4, 9],
+            tableXOffset: 15,
+        },
+        bar: {
+            position: [8, 0, 5, 5],
+            barXOffset: 3,
+        },
+        donut: {
+            position: [8, 5, 5, 4],
+        },
+        line: {
+            position: [13, 0, 5, 9],
+        },
+    },
+    md: {
+        mockStdout: [340, 50],
+        screenshot: [180, 34],
+        header: {
+            position: [0, 0, 4, 3],
+        },
+        map: {
+            position: [4, 0, 5, 3],
+        },
+        table: {
+            position: [0, 3, 4, 6],
+            tableXOffset: 28,
+        },
+        bar: {
+            position: [4, 3, 5, 3],
+            barXOffset: 6,
+        },
+        donut: {
+            position: [4, 6, 5, 3],
+        },
+        line: {
+            position: [9, 0, 5, 9],
+        },
+    },
+    lg: {
+        mockStdout: [360, 50],
+        screenshot: [180, 40],
+        header: {
+            position: [0, 0, 2, 9],
+        },
+        map: {
+            position: [6, 0, 5, 3],
+        },
+        table: {
+            position: [2, 0, 4, 9],
+            tableXOffset: 60,
+        },
+        bar: {
+            position: [6, 3, 5, 3],
+            barXOffset: 8,
+        },
+        donut: {
+            position: [6, 6, 5, 3],
+        },
+        line: {
+            position: [11, 0, 5, 9],
+        },
+    },
+};