agiprasetyo
/
MIF_E31221244
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31221244/public/assets/js/demo.js

430 lines
13 KiB
JavaScript
Raw Blame History

// "use strict";
// const modalShowcase = `
// <!-- Demo Showcase -->
// <style>
// .card-documentation {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// padding: 16px 25px;
// background: #161B2C;
// color: #fff;
// border-radius: 10px;
// border: 1px solid #ffffff14;
// }
// </style>
// <div class="modal fade" tabindex="-1" id="modalShowcase">
// <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen p-5">
// <div class="modal-content rounded-4">
// <div class="modal-header px-md-5 py-md-4 mt-2 mb-3 shadow-sm border-0">
// <h3 class="h5 fw-extrabold mb-0">Choose Layouts Dashboard</h3>
// <button type="button" class="btn-close me-1" data-bs-dismiss="modal" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
// <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
// </svg>
// </button>
// </div>
// <div class="modal-body px-md-5">
// <div class="row g-5 pb-5">
// <div class="col-md-6 col-lg-4">
// <div class="card-documentation h-100">
// <div class="d-flex align-items-center flex-column justify-content-center text-center">
// <img src="assets/img/kaiadmin/logo_documentation.png" height="60" alt="Read Documentation">
// <div class="docs-info ms-3 mb-4">
// <h6 class="fw-bold mb-0 op-8 mt-1">Need help?</h6>
// <p class="fw-bold mb-0 op-5">Please check our docs</p>
// </div>
// </div>
// <a href="../../documentation/index.html" class="btn btn-primary w-100 mb-3">Documentation</a>
// <a href="https://kaiadmin.themekita.com/" class="btn btn-secondary w-100">Buy Now</a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo1/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Classic Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo1.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo2/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// White Classic Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo2.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo3/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Dark Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo3.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo4/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Creative Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo4.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo5/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Trendy Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo5.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo6/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Trendy 2 Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo6.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo7/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Horizontal Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo7.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo8/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Enterprise Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo8.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// <div class="col-md-6 col-lg-4">
// <div class="preview-showcase shadow-sm">
// <a href="../demo9/index.html" data-kt-href="true" class="preview-thumbnail">
// <h3 class="preview-title">
// Futuristic Dashboard
// </h3>
// <div class="overflow-hidden">
// <img src="assets/img/kaiadmin/demo9.png" class="w-100 rounded-1 shadow-sm preview-img" data-loaded="true">
// </div>
// </a>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// <!-- End Demo Showcase -->
// `;
// // window.addEventListener('load', function(event) {
// // $("body").append(modalShowcase);
// // const myModal = new bootstrap.Modal("#modalShowcase");
// // myModal.show();
// // });
// // Cicle Chart
// Circles.create({
// id: 'task-complete',
// radius: 50,
// value: 80,
// maxValue: 100,
// width: 5,
// text: function(value){return value + '%';},
// colors: ['#36a3f7', '#fff'],
// duration: 400,
// wrpClass: 'circles-wrp',
// textClass: 'circles-text',
// styleWrapper: true,
// styleText: true
// })
// //Notify
// $.notify({
// icon: 'icon-bell',
// title: 'Kaiadmin',
// message: 'Premium Bootstrap 5 Admin Dashboard',
// },{
// type: 'secondary',
// placement: {
// from: "bottom",
// align: "right"
// },
// time: 1000,
// });
// // Jsvectormap
// var world_map = new jsVectorMap({
// selector: "#world-map",
// map: "world",
// zoomOnScroll: false,
// regionStyle: {
// hover: {
// fill: '#435ebe'
// }
// },
// markers: [
// {
// name: 'Indonesia',
// coords: [-6.229728, 106.6894311],
// style: {
// fill: '#435ebe'
// }
// },
// {
// name: 'United States',
// coords: [38.8936708, -77.1546604],
// style: {
// fill: '#28ab55'
// }
// },
// {
// name: 'Russia',
// coords: [55.5807481, 36.825129],
// style: {
// fill: '#f3616d'
// }
// },
// {
// name: 'China',
// coords: [39.9385466, 116.1172735]
// },
// {
// name: 'United Kingdom',
// coords: [51.5285582, -0.2416812]
// },
// {
// name: 'India',
// coords: [26.8851417, 75.6504721]
// },
// {
// name: 'Australia',
// coords: [-35.2813046, 149.124822]
// },
// {
// name: 'Brazil',
// coords: [-22.9140693, -43.5860681]
// },
// {
// name: 'Egypt',
// coords: [26.834955, 26.3823725]
// },
// ],
// onRegionTooltipShow(event, tooltip) {
// tooltip.css({ backgroundColor: '#435ebe' })
// }
// });
// //Chart
// var ctx = document.getElementById('statisticsChart').getContext('2d');
// var statisticsChart = new Chart(ctx, {
// type: 'line',
// data: {
// labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
// datasets: [ {
// label: "Subscribers",
// borderColor: '#f3545d',
// pointBackgroundColor: 'rgba(243, 84, 93, 0.6)',
// pointRadius: 0,
// backgroundColor: 'rgba(243, 84, 93, 0.4)',
// legendColor: '#f3545d',
// fill: true,
// borderWidth: 2,
// data: [154, 184, 175, 203, 210, 231, 240, 278, 252, 312, 320, 374]
// }, {
// label: "New Visitors",
// borderColor: '#fdaf4b',
// pointBackgroundColor: 'rgba(253, 175, 75, 0.6)',
// pointRadius: 0,
// backgroundColor: 'rgba(253, 175, 75, 0.4)',
// legendColor: '#fdaf4b',
// fill: true,
// borderWidth: 2,
// data: [256, 230, 245, 287, 240, 250, 230, 295, 331, 431, 456, 521]
// }, {
// label: "Active Users",
// borderColor: '#177dff',
// pointBackgroundColor: 'rgba(23, 125, 255, 0.6)',
// pointRadius: 0,
// backgroundColor: 'rgba(23, 125, 255, 0.4)',
// legendColor: '#177dff',
// fill: true,
// borderWidth: 2,
// data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 900]
// }]
// },
// options : {
// responsive: true,
// maintainAspectRatio: false,
// legend: {
// display: false
// },
// tooltips: {
// bodySpacing: 4,
// mode:"nearest",
// intersect: 0,
// position:"nearest",
// xPadding:10,
// yPadding:10,
// caretPadding:10
// },
// layout:{
// padding:{left:5,right:5,top:15,bottom:15}
// },
// scales: {
// yAxes: [{
// ticks: {
// fontStyle: "500",
// beginAtZero: false,
// maxTicksLimit: 5,
// padding: 10
// },
// gridLines: {
// drawTicks: false,
// display: false
// }
// }],
// xAxes: [{
// gridLines: {
// zeroLineColor: "transparent"
// },
// ticks: {
// padding: 10,
// fontStyle: "500"
// }
// }]
// },
// legendCallback: function(chart) {
// var text = [];
// text.push('<ul class="' + chart.id + '-legend html-legend">');
// for (var i = 0; i < chart.data.datasets.length; i++) {
// text.push('<li><span style="background-color:' + chart.data.datasets[i].legendColor + '"></span>');
// if (chart.data.datasets[i].label) {
// text.push(chart.data.datasets[i].label);
// }
// text.push('</li>');
// }
// text.push('</ul>');
// return text.join('');
// }
// }
// });
// var myLegendContainer = document.getElementById("myChartLegend");
// // generate HTML legend
// myLegendContainer.innerHTML = statisticsChart.generateLegend();
// // bind onClick event to all LI-tags of the legend
// var legendItems = myLegendContainer.getElementsByTagName('li');
// for (var i = 0; i < legendItems.length; i += 1) {
// legendItems[i].addEventListener("click", legendClickCallback, false);
// }
// var dailySalesChart = document.getElementById('dailySalesChart').getContext('2d');
// var myDailySalesChart = new Chart(dailySalesChart, {
// type: 'line',
// data: {
// labels:["January",
// "February",
// "March",
// "April",
// "May",
// "June",
// "July",
// "August",
// "September"],
// datasets:[ {
// label: "Sales Analytics", fill: !0, backgroundColor: "rgba(255,255,255,0.2)", borderColor: "#fff", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0, pointBorderColor: "#fff", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "#fff", pointHoverBorderWidth: 1, pointRadius: 1, pointHitRadius: 5, data: [65, 59, 80, 81, 56, 55, 40, 35, 30]
// }]
// },
// options : {
// maintainAspectRatio:!1, legend: {
// display: !1
// }
// , animation: {
// easing: "easeInOutBack"
// }
// , scales: {
// yAxes:[ {
// display:!1, ticks: {
// fontColor: "rgba(0,0,0,0.5)", fontStyle: "bold", beginAtZero: !0, maxTicksLimit: 10, padding: 0
// }
// , gridLines: {
// drawTicks: !1, display: !1
// }
// }
// ], xAxes:[ {
// display:!1, gridLines: {
// zeroLineColor: "transparent"
// }
// , ticks: {
// padding: -20, fontColor: "rgba(255,255,255,0.2)", fontStyle: "bold"
// }
// }
// ]
// }
// }
// });
$("#activeUsersChart").sparkline([112,109,120,107,110,85,87,90,102,109,120,99,110,85,87,94], {
type: 'bar',
height: '100',
barWidth: 9,
barSpacing: 10,
barColor: 'rgba(255,255,255,.3)'
});
Reference in New Issue View Git Blame Copy Permalink