mirror of https://github.com/ColorlibHQ/AdminLTE
⚡ some files
Daniel
parent
ca97a4a48d
commit
1d56279d3f
|
|
@ -19,43 +19,6 @@ nbproject/private
|
||||||
node_modules/
|
node_modules/
|
||||||
bower_components/
|
bower_components/
|
||||||
|
|
||||||
# Plugins
|
|
||||||
/plugins/**/*.html
|
|
||||||
/plugins/**/*.less
|
|
||||||
/plugins/**/*.md
|
|
||||||
/plugins/**/*.scss
|
|
||||||
/plugins/**/*.ts
|
|
||||||
/plugins/**/bower.json
|
|
||||||
/plugins/**/package.json
|
|
||||||
/plugins/**/webpack.config.js
|
|
||||||
/plugins/**/demo/
|
|
||||||
/plugins/**/demos/
|
|
||||||
/plugins/**/dev/
|
|
||||||
/plugins/**/example/
|
|
||||||
/plugins/**/examples/
|
|
||||||
/plugins/**/less/
|
|
||||||
/plugins/**/test/
|
|
||||||
/plugins/**/tests/
|
|
||||||
/plugins/daterangepicker/website/
|
|
||||||
/plugins/daterangepicker/drp.png
|
|
||||||
/plugins/daterangepicker/moment.min.js
|
|
||||||
/plugins/daterangepicker/package.js
|
|
||||||
/plugins/daterangepicker/website.css
|
|
||||||
/plugins/daterangepicker/website.js
|
|
||||||
/plugins/jquery-ui/AUTHORS.txt
|
|
||||||
/plugins/jquery-ui/external/jquery/jquery.js
|
|
||||||
/plugins/inputmask/bindings/
|
|
||||||
/plugins/flot/plugins/jquery*.js
|
|
||||||
!/plugins/flot/plugins/jquery.flot.*.js
|
|
||||||
!/plugins/**/LICENSE.md
|
|
||||||
!/plugins/**/LICENSE.txt
|
|
||||||
!/plugins/**/license.md
|
|
||||||
!/plugins/**/license.txt
|
|
||||||
!/plugins/**/LICENSE
|
|
||||||
!/plugins/**/license
|
|
||||||
!/plugins/**/COPYING
|
|
||||||
|
|
||||||
|
|
||||||
# Docs
|
# Docs
|
||||||
/docs/_site/
|
/docs/_site/
|
||||||
/docs/vendor/
|
/docs/vendor/
|
||||||
|
|
|
||||||
|
|
@ -147,7 +147,7 @@ const html = () => src([paths.src.html])
|
||||||
.pipe(dest(paths.temp.html))
|
.pipe(dest(paths.temp.html))
|
||||||
.pipe(browserSync.stream())
|
.pipe(browserSync.stream())
|
||||||
|
|
||||||
const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'])
|
const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'], { since: lastRun(lintHtml) })
|
||||||
.pipe(validator())
|
.pipe(validator())
|
||||||
|
|
||||||
const serve = () => {
|
const serve = () => {
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@
|
||||||
"docs-lint": "node -v",
|
"docs-lint": "node -v",
|
||||||
"lint": "npx gulp lint && npm run lockfile-lint",
|
"lint": "npx gulp lint && npm run lockfile-lint",
|
||||||
"compile": "npx gulp compile",
|
"compile": "npx gulp compile",
|
||||||
"production": "npx gulp production"
|
"production": "npx gulp production",
|
||||||
|
"dev": "npx gulp"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"css",
|
"css",
|
||||||
|
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
/* eslint-disable no-undef */
|
|
||||||
/* Chart.js Charts */
|
|
||||||
// Sales chart
|
|
||||||
const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
|
||||||
|
|
||||||
const salesChartData = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Digital Goods',
|
|
||||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
|
||||||
borderColor: 'rgba(60,141,188,0.8)',
|
|
||||||
fill: true,
|
|
||||||
tension: 0.4,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: '#3b8bba',
|
|
||||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Electronics',
|
|
||||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
borderColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
fill: true,
|
|
||||||
tension: 0.4,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
pointStrokeColor: '#c1c7d1',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const salesChartOptions = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This will get the first returned node in the jQuery collection.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
|
||||||
type: 'line',
|
|
||||||
data: salesChartData,
|
|
||||||
options: salesChartOptions
|
|
||||||
})
|
|
||||||
|
|
||||||
// Donut Chart
|
|
||||||
const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
|
||||||
const pieData = {
|
|
||||||
labels: [
|
|
||||||
'Instore Sales',
|
|
||||||
'Download Sales',
|
|
||||||
'Mail-Order Sales'
|
|
||||||
],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [30, 12, 20],
|
|
||||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
const pieOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true
|
|
||||||
}
|
|
||||||
// Create pie or douhnut chart
|
|
||||||
// You can switch between pie and douhnut using the method below.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
|
||||||
type: 'doughnut',
|
|
||||||
data: pieData,
|
|
||||||
options: pieOptions
|
|
||||||
})
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
/* eslint-disable no-undef */
|
|
||||||
/* ChartJS
|
|
||||||
* -------
|
|
||||||
* Here we will create a few charts using ChartJS
|
|
||||||
*/
|
|
||||||
|
|
||||||
//-----------------------
|
|
||||||
// - MONTHLY SALES CHART -
|
|
||||||
//-----------------------
|
|
||||||
|
|
||||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
|
||||||
const salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
|
||||||
|
|
||||||
const salesChartData = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Digital Goods',
|
|
||||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
|
||||||
borderColor: 'rgba(60,141,188,0.8)',
|
|
||||||
fill: true,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: '#3b8bba',
|
|
||||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
|
||||||
data: [28, 48, 40, 19, 86, 27, 90]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Electronics',
|
|
||||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
borderColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
fill: true,
|
|
||||||
pointRadius: 0,
|
|
||||||
pointColor: 'rgba(210, 214, 222, 1)',
|
|
||||||
pointStrokeColor: '#c1c7d1',
|
|
||||||
pointHighlightFill: '#fff',
|
|
||||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const salesChartOptions = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
responsive: true,
|
|
||||||
tension: 0.4,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This will get the first returned node in the jQuery collection.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const salesChart = new Chart(salesChartCanvas, {
|
|
||||||
type: 'line',
|
|
||||||
data: salesChartData,
|
|
||||||
options: salesChartOptions
|
|
||||||
})
|
|
||||||
|
|
||||||
//---------------------------
|
|
||||||
// - END MONTHLY SALES CHART -
|
|
||||||
//---------------------------
|
|
||||||
|
|
||||||
//-------------
|
|
||||||
// - PIE CHART -
|
|
||||||
//-------------
|
|
||||||
|
|
||||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
|
||||||
const pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
|
||||||
|
|
||||||
const pieData = {
|
|
||||||
labels: [
|
|
||||||
'Chrome',
|
|
||||||
'IE',
|
|
||||||
'FireFox',
|
|
||||||
'Safari',
|
|
||||||
'Opera',
|
|
||||||
'Navigator'
|
|
||||||
],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [700, 500, 400, 600, 300, 100],
|
|
||||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
const pieOptions = {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Create pie or douhnut chart
|
|
||||||
// You can switch between pie and douhnut using the method below.
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const pieChart = new Chart(pieChartCanvas, {
|
|
||||||
type: 'doughnut',
|
|
||||||
data: pieData,
|
|
||||||
options: pieOptions
|
|
||||||
})
|
|
||||||
|
|
||||||
//-----------------
|
|
||||||
// - END PIE CHART -
|
|
||||||
//-----------------
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
/* global Chart:false */
|
|
||||||
|
|
||||||
const ticksStyle = {
|
|
||||||
fontColor: '#495057',
|
|
||||||
fontStyle: 'bold'
|
|
||||||
}
|
|
||||||
|
|
||||||
const mode = 'index'
|
|
||||||
const intersect = true
|
|
||||||
|
|
||||||
const salesChartSelector = document.querySelector('#sales-chart')
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const salesChart = new Chart(salesChartSelector, {
|
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
|
||||||
datasets: [{
|
|
||||||
label: 'My First Dataset',
|
|
||||||
data: [65, 59, 80, 81, 56, 55, 40],
|
|
||||||
backgroundColor: [
|
|
||||||
'rgba(255, 99, 132, 0.2)',
|
|
||||||
'rgba(255, 159, 64, 0.2)',
|
|
||||||
'rgba(255, 205, 86, 0.2)',
|
|
||||||
'rgba(75, 192, 192, 0.2)',
|
|
||||||
'rgba(54, 162, 235, 0.2)',
|
|
||||||
'rgba(153, 102, 255, 0.2)',
|
|
||||||
'rgba(201, 203, 207, 0.2)'
|
|
||||||
],
|
|
||||||
borderColor: [
|
|
||||||
'rgb(255, 99, 132)',
|
|
||||||
'rgb(255, 159, 64)',
|
|
||||||
'rgb(255, 205, 86)',
|
|
||||||
'rgb(75, 192, 192)',
|
|
||||||
'rgb(54, 162, 235)',
|
|
||||||
'rgb(153, 102, 255)',
|
|
||||||
'rgb(201, 203, 207)'
|
|
||||||
],
|
|
||||||
borderWidth: 1
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
beginAtZero: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const visitorsChartSelector = document.querySelector('#visitors-chart')
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
const visitorsChart = new Chart(visitorsChartSelector, {
|
|
||||||
data: {
|
|
||||||
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
|
|
||||||
datasets: [{
|
|
||||||
type: 'line',
|
|
||||||
data: [100, 120, 170, 167, 180, 177, 160],
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: '#007bff',
|
|
||||||
pointBorderColor: '#007bff',
|
|
||||||
pointBackgroundColor: '#007bff'
|
|
||||||
// pointHoverBackgroundColor: '#007bff',
|
|
||||||
// pointHoverBorderColor : '#007bff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'line',
|
|
||||||
data: [60, 80, 70, 67, 80, 77, 100],
|
|
||||||
backgroundColor: 'tansparent',
|
|
||||||
borderColor: '#ced4da',
|
|
||||||
pointBorderColor: '#ced4da',
|
|
||||||
pointBackgroundColor: '#ced4da'
|
|
||||||
// pointHoverBackgroundColor: '#ced4da',
|
|
||||||
// pointHoverBorderColor : '#ced4da'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
tooltip: {
|
|
||||||
mode,
|
|
||||||
intersect
|
|
||||||
},
|
|
||||||
hover: {
|
|
||||||
mode,
|
|
||||||
intersect
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
// display: false,
|
|
||||||
grid: {
|
|
||||||
display: true,
|
|
||||||
lineWidth: '4px',
|
|
||||||
color: 'rgba(0, 0, 0, .2)',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: Object.assign({
|
|
||||||
beginAtZero: true,
|
|
||||||
suggestedMax: 200
|
|
||||||
}, ticksStyle)
|
|
||||||
}],
|
|
||||||
xAxes: [{
|
|
||||||
display: true,
|
|
||||||
grid: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
ticks: ticksStyle
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// lgtm [js/unused-local-variable]
|
|
||||||
110
src/index.html
110
src/index.html
|
|
@ -364,7 +364,113 @@
|
||||||
|
|
||||||
<!-- ChartJS -->
|
<!-- ChartJS -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||||
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
|
<script>
|
||||||
<script src="./assets/js/dashboard.js"></script>
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
|
/* Chart.js Charts */
|
||||||
|
// Sales chart
|
||||||
|
(function () {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
||||||
|
|
||||||
|
var salesChartData = {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Digital Goods',
|
||||||
|
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||||
|
borderColor: 'rgba(60,141,188,0.8)',
|
||||||
|
fill: true,
|
||||||
|
tension: 0.4,
|
||||||
|
pointRadius: 0,
|
||||||
|
pointColor: '#3b8bba',
|
||||||
|
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Electronics',
|
||||||
|
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
borderColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
fill: true,
|
||||||
|
tension: 0.4,
|
||||||
|
pointRadius: 0,
|
||||||
|
pointColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
pointStrokeColor: '#c1c7d1',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var salesChartOptions = {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: {
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxes: {
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This will get the first returned node in the js collection.
|
||||||
|
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||||
|
type: 'line',
|
||||||
|
data: salesChartData,
|
||||||
|
options: salesChartOptions
|
||||||
|
})
|
||||||
|
|
||||||
|
// Donut Chart
|
||||||
|
var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
||||||
|
var pieData = {
|
||||||
|
labels: [
|
||||||
|
'Instore Sales',
|
||||||
|
'Download Sales',
|
||||||
|
'Mail-Order Sales'
|
||||||
|
],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [30, 12, 20],
|
||||||
|
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
var pieOptions = {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
responsive: true
|
||||||
|
}
|
||||||
|
// Create pie or douhnut chart
|
||||||
|
// You can switch between pie and douhnut using the method below.
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||||
|
type: 'doughnut',
|
||||||
|
data: pieData,
|
||||||
|
options: pieOptions
|
||||||
|
})
|
||||||
|
})()
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
128
src/index2.html
128
src/index2.html
|
|
@ -838,7 +838,131 @@
|
||||||
|
|
||||||
<!-- ChartJS -->
|
<!-- ChartJS -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||||
<!-- AdminLTE dashboard2 demo (This is only for demo purposes) -->
|
|
||||||
<script src="./assets/js/dashboard2.js"></script>
|
<script>
|
||||||
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
|
/* ChartJS
|
||||||
|
* -------
|
||||||
|
* Here we will create a few charts using ChartJS
|
||||||
|
*/
|
||||||
|
|
||||||
|
//-----------------------
|
||||||
|
// - MONTHLY SALES CHART -
|
||||||
|
//-----------------------
|
||||||
|
(function () {
|
||||||
|
'use strict'
|
||||||
|
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||||
|
var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
||||||
|
|
||||||
|
var salesChartData = {
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Digital Goods',
|
||||||
|
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||||
|
borderColor: 'rgba(60,141,188,0.8)',
|
||||||
|
fill: true,
|
||||||
|
pointRadius: 0,
|
||||||
|
pointColor: '#3b8bba',
|
||||||
|
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||||
|
data: [28, 48, 40, 19, 86, 27, 90]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Electronics',
|
||||||
|
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
borderColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
fill: true,
|
||||||
|
pointRadius: 0,
|
||||||
|
pointColor: 'rgba(210, 214, 222, 1)',
|
||||||
|
pointStrokeColor: '#c1c7d1',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var salesChartOptions = {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
responsive: true,
|
||||||
|
tension: 0.4,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: {
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxes: {
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This will get the first returned node in the js collection.
|
||||||
|
var salesChart = new Chart(salesChartCanvas, {
|
||||||
|
type: 'line',
|
||||||
|
data: salesChartData,
|
||||||
|
options: salesChartOptions
|
||||||
|
})
|
||||||
|
|
||||||
|
//---------------------------
|
||||||
|
// - END MONTHLY SALES CHART -
|
||||||
|
//---------------------------
|
||||||
|
|
||||||
|
//-------------
|
||||||
|
// - PIE CHART -
|
||||||
|
//-------------
|
||||||
|
|
||||||
|
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||||
|
var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||||
|
|
||||||
|
var pieData = {
|
||||||
|
labels: [
|
||||||
|
'Chrome',
|
||||||
|
'IE',
|
||||||
|
'FireFox',
|
||||||
|
'Safari',
|
||||||
|
'Opera',
|
||||||
|
'Navigator'
|
||||||
|
],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
data: [700, 500, 400, 600, 300, 100],
|
||||||
|
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
var pieOptions = {
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Create pie or douhnut chart
|
||||||
|
// You can switch between pie and douhnut using the method below.
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
var pieChart = new Chart(pieChartCanvas, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: pieData,
|
||||||
|
options: pieOptions
|
||||||
|
})
|
||||||
|
})()
|
||||||
|
//-----------------
|
||||||
|
// - END PIE CHART -
|
||||||
|
//-----------------
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
123
src/index3.html
123
src/index3.html
|
|
@ -303,5 +303,128 @@
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
|
||||||
<!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
|
<!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
|
||||||
<script src="./assets/js/dashboard3.js"></script>
|
<script src="./assets/js/dashboard3.js"></script>
|
||||||
|
<script>
|
||||||
|
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||||
|
// IT'S ALL JUST JUNK FOR DEMO
|
||||||
|
// ++++++++++++++++++++++++++++++++++++++++++
|
||||||
|
|
||||||
|
/* global Chart:false */
|
||||||
|
(function () {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
var ticksStyle = {
|
||||||
|
fontColor: '#495057',
|
||||||
|
fontStyle: 'bold'
|
||||||
|
}
|
||||||
|
|
||||||
|
var mode = 'index'
|
||||||
|
var intersect = true
|
||||||
|
|
||||||
|
var salesChartSelector = document.querySelector('#sales-chart')
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
var salesChart = new Chart(salesChartSelector, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
||||||
|
datasets: [{
|
||||||
|
label: 'My First Dataset',
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 40],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(255, 99, 132, 0.2)',
|
||||||
|
'rgba(255, 159, 64, 0.2)',
|
||||||
|
'rgba(255, 205, 86, 0.2)',
|
||||||
|
'rgba(75, 192, 192, 0.2)',
|
||||||
|
'rgba(54, 162, 235, 0.2)',
|
||||||
|
'rgba(153, 102, 255, 0.2)',
|
||||||
|
'rgba(201, 203, 207, 0.2)'
|
||||||
|
],
|
||||||
|
borderColor: [
|
||||||
|
'rgb(255, 99, 132)',
|
||||||
|
'rgb(255, 159, 64)',
|
||||||
|
'rgb(255, 205, 86)',
|
||||||
|
'rgb(75, 192, 192)',
|
||||||
|
'rgb(54, 162, 235)',
|
||||||
|
'rgb(153, 102, 255)',
|
||||||
|
'rgb(201, 203, 207)'
|
||||||
|
],
|
||||||
|
borderWidth: 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var visitorsChartSelector = document.querySelector('#visitors-chart')
|
||||||
|
var visitorsChart = new Chart(visitorsChartSelector, {
|
||||||
|
data: {
|
||||||
|
labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
|
||||||
|
datasets: [{
|
||||||
|
type: 'line',
|
||||||
|
data: [100, 120, 170, 167, 180, 177, 160],
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
borderColor: '#007bff',
|
||||||
|
pointBorderColor: '#007bff',
|
||||||
|
pointBackgroundColor: '#007bff'
|
||||||
|
// pointHoverBackgroundColor: '#007bff',
|
||||||
|
// pointHoverBorderColor : '#007bff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [60, 80, 70, 67, 80, 77, 100],
|
||||||
|
backgroundColor: 'tansparent',
|
||||||
|
borderColor: '#ced4da',
|
||||||
|
pointBorderColor: '#ced4da',
|
||||||
|
pointBackgroundColor: '#ced4da'
|
||||||
|
// pointHoverBackgroundColor: '#ced4da',
|
||||||
|
// pointHoverBorderColor : '#ced4da'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
tooltip: {
|
||||||
|
mode: mode,
|
||||||
|
intersect: intersect
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
mode: mode,
|
||||||
|
intersect: intersect
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
yAxes: {
|
||||||
|
// display: false,
|
||||||
|
gridLines: {
|
||||||
|
display: true,
|
||||||
|
lineWidth: '4px',
|
||||||
|
color: 'rgba(0, 0, 0, .2)',
|
||||||
|
zeroLineColor: 'transparent'
|
||||||
|
},
|
||||||
|
ticks: Object.assign({
|
||||||
|
beginAtZero: true,
|
||||||
|
suggestedMax: 200
|
||||||
|
}, ticksStyle)
|
||||||
|
},
|
||||||
|
xAxes: {
|
||||||
|
display: true,
|
||||||
|
gridLines: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: ticksStyle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue