Add charts on dashboard page
This commit is contained in:
cristij
parent
dcdf9327a2
commit
8c7286f9ed
@ -1,57 +1,57 @@
|
|||||||
import { Bar } from 'vue-chartjs';
|
import { Bar, mixins } from 'vue-chartjs';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'bar-chart',
|
name: 'bar-chart',
|
||||||
extends: Bar,
|
extends: Bar,
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
props: {
|
props: {
|
||||||
labels: Array,
|
|
||||||
datasets: Array,
|
|
||||||
data: [Array, Object],
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
extraOptions: Object,
|
extraOptions: Object,
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
gradientColors: {
|
gradientColors: {
|
||||||
type: Array,
|
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 =>{
|
validator: val =>{
|
||||||
return val.length > 2;
|
return val.length > 2;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
gradientStops: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [1, 0.4, 0],
|
||||||
|
validator: val =>{
|
||||||
|
return val.length > 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateGradients() {
|
||||||
|
const ctx = document.getElementById(this.chartId).getContext('2d');
|
||||||
|
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||||
|
|
||||||
|
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() {
|
mounted() {
|
||||||
let fallBackColor = '#d048b6';
|
this.updateGradients();
|
||||||
let color = this.color || fallBackColor;
|
|
||||||
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(
|
this.renderChart(
|
||||||
{
|
this.chartData,
|
||||||
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 || []
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
this.extraOptions
|
this.extraOptions
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartData(newVal, oldVal) {
|
||||||
|
this.updateGradients();
|
||||||
|
if(oldVal === null) {
|
||||||
|
this.renderChart(
|
||||||
|
this.chartData,
|
||||||
|
this.extraOptions
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,65 +1,57 @@
|
|||||||
import { Line } from 'vue-chartjs';
|
import { Line, mixins } from 'vue-chartjs';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'line-chart',
|
name: 'line-chart',
|
||||||
extends: Line,
|
extends: Line,
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
props: {
|
props: {
|
||||||
labels: Array,
|
|
||||||
datasets: Array,
|
|
||||||
data: [Array, Object],
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
extraOptions: Object,
|
extraOptions: Object,
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
gradientColors: {
|
gradientColors: {
|
||||||
type: Array,
|
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 =>{
|
validator: val =>{
|
||||||
return val.length > 2;
|
return val.length > 2;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
gradientStops: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [1, 0.4, 0],
|
||||||
|
validator: val =>{
|
||||||
|
return val.length > 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateGradients() {
|
||||||
|
const ctx = document.getElementById(this.chartId).getContext('2d');
|
||||||
|
const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
|
||||||
|
|
||||||
|
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() {
|
mounted() {
|
||||||
let fallBackColor = '#d048b6';
|
this.updateGradients();
|
||||||
let color = this.color || fallBackColor;
|
|
||||||
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(
|
this.renderChart(
|
||||||
{
|
this.chartData,
|
||||||
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 || []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
this.extraOptions
|
this.extraOptions
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartData(newVal, oldVal) {
|
||||||
|
this.updateGradients();
|
||||||
|
if(oldVal === null) {
|
||||||
|
this.renderChart(
|
||||||
|
this.chartData,
|
||||||
|
this.extraOptions
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,10 +1,499 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user