Skip to content

D
dashboard
Commit 3dbe9c23 by Anoop
Options

cal

parent d664687b
Showing with 157 additions and 20 deletions
index.html
......@@ -113,16 +113,11 @@
<li><a href="#"><i class="bi bi-input-cursor-text"></i>Form</a></li>
</ul>
</nav>
<!-- <footer class="navigator-footer">
<span class="shadow_bg"></span>
<a href="#" class="brandings">Create Tasks</a>
<a href="#" class="add-projects"><span class="scr-text">Add Projects</span></a>
</footer> -->
</aside>
<!-- Main Body -->
<main class="app-body container-fluid">
<div class="row">
<div class="row gy-5">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
......@@ -133,6 +128,18 @@
</nav>
</div>
<div class="col-md-6">
<h2 class="text-center mb-3">Bar Chart</h2>
<canvas id="chart_bar" width="400" height="200"></canvas>
</div>
<div class="col-md-6">
<h2 class="text-center mb-3">Line Chart</h2>
<canvas id="chart_line" width="400" height="200"></canvas>
</div>
<div class="col-md-6">
<h2 class="text-center mb-3">Line Chart</h2>
<canvas id="chart_doughnut" width="400" height="200"></canvas>
</div>
<div class="col-md-6">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
......@@ -175,9 +182,10 @@
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/chart.js/dist/chart.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
......
js/script.js
$('.sidebar_toggle').click(function(){
$('.sidebar_toggle').click(function () {
$(".app-sidebar").toggleClass("expanded");
$(this).toggleClass("active");
})
$(".page-links .dropdown-toggle").click(function(){
$(".page-links .dropdown-toggle").click(function () {
$(this).siblings('.sub-menu').slideToggle(200);
})
\ No newline at end of file
})
// charts
function barChart() {
let ctx = document.getElementById('chart_bar').getContext('2d');
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
barChart();
function lineChart() {
let ctx = document.getElementById('chart_line').getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
lineChart();
function doughnutChart() {
let ctx = document.getElementById('chart_doughnut').getContext('2d');
let myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
doughnutChart();
\ No newline at end of file
package-lock.json
......@@ -28,17 +28,16 @@
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==",
"dev": true
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"dev": true
"fullcalendar-scheduler": {
"version": "5.11.0",
"resolved": "https://registry.npmjs.org/fullcalendar-scheduler/-/fullcalendar-scheduler-5.11.0.tgz",
"integrity": "sha512-KN7W6QXfBEcYRkNz6nNPXSN4fcPt43EFW+V0HsvHR9oZlfyRqaLxrGMLb+t/0Q4lmP8liAzHZofGqtvaof/LmA=="
},
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"dev": true
}
}
}
}
package.json
......@@ -19,5 +19,8 @@
"chart.js": "^3.8.0",
"jquery": "^3.6.0",
"poper": "^0.1.1"
},
"dependencies": {
"fullcalendar-scheduler": "^5.11.0"
}
}
scss/main.scss
......@@ -171,7 +171,7 @@
max-width: 300px;
color: var(--light-color);
background: var(--sidebar-bg);
height: calc(100vh - 95px);
min-height: calc(100vh - 95px);
transition: all ease-in-out 0.3s;
a {
color: var(--light-color);
......@@ -197,6 +197,9 @@
padding: 15px;
text-decoration: none;
font-size: 1rem;
text-overflow: '...';
text-overflow: ellipsis;
overflow: hidden;
.bi {
margin-right: 15px;
display: inline-block;
......@@ -244,7 +247,7 @@
.page-links li {
position: relative;
&:hover {
a{
a {
background: var(--submenu-bg);
}
.sub-menu {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment