From 21d67f3d2a0e96c9fa56eb9b258823411fecad3d Mon Sep 17 00:00:00 2001
From: Guillaume FAUVET <g.fauvet.perso@gmail.com>
Date: Sat, 7 Apr 2018 12:40:40 +0200
Subject: [PATCH] =?UTF-8?q?{upd}=C2=A0statistiques=20are=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webpack/component/home/page1.vue | 2 +-
 webpack/data/home.js             | 6 ++++--
 webpack/scss/container/svg.scss  | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webpack/component/home/page1.vue b/webpack/component/home/page1.vue
index 83e7a48..1b0c4cb 100644
--- a/webpack/component/home/page1.vue
+++ b/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) + ' ' +
diff --git a/webpack/data/home.js b/webpack/data/home.js
index 133cb7d..854982d 100644
--- a/webpack/data/home.js
+++ b/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"]);
\ No newline at end of file
diff --git a/webpack/scss/container/svg.scss b/webpack/scss/container/svg.scss
index 160ba7b..7122ef3 100644
--- a/webpack/scss/container/svg.scss
+++ b/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 */