add charting library basics

Author: krzkaczor

package.json

@@ -68,10 +68,12 @@
   },
   "dependencies": {
     "bytes": "^3.0.0",
+    "canvas": "^2.5.0",
     "get-folder-size": "^2.0.0",
     "glob": "^7.1.3",
     "gzip-size": "^5.0.0",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "vega": "^5.4.0"
   },
   "publishConfig": {
     "access": "public"

src/charts/generateChart.ts

@@ -0,0 +1,25 @@
+import * as vega from "vega";
+import * as fs from "fs";
+
+const chartDefinition = require("./vega-spec.json");
+
+interface DataPoint {
+  x: string;
+  y: number;
+}
+
+export async function generateChart(path: string, dataPoints: DataPoint[]): Promise<void> {
+  const wrappedDataPoints = [
+    {
+      name: "main",
+      values: dataPoints.map(dp => ({ ...dp, c: 0 })),
+    },
+  ];
+  chartDefinition.data = wrappedDataPoints;
+
+  const view = new vega.View(vega.parse(chartDefinition), { renderer: "none" }).initialize();
+
+  const canvas = await view.toCanvas();
+
+  fs.writeFileSync(path, canvas.toBuffer());
+}

src/charts/vega-spec.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 500,
+  "height": 200,
+  "padding": 5,
+
+  "signals": [
+    {
+      "name": "interpolate",
+      "value": "linear",
+      "bind": {
+        "input": "select",
+        "options": [
+          "basis",
+          "cardinal",
+          "catmull-rom",
+          "linear",
+          "monotone",
+          "natural",
+          "step",
+          "step-after",
+          "step-before"
+        ]
+      }
+    }
+  ],
+
+  "data": [],
+
+  "scales": [
+    {
+      "name": "x",
+      "type": "point",
+      "range": "width",
+      "domain": { "data": "main", "field": "x" }
+    },
+    {
+      "name": "y",
+      "type": "linear",
+      "range": "height",
+      "nice": true,
+      "zero": true,
+      "domain": { "data": "main", "field": "y" }
+    },
+    {
+      "name": "color",
+      "type": "ordinal",
+      "range": "category",
+      "domain": { "data": "main", "field": "c" }
+    }
+  ],
+
+  "axes": [{ "orient": "bottom", "scale": "x" }, { "orient": "left", "scale": "y" }],
+
+  "marks": [
+    {
+      "type": "group",
+      "from": {
+        "facet": {
+          "name": "series",
+          "data": "main",
+          "groupby": "c"
+        }
+      },
+      "marks": [
+        {
+          "type": "line",
+          "from": { "data": "series" },
+          "encode": {
+            "enter": {
+              "x": { "scale": "x", "field": "x" },
+              "y": { "scale": "y", "field": "y" },
+              "stroke": { "scale": "color", "field": "c" },
+              "strokeWidth": { "value": 2 }
+            },
+            "update": {
+              "interpolate": { "signal": "interpolate" },
+              "fillOpacity": { "value": 1 }
+            },
+            "hover": {
+              "fillOpacity": { "value": 0.5 }
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

tsconfig.json

@@ -16,7 +16,8 @@
     "lib": ["es2015", "esnext.asynciterable"],
     "sourceMap": true,
     "declaration": true,
-    "outDir": "lib"
+    "outDir": "lib",
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]