move to chart

.github/workflows/main.yml

@@ -1,8 +1,6 @@
 name: Audit web perf
 
 on:
-  push:
-    branches: master-disable
   schedule:
     - cron: '0 12 * * 3'
 
@@ -76,7 +74,7 @@ jobs:
       - name: Build UI
         run: yarn build
 
-      - name: Deploy to foo-bar.surge.sh
+      - name: Deploy UI to surge.sh
         uses: dswistowski/surge-sh-action@v1
         with:
           domain: 'webperf-ecommerce-id.surge.sh'

package.json

@@ -4,7 +4,7 @@
   "description": "Web Perf Comparison for E-Commerce in Indonesia",
   "main": "index.js",
   "scripts": {
-    "dev": "parcel src/client/index.pug --public-url http://localhost:1234 ",
+    "dev": "parcel src/client/index.pug",
     "build": "parcel build src/client/index.pug --public-url https://webperf-ecommerce-id.surge.sh/",
     "lint": "eslint ./src --ext .ts -c .eslintrc.js",
     "test": "echo \"Error: no test specified\" && exit 0",

reports/LAST_UPDATED

@@ -1 +1 @@
-2020-05-29T10:20:37Z
+2020-05-29T15:38:38Z

src/client/chart.js

@@ -0,0 +1,93 @@
+const data = window.__data || {};
+const dataKeys = Object.keys(data);
+const categories = dataKeys || [];
+const deviceMap = { desktop: 'd', mobile: 'm' };
+const columns = ['tokopedia', 'lazada', 'shopee', 'bukalapak', 'blibli', 'jd', 'blanja'];
+const colors = ['#03AC0E', '#00ffff', '#fc5930', '#d71149', '#0095da', '#b67fd6', '#ef8888'];
+
+const getData = function(date, col) {
+  return data[date].find(function(i) {
+    return i.n === col;
+  });
+};
+
+const getSeries = device => {
+  const res = [];
+  columns.forEach(col => {
+    const dataSeries = [];
+    categories.forEach(date => {
+      const d = getData(date, col);
+      if (d) {
+        dataSeries.push(d[deviceMap[device]].r.perf);
+      }
+    });
+    res.push({
+      name: col,
+      data: dataSeries,
+    });
+  });
+  return res;
+};
+
+const optionsChartLine = (title, device) => ({
+  title: {
+    text: title,
+    align: 'center',
+    margin: 10,
+    offsetX: 0,
+    offsetY: 0,
+    floating: false,
+    style: {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      color: '#263238',
+    },
+  },
+  chart: {
+    height: 350,
+    type: 'line',
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    curve: 'smooth',
+  },
+  colors,
+  series: getSeries(device),
+  legend: {
+    labels: {
+      colors: '#333',
+    },
+  },
+  xaxis: {
+    type: 'category',
+    categories,
+    labels: {
+      style: {
+        colors: '#333',
+      },
+    },
+  },
+  yaxis: {
+    show: true,
+    labels: {
+      show: true,
+      style: {
+        colors: ['#333'],
+      },
+    },
+    crosshairs: {
+      show: true,
+      position: 'back',
+      stroke: {
+        color: '#333',
+        width: 1,
+        dashArray: 0,
+      },
+    },
+  },
+});
+
+new ApexCharts(document.querySelector('#chartDesktop'), optionsChartLine('Perf Score Desktop', 'desktop')).render();
+new ApexCharts(document.querySelector('#chartMobile'), optionsChartLine('Perf Score Mobile', 'mobile')).render();

src/client/index.pug

@@ -1,13 +1,3 @@
-- var dataKeys = Object.keys(d).reverse()
-- var firstKey = dataKeys[0]
-- var columns = ['tokopedia', 'lazada', 'shopee', 'bukalapak', 'blibli', 'jd', 'belanja']
-- var device = ['mobile', 'desktop']
-- var getData = function (date, col) {
--	  return d[date].find(function(i) {
--		  return i.n === col
--	  })
-- }
-
 doctype html
 html(lang="id")
 	head
@@ -90,24 +80,8 @@ html(lang="id")
 				a(href="https://github.com/mazipan/webperf-ecommerce-id", target="_blank", rel="noopener", title="Github")
 					button Github Repository
 
-		div.row.flex-center
-			table
-				thead
-					tr
-						th(rowspan=2) Date
-						each valItem in columns
-							th.capitalize.text-center(colspan=2)=valItem
-					tr
-						each valItem in columns
-							th Desktop
-							th Mobile
-				tbody
-					each val in dataKeys
-						tr
-							td=val
-							each valItem in d[val]
-								td=getData(val, valItem.n).d.r.perf
-								td=getData(val, valItem.n).m.r.perf
+		div#chartDesktop.row.flex-center(width="100%", height="500")
+		div#chartMobile.row.flex-center(width="100%", height="500")
 
 		footer.row.flex-center.margin
 			.text-center
@@ -120,15 +94,6 @@ html(lang="id")
 				span Crafted with ❤️ by Irfan Maulana, © 2020
 
 		script.
-			if ('loading' in HTMLImageElement.prototype) {
-				const images = document.querySelectorAll("img.lazyload");
-				images.forEach(img => {
-					img.src = img.dataset.src;
-				});
-			} else {
-				// Dynamically import the LazySizes library
-				let script = document.createElement("script");
-				script.async = true;
-				script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
-				document.body.appendChild(script);
-			}
+			var __data = JSON.parse('!{JSON.stringify(d)}');
+		script(src="https://cdn.jsdelivr.net/npm/apexcharts")
+		script(src="./chart.js")