{upd} statistiques are responsive

webpack/component/home/page1.vue

@@ -1,7 +1,7 @@
 <template>
 
 	<div id='CONTAINER' class='list'>
-		<svg xmlns="http://www.w3.org/2000/svg">
+		<svg xmlns="http://www.w3.org/2000/svg" :viewBox="gstore.viewBox">
 			<template v-if="gstore.dimensions">
 				<path
 						:d="'m ' + (gstore.dimensions.padding + gstore.dimensions.text.size) + ',' + (gstore.dimensions.padding) + ' ' +

webpack/data/home.js

@@ -2,7 +2,7 @@
 /* (1) Load statistics
 ---------------------------------------------------------*/
 /* (1) Initialize list */
-gstore.add('stats', []);
+gstore.add('stats', null);
 gstore.add('dimensions', null);
 
 /* (2) Get statistics */
@@ -46,7 +46,7 @@ api.call('GET department/stats', {}, function(rs) {
     gstore.get.dimensions = {
         padding: 5,
         text: {
-            size: maxLabelLength * 9.5,
+            size: maxLabelLength * 8.5,
             alignH: 5,
             alignV: 20,
         },
@@ -71,6 +71,8 @@ api.call('GET department/stats', {}, function(rs) {
         width: 500,
         precision: 4
     };
+
+    gstore.get.viewBox = `0 0 ${gstore.get.dimensions.axis.width + gstore.get.dimensions.text.size + 50} ${gstore.get.dimensions.axis.height + 30}`;
 });
 
 gstore.add('colors', ["blue", "yellow", "green", "red", "purple", "lightblue", "lightred", "lightyellow", "lightgreen", "lightpurple"]);

webpack/scss/container/svg.scss

@@ -12,8 +12,8 @@ $svg-lightpurple: #994499;
 
 svg {
 
-	width: 50em;
-	height: 20em;
+	width: 100%;
+	height: 30vh;
 	margin: 10px;
 	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none; /* Safari */