Fix: age-chart for touch devices - QoL changes to the server

Author: aulonm

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Unreleased
 
+# Release v1.1.8
+
+### Changes
+
+- Trigger Age-chart re-render when using a touch device
+- Updated dependencies
+- QoL changes to the server
+
 # Release v1.1.7
 ### About this version
 There was a critical security vulnerability with axios and some changes to sentry

package-lock.json

@@ -20,49 +20,48 @@
     "@sentry/vue": "^5.29.2",
     "canvas": "^2.6.1",
     "canvg": "^3.0.7",
-    "core-js": "^3.8.2",
+    "core-js": "^3.8.3",
     "d3": "^5.16.0",
     "d3-svg-legend": "^2.25.6",
     "d3-textwrap": "^3.0.0",
-    "jsdom": "^16.4.0",
     "leaflet": "^1.7.1",
     "leaflet-gesture-handling": "^1.2.1",
     "nodemon": "^2.0.7",
     "save-svg-as-png": "^1.4.17",
     "vue": "^2.6.12",
     "vue-analytics": "^5.22.1",
-    "vue-dragscroll": "^2.1.0",
-    "vue-i18n": "^8.22.2",
+    "vue-dragscroll": "^2.1.3",
+    "vue-i18n": "^8.22.4",
     "vue-meta": "^2.4.0",
     "vue-resize": "^1.0.0",
-    "vue-router": "^3.4.9",
+    "vue-router": "^3.5.1",
     "vue-skip-to": "^1.0.6",
     "vue2-leaflet": "^2.6.0",
-    "vuex": "^3.6.0",
+    "vuex": "^3.6.2",
     "whatwg-fetch": "^3.5.0",
     "xlsx": "^0.16.9",
     "xmldom": "^0.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.10",
-    "@vue/cli-plugin-eslint": "^4.5.10",
-    "@vue/cli-plugin-router": "^4.5.10",
-    "@vue/cli-plugin-unit-jest": "^4.5.10",
-    "@vue/cli-plugin-vuex": "^4.5.10",
-    "@vue/cli-service": "^4.5.10",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-plugin-router": "^4.5.11",
+    "@vue/cli-plugin-unit-jest": "^4.5.11",
+    "@vue/cli-plugin-vuex": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.1.2",
+    "@vue/test-utils": "^1.1.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "env-cmd": "^10.1.0",
-    "eslint": "^7.17.0",
+    "eslint": "^7.19.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.4.1",
+    "eslint-plugin-vue": "^7.5.0",
     "node-sass": "^5.0.0",
     "prettier": "^2.2.1",
-    "sass-loader": "^10.1.0",
-    "stylelint": "^13.8.0",
+    "sass-loader": "^10.1.1",
+    "stylelint": "^13.9.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",

package.json

@@ -1,10 +1,8 @@
-'use strict';
-
 const isDate = require('date-fns/isDate');
 const addSeconds = require('date-fns/addSeconds');
 const isAfter = require('date-fns/isAfter');
 
-const parseToken = token => {
+const parseToken = (token) => {
   const parsedTokenProps = {};
 
   if ('expires_in' in token) {
@@ -19,10 +17,10 @@ const parseToken = token => {
     }
   }
 
-  return Object.assign({}, token, parsedTokenProps);
+  return { ...token, ...parsedTokenProps };
 };
 
-const isTokenExpired = expired => {
+const isTokenExpired = (expired) => {
   return isAfter(new Date(), expired);
 };
 

server/auth/accessToken.js

@@ -1,13 +1,11 @@
-'use strict';
-
 const axios = require('axios');
 const querystring = require('querystring');
 
 const envs = {
   access_token_url: `${process.env.KEYCLOAK_SERVER_URL}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
 };
 
-const request = params => {
+const request = (params) => {
   return axios({
     method: 'post',
     url: envs.access_token_url,
@@ -16,10 +14,10 @@ const request = params => {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
   })
-    .then(response => {
+    .then((response) => {
       return Promise.resolve(response.data);
     })
-    .catch(error => {
+    .catch((error) => {
       if (error.errno === 'ETIMEDOUT') {
         return Promise.reject(new Error('Timeout'));
       }

server/auth/api.js

@@ -26,33 +26,32 @@ const logErrors = (error, refresh) => {
 module.exports = () => {
   return (req, res, next) => {
     if (accessToken === null || isTokenExpired(accessToken.refresh_expires_at)) {
-      const params = Object.assign({}, data, {
-        grant_type: process.env.KEYCLOAK_GRANT_TYPE_CLIENT,
-      });
+      const params = { ...data, grant_type: process.env.KEYCLOAK_GRANT_TYPE_CLIENT };
 
-      return request(params)
-        .then(response => {
+      request(params)
+        .then((response) => {
           accessToken = parseToken(response);
           req.headers.authorization = `Bearer ${accessToken.access_token}`;
           next();
         })
-        .catch(error => {
+        .catch((error) => {
           logErrors(error);
           return res.status(error.status);
         });
     } else if (isTokenExpired(accessToken.expires_at)) {
-      const params = Object.assign({}, data, {
+      const params = {
+        ...data,
         grant_type: process.env.KEYCLOAK_GRANT_TYPE_REFRESH,
         refresh_token: accessToken.refresh_token,
-      });
+      };
 
-      return request(params)
-        .then(response => {
+      request(params)
+        .then((response) => {
           accessToken = parseToken(response);
           req.headers.authorization = `Bearer ${accessToken.access_token}`;
           next();
         })
-        .catch(error => {
+        .catch((error) => {
           logErrors(error, true);
           return res.status(error.status);
         });

server/auth/index.js

@@ -10,7 +10,7 @@ const api = process.env.BYDELSFAKTA_API_URL;
 const API_URL = api.slice(-1) === '/' ? api : `${api}/`;
 const get = API_URL[4] === 's' ? https.get : http.get;
 
-module.exports = app => {
+module.exports = (app) => {
   app.use('/', express.static(path.join(__dirname, '../docs/')));
 
   app.get('/health', (req, res) => {
@@ -30,9 +30,10 @@ module.exports = app => {
       {
         headers,
       },
-      proxyRes => {
-        const { statusCode, headers } = proxyRes;
-        const contentType = headers['content-type'];
+      (proxyRes) => {
+        const { statusCode } = proxyRes;
+        const newHeaders = proxyRes.headers;
+        const contentType = newHeaders['content-type'];
 
         if (statusCode !== 200) {
           console.error('Unexpected status:', statusCode);
@@ -41,7 +42,7 @@ module.exports = app => {
           console.error('Unexpected content-type:', contentType);
         }
 
-        res.writeHead(statusCode, headers);
+        res.writeHead(statusCode, newHeaders);
         proxyRes.pipe(res);
       }
     );
@@ -51,7 +52,7 @@ module.exports = app => {
 
   const allConfiguredRoutes = () => {
     const routes = [];
-    app._router.stack.forEach(layer => {
+    app._router.stack.forEach((layer) => {
       if (layer && layer.route) {
         routes.push(layer.route.path);
       }

server/routes.js

@@ -362,7 +362,7 @@ export default {
       this.$ga.event({
         eventCategory: 'Card',
         eventAction: 'Change tab',
-        eventLabel: this.settings.tabs[index].label,
+        eventLabel: this.settings.tabs[index - 1].label,
       });
     },
 

src/components/GraphCard.vue

@@ -121,7 +121,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import allDistricts from '../config/allDistricts';
 import predefinedOptions from '../config/predefinedOptions';
-import OsloLogo from '../assets/oslo-logo.svg'; //
+import OsloLogo from '../assets/oslo-logo.svg';
 
 export default {
   name: 'TheNavigationDrawer',

src/components/TheNavigationDrawer.vue

@@ -4,34 +4,30 @@ import Router from 'vue-router';
 import { topicNames, disabledTopics } from './config/topics';
 import allDistricts from './config/allDistricts';
 
-const District = () => import('./views/District');
-const Topic = () => import('./views/Topic');
-const NotFound = () => import('./views/NotFound');
-
 Vue.use(Router);
 
 export const routes = [
   {
     path: '/',
     name: 'Home',
-    component: District,
+    component: () => import('./views/District'),
   },
   {
     path: '/bydel/:district?',
     name: 'District',
-    component: District,
+    component: () => import('./views/District'),
     props: true,
   },
   {
     path: '/bydel/:district/:topic',
     name: 'Topic',
-    component: Topic,
+    component: () => import('./views/Topic'),
     props: true,
   },
   {
     path: '*',
     name: 'NotFound',
-    component: NotFound,
+    component: () => import('./views/NotFound'),
   },
 ];
 

src/router.js

@@ -32,7 +32,7 @@ function Template(svg) {
     .handleSize(21)
     .on('brush', updateHandlePositions.bind(this))
     .on('end', () => {
-      if (d3.event.sourceEvent instanceof MouseEvent) {
+      if (d3.event.sourceEvent instanceof MouseEvent || d3.event.sourceEvent instanceof TouchEvent) {
         this.dropDownParent.select('select').node().value = '';
         this.extent = d3.event.selection
           ? d3.event.selection.map((val) => Math.round(this.age.invert(val)))