538 lines
12 KiB
JavaScript
538 lines
12 KiB
JavaScript
/* global Chart, coreui */
|
|
|
|
/**
|
|
* --------------------------------------------------------------------------
|
|
* CoreUI Boostrap Admin Template widgets.js
|
|
* Licensed under MIT (https://github.com/coreui/coreui-free-bootstrap-admin-template/blob/main/LICENSE)
|
|
* --------------------------------------------------------------------------
|
|
*/
|
|
|
|
// Disable the on-canvas tooltip
|
|
Chart.defaults.pointHitDetectionRadius = 1
|
|
Chart.defaults.plugins.tooltip.enabled = false
|
|
Chart.defaults.plugins.tooltip.mode = 'index'
|
|
Chart.defaults.plugins.tooltip.position = 'nearest'
|
|
Chart.defaults.plugins.tooltip.external = coreui.ChartJS.customTooltips
|
|
Chart.defaults.defaultFontColor = coreui.Utils.getStyle('--cui-body-color')
|
|
|
|
document.documentElement.addEventListener('ColorSchemeChange', () => {
|
|
cardChart1.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-primary')
|
|
cardChart2.data.datasets[0].pointBackgroundColor = coreui.Utils.getStyle('--cui-info')
|
|
|
|
cardChart1.update()
|
|
cardChart2.update()
|
|
})
|
|
|
|
const cardChart1 = new Chart(document.getElementById('card-chart1'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
pointBackgroundColor: coreui.Utils.getStyle('--cui-primary'),
|
|
data: [65, 59, 84, 84, 51, 55, 40]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
border: {
|
|
display: false
|
|
},
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
min: 30,
|
|
max: 89,
|
|
display: false,
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 1,
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 4,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
const cardChart2 = new Chart(document.getElementById('card-chart2'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
pointBackgroundColor: coreui.Utils.getStyle('--cui-info'),
|
|
data: [1, 18, 9, 17, 34, 22, 11]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
border: {
|
|
display: false
|
|
},
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
min: -9,
|
|
max: 39,
|
|
display: false,
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 1
|
|
},
|
|
point: {
|
|
radius: 4,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const cardChart3 = new Chart(document.getElementById('card-chart3'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(255,255,255,.2)',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
data: [78, 81, 80, 45, 34, 12, 40],
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 2,
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const cardChart4 = new Chart(document.getElementById('card-chart4'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(255,255,255,.2)',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
|
|
barPercentage: 0.6
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
drawTicks: false
|
|
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
border: {
|
|
display: false
|
|
},
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false,
|
|
drawTicks: false
|
|
},
|
|
ticks: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// Random Numbers
|
|
// eslint-disable-next-line no-mixed-operators
|
|
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart1 = new Chart(document.getElementById('sparkline-chart-1'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: coreui.Utils.getStyle('--cui-primary'),
|
|
borderColor: 'transparent',
|
|
borderWidth: 1,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart2 = new Chart(document.getElementById('sparkline-chart-2'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: coreui.Utils.getStyle('--cui-warning'),
|
|
borderColor: 'transparent',
|
|
borderWidth: 1,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart3 = new Chart(document.getElementById('sparkline-chart-3'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: coreui.Utils.getStyle('--cui-success'),
|
|
borderColor: 'transparent',
|
|
borderWidth: 1,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart4 = new Chart(document.getElementById('sparkline-chart-4'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: 'transparent',
|
|
borderColor: coreui.Utils.getStyle('--cui-info'),
|
|
borderWidth: 2,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
elements: {
|
|
line: {
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 0
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart5 = new Chart(document.getElementById('sparkline-chart-5'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: 'transparent',
|
|
borderColor: coreui.Utils.getStyle('--cui-success'),
|
|
borderWidth: 2,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
elements: {
|
|
line: {
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 0
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const sparklineChart6 = new Chart(document.getElementById('sparkline-chart-6'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: 'transparent',
|
|
borderColor: coreui.Utils.getStyle('--cui-danger'),
|
|
borderWidth: 2,
|
|
data: [random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100), random(40, 100)]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
elements: {
|
|
line: {
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 0
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
const brandBoxChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
|
|
const brandBoxChartOptions = {
|
|
elements: {
|
|
line: {
|
|
tension: 0.4
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4,
|
|
hoverBorderWidth: 3
|
|
}
|
|
},
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false
|
|
},
|
|
y: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const brandBoxChart1 = new Chart(document.getElementById('social-box-chart-1'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: brandBoxChartLabels,
|
|
datasets: [{
|
|
backgroundColor: 'rgba(255,255,255,.1)',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: [65, 59, 84, 84, 51, 55, 40],
|
|
fill: true
|
|
}]
|
|
},
|
|
options: brandBoxChartOptions
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const brandBoxChart2 = new Chart(document.getElementById('social-box-chart-2'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: brandBoxChartLabels,
|
|
datasets: [{
|
|
backgroundColor: 'rgba(255,255,255,.1)',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: [1, 13, 9, 17, 34, 41, 38],
|
|
fill: true
|
|
}]
|
|
},
|
|
options: brandBoxChartOptions
|
|
})
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
const brandBoxChart3 = new Chart(document.getElementById('social-box-chart-3'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: brandBoxChartLabels,
|
|
datasets: [{
|
|
backgroundColor: 'rgba(255,255,255,.1)',
|
|
borderColor: 'rgba(255,255,255,.55)',
|
|
pointHoverBackgroundColor: '#fff',
|
|
borderWidth: 2,
|
|
data: [78, 81, 80, 45, 34, 12, 40],
|
|
fill: true
|
|
}]
|
|
},
|
|
options: brandBoxChartOptions
|
|
})
|