TechOdysseyDesigns/TechOdyssey_Designs_Dashboard
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Inisital Asset Commit

Browse Source
This commit is contained in:
Hickmeister
2025-01-03 23:10:59 +00:00
parent 18cb77cb3d
commit b1be0cb849
833 changed files with 159911 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
assets/plugins/chartjs/js/Chart.extension.js Normal file
View File

@@ -0,0 +1,130 @@
//
// Chart extension for making the bars rounded
// Code from: https://codepen.io/jedtrow/full/ygRYgo
//
Chart.elements.Rectangle.prototype.draw = function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped, radius;
var borderWidth = vm.borderWidth;
// Set Radius Here
// If radius is large enough to cause drawing errors a max radius is imposed
var cornerRadius = 6;
if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;
// Corner points, from bottom-left to bottom-right clockwise
// | 1 2 |
// | 0 3 |
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
// Find first (starting) corner with fallback to 'bottom'
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}
function cornerAt(index) {
return corners[(startCorner + index) % 4];
}
// Draw rectangle from 'startCorner'
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0
}
nextCorner = cornerAt(nextCornerId);
width = corners[2][0] - corners[1][0];
height = corners[0][1] - corners[1][1];
x = corners[1][0];
y = corners[1][1];
var radius = cornerRadius;
// Fix radius being too large
if (radius > height / 2) {
radius = height / 2;
}
if (radius > width / 2) {
radius = width / 2;
}
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
}
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
};

20
assets/plugins/chartjs/js/chart.js Normal file
View File

File diff suppressed because one or more lines are too long

408
assets/plugins/chartjs/js/chartjs-custom.js Normal file
View File

@@ -0,0 +1,408 @@
$(function() {
// chart1
var ctx = document.getElementById('chart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
datasets: [{
label: 'Google',
data: [6, 20, 14, 12, 17, 8, 10],
backgroundColor: [
'#008cff'
],
lineTension: 0.4,
borderColor: [
'#008cff'
],
borderWidth: 3
},
{
label: 'Facebook',
data: [5, 30, 16, 23, 8, 14, 11],
backgroundColor: [
'#fd3550'
],
tension: 0.4,
borderColor: [
'#fd3550'
],
borderWidth: 3
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// chart2
var ctx = document.getElementById('chart2').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
datasets: [{
label: 'Google',
data: [18, 25, 14, 12, 17, 8, 10],
backgroundColor: [
'#0d6efd'
],
lineTension: 0,
borderColor: [
'#0d6efd'
],
borderWidth: 3
},
{
label: 'Facebook',
data: [12, 30, 16, 23, 8, 14, 11],
backgroundColor: [
'#15ca20'
],
tension: 0,
borderColor: [
'#15ca20'
],
borderWidth: 3
}]
},
options: {
maintainAspectRatio: false,
barPercentage: 0.6,
categoryPercentage: 0.5,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// chart3
var ctx = document.getElementById('chart3').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'#0d6efd',
'#6f42c1',
'#d63384',
'#fd7e14',
'#15ca20',
'#0dcaf0'
],
borderWidth: 1.5
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
}
});
// chart4
var ctx = document.getElementById('chart4').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'#0d6efd',
'#6f42c1',
'#d63384',
'#fd7e14',
'#15ca20',
'#0dcaf0'
],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
}
});
// chart5
var ctx = document.getElementById('chart5').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
elements: {
line: {
borderWidth: 3
}
}
},
});
// chart6
var ctx = document.getElementById('chart6').getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: [
'Red',
'Purple',
'Yellow',
'Grey',
'Green'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'#0d6efd',
'#6f42c1',
'#d63384',
'#fd7e14',
'#15ca20',
'#0dcaf0'
],
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
elements: {
line: {
borderWidth: 3
}
}
},
});
// chart7
var ctx = document.getElementById('chart7').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
datasets: [{
label: 'Google',
data: [18, 25, 14, 12, 17, 8, 10],
backgroundColor: [
'#fd3550'
],
lineTension: 0,
borderColor: [
'#fd3550'
],
borderWidth: 0
}
]
},
options: {
maintainAspectRatio: false,
barPercentage: 0.5,
categoryPercentage: 0.7,
indexAxis: 'y',
plugins: {
legend: {
position:'bottom',
display: true,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// chart8
var ctx = document.getElementById('chart8').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
datasets: [{
type: 'bar',
label: 'Google',
data: [6, 20, 14, 12, 17, 8, 10],
backgroundColor: [
'#008cff'
],
lineTension: 0.4,
borderColor: [
'#008cff'
],
borderWidth: 1
},
{
type: 'line',
label: 'Facebook',
data: [5, 30, 16, 23, 8, 14, 11],
backgroundColor: [
'#fd3550'
],
tension: 0.4,
borderColor: [
'#fd3550'
],
borderWidth: 4
}]
},
options: {
maintainAspectRatio: false,
barPercentage: 0.5,
categoryPercentage: 0.5,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// chart9
var ctx = document.getElementById('chart9').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
datasets: [{
label: 'Facebook',
data: [5, 30, 16, 23, 8, 14, 2],
backgroundColor: [
'#15ca20'
],
fill: {
target: 'origin',
above: 'rgb(21 202 32 / 20%)', // Area will be red above the origin
//below: 'rgb(21 202 32 / 100%)' // And blue below the origin
},
tension: 0.4,
borderColor: [
'#15ca20'
],
borderWidth: 4
}]
},
options: {
maintainAspectRatio: false,
barPercentage: 0.5,
categoryPercentage: 0.5,
plugins: {
legend: {
position:'bottom',
display: true,
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
});