From 3f7d2486847ef8f3229adad024316ad01da251ae Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 24 Aug 2018 07:17:17 +0900
Subject: Improve chart

---
 .../app/desktop/views/pages/admin/admin.chart.chart.ts    |  3 ++-
 src/client/app/desktop/views/pages/admin/admin.chart.vue  | 15 +++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts b/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
index c09dc6dd8c..4ba348fb0f 100644
--- a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
+++ b/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
@@ -23,7 +23,8 @@ export default Vue.extend({
 	methods: {
 		render() {
 			this.renderChart(this.data, mergeOptions({
-				responsive: false,
+				responsive: true,
+				maintainAspectRatio: false,
 				scales: {
 					xAxes: [{
 						type: 'time',
diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.vue b/src/client/app/desktop/views/pages/admin/admin.chart.vue
index 8db54174ff..f40f89b2e0 100644
--- a/src/client/app/desktop/views/pages/admin/admin.chart.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.chart.vue
@@ -30,7 +30,9 @@
 			<a @click="span = 'day'">%i18n:@per-day%</a> | <a @click="span = 'hour'">%i18n:@per-hour%</a>
 		</div>
 	</header>
-	<x-chart v-if="chart" :data="data[0]" :opts="data[1]" :width="720" :height="300"/>
+	<div>
+		<x-chart v-if="chart" :data="data[0]" :opts="data[1]"/>
+	</div>
 </div>
 </template>
 
@@ -139,7 +141,7 @@ export default Vue.extend({
 			return [{
 				datasets: [{
 					label: local ? 'Local Notes' : 'Remote Notes',
-					fill: false,
+					fill: true,
 					borderColor: '#f6584f',
 					borderWidth: 2,
 					pointBackgroundColor: '#fff',
@@ -160,7 +162,7 @@ export default Vue.extend({
 			return [{
 				datasets: [{
 					label: local ? 'Local Users' : 'Remote Users',
-					fill: false,
+					fill: true,
 					borderColor: '#f6584f',
 					borderWidth: 2,
 					pointBackgroundColor: '#fff',
@@ -181,7 +183,7 @@ export default Vue.extend({
 			return [{
 				datasets: [{
 					label: local ? 'Local Drive Usage' : 'Remote Drive Usage',
-					fill: false,
+					fill: true,
 					borderColor: '#f6584f',
 					borderWidth: 2,
 					pointBackgroundColor: '#fff',
@@ -238,4 +240,9 @@ export default Vue.extend({
 		> *:last-child
 			margin-left auto
 
+	> div
+		> *
+			display block
+			height 300px
+
 </style>
-- 
cgit v1.2.3-freya