tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add charts on dashboard page

Browse Source
This commit is contained in:
cristij 2018-08-21 11:26:41 +03:00
parent dcdf9327a2
commit 8c7286f9ed
3 changed files with 567 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Charts/BarChart.js
View File

@ -1,57 +1,57 @@
import { Bar } from 'vue-chartjs';
import { Bar, mixins } from 'vue-chartjs';
export default {
name: 'bar-chart',
extends: Bar,
mixins: [mixins.reactiveProp],
props: {
labels: Array,
datasets: Array,
data: [Array, Object],
color: {
type: String,
default: ''
},
extraOptions: Object,
title: {
type: String,
default: ''
},
gradientColors: {
type: Array,
deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
validator: val =>{
return val.length > 2;
}
},
gradientStops: {
type: Array,
default: () => [1, 0.4, 0],
validator: val =>{
return val.length > 2;
}
}
},
mounted() {
let fallBackColor = '#d048b6';
let color = this.color || fallBackColor;
methods: {
updateGradients() {
const ctx = document.getElementById(this.chartId).getContext('2d');
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, this.gradientColors[0]);
gradientStroke.addColorStop(0.2, this.gradientColors[1]);
gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
this.renderChart(
{
labels: this.labels || [],
datasets: this.datasets
? this.datasets
: [{
label: this.title || '',
fill: true,
backgroundColor: gradientStroke,
hoverBackgroundColor: gradientStroke,
borderColor: color,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
data: this.data || []
}]
gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
if(this.chartData){
this.chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
}
},
mounted() {
this.updateGradients();
this.renderChart(
this.chartData,
this.extraOptions
);
},
watch: {
chartData(newVal, oldVal) {
this.updateGradients();
if(oldVal === null) {
this.renderChart(
this.chartData,
this.extraOptions
);
}
}
}
};

78
src/components/Charts/LineChart.js
View File

@ -1,65 +1,57 @@
import { Line } from 'vue-chartjs';
import { Line, mixins } from 'vue-chartjs';
export default {
name: 'line-chart',
extends: Line,
mixins: [mixins.reactiveProp],
props: {
labels: Array,
datasets: Array,
data: [Array, Object],
color: {
type: String,
default: ''
},
extraOptions: Object,
title: {
type: String,
default: ''
},
gradientColors: {
type: Array,
deafault: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
validator: val =>{
return val.length > 2;
}
},
gradientStops: {
type: Array,
default: () => [1, 0.4, 0],
validator: val =>{
return val.length > 2;
}
}
},
mounted() {
let fallBackColor = '#d048b6';
let color = this.color || fallBackColor;
methods: {
updateGradients() {
const ctx = document.getElementById(this.chartId).getContext('2d');
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, this.gradientColors[0]);
gradientStroke.addColorStop(0.2, this.gradientColors[1]);
gradientStroke.addColorStop(0, this.gradientColors[2]); //purple colors
this.renderChart(
{
labels: this.labels || [],
datasets: this.datasets
? this.datasets
: [
{
label: this.title || '',
fill: true,
backgroundColor: gradientStroke,
borderColor: color,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: color,
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: color,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: this.data || []
gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]);
gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]);
gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]);
if(this.chartData){
this.chartData.datasets.forEach(set => {
set.backgroundColor = gradientStroke;
});
}
}
]
},
mounted() {
this.updateGradients();
this.renderChart(
this.chartData,
this.extraOptions
);
},
watch: {
chartData(newVal, oldVal) {
this.updateGradients();
if(oldVal === null) {
this.renderChart(
this.chartData,
this.extraOptions
);
}
}
}
};

493
src/pages/Dashboard.vue
View File

@ -1,10 +1,499 @@
<template>
<div>
Dashboard page
<div class="row">
<div class="col-12">
<card type="chart">
<template slot="header">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="card-category">Total Shipments</h5>
<h2 class="card-title">Performance</h2>
</div>
<div class="col-sm-6">
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
<label v-for="(option, index) in bigLineChart.categories"
:key="option"
class="btn btn-sm btn-primary btn-simple"
:class="{active: bigLineChart.activeIndex === index}"
:id="index">
<input type="radio"
@click="initBigChart(index)"
name="options" autocomplete="off"
:checked="bigLineChart.activeIndex === index">
{{option}}
</label>
</div>
</div>
</div>
</template>
<div class="chart-area">
<line-chart style="height: 100%"
:chart-data="bigLineChart.chartData"
:gradient-color="bigLineChart.gradientColors"
:gradient-stops="bigLineChart.gradientStops"
:extra-options="bigLineChart.extraOptions">
</line-chart>
</div>
</card>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<card type="chart">
<template slot="header">
<h5 class="card-category">Total Shipments</h5>
<h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary "></i> 763,215</h3>
</template>
<div class="chart-area">
<line-chart style="height: 100%"
:chart-data="purpleLineChart.chartData"
:gradient-color="purpleLineChart.gradientColors"
:gradient-stops="purpleLineChart.gradientStops"
:extra-options="purpleLineChart.extraOptions">
</line-chart>
</div>
</card>
</div>
<div class="col-lg-4">
<card type="chart">
<template slot="header">
<h5 class="card-category">Daily Sales</h5>
<h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
</template>
<div class="chart-area">
<bar-chart style="height: 100%"
:chart-data="blueBarChart.chartData"
:gradient-color="blueBarChart.gradientColors"
:gradient-stops="blueBarChart.gradientStops"
:extra-options="blueBarChart.extraOptions">
</bar-chart>
</div>
</card>
</div>
<div class="col-lg-4">
<card type="chart">
<template slot="header">
<h5 class="card-category">Completed Tasks</h5>
<h3 class="card-title"><i class="tim-icons icon-send text-success "></i> 12,100K</h3>
</template>
<div class="chart-area">
<line-chart style="height: 100%"
:chart-data="greenLineChart.chartData"
:gradient-color="greenLineChart.gradientColors"
:gradient-stops="greenLineChart.gradientStops"
:extra-options="greenLineChart.extraOptions">
</line-chart>
</div>
</card>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card card-tasks">
<div class="card-header ">
<h6 class="title d-inline">Tasks(5)</h6>
<p class="card-category d-inline">today</p>
<div class="dropdown">
<button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
<i class="tim-icons icon-settings-gear-63"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#pablo">Action</a>
<a class="dropdown-item" href="#pablo">Another action</a>
<a class="dropdown-item" href="#pablo">Something else</a>
</div>
</div>
</div>
<div class="card-body ">
<div class="table-full-width table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">Update the Documentation</p>
<p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">GDPR Compliance</p>
<p class="text-muted">The GDPR is a regulation that requires businesses to protect the personal data
and privacy of Europe citizens for transactions that occur within EU member states.</p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">Solve the issues</p>
<p class="text-muted">Fifty percent of all respondents said they would be more likely to shop at a
company </p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">Release v2.0.0</p>
<p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">Export the processed files</p>
<p class="text-muted">The report also shows that consumers will not easily forgive a company once a
breach exposing their personal data occurs. </p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>
<p class="title">Arival at export process</p>
<p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
<i class="tim-icons icon-pencil"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card ">
<div class="card-header">
<h4 class="card-title"> Simple Table</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table tablesorter " id="">
<thead class=" text-primary">
<th>
Name
</th>
<th>
Country
</th>
<th>
City
</th>
<th class="text-center">
Salary
</th>
</thead>
<tbody>
<tr>
<td>
Dakota Rice
</td>
<td>
Niger
</td>
<td>
Oud-Turnhout
</td>
<td class="text-center">
$36,738
</td>
</tr>
<tr>
<td>
Minerva Hooper
</td>
<td>
Curaçao
</td>
<td>
Sinaai-Waas
</td>
<td class="text-center">
$23,789
</td>
</tr>
<tr>
<td>
Sage Rodriguez
</td>
<td>
Netherlands
</td>
<td>
Baileux
</td>
<td class="text-center">
$56,142
</td>
</tr>
<tr>
<td>
Philip Chaney
</td>
<td>
Korea, South
</td>
<td>
Overland Park
</td>
<td class="text-center">
$38,735
</td>
</tr>
<tr>
<td>
Doris Greene
</td>
<td>
Malawi
</td>
<td>
Feldkirchen in Kärnten
</td>
<td class="text-center">
$63,542
</td>
</tr>
<tr>
<td>
Mason Porter
</td>
<td>
Chile
</td>
<td>
Gloucester
</td>
<td class="text-center">
$78,615
</td>
</tr>
<tr>
<td>
Jon Porter
</td>
<td>
Portugal
</td>
<td>
Gloucester
</td>
<td class="text-center">
$98,615
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
import LineChart from '@/components/Charts/LineChart';
import BarChart from '@/components/Charts/BarChart';
import * as chartConfigs from '@/components/Charts/config';
export default {
components: {
LineChart,
BarChart
},
data() {
return {
bigLineChart: {
allData: [
[100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],
[80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120],
[60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130]
],
activeIndex: 0,
chartData: null,
extraOptions: chartConfigs.purpleChartOptions,
gradientColors: ['rgba(72,72,176,0.1)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
gradientStops: [1, 0.4, 0],
categories: ['Accounts', 'Purchases', 'Sessions']
},
purpleLineChart: {
extraOptions: chartConfigs.purpleChartOptions,
chartData: {
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
label: "Data",
fill: true,
borderColor: '#d048b6',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [80, 100, 70, 80, 120, 80],
}]
},
gradientColors: ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
gradientStops: [1, 0.2, 0],
},
greenLineChart: {
extraOptions: chartConfigs.greenChartOptions,
chartData: {
labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
datasets: [{
label: "My First dataset",
fill: true,
borderColor: '#00d6b4',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#00d6b4',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#00d6b4',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [90, 27, 60, 12, 80],
}]
},
gradientColors: ['rgba(66,134,121,0.15)', 'rgba(66,134,121,0.0)', 'rgba(66,134,121,0)'],
gradientStops: [1, 0.4, 0],
},
blueBarChart: {
extraOptions: chartConfigs.barChartOptions,
chartData: {
labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
datasets: [{
label: "Countries",
fill: true,
borderColor: '#1f8ef1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
data: [53, 20, 10, 80, 100, 45],
}]
},
gradientColors: ['rgba(29,140,248,0.2)', 'rgba(29,140,248,0.0)', 'rgba(29,140,248,0)'],
gradientStops: [1, 0.4, 0],
}
}
},
methods: {
initBigChart(index) {
this.bigLineChart.chartData = {
datasets: [{
label: "My First dataset",
fill: true,
borderColor: '#d346b1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d346b1',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d346b1',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: this.bigLineChart.allData[index]
}],
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
}
this.bigLineChart.activeIndex = index;
}
},
mounted() {
this.initBigChart(0);
}
};
</script>
<style>
</style>