get data from dataabse and upload/download storage chart

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -1,17 +1,50 @@
 <template>
     <PageTab :is-loading="isLoading" v-if="storage">
 
-		<div class="card shadow-card">
+		<div v-if="distribution" class="card shadow-card">
 			<FormLabel icon="hard-drive">
                 {{ $t('Storage Usage') }}
             </FormLabel>
 
-			<div v-if="distribution">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
-				</b>
-				<ProgressLine :data="distribution" />
-			</div>
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ storage.data.attributes.used }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
+			</b>
+
+			<ProgressLine :data="distribution" />
+		</div>
+		<div v-if="distribution" class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Upload') }}
+            </FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ storage.data.meta.traffic.upload }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('In last 45 days') }}
+			</b>
+
+			<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
+		</div>
+		<div v-if="distribution" class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Download') }}
+            </FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ storage.data.meta.traffic.download }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ $t('In last 45 days') }}
+			</b>
+
+			<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
 		</div>
 
         <div v-if="config.storageLimit && ! user.data.attributes.subscription" class="card shadow-card">
@@ -55,9 +88,10 @@
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
     import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
+	import BarChart from "../../../User/BarChart"
     import {events} from '/resources/js/bus'
+    import {mapGetters} from "vuex"
     import axios from 'axios'
-    import {mapGetters} from "vuex";
 
     export default {
         name: 'UserStorage',
@@ -76,6 +110,7 @@
             ButtonBase,
             SetupBox,
             required,
+			BarChart,
         },
         computed: {
             ...mapGetters(['config']),

resources/js/views/User/BarChart.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="flex items-end justify-between h-28">
+		<span
+			class="w-2.5 block rounded-lg lg:mr-2 mr-1.5"
+			:style="{height: height + '%', backgroundColor: color}"
+			v-for="(height, i) in data"
+			:key="i">
+		</span>
+	</div>
+</template>
+<script>
+export default {
+	name: 'BarChart',
+	props: {
+		data: {},
+		color: {},
+	}
+}
+</script>

resources/js/views/User/Storage.vue

@@ -21,16 +21,14 @@
             </FormLabel>
 
 			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-				154.98MB
+				{{ storage.data.meta.traffic.upload }}
 			</b>
 
 			<b class="mb-3 block text-sm text-gray-400 mb-5">
-				{{ $t('In last 30 days') }}
+				{{ $t('In last 45 days') }}
 			</b>
 
-			<div class="flex items-end justify-between h-28">
-				<span class="w-2.5 block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#9d66fe'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
-			</div>
+			<BarChart :data="storage.data.meta.traffic.chart.upload" color="#FFBD2D" />
 		</div>
 		<div v-if="distribution" class="card shadow-card">
 			<FormLabel icon="hard-drive">
@@ -38,34 +36,33 @@
             </FormLabel>
 
 			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-				927.12MB
+				{{ storage.data.meta.traffic.download }}
 			</b>
 
 			<b class="mb-3 block text-sm text-gray-400 mb-5">
-				{{ $t('In last 30 days') }}
+				{{ $t('In last 45 days') }}
 			</b>
 
-			<div class="flex items-end justify-between h-28">
-				<span class="w-2.5 bg-theme block rounded-lg lg:mr-2 mr-1.5" :style="{height: Math.random() * 100 + '%', backgroundColor: '#ffb822'}" v-for="(item, i) in Array(45).fill(0)" :key="i"></span>
-			</div>
+			<BarChart :data="storage.data.meta.traffic.chart.download" color="#9d66fe" />
 		</div>
     </PageTab>
 </template>
 
 <script>
 	import ProgressLine from "../../components/Admin/ProgressLine";
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import Spinner from '/resources/js/components/FilesView/Spinner'
-    import axios from 'axios'
+	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
+	import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import axios from 'axios'
+	import BarChart from "./BarChart";
 
-    export default {
+	export default {
         name: 'Storage',
         components: {
+			BarChart,
 			ProgressLine,
             FormLabel,
             PageTab,
-            Spinner,
+
         },
         data() {
             return {