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 @@ ...@@ -113,16 +113,11 @@
<li><a href="#"><i class="bi bi-input-cursor-text"></i>Form</a></li> <li><a href="#"><i class="bi bi-input-cursor-text"></i>Form</a></li>
</ul> </ul>
</nav> </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> </aside>
<!-- Main Body --> <!-- Main Body -->
<main class="app-body container-fluid"> <main class="app-body container-fluid">
<div class="row"> <div class="row gy-5">
<div class="col-12"> <div class="col-12">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
...@@ -133,6 +128,18 @@ ...@@ -133,6 +128,18 @@
</nav> </nav>
</div> </div>
<div class="col-md-6"> <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"> <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> <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label> <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
...@@ -175,9 +182,10 @@ ...@@ -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/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> <script src="js/script.js"></script>
</body> </body>
......
js/script.js
$('.sidebar_toggle').click(function(){ $('.sidebar_toggle').click(function () {
$(".app-sidebar").toggleClass("expanded"); $(".app-sidebar").toggleClass("expanded");
$(this).toggleClass("active"); $(this).toggleClass("active");
}) })
$(".page-links .dropdown-toggle").click(function(){ $(".page-links .dropdown-toggle").click(function () {
$(this).siblings('.sub-menu').slideToggle(200); $(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 @@ ...@@ -28,17 +28,16 @@
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==", "integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==",
"dev": true "dev": true
}, },
"escape-string-regexp": { "fullcalendar-scheduler": {
"version": "1.0.5", "version": "5.11.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "resolved": "https://registry.npmjs.org/fullcalendar-scheduler/-/fullcalendar-scheduler-5.11.0.tgz",
"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", "integrity": "sha512-KN7W6QXfBEcYRkNz6nNPXSN4fcPt43EFW+V0HsvHR9oZlfyRqaLxrGMLb+t/0Q4lmP8liAzHZofGqtvaof/LmA=="
"dev": true
}, },
"jquery": { "jquery": {
"version": "3.6.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==", "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"dev": true "dev": true
} }
} }
} }
package.json
...@@ -19,5 +19,8 @@ ...@@ -19,5 +19,8 @@
"chart.js": "^3.8.0", "chart.js": "^3.8.0",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"poper": "^0.1.1" "poper": "^0.1.1"
},
"dependencies": {
"fullcalendar-scheduler": "^5.11.0"
} }
} }
scss/main.scss
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
max-width: 300px; max-width: 300px;
color: var(--light-color); color: var(--light-color);
background: var(--sidebar-bg); background: var(--sidebar-bg);
height: calc(100vh - 95px); min-height: calc(100vh - 95px);
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
a { a {
color: var(--light-color); color: var(--light-color);
...@@ -197,6 +197,9 @@ ...@@ -197,6 +197,9 @@
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
text-overflow: '...';
text-overflow: ellipsis;
overflow: hidden;
.bi { .bi {
margin-right: 15px; margin-right: 15px;
display: inline-block; display: inline-block;
...@@ -244,7 +247,7 @@ ...@@ -244,7 +247,7 @@
.page-links li { .page-links li {
position: relative; position: relative;
&:hover { &:hover {
a{ a {
background: var(--submenu-bg); background: var(--submenu-bg);
} }
.sub-menu { .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