github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

⚡ some files

pull/4075/head
Daniel 2021-11-07 23:42:17 +05:30
parent ca97a4a48d
commit 1d56279d3f
9 changed files with 360 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
.gitignore vendored
View File

@ -19,43 +19,6 @@ nbproject/private
node_modules/
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/_site/
/docs/vendor/

2
gulpfile.js
View File

@ -147,7 +147,7 @@ const html = () => src([paths.src.html])
.pipe(dest(paths.temp.html))
.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())
const serve = () => {

3
package.json
View File

@ -12,7 +12,8 @@
"docs-lint": "node -v",
"lint": "npx gulp lint && npm run lockfile-lint",
"compile": "npx gulp compile",
"production": "npx gulp production"
"production": "npx gulp production",
"dev": "npx gulp"
},
"keywords": [
"css",

99
src/assets/js/dashboard.js
View File

@ -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
})

120
src/assets/js/dashboard2.js
View File

@ -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 -
//-----------------

117
src/assets/js/dashboard3.js
View File

@ -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
View File

@ -364,7 +364,113 @@
<!-- ChartJS -->
<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 src="./assets/js/dashboard.js"></script>
<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>
</html>

128
src/index2.html
View File

@ -838,7 +838,131 @@
<!-- ChartJS -->
<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>
</html>

123
src/index3.html
View File

@ -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>
<!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
<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>
</html>