redacted source files from a dashboard project.
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,21 @@
|
||||
# mdb-admin-template
|
||||
|
||||
> MDB Admin Dashboard
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
```
|
||||
|
||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
Generated
+27669
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "kpi-vue-mdb-dashbaord",
|
||||
"version": "1.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"start": "vue-cli-service serve --open"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.12.1",
|
||||
"mdbvue": "6.7.2",
|
||||
"vue": "^2.6.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.5.13",
|
||||
"@vue/cli-plugin-eslint": "^4.5.13",
|
||||
"@vue/cli-service": "^4.5.13",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-cli-plugin-mdb": "^2.1.0",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": "off"
|
||||
},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
## Content
|
||||
|
||||
Content of this directory is built using the Vue MDB Dashboard app.
|
||||
DO NOT modify any files in this directory.
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
<div id="kpi-stats"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AdminTemplate",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeItem: 1
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
this.activeItem = this.$route.matched[0].props.default.page;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,764 @@
|
||||
<template>
|
||||
<section id="dashboard">
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-body class="d-sm-flex justify-content-between">
|
||||
<h4 class="mb-sm-0 pt-2">
|
||||
<a href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Home Page</a><span>/</span><span>Dashboard</span>
|
||||
</h4>
|
||||
<form class="d-flex md-form justify-content-center" style="margin:0;">
|
||||
<input aria-label="Search" class="form-control" placeholder="Type your query" type="search" />
|
||||
<mdb-btn color="primary" size="sm" class="my-0" type="submit"><i class="fa fa-search"></i></mdb-btn>
|
||||
</form>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<section class="mt-lg-5">
|
||||
<mdb-row>
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="money-bill-alt" far class="primary-color"/>
|
||||
<div class="data">
|
||||
<p>SALES</p>
|
||||
<h4>
|
||||
<strong>$2000</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-primary" role="progressbar"
|
||||
style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-text>Better than last week (25%)</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="chart-line" class="warning-color"/>
|
||||
<div class="data">
|
||||
<p>SUBSCRIPTIONS</p>
|
||||
<h4>
|
||||
<strong>200</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg grey darken-2" role="progressbar"
|
||||
style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-text>Worse than last week (25%)</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="chart-pie" class="light-blue lighten-1"/>
|
||||
<div class="data">
|
||||
<p>TRAFFIC</p>
|
||||
<h4>
|
||||
<strong>20000</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar grey darken-2" role="progressbar"
|
||||
style="width: 75%"></div>
|
||||
</div>
|
||||
<mdb-card-text>Worse than last week (75%)</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="chart-bar" class="red accent-2"/>
|
||||
<div class="data">
|
||||
<p>ORGANIC TRAFFIC</p>
|
||||
<h4>
|
||||
<strong>2000</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-primary" role="progressbar"
|
||||
style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-text>Better than last week (25%)</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
<section>
|
||||
<mdb-row class="mt-5">
|
||||
<mdb-col md="9" class="mb-4">
|
||||
<mdb-card>
|
||||
<mdb-card-body>
|
||||
<div style="display: block">
|
||||
<mdb-bar-chart :data="barChartData" :options="barChartOptions" :height="500"/>
|
||||
</div>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col md="3" class="mb-4">
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-header class="text-center"> Pie chart </mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<div style="display: block">
|
||||
<mdb-pie-chart :data="pieChartData" :options="pieChartOptions" :height="200"/>
|
||||
</div>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-body>
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves>Sales
|
||||
<mdb-badge color="success-color" pill class="pull-right">22%
|
||||
<mdb-icon icon="arrow-up" class="ml-1"/>
|
||||
</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
<mdb-list-group-item action waves>Traffic
|
||||
<mdb-badge color="danger-color" pill class="pull-right">5%
|
||||
<mdb-icon icon="arrow-down" class="n ml-1"/>
|
||||
</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
<mdb-list-group-item action waves>Orders
|
||||
<mdb-badge color="primary-color" pill class="pull-right">14</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
<mdb-list-group-item action waves>Issues
|
||||
<mdb-badge color="primary-color" pill class="pull-right">123</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
<mdb-list-group-item action waves>Messages
|
||||
<mdb-badge color="primary-color" pill class="pull-right">8</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
<section>
|
||||
<mdb-row>
|
||||
<mdb-col md="6" class="mb-4">
|
||||
<mdb-card>
|
||||
<mdb-card-body>
|
||||
<mdb-tbl hover>
|
||||
<thead class="blue-grey lighten-4">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Lorem</th>
|
||||
<th>Ipsum</th>
|
||||
<th>Dolor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
<td>Cell 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell 7</td>
|
||||
<td>Cell 8</td>
|
||||
<td>Cell 9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</mdb-tbl>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col md="6" class="mb-4">
|
||||
<mdb-card>
|
||||
<mdb-card-body>
|
||||
<mdb-tbl hover>
|
||||
<thead class="blue lighten-4">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Lorem</th>
|
||||
<th>Ipsum</th>
|
||||
<th>Dolor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
<td>Cell 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell 7</td>
|
||||
<td>Cell 8</td>
|
||||
<td>Cell 9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</mdb-tbl>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
<section>
|
||||
<mdb-row class="mt-3">
|
||||
<mdb-col md="12" lg="4" class="mb-4">
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-header> Line chart </mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<div style="display: block">
|
||||
<mdb-line-chart :data="lineChartData" :options="lineChartOptions" :height="200"/>
|
||||
</div>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col md="12" lg="4" class="mb-4">
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-header> Radar chart </mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<div style="display: block">
|
||||
<mdb-radar-chart :data="radarChartData" :options="radarChartOptions" :height="300"/>
|
||||
</div>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col md="12" lg="4" class="mb-4">
|
||||
<mdb-card class="mb-4">
|
||||
<mdb-card-header> Doughnut chart </mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<div style="display: block">
|
||||
<mdb-doughnut-chart :data="doughnutChartData" :options="doughnutChartOptions" :height="300"/>
|
||||
</div>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
<section>
|
||||
<mdb-row>
|
||||
<mdb-col lg="6" class="mb-4">
|
||||
<mdb-card>
|
||||
<mdb-card-header>Google Map</mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<GmapMap
|
||||
:center="{lat:10, lng:10}"
|
||||
:zoom="7"
|
||||
style="width: 100%; height: 300px"
|
||||
>
|
||||
</GmapMap>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col lg="6" class="mb-4">
|
||||
<mdb-card>
|
||||
<mdb-card-header>Modals</mdb-card-header>
|
||||
<mdb-card-body>
|
||||
<section>
|
||||
<h4 class="mb-5 mt-4 dark-grey-text text-center font-bold"><strong>Position & Sizes</strong></h4>
|
||||
<div class="text-center mb-5">
|
||||
<p class="lead">Click buttons below to launch modals demo</p>
|
||||
</div>
|
||||
<mdb-row>
|
||||
<mdb-col md="3" class="mb-3">
|
||||
<h5 class="text-center mb-3">Frame modal</h5>
|
||||
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal4.jpg" alt="frame position"/>
|
||||
<div class="text-center">
|
||||
<h5 class="my-3">Position</h5>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFrameModalTop = true">Top</mdb-btn>
|
||||
<mdb-modal frame removeBackdrop position="top" :show="showFrameModalTop" @close="showFrameModalTop = false">
|
||||
<mdb-modal-body class="text-center">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
|
||||
<mdb-btn color="secondary" @click.native="showFrameModalTop = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-body>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFrameModalBottom = true">Bottom</mdb-btn>
|
||||
<mdb-modal frame removeBackdrop position="bottom" :show="showFrameModalBottom" @close="showFrameModalBottom = false">
|
||||
<mdb-modal-body class="text-center">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
|
||||
<mdb-btn color="secondary" @click.native="showFrameModalBottom = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-body>
|
||||
</mdb-modal>
|
||||
</div>
|
||||
</mdb-col>
|
||||
<mdb-col md="3" class="mb-3">
|
||||
<h5 class="text-center mb-3">Side modal</h5>
|
||||
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal3.jpg" alt="frame position"/>
|
||||
<div class="text-center">
|
||||
<h5 class="my-3">Position</h5>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showSideModalTopRight = true">Top right</mdb-btn>
|
||||
<mdb-modal side position="top-right" :show="showSideModalTopRight" @close="showSideModalTopRight = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showSideModalTopRight = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showSideModalTopLeft = true">Top left</mdb-btn>
|
||||
<mdb-modal side position="top-left" :show="showSideModalTopLeft" @close="showSideModalTopLeft = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showSideModalTopLeft = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showSideModalBottomRight = true">Bottom right</mdb-btn>
|
||||
<mdb-modal side position="bottom-right" :show="showSideModalBottomRight" @close="showSideModalBottomRight = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showSideModalBottomRight = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showSideModalBottomLeft = true">Bottom left</mdb-btn>
|
||||
<mdb-modal side position="bottom-left" :show="showSideModalBottomLeft" @close="showSideModalBottomLeft = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showSideModalBottomLeft = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
</div>
|
||||
</mdb-col>
|
||||
<mdb-col md="3" class="mb-3">
|
||||
<h5 class="text-center mb-3">Central modal</h5>
|
||||
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal2.jpg" alt="frame position"/>
|
||||
<div class="text-center">
|
||||
<h5 class="my-3">Size</h5>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showCentralModalSmall = true">Small</mdb-btn>
|
||||
<mdb-modal size="sm" :show="showCentralModalSmall" @close="showCentralModalSmall = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn size="sm" color="secondary" @click.native="showCentralModalSmall = false">Close</mdb-btn>
|
||||
<mdb-btn size="sm" color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showCentralModalMedium = true">Medium</mdb-btn>
|
||||
<mdb-modal :show="showCentralModalMedium" @close="showCentralModalMedium = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showCentralModalMedium = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showCentralModalLarge = true">Large</mdb-btn>
|
||||
<mdb-modal size="lg" :show="showCentralModalLarge" @close="showCentralModalLarge = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showCentralModalLarge = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showCentralModalFluid = true">Fluid</mdb-btn>
|
||||
<mdb-modal size="fluid" :show="showCentralModalFluid" @close="showCentralModalFluid = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showCentralModalFluid = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
</div>
|
||||
</mdb-col>
|
||||
<mdb-col md="3" class="mb-3">
|
||||
<h5 class="text-center mb-3">Fluid modal</h5>
|
||||
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal1.jpg" alt="frame position"/>
|
||||
<div class="text-center">
|
||||
<h5 class="my-3">Position</h5>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFluidModalRight = true">Right</mdb-btn>
|
||||
<mdb-modal fullHeight position="right" :show="showFluidModalRight" @close="showFluidModalRight = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showFluidModalRight = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFluidModalLeft = true">Left</mdb-btn>
|
||||
<mdb-modal fullHeight position="left" :show="showFluidModalLeft" @close="showFluidModalLeft = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showFluidModalLeft = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFluidModalTop = true">Top</mdb-btn>
|
||||
<mdb-modal fullHeight position="top" :show="showFluidModalTop" @close="showFluidModalTop = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showFluidModalTop = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
<mdb-btn color="primary" size="sm" @click.native="showFluidModalBottom = true">Bottom</mdb-btn>
|
||||
<mdb-modal fullHeight position="bottom" :show="showFluidModalBottom" @close="showFluidModalBottom = false">
|
||||
<mdb-modal-header>
|
||||
<mdb-modal-title>Modal title</mdb-modal-title>
|
||||
</mdb-modal-header>
|
||||
<mdb-modal-body>...</mdb-modal-body>
|
||||
<mdb-modal-footer>
|
||||
<mdb-btn color="secondary" @click.native="showFluidModalBottom = false">Close</mdb-btn>
|
||||
<mdb-btn color="primary">Save changes</mdb-btn>
|
||||
</mdb-modal-footer>
|
||||
</mdb-modal>
|
||||
</div>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
<section>
|
||||
<mdb-row>
|
||||
<mdb-col xl="3" md="6" class="mb-3">
|
||||
<mdb-card class="classic-admin-card primary-color">
|
||||
<mdb-card-body>
|
||||
<div class="pull-right">
|
||||
<mdb-icon icon="money"/>
|
||||
</div>
|
||||
<p class="white-text">SALES</p>
|
||||
<h4><strong>$2000</strong></h4>
|
||||
</mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg grey darken-3" role="progressbar" style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<p>Better than last week (25%)</p>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-3">
|
||||
<mdb-card class="classic-admin-card warning-color">
|
||||
<mdb-card-body>
|
||||
<div class="pull-right">
|
||||
<mdb-icon icon="line-chart"/>
|
||||
</div>
|
||||
<p class="white-text">SALES</p>
|
||||
<h4><strong>200</strong></h4>
|
||||
</mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg grey darken-3" role="progressbar" style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<p>Worse than last week (25%)</p>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-3">
|
||||
<mdb-card class="classic-admin-card primary-color">
|
||||
<mdb-card-body>
|
||||
<div class="pull-right">
|
||||
<mdb-icon icon="pie-chart"/>
|
||||
</div>
|
||||
<p class="white-text">TRAFFIC</p>
|
||||
<h4><strong>20000</strong></h4>
|
||||
</mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar bg grey darken-3" role="progressbar" style="width: 75%"></div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<p>Better than last week (75%)</p>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
<mdb-col xl="3" md="6" class="mb-3">
|
||||
<mdb-card class="classic-admin-card red accent-2">
|
||||
<mdb-card-body>
|
||||
<div class="pull-right">
|
||||
<mdb-icon icon="bar-chart"/>
|
||||
</div>
|
||||
<p class="white-text">ORGANIC TRAFFIC</p>
|
||||
<h4><strong>2000</strong></h4>
|
||||
</mdb-card-body>
|
||||
<div class="progress">
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg grey darken-3" role="progressbar" style="width: 25%"></div>
|
||||
</div>
|
||||
<mdb-card-body>
|
||||
<p>Better than last week (75%)</p>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
</mdb-col>
|
||||
</mdb-row>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mdbRow, mdbCol, mdbBtn, mdbCard, mdbCardBody, mdbCardHeader, mdbCardText, mdbIcon, mdbTbl, mdbBarChart, mdbPieChart, mdbLineChart, mdbRadarChart, mdbDoughnutChart, mdbListGroup, mdbListGroupItem, mdbBadge, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter } from 'mdbvue'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
mdbRow,
|
||||
mdbCol,
|
||||
mdbBtn,
|
||||
mdbCard,
|
||||
mdbCardBody,
|
||||
mdbCardHeader,
|
||||
mdbCardText,
|
||||
mdbIcon,
|
||||
mdbTbl,
|
||||
mdbBarChart,
|
||||
mdbPieChart,
|
||||
mdbLineChart,
|
||||
mdbRadarChart,
|
||||
mdbDoughnutChart,
|
||||
mdbListGroup,
|
||||
mdbListGroupItem,
|
||||
mdbBadge,
|
||||
mdbModal,
|
||||
mdbModalHeader,
|
||||
mdbModalTitle,
|
||||
mdbModalBody,
|
||||
mdbModalFooter
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showFrameModalTop: false,
|
||||
showFrameModalBottom: false,
|
||||
showSideModalTopRight: false,
|
||||
showSideModalTopLeft: false,
|
||||
showSideModalBottomRight: false,
|
||||
showSideModalBottomLeft: false,
|
||||
showCentralModalSmall: false,
|
||||
showCentralModalMedium: false,
|
||||
showCentralModalLarge: false,
|
||||
showCentralModalFluid: false,
|
||||
showFluidModalRight: false,
|
||||
showFluidModalLeft: false,
|
||||
showFluidModalTop: false,
|
||||
showFluidModalBottom: false,
|
||||
barChartData: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
datasets: [
|
||||
{
|
||||
label: '#1',
|
||||
data: [12, 39, 3, 50, 2, 32, 84],
|
||||
backgroundColor: 'rgba(245, 74, 85, 0.5)',
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: '#2',
|
||||
data: [56, 24, 5, 16, 45, 24, 8],
|
||||
backgroundColor: 'rgba(90, 173, 246, 0.5)',
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: '#3',
|
||||
data: [12, 25, 54, 3, 15, 44, 3],
|
||||
backgroundColor: 'rgba(245, 192, 50, 0.5)',
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
barChartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 1,
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
pieChartData: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100, 40, 120, 24, 52],
|
||||
backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360', '#ac64ad'],
|
||||
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774', '#da92db']
|
||||
}
|
||||
]
|
||||
},
|
||||
pieChartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
},
|
||||
lineChartData: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
datasets: [
|
||||
{
|
||||
label: '#1',
|
||||
backgroundColor: 'rgba(245, 74, 85, 0.5)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '#2',
|
||||
backgroundColor: 'rgba(90, 173, 246, 0.5)',
|
||||
data: [12, 42, 121, 56, 24, 12, 2]
|
||||
},
|
||||
{
|
||||
label: '#3',
|
||||
backgroundColor: 'rgba(245, 192, 50, 0.5)',
|
||||
data: [2, 123, 154, 76, 54, 23, 5]
|
||||
}
|
||||
]
|
||||
},
|
||||
lineChartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
radarChartData: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
datasets: [
|
||||
{
|
||||
label: '#1',
|
||||
backgroundColor: 'rgba(245, 74, 85, 0.5)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '#2',
|
||||
backgroundColor: 'rgba(90, 173, 246, 0.5)',
|
||||
data: [12, 42, 121, 56, 24, 12, 2]
|
||||
},
|
||||
{
|
||||
label: '#3',
|
||||
backgroundColor: 'rgba(245, 192, 50, 0.5)',
|
||||
data: [2, 123, 154, 76, 54, 23, 5]
|
||||
}
|
||||
]
|
||||
},
|
||||
radarChartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
},
|
||||
doughnutChartData: {
|
||||
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 50, 100, 40, 120],
|
||||
backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
|
||||
hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774']
|
||||
}
|
||||
]
|
||||
},
|
||||
doughnutChartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.cascading-admin-card {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.cascading-admin-card .admin-up {
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.cascading-admin-card .admin-up .fas,
|
||||
.cascading-admin-card .admin-up .far {
|
||||
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
|
||||
padding: 1.7rem;
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
margin-right: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.cascading-admin-card .admin-up .data {
|
||||
float: right;
|
||||
margin-top: 2rem;
|
||||
text-align: right;
|
||||
}
|
||||
.admin-up .data p {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.classic-admin-card .card-body {
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
.classic-admin-card .card-body p {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.classic-admin-card .card-body h4 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<section id="dashboard">
|
||||
|
||||
<section class="mt-lg-5">
|
||||
<mdb-row>
|
||||
<!-- Design Views -->
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="cube" class="primary-color"/>
|
||||
<div class="data">
|
||||
<p>APPROVED DESIGN SUBMISSIONS</p>
|
||||
<h4>
|
||||
<strong>{{ design.total }}</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design Views Progress Bar -->
|
||||
<mdb-card-body>
|
||||
<mdb-progress :value="designsSincePreviousMonth" />
|
||||
<mdb-card-text>Designs submitted this month: {{ design.thisMonth }}</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
<!-- /Design Views Progress Bar -->
|
||||
|
||||
<!-- Submitted Design Types List -->
|
||||
<mdb-card-body class="border-top">
|
||||
<mdb-card-title>Submitted Design Types</mdb-card-title>
|
||||
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in design.topCategories"
|
||||
:key="item">
|
||||
{{ item.category }}
|
||||
<mdb-badge color="primary-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
|
||||
</mdb-card-body>
|
||||
<!-- /Submitted Design Types List -->
|
||||
</mdb-card>
|
||||
|
||||
<!-- Most Viewed Designs List -->
|
||||
<mdb-card cascade class="mb-4">
|
||||
<mdb-card-header class="text-center primary-color white-text">Most Viewed Designs</mdb-card-header>
|
||||
<mdb-card-body class="border-top">
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in design.top"
|
||||
:key="item">
|
||||
{{ item.title }}
|
||||
<mdb-badge color="success-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<!-- /Most Viewed Designs List -->
|
||||
|
||||
</mdb-col>
|
||||
<!-- /Design Views -->
|
||||
|
||||
<!-- File Downloads -->
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="file-download" class="warning-color"/>
|
||||
<div class="data">
|
||||
<p>FILE DOWNLOADS</p>
|
||||
<h4>
|
||||
<strong>{{ download.total }}</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Downloads Progress Bar -->
|
||||
<mdb-card-body>
|
||||
<mdb-progress :value="downloadsSincePreviousMonth" />
|
||||
<mdb-card-text>File downloads this month: {{ download.thisMonth }}</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
<!-- /Downloads Progress Bar -->
|
||||
|
||||
<!-- Downloaded File Types List -->
|
||||
<mdb-card-body class="border-top">
|
||||
<mdb-card-title>Downloaded File Types</mdb-card-title>
|
||||
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in download.topCategories"
|
||||
:key="item">
|
||||
{{ item.category }}
|
||||
<mdb-badge color="warning-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
|
||||
</mdb-card-body>
|
||||
<!-- /Downloaded File Types List -->
|
||||
</mdb-card>
|
||||
|
||||
<!-- Most Downloaded Designs List -->
|
||||
<mdb-card cascade class="mb-4">
|
||||
<mdb-card-header class="text-center warning-color white-text">Most Downloaded Designs</mdb-card-header>
|
||||
<mdb-card-body class="border-top">
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in download.top"
|
||||
:key="item">
|
||||
{{ item.title }}
|
||||
<mdb-badge color="primary-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<!-- /Most Downloaded Designs List -->
|
||||
|
||||
</mdb-col>
|
||||
<!-- /File Downloads -->
|
||||
|
||||
<!-- Favorited Designs -->
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="star" class="light-blue lighten-1"/>
|
||||
<div class="data">
|
||||
<p>DESIGNS FAVORITED</p>
|
||||
<h4>
|
||||
<strong>{{ favorite.total }}</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Favorited Progress Bar -->
|
||||
<mdb-card-body>
|
||||
<mdb-progress :value="favoritesSincePreviousMonth" />
|
||||
<mdb-card-text>Designs favorited this month: {{ favorite.thisMonth }}</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
<!-- /Favorited Progress Bar -->
|
||||
</mdb-card>
|
||||
|
||||
<!-- Most Favorited Designs List -->
|
||||
<mdb-card cascade class="mb-4">
|
||||
<mdb-card-header class="text-center light-blue lighten-1 white-text">Most Favorited Designs</mdb-card-header>
|
||||
<mdb-card-body class="border-top">
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in favorite.top"
|
||||
:key="item">
|
||||
{{ item.title }}<br/>
|
||||
<mdb-badge color="default-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<!-- /Most Favorited Designs List -->
|
||||
|
||||
</mdb-col>
|
||||
<!-- /Favorited Designs -->
|
||||
|
||||
<!-- Offline Exports -->
|
||||
<mdb-col xl="3" md="6" class="mb-r">
|
||||
<mdb-card cascade class="cascading-admin-card">
|
||||
<div class="admin-up">
|
||||
<mdb-icon icon="file-export" class="red accent-2"/>
|
||||
<div class="data">
|
||||
<p>OFFLINE EXPORTS</p>
|
||||
<h4>
|
||||
<strong>{{ fileExport.total }}</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exports Progress Bar -->
|
||||
<mdb-card-body>
|
||||
<mdb-progress :value="fileExportsSincePreviousMonth" />
|
||||
<mdb-card-text>Export created this month: {{ fileExport.thisMonth }}</mdb-card-text>
|
||||
</mdb-card-body>
|
||||
<!-- /Exports Progress Bar -->
|
||||
</mdb-card>
|
||||
|
||||
<!-- Most Exported Designs List -->
|
||||
<mdb-card cascade class="mb-4">
|
||||
<mdb-card-header class="text-center red accent-2 white-text">Most Exported Designs</mdb-card-header>
|
||||
<mdb-card-body class="border-top">
|
||||
|
||||
<mdb-list-group class="list-group-flush">
|
||||
<mdb-list-group-item action waves
|
||||
v-for="item in fileExport.top"
|
||||
:key="item">
|
||||
{{ item.title }}<br/>
|
||||
<mdb-badge color="secondary-color" pill class="pull-right">{{ item.count }}</mdb-badge>
|
||||
</mdb-list-group-item>
|
||||
</mdb-list-group>
|
||||
|
||||
</mdb-card-body>
|
||||
</mdb-card>
|
||||
<!-- /Most Exported Designs List -->
|
||||
|
||||
</mdb-col>
|
||||
<!-- /Offline Exports -->
|
||||
</mdb-row>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
import {
|
||||
mdbRow,
|
||||
mdbCol,
|
||||
mdbCard,
|
||||
mdbCardBody,
|
||||
mdbCardHeader,
|
||||
mdbCardTitle,
|
||||
mdbCardText,
|
||||
mdbIcon,
|
||||
mdbListGroup,
|
||||
mdbListGroupItem,
|
||||
mdbBadge,
|
||||
mdbProgress
|
||||
} from 'mdbvue'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
mdbRow,
|
||||
mdbCol,
|
||||
mdbCard,
|
||||
mdbCardBody,
|
||||
mdbCardHeader,
|
||||
mdbCardTitle,
|
||||
mdbCardText,
|
||||
mdbIcon,
|
||||
mdbListGroup,
|
||||
mdbListGroupItem,
|
||||
mdbBadge,
|
||||
mdbProgress
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
design: {},
|
||||
download: {},
|
||||
favorite: {},
|
||||
fileExport: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
designsSincePreviousMonth: function () {
|
||||
return this.calculatePercentage(this.design.total, this.design.thisMonth);
|
||||
},
|
||||
downloadsSincePreviousMonth: function () {
|
||||
return this.calculatePercentage(this.download.total, this.download.thisMonth);
|
||||
},
|
||||
favoritesSincePreviousMonth: function () {
|
||||
return this.calculatePercentage(this.favorite.total, this.favorite.thisMonth);
|
||||
},
|
||||
fileExportsSincePreviousMonth: function () {
|
||||
return this.calculatePercentage(this.fileExport.total, this.fileExport.thisMonth);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calculatePercentage: function (total, changed) {
|
||||
var originalValue = total - changed;
|
||||
if (originalValue === 0) {
|
||||
return 100;
|
||||
}
|
||||
return Math.round(( (total - originalValue) / originalValue) * 100);
|
||||
},
|
||||
updateStats: async function (url, prop) {
|
||||
axios
|
||||
.get(url)
|
||||
.then(response => {
|
||||
if (response.data.status === 'success') {
|
||||
console.log('returning data');
|
||||
this[prop] = response.data.data;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error while loading data from ' + url);
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateStats('/dashboard/stats/data/json/design', 'design');
|
||||
this.updateStats('/dashboard/stats/data/json/download', 'download');
|
||||
this.updateStats('/dashboard/stats/data/json/favorite', 'favorite');
|
||||
this.updateStats('/dashboard/stats/data/json/export', 'fileExport');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.cascading-admin-card {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.cascading-admin-card .admin-up {
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.cascading-admin-card .admin-up .fas,
|
||||
.cascading-admin-card .admin-up .far {
|
||||
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
|
||||
padding: 1.7rem;
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
margin-right: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.cascading-admin-card .admin-up .data {
|
||||
float: right;
|
||||
margin-top: 2rem;
|
||||
text-align: right;
|
||||
}
|
||||
.admin-up .data p {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.classic-admin-card .card-body {
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
.classic-admin-card .card-body p {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.classic-admin-card .card-body h4 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import 'mdbvue/lib/css/mdb.min.css'
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#kpi-stats')
|
||||
@@ -0,0 +1,18 @@
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
import DashboardStats from '@/components/DashboardStats'
|
||||
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/dashboard/stats',
|
||||
name: 'Statistics',
|
||||
component: DashboardStats,
|
||||
props: { page: 1 },
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -0,0 +1,18 @@
|
||||
// vue.config.js
|
||||
|
||||
const path = require("path");
|
||||
|
||||
/**
|
||||
* @type {import('@vue/cli-service').ProjectOptions}
|
||||
*/
|
||||
module.exports = {
|
||||
filenameHashing: false,
|
||||
chainWebpack: config => {
|
||||
config.optimization.minimize(false);
|
||||
config.plugins.delete('optimize-css');
|
||||
config.plugins.delete('prefetch');
|
||||
config.plugins.delete('preload') ;
|
||||
},
|
||||
outputDir: path.resolve(__dirname, "../dashboard"),
|
||||
assetsDir: "../dashboard",
|
||||
}
|
||||
Reference in New Issue
Block a user