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

Add chart components

Browse Source
This commit is contained in:
cristij 2018-08-20 21:30:51 +03:00
parent dc3b67961d
commit dcdf9327a2
8 changed files with 389 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -11,9 +11,11 @@
},
"dependencies": {
"bootstrap": "^4.0.0",
"chart.js": "^2.7.2",
"chartist": "^0.11.0",
"es6-promise": "^4.2.4",
"vue": "^2.5.17",
"vue-chartjs": "^3.4.0",
"vue-router": "^3.0.1",
"vue2-transitions": "^0.2.3"
},

113
src/components/Cards/ChartCard.vue
View File

@ -1,113 +0,0 @@
<template>
<card>
<template slot="header">
<h4 v-if="$slots.title || title" class="card-title">
<slot name="title">
{{title}}
</slot>
</h4>
<p class="card-category">
<slot name="subTitle">
{{subTitle}}
</slot>
</p>
</template>
<div>
<div :id="chartId" class="ct-chart"></div>
<div class="footer">
<div class="chart-legend">
<slot name="legend"></slot>
</div>
<hr>
<div class="stats">
<slot name="footer"></slot>
</div>
<div class="pull-right">
</div>
</div>
</div>
</card>
</template>
<script>
import Card from "./Card.vue";
export default {
name: "chart-card",
components: {
Card
},
props: {
footerText: {
type: String,
default: ""
},
title: {
type: String,
default: ""
},
subTitle: {
type: String,
default: ""
},
chartType: {
type: String,
default: "Line" // Line | Pie | Bar
},
chartOptions: {
type: Object,
default: () => {
return {};
}
},
chartData: {
type: Object,
default: () => {
return {
labels: [],
series: []
};
}
}
},
data() {
return {
chartId: "no-id"
};
},
methods: {
/***
* Initializes the chart by merging the chart options sent via props and the default chart options
*/
initChart(Chartist) {
const chartIdQuery = `#${this.chartId}`;
Chartist[this.chartType](
chartIdQuery,
this.chartData,
this.chartOptions
);
},
/***
* Assigns a random id to the chart
*/
updateChartId() {
const currentTime = new Date().getTime().toString();
const randomInt = this.getRandomInt(0, currentTime);
this.chartId = `div_${randomInt}`;
},
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
},
mounted() {
this.updateChartId();
import('chartist').then((Chartist) => {
let ChartistLib = Chartist.default || Chartist ;
this.$nextTick(() => {
this.initChart(ChartistLib);
});
});
}
};
</script>
<style>
</style>

57
src/components/Charts/BarChart.js Normal file
View File

@ -0,0 +1,57 @@
import { Bar } from 'vue-chartjs';
export default {
name: 'bar-chart',
extends: Bar,
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)'],
validator: val =>{
return val.length > 2;
}
},
},
mounted() {
let fallBackColor = '#d048b6';
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(
{
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
);
}
};

65
src/components/Charts/LineChart.js Normal file
View File

@ -0,0 +1,65 @@
import { Line } from 'vue-chartjs';
export default {
name: 'line-chart',
extends: Line,
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)'],
validator: val =>{
return val.length > 2;
}
},
},
mounted() {
let fallBackColor = '#d048b6';
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(
{
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
);
}
};

222
src/components/Charts/config.js Normal file
View File

@ -0,0 +1,222 @@
export const basicOptions = {
maintainAspectRatio: false,
legend: {
display: false
},
responsive: true,
};
export let blueChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#2380f7"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#2380f7"
}
}]
}
}
export let purpleChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#9a9a9a"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
}
export let orangeChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 50,
suggestedMax: 110,
padding: 20,
fontColor: "#ff8a76"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(220,53,69,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#ff8a76"
}
}]
}
}
export let greenChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 50,
suggestedMax: 125,
padding: 20,
fontColor: "#9e9e9e"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(0,242,195,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9e9e9e"
}
}]
}
}
export let barChartOptions = {
...basicOptions,
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 120,
padding: 20,
fontColor: "#9e9e9e"
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9e9e9e"
}
}]
}
}

11
src/components/Charts/utils.js Normal file
View File

@ -0,0 +1,11 @@
export function hexToRGB(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return `rgba(${r},${g},${b}, ${alpha})`;
} else {
return `rgb(${r},${g},${b})`;
}
}

2
src/components/index.js
View File

@ -6,7 +6,6 @@ import BaseButton from "./BaseButton";
import BaseAlert from "./BaseAlert";
import Card from "./Cards/Card.vue";
import ChartCard from "./Cards/ChartCard.vue";
import StatsCard from "./Cards/StatsCard.vue";
import SidebarPlugin from "./SidebarPlugin/index";
@ -14,7 +13,6 @@ import SidebarPlugin from "./SidebarPlugin/index";
export {
FormGroupInput,
Card,
ChartCard,
StatsCard,
BaseTable,
BaseDropdown,

32
yarn.lock
View File

@ -1677,10 +1677,30 @@ chardet@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
chart.js@^2.7.2:
version "2.7.2"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.2.tgz#3c9fde4dc5b95608211bdefeda7e5d33dffa5714"
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartist@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/chartist/-/chartist-0.11.0.tgz#84ba5e05490d096d93dcfa9343ebc31ef6a3bd28"
chartjs-color-string@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
check-types@^7.3.0:
version "7.4.0"
resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
@ -1814,6 +1834,10 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
color-convert@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
@ -4681,6 +4705,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
dependencies:
minimist "0.0.8"
moment@^2.10.2:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -7219,6 +7247,10 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue-chartjs@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.4.0.tgz#669e4453be0676605fc9290b3b581867ccd15c88"
vue-eslint-parser@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"