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