v2 first commit
This commit is contained in:
denisdulici
30
resources/assets/js/components/Charts/BarChart.js
vendored
Normal file
30
resources/assets/js/components/Charts/BarChart.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { Bar, mixins } from 'vue-chartjs';
|
||||
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
|
||||
|
||||
export default {
|
||||
name: 'bar-chart',
|
||||
extends: Bar,
|
||||
mixins: [mixins.reactiveProp, globalOptionsMixin],
|
||||
props: {
|
||||
extraOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
'chartData',
|
||||
(newVal, oldVal) => {
|
||||
if (!oldVal) {
|
||||
this.renderChart(this.chartData, this.extraOptions);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
};
|
||||
30
resources/assets/js/components/Charts/DoughnutChart.js
vendored
Normal file
30
resources/assets/js/components/Charts/DoughnutChart.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { Doughnut, mixins } from 'vue-chartjs';
|
||||
import globalOptionsMixin from "./../../components/Charts/globalOptionsMixin";
|
||||
|
||||
export default {
|
||||
name: 'doughnut-chart',
|
||||
extends: Doughnut,
|
||||
mixins: [mixins.reactiveProp, globalOptionsMixin],
|
||||
props: {
|
||||
extraOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
'chartData',
|
||||
(newVal, oldVal) => {
|
||||
if (!oldVal) {
|
||||
this.renderChart(this.chartData, this.extraOptions);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
};
|
||||
30
resources/assets/js/components/Charts/LineChart.js
vendored
Normal file
30
resources/assets/js/components/Charts/LineChart.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { Line, mixins } from 'vue-chartjs';
|
||||
import globalOptionsMixin from "./../../components/Charts/globalOptionsMixin";
|
||||
|
||||
export default {
|
||||
name: 'line-chart',
|
||||
extends: Line,
|
||||
mixins: [mixins.reactiveProp, globalOptionsMixin],
|
||||
props: {
|
||||
extraOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
'chartData',
|
||||
(newVal, oldVal) => {
|
||||
if (!oldVal) {
|
||||
this.renderChart(this.chartData, this.extraOptions);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
};
|
||||
30
resources/assets/js/components/Charts/PieChart.js
vendored
Normal file
30
resources/assets/js/components/Charts/PieChart.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { Pie, mixins } from 'vue-chartjs';
|
||||
import globalOptionsMixin from "@/components/Charts/globalOptionsMixin";
|
||||
|
||||
export default {
|
||||
name: 'pie-chart',
|
||||
extends: Pie,
|
||||
mixins: [mixins.reactiveProp, globalOptionsMixin],
|
||||
props: {
|
||||
extraOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctx: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
'chartData',
|
||||
(newVal, oldVal) => {
|
||||
if (!oldVal) {
|
||||
this.renderChart(this.chartData, this.extraOptions);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
};
|
||||
493
resources/assets/js/components/Charts/config.js
vendored
Normal file
493
resources/assets/js/components/Charts/config.js
vendored
Normal file
@ -0,0 +1,493 @@
|
||||
import { parseOptions } from "./../../components/Charts/optionHelpers";
|
||||
|
||||
export const Charts = {
|
||||
mode: 'light',//(themeMode) ? themeMode : 'light';
|
||||
fonts: {
|
||||
base: 'Open Sans'
|
||||
},
|
||||
colors: {
|
||||
gray: {
|
||||
100: '#f6f9fc',
|
||||
200: '#e9ecef',
|
||||
300: '#dee2e6',
|
||||
400: '#ced4da',
|
||||
500: '#adb5bd',
|
||||
600: '#8898aa',
|
||||
700: '#525f7f',
|
||||
800: '#32325d',
|
||||
900: '#212529'
|
||||
},
|
||||
theme: {
|
||||
'default': '#172b4d',
|
||||
'primary': '#5e72e4',
|
||||
'secondary': '#f4f5f7',
|
||||
'info': '#11cdef',
|
||||
'success': '#2dce89',
|
||||
'danger': '#f5365c',
|
||||
'warning': '#fb6340'
|
||||
},
|
||||
black: '#12263F',
|
||||
white: '#FFFFFF',
|
||||
transparent: 'transparent',
|
||||
}
|
||||
};
|
||||
|
||||
function chartOptions(Chart) {
|
||||
let { colors, mode, fonts } = Charts;
|
||||
// Options
|
||||
let options = {
|
||||
defaults: {
|
||||
global: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
defaultColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
|
||||
defaultFontColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
|
||||
defaultFontFamily: fonts.base,
|
||||
defaultFontSize: 13,
|
||||
layout: {
|
||||
padding: 0
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 16
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
backgroundColor: colors.theme['primary']
|
||||
},
|
||||
line: {
|
||||
tension: .4,
|
||||
borderWidth: 4,
|
||||
borderColor: colors.theme['primary'],
|
||||
backgroundColor: colors.transparent,
|
||||
borderCapStyle: 'rounded'
|
||||
},
|
||||
rectangle: {
|
||||
backgroundColor: colors.theme['warning']
|
||||
},
|
||||
arc: {
|
||||
backgroundColor: colors.theme['primary'],
|
||||
borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
|
||||
borderWidth: 4
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
}
|
||||
},
|
||||
doughnut: {
|
||||
cutoutPercentage: 83,
|
||||
legendCallback: function (chart) {
|
||||
let data = chart.data;
|
||||
let content = '';
|
||||
|
||||
data.labels.forEach(function (label, index) {
|
||||
let bgColor = data.datasets[0].backgroundColor[index];
|
||||
|
||||
content += '<span class="chart-legend-item">';
|
||||
content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
|
||||
content += label;
|
||||
content += '</span>';
|
||||
});
|
||||
|
||||
return content;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// yAxes
|
||||
Chart.scaleService.updateScaleDefaults('linear', {
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
lineWidth: 0,
|
||||
zeroLineWidth: 0,
|
||||
zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2]
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
padding: 10,
|
||||
callback: function (value) {
|
||||
if (!(value % 10)) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// xAxes
|
||||
Chart.scaleService.updateScaleDefaults('category', {
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false
|
||||
},
|
||||
ticks: {
|
||||
padding: 20
|
||||
},
|
||||
maxBarThickness: 10
|
||||
});
|
||||
|
||||
return options;
|
||||
};
|
||||
|
||||
export function initGlobalOptions(Chart) {
|
||||
parseOptions(Chart, chartOptions(Chart));
|
||||
}
|
||||
|
||||
export const basicOptions = {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
responsive: true
|
||||
};
|
||||
|
||||
export let blueChartOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: Charts.colors.gray[700],
|
||||
zeroLineColor: Charts.colors.gray[700]
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
export let lineChartOptionsBlue = {
|
||||
...basicOptions,
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: 'nearest',
|
||||
intersect: 0,
|
||||
position: 'nearest'
|
||||
},
|
||||
responsive: true,
|
||||
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: '#9e9e9e'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
xAxes: [
|
||||
{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(29,140,248,0.1)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: '#9e9e9e'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export let barChartOptionsGradient = {
|
||||
...basicOptions,
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: 'nearest',
|
||||
intersect: 0,
|
||||
position: 'nearest'
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(253,93,147,0.1)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 60,
|
||||
suggestedMax: 125,
|
||||
padding: 20,
|
||||
fontColor: '#9e9e9e'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(253,93,147,0.1)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: '#9e9e9e'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export let pieChartOptions = {
|
||||
...basicOptions,
|
||||
cutoutPercentage: 70,
|
||||
tooltips: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
titleFontColor: '#333',
|
||||
bodyFontColor: '#666',
|
||||
bodySpacing: 4,
|
||||
xPadding: 12,
|
||||
mode: 'nearest',
|
||||
intersect: 0,
|
||||
position: 'nearest'
|
||||
},
|
||||
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: 0,
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
zeroLineColor: 'transparent',
|
||||
color: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
xAxes: [
|
||||
{
|
||||
display: 0,
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(255,255,255,0.1)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
7
resources/assets/js/components/Charts/globalOptionsMixin.js
vendored
Normal file
7
resources/assets/js/components/Charts/globalOptionsMixin.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import Chart from 'chart.js';
|
||||
import { initGlobalOptions } from "./../../components/Charts/config";
|
||||
export default {
|
||||
mounted() {
|
||||
initGlobalOptions(Chart);
|
||||
}
|
||||
}
|
||||
10
resources/assets/js/components/Charts/optionHelpers.js
vendored
Normal file
10
resources/assets/js/components/Charts/optionHelpers.js
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
// Parse global options
|
||||
export function parseOptions(parent, options) {
|
||||
for (let item in options) {
|
||||
if (typeof options[item] !== 'object') {
|
||||
parent[item] = options[item];
|
||||
} else {
|
||||
parseOptions(parent[item], options[item]);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user