PHP Classes

File: resources/js/components/Dashboard.vue

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin   Laravel Nova Log Viewer   resources/js/components/Dashboard.vue   Download  
File: resources/js/components/Dashboard.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Log Viewer
Display information about logs in Laravel Nova
Author: By
Last change:
Date: 5 years ago
Size: 2,356 bytes
 

Contents

Class file image Download
<template> <div> <heading class="mb-6">Nova Log Viewer</heading> <!-- Three columns --> <div class="flex mb-4"> <div class="w-1/3"> <doughnut-chart :chart-data="dataCollection" :options="{responsive: true, maintainAspectRatio: true}" :height="400"> </doughnut-chart> </div> <div> <div class="flex flex-wrap mb-4"> <div class="w-1/3 p-4" v-for="(percent, key) in percents" :key="key"> <div class="max-w-sm rounded overflow-hidden shadow-lg" :style="percent.count !== 0 ? 'color: #FFF;background-color :' + percent.backgroundColor : '' "> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">{{ percent.name }}</div> <p class="text-grey-darker text-base"> {{ percent.count }} entries - {{ percent.percent }}% </p> <div class="progress mt-3"> <div class="bar" :style="{ width: percent.percent + '%' }"></div> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> import DoughnutChart from '../plugins/DoughnutChart' import axios from 'axios' export default { components: { DoughnutChart }, data () { return { dataCollection: {}, percents: {} } }, mounted () { this.getChartData() }, methods: { getChartData () { axios.get('/nova-vendor/php-junior/nova-log-viewer/get_chart_data') .then(({data}) => { this.dataCollection = data.chartData this.percents = data.percents }) } } } </script> <style> .progress { width: 100%; background-color: #000; } .bar { height: 5px; background-color: #FFF; } </style>