From 485fe8b0d55a03020ac76e7d9e3dacaec37de382 Mon Sep 17 00:00:00 2001 From: zuramai Date: Tue, 9 Aug 2022 08:15:58 +0700 Subject: [PATCH] chore: prettify js files --- src/assets/js/app.js | 7 +- src/assets/js/components/dark.js | 1 + src/assets/js/mazer.js | 8 +- src/assets/js/pages/ckeditor.js | 9 +- src/assets/js/pages/dashboard.js | 250 ++++--- src/assets/js/pages/datatables.js | 2 +- src/assets/js/pages/filepond.js | 63 +- src/assets/js/pages/form-editor.js | 59 +- src/assets/js/pages/form-element-select.js | 23 +- src/assets/js/pages/horizontal-layout.js | 55 +- src/assets/js/pages/jquery.js | 2 +- src/assets/js/pages/parsley.js | 32 +- src/assets/js/pages/quill.js | 60 +- src/assets/js/pages/rater-js.js | 63 +- src/assets/js/pages/simple-datatables.js | 31 +- src/assets/js/pages/summernote.js | 35 +- src/assets/js/pages/sweetalert2.js | 263 ++++--- src/assets/js/pages/tinymce.js | 11 +- src/assets/js/pages/toastify.js | 147 ++-- src/assets/js/pages/ui-apexchart.js | 422 +++++------ src/assets/js/pages/ui-chartjs.js | 770 +++++++++++---------- src/assets/js/pages/ui-todolist.js | 7 +- 22 files changed, 1178 insertions(+), 1142 deletions(-) diff --git a/src/assets/js/app.js b/src/assets/js/app.js index 33bfad5f9..6d8def97a 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -1,10 +1,9 @@ - // Feather icons are used on some pages // Replace() replaces [data-feather] elements with icons import featherIcons from "feather-icons" -featherIcons.replace(); +featherIcons.replace() // Mazer internal JS. Include this in your project to get // the sidebar running. -require("./components/dark"); -require("./mazer"); \ No newline at end of file +require("./components/dark") +require("./mazer") diff --git a/src/assets/js/components/dark.js b/src/assets/js/components/dark.js index ebdd57f05..01d3e02a2 100644 --- a/src/assets/js/components/dark.js +++ b/src/assets/js/components/dark.js @@ -1,3 +1,4 @@ + const THEME_KEY = "theme" const THEME_REGEX = /\btheme-[a-z0-9]+\b/g const toggler = document.getElementById("toggle-dark") diff --git a/src/assets/js/mazer.js b/src/assets/js/mazer.js index 6c1e53ce4..54bab6e9b 100644 --- a/src/assets/js/mazer.js +++ b/src/assets/js/mazer.js @@ -2,10 +2,8 @@ // Here, we load it in our app.js // We could import PerfectScrollbar directly in the sidebar module -window.PerfectScrollbar = require('perfect-scrollbar/dist/perfect-scrollbar.min.js'); +window.PerfectScrollbar = require("perfect-scrollbar/dist/perfect-scrollbar.min.js") -let Sidebar = require('./components/sidebar'); +let Sidebar = require("./components/sidebar") -export { - Sidebar -} \ No newline at end of file +export { Sidebar } diff --git a/src/assets/js/pages/ckeditor.js b/src/assets/js/pages/ckeditor.js index a3d2eb713..2921c9d83 100644 --- a/src/assets/js/pages/ckeditor.js +++ b/src/assets/js/pages/ckeditor.js @@ -1,6 +1,3 @@ - -ClassicEditor -.create(document.querySelector('#editor')) -.catch(error => { - console.error(error); -}); \ No newline at end of file +ClassicEditor.create(document.querySelector("#editor")).catch((error) => { + console.error(error) +}) diff --git a/src/assets/js/pages/dashboard.js b/src/assets/js/pages/dashboard.js index 0d2ae41c7..ed6693a09 100644 --- a/src/assets/js/pages/dashboard.js +++ b/src/assets/js/pages/dashboard.js @@ -1,116 +1,158 @@ var optionsProfileVisit = { - annotations: { - position: 'back' - }, - dataLabels: { - enabled:false - }, - chart: { - type: 'bar', - height: 300 - }, - fill: { - opacity:1 - }, - plotOptions: { - }, - series: [{ - name: 'sales', - data: [9,20,30,20,10,20,30,20,10,20,30,20] - }], - colors: '#435ebe', - xaxis: { - categories: ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"], - }, + annotations: { + position: "back", + }, + dataLabels: { + enabled: false, + }, + chart: { + type: "bar", + height: 300, + }, + fill: { + opacity: 1, + }, + plotOptions: {}, + series: [ + { + name: "sales", + data: [9, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20], + }, + ], + colors: "#435ebe", + xaxis: { + categories: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + }, } -let optionsVisitorsProfile = { - series: [70, 30], - labels: ['Male', 'Female'], - colors: ['#435ebe','#55c6e8'], - chart: { - type: 'donut', - width: '100%', - height:'350px' - }, - legend: { - position: 'bottom' - }, - plotOptions: { - pie: { - donut: { - size: '30%' - } - } - } +let optionsVisitorsProfile = { + series: [70, 30], + labels: ["Male", "Female"], + colors: ["#435ebe", "#55c6e8"], + chart: { + type: "donut", + width: "100%", + height: "350px", + }, + legend: { + position: "bottom", + }, + plotOptions: { + pie: { + donut: { + size: "30%", + }, + }, + }, } var optionsEurope = { - series: [{ - name: 'series1', - data: [310, 800, 600, 430, 540, 340, 605, 805,430, 540, 340, 605] - }], - chart: { - height: 80, - type: 'area', - toolbar: { - show:false, - }, - }, - colors: ['#5350e9'], - stroke: { - width: 2, - }, - grid: { - show:false, - }, - dataLabels: { - enabled: false - }, - xaxis: { - type: 'datetime', - categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z","2018-09-19T07:30:00.000Z","2018-09-19T08:30:00.000Z","2018-09-19T09:30:00.000Z","2018-09-19T10:30:00.000Z","2018-09-19T11:30:00.000Z"], - axisBorder: { - show:false - }, - axisTicks: { - show:false - }, - labels: { - show:false, - } - }, - show:false, - yaxis: { - labels: { - show:false, - }, - }, - tooltip: { - x: { - format: 'dd/MM/yy HH:mm' - }, - }, -}; + series: [ + { + name: "series1", + data: [310, 800, 600, 430, 540, 340, 605, 805, 430, 540, 340, 605], + }, + ], + chart: { + height: 80, + type: "area", + toolbar: { + show: false, + }, + }, + colors: ["#5350e9"], + stroke: { + width: 2, + }, + grid: { + show: false, + }, + dataLabels: { + enabled: false, + }, + xaxis: { + type: "datetime", + categories: [ + "2018-09-19T00:00:00.000Z", + "2018-09-19T01:30:00.000Z", + "2018-09-19T02:30:00.000Z", + "2018-09-19T03:30:00.000Z", + "2018-09-19T04:30:00.000Z", + "2018-09-19T05:30:00.000Z", + "2018-09-19T06:30:00.000Z", + "2018-09-19T07:30:00.000Z", + "2018-09-19T08:30:00.000Z", + "2018-09-19T09:30:00.000Z", + "2018-09-19T10:30:00.000Z", + "2018-09-19T11:30:00.000Z", + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + labels: { + show: false, + }, + }, + show: false, + yaxis: { + labels: { + show: false, + }, + }, + tooltip: { + x: { + format: "dd/MM/yy HH:mm", + }, + }, +} let optionsAmerica = { - ...optionsEurope, - colors: ['#008b75'], + ...optionsEurope, + colors: ["#008b75"], } let optionsIndonesia = { - ...optionsEurope, - colors: ['#dc3545'], + ...optionsEurope, + colors: ["#dc3545"], } +var chartProfileVisit = new ApexCharts( + document.querySelector("#chart-profile-visit"), + optionsProfileVisit +) +var chartVisitorsProfile = new ApexCharts( + document.getElementById("chart-visitors-profile"), + optionsVisitorsProfile +) +var chartEurope = new ApexCharts( + document.querySelector("#chart-europe"), + optionsEurope +) +var chartAmerica = new ApexCharts( + document.querySelector("#chart-america"), + optionsAmerica +) +var chartIndonesia = new ApexCharts( + document.querySelector("#chart-indonesia"), + optionsIndonesia +) - -var chartProfileVisit = new ApexCharts(document.querySelector("#chart-profile-visit"), optionsProfileVisit); -var chartVisitorsProfile = new ApexCharts(document.getElementById('chart-visitors-profile'), optionsVisitorsProfile) -var chartEurope = new ApexCharts(document.querySelector("#chart-europe"), optionsEurope); -var chartAmerica = new ApexCharts(document.querySelector("#chart-america"), optionsAmerica); -var chartIndonesia = new ApexCharts(document.querySelector("#chart-indonesia"), optionsIndonesia); - -chartIndonesia.render(); -chartAmerica.render(); -chartEurope.render(); -chartProfileVisit.render(); -chartVisitorsProfile.render() \ No newline at end of file +chartIndonesia.render() +chartAmerica.render() +chartEurope.render() +chartProfileVisit.render() +chartVisitorsProfile.render() diff --git a/src/assets/js/pages/datatables.js b/src/assets/js/pages/datatables.js index 583458419..0a0dfa373 100644 --- a/src/assets/js/pages/datatables.js +++ b/src/assets/js/pages/datatables.js @@ -1 +1 @@ -let jquery_datatable = $("#table1").DataTable(); \ No newline at end of file +let jquery_datatable = $("#table1").DataTable() diff --git a/src/assets/js/pages/filepond.js b/src/assets/js/pages/filepond.js index 6b4d799e9..fbb8eba84 100644 --- a/src/assets/js/pages/filepond.js +++ b/src/assets/js/pages/filepond.js @@ -1,4 +1,3 @@ -// Need: Toastify // Filepond: Basic FilePond.create(document.querySelector(".basic-filepond"), { credits: null, @@ -6,7 +5,7 @@ FilePond.create(document.querySelector(".basic-filepond"), { allowMultiple: false, allowFileEncode: false, required: false, -}); +}) // Filepond: Multiple Files FilePond.create(document.querySelector(".multiple-files-filepond"), { @@ -15,7 +14,7 @@ FilePond.create(document.querySelector(".multiple-files-filepond"), { allowMultiple: true, allowFileEncode: false, required: false, -}); +}) // Filepond: With Validation FilePond.create(document.querySelector(".with-validation-filepond"), { @@ -28,9 +27,9 @@ FilePond.create(document.querySelector(".with-validation-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) // Filepond: ImgBB with server property FilePond.create(document.querySelector(".imgbb-filepond"), { @@ -40,32 +39,32 @@ FilePond.create(document.querySelector(".imgbb-filepond"), { process: (fieldName, file, metadata, load, error, progress, abort) => { // We ignore the metadata property and only send the file - const formData = new FormData(); - formData.append(fieldName, file, file.name); + const formData = new FormData() + formData.append(fieldName, file, file.name) - const request = new XMLHttpRequest(); + const request = new XMLHttpRequest() // you can change it by your client api key request.open( "POST", "https://api.imgbb.com/1/upload?key=762894e2014f83c023b233b2f10395e2" - ); + ) request.upload.onprogress = (e) => { - progress(e.lengthComputable, e.loaded, e.total); - }; + progress(e.lengthComputable, e.loaded, e.total) + } request.onload = function () { if (request.status >= 200 && request.status < 300) { - load(request.responseText); + load(request.responseText) } else { - error("oh no"); + error("oh no") } - }; + } request.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { - let response = JSON.parse(this.responseText); + let response = JSON.parse(this.responseText) Toastify({ text: "Success uploading to imgbb! see console f12", @@ -74,9 +73,9 @@ FilePond.create(document.querySelector(".imgbb-filepond"), { gravity: "bottom", position: "right", backgroundColor: "#4fbe87", - }).showToast(); + }).showToast() - console.log(response); + console.log(response) } else { Toastify({ text: "Failed uploading to imgbb! see console f12", @@ -85,17 +84,17 @@ FilePond.create(document.querySelector(".imgbb-filepond"), { gravity: "bottom", position: "right", backgroundColor: "#ff0000", - }).showToast(); + }).showToast() - console.log("Error", this.statusText); + console.log("Error", this.statusText) } } - }; + } - request.send(formData); + request.send(formData) }, }, -}); +}) // Filepond: Image Preview FilePond.create(document.querySelector(".image-preview-filepond"), { @@ -108,9 +107,9 @@ FilePond.create(document.querySelector(".image-preview-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) // Filepond: Image Crop FilePond.create(document.querySelector(".image-crop-filepond"), { @@ -123,9 +122,9 @@ FilePond.create(document.querySelector(".image-crop-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) // Filepond: Image Exif Orientation FilePond.create(document.querySelector(".image-exif-filepond"), { @@ -138,9 +137,9 @@ FilePond.create(document.querySelector(".image-exif-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) // Filepond: Image Filter FilePond.create(document.querySelector(".image-filter-filepond"), { @@ -157,9 +156,9 @@ FilePond.create(document.querySelector(".image-filter-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) // Filepond: Image Resize FilePond.create(document.querySelector(".image-resize-filepond"), { @@ -177,6 +176,6 @@ FilePond.create(document.querySelector(".image-resize-filepond"), { fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => { // Do custom type detection here and return with promise - resolve(type); + resolve(type) }), -}); +}) diff --git a/src/assets/js/pages/form-editor.js b/src/assets/js/pages/form-editor.js index 2be0876d5..6b876c145 100644 --- a/src/assets/js/pages/form-editor.js +++ b/src/assets/js/pages/form-editor.js @@ -1,32 +1,27 @@ -var snow = new Quill('#snow', { - theme: 'snow' -}); -var bubble = new Quill('#bubble', { - theme: 'bubble' -}); -new Quill("#full", { - bounds: "#full-container .editor", - modules: { - toolbar: [ - [{ font: [] }, { size: [] }], - ["bold", "italic", "underline", "strike"], - [ - { color: [] }, - { background: [] } - ], - [ - { script: "super" }, - { script: "sub" } - ], - [ - { list: "ordered" }, - { list: "bullet" }, - { indent: "-1" }, - { indent: "+1" } - ], - ["direction", { align: [] }], - ["link", "image", "video"], - ["clean"]] - }, - theme: "snow" - }) \ No newline at end of file +var snow = new Quill("#snow", { + theme: "snow", +}) +var bubble = new Quill("#bubble", { + theme: "bubble", +}) +new Quill("#full", { + bounds: "#full-container .editor", + modules: { + toolbar: [ + [{ font: [] }, { size: [] }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ script: "super" }, { script: "sub" }], + [ + { list: "ordered" }, + { list: "bullet" }, + { indent: "-1" }, + { indent: "+1" }, + ], + ["direction", { align: [] }], + ["link", "image", "video"], + ["clean"], + ], + }, + theme: "snow", +}) diff --git a/src/assets/js/pages/form-element-select.js b/src/assets/js/pages/form-element-select.js index ad247ecb9..d26f9ad0a 100644 --- a/src/assets/js/pages/form-element-select.js +++ b/src/assets/js/pages/form-element-select.js @@ -1,15 +1,14 @@ -let choices = document.querySelectorAll('.choices'); -let initChoice; -for(let i=0; i=e?(t.style.height="",t.style.paddingTop="",t.style.paddingBottom="",t.style.marginTop="",t.style.marginBottom="",t.style.overflow="",i||(t.style.display="none"),"function"==typeof o&&o()):window.requestAnimationFrame(l)})} +function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) } // Responsive burger btn onclick -document.querySelector('.burger-btn').addEventListener('click', (e) => { - e.preventDefault() - let navbar = document.querySelector('.main-navbar') +document.querySelector(".burger-btn").addEventListener("click", (e) => { + e.preventDefault() + let navbar = document.querySelector(".main-navbar") - slideToggle(navbar, 300) + slideToggle(navbar, 300) }) window.onload = () => checkWindowSize() -window.addEventListener('resize',(event) => { - checkWindowSize() -}) +window.addEventListener("resize", (event) => { + checkWindowSize() +}) function checkWindowSize() { - if(window.innerWidth < 1200) listener() - if(window.innerWidth > 1200) document.querySelector('.main-navbar').style.display = "" + if (window.innerWidth < 1200) listener() + if (window.innerWidth > 1200) + document.querySelector(".main-navbar").style.display = "" } function listener() { - let menuItems = document.querySelectorAll('.menu-item.has-sub') - menuItems.forEach(menuItem => { - menuItem.querySelector('.menu-link').addEventListener('click', (e) => { - e.preventDefault() - let submenu = menuItem.querySelector('.submenu') - submenu.classList.toggle('active') - }) + let menuItems = document.querySelectorAll(".menu-item.has-sub") + menuItems.forEach((menuItem) => { + menuItem.querySelector(".menu-link").addEventListener("click", (e) => { + e.preventDefault() + let submenu = menuItem.querySelector(".submenu") + submenu.classList.toggle("active") }) + }) - // Three level menu event listener - let submenuItems = document.querySelectorAll('.submenu-item.has-sub') + // Three level menu event listener + let submenuItems = document.querySelectorAll(".submenu-item.has-sub") - submenuItems.forEach(submenuItem => { - submenuItem.querySelector('.submenu-link').addEventListener('click', e => { - e.preventDefault() - submenuItem.querySelector('.subsubmenu').classList.toggle('active') - }) - }) -} \ No newline at end of file + submenuItems.forEach((submenuItem) => { + submenuItem + .querySelector(".submenu-link") + .addEventListener("click", (e) => { + e.preventDefault() + submenuItem.querySelector(".subsubmenu").classList.toggle("active") + }) + }) +} diff --git a/src/assets/js/pages/jquery.js b/src/assets/js/pages/jquery.js index a64e65482..970ae44e5 100644 --- a/src/assets/js/pages/jquery.js +++ b/src/assets/js/pages/jquery.js @@ -1 +1 @@ -let $ = require( 'jquery' ); +let $ = require("jquery") diff --git a/src/assets/js/pages/parsley.js b/src/assets/js/pages/parsley.js index 313997bb8..86e2270da 100644 --- a/src/assets/js/pages/parsley.js +++ b/src/assets/js/pages/parsley.js @@ -8,48 +8,48 @@ $.extend(window.Parsley.options, { successClass: "is-valid", errorClass: "is-invalid", classHandler: function (el) { - return el.$element.closest(".form-group"); + return el.$element.closest(".form-group") }, errorsContainer: function (el) { - return el.$element.closest(".form-group"); + return el.$element.closest(".form-group") }, errorsWrapper: '
', errorTemplate: "", -}); +}) Parsley.on("field:validated", function (el) { - var elNode = $(el)[0]; + var elNode = $(el)[0] if (elNode && !elNode.isValid()) { var rqeuiredValResult = elNode.validationResult.filter(function (vr) { - return vr.assert.name === "required"; - }); + return vr.assert.name === "required" + }) if (rqeuiredValResult.length > 0) { - var fieldNode = $(elNode.element); - var formGroupNode = fieldNode.closest(".form-group"); - var lblNode = formGroupNode.find(".form-label:first"); + var fieldNode = $(elNode.element) + var formGroupNode = fieldNode.closest(".form-group") + var lblNode = formGroupNode.find(".form-label:first") if (lblNode.length > 0) { // change default error message to include field label var errorNode = formGroupNode.find( "div.parsley-error span[class*=parsley-]" - ); + ) if (errorNode.length > 0) { - var lblText = lblNode.text(); + var lblText = lblNode.text() if (lblText) { - errorNode.html(lblText + " is required."); + errorNode.html(lblText + " is required.") } } } } } -}); +}) Parsley.addValidator("restrictedCity", { requirementType: "string", validateString: function (value, requirement) { - value = (value || "").trim(); - return value === "" || value.toLowerCase() === requirement.toLowerCase(); + value = (value || "").trim() + return value === "" || value.toLowerCase() === requirement.toLowerCase() }, messages: { en: 'You have to live in Jakarta.', }, -}); +}) diff --git a/src/assets/js/pages/quill.js b/src/assets/js/pages/quill.js index 36e1c74b0..6b876c145 100644 --- a/src/assets/js/pages/quill.js +++ b/src/assets/js/pages/quill.js @@ -1,33 +1,27 @@ - -var snow = new Quill('#snow', { - theme: 'snow' -}); -var bubble = new Quill('#bubble', { - theme: 'bubble' -}); -new Quill("#full", { - bounds: "#full-container .editor", - modules: { - toolbar: [ - [{ font: [] }, { size: [] }], - ["bold", "italic", "underline", "strike"], - [ - { color: [] }, - { background: [] } - ], - [ - { script: "super" }, - { script: "sub" } - ], - [ - { list: "ordered" }, - { list: "bullet" }, - { indent: "-1" }, - { indent: "+1" } - ], - ["direction", { align: [] }], - ["link", "image", "video"], - ["clean"]] - }, - theme: "snow" - }) \ No newline at end of file +var snow = new Quill("#snow", { + theme: "snow", +}) +var bubble = new Quill("#bubble", { + theme: "bubble", +}) +new Quill("#full", { + bounds: "#full-container .editor", + modules: { + toolbar: [ + [{ font: [] }, { size: [] }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ script: "super" }, { script: "sub" }], + [ + { list: "ordered" }, + { list: "bullet" }, + { indent: "-1" }, + { indent: "+1" }, + ], + ["direction", { align: [] }], + ["link", "image", "video"], + ["clean"], + ], + }, + theme: "snow", +}) diff --git a/src/assets/js/pages/rater-js.js b/src/assets/js/pages/rater-js.js index f1ff42c51..fb61b7a3d 100644 --- a/src/assets/js/pages/rater-js.js +++ b/src/assets/js/pages/rater-js.js @@ -1,39 +1,38 @@ - raterJs({ - element: document.querySelector("#basic"), - starSize: 32, - rateCallback:function rateCallback(rating, done) { - this.setRating(rating); - done(); - } -}); + element: document.querySelector("#basic"), + starSize: 32, + rateCallback: function rateCallback(rating, done) { + this.setRating(rating) + done() + }, +}) raterJs({ - element:document.querySelector("#step"), - rateCallback:function rateCallback(rating, done) { - this.setRating(rating); - done(); - }, - starSize:32, - step:0.5 + element: document.querySelector("#step"), + rateCallback: function rateCallback(rating, done) { + this.setRating(rating) + done() + }, + starSize: 32, + step: 0.5, }) raterJs({ - element:document.querySelector("#unli1"), - rateCallback:function rateCallback(rating, done) { - this.setRating(rating); - done(); - }, - starSize:32, - max:10, - step:0.5 + element: document.querySelector("#unli1"), + rateCallback: function rateCallback(rating, done) { + this.setRating(rating) + done() + }, + starSize: 32, + max: 10, + step: 0.5, }) raterJs({ - element:document.querySelector("#unli2"), - rateCallback:function rateCallback(rating, done) { - this.setRating(rating); - done(); - }, - starSize:32, - max:16, - step:0.5 -}) \ No newline at end of file + element: document.querySelector("#unli2"), + rateCallback: function rateCallback(rating, done) { + this.setRating(rating) + done() + }, + starSize: 32, + max: 16, + step: 0.5, +}) diff --git a/src/assets/js/pages/simple-datatables.js b/src/assets/js/pages/simple-datatables.js index 044d5daa8..d8b12d221 100644 --- a/src/assets/js/pages/simple-datatables.js +++ b/src/assets/js/pages/simple-datatables.js @@ -1,45 +1,46 @@ - -let dataTable = new simpleDatatables.DataTable(document.getElementById("table1")); +let dataTable = new simpleDatatables.DataTable( + document.getElementById("table1") +) // Move "per page dropdown" selector element out of label // to make it work with bootstrap 5. Add bs5 classes. function adaptPageDropdown() { - const selector = dataTable.wrapper.querySelector(".dataTable-selector"); - selector.parentNode.parentNode.insertBefore(selector, selector.parentNode); - selector.classList.add("form-select"); + const selector = dataTable.wrapper.querySelector(".dataTable-selector") + selector.parentNode.parentNode.insertBefore(selector, selector.parentNode) + selector.classList.add("form-select") } // Add bs5 classes to pagination elements function adaptPagination() { const paginations = dataTable.wrapper.querySelectorAll( "ul.dataTable-pagination-list" - ); + ) for (const pagination of paginations) { - pagination.classList.add(...["pagination", "pagination-primary"]); + pagination.classList.add(...["pagination", "pagination-primary"]) } const paginationLis = dataTable.wrapper.querySelectorAll( "ul.dataTable-pagination-list li" - ); + ) for (const paginationLi of paginationLis) { - paginationLi.classList.add("page-item"); + paginationLi.classList.add("page-item") } const paginationLinks = dataTable.wrapper.querySelectorAll( "ul.dataTable-pagination-list li a" - ); + ) for (const paginationLink of paginationLinks) { - paginationLink.classList.add("page-link"); + paginationLink.classList.add("page-link") } } // Patch "per page dropdown" and pagination after table rendered dataTable.on("datatable.init", function () { - adaptPageDropdown(); - adaptPagination(); -}); + adaptPageDropdown() + adaptPagination() +}) // Re-patch pagination after the page was changed -dataTable.on("datatable.page", adaptPagination); +dataTable.on("datatable.page", adaptPagination) diff --git a/src/assets/js/pages/summernote.js b/src/assets/js/pages/summernote.js index 88ad244bf..ceea951c1 100644 --- a/src/assets/js/pages/summernote.js +++ b/src/assets/js/pages/summernote.js @@ -1,19 +1,20 @@ - -$('#summernote').summernote({ - tabsize: 2, - height: 120, +$("#summernote").summernote({ + tabsize: 2, + height: 120, }) $("#hint").summernote({ - height: 100, - toolbar: false, - placeholder: 'type with apple, orange, watermelon and lemon', - hint: { - words: ['apple', 'orange', 'watermelon', 'lemon'], - match: /\b(\w{1,})$/, - search: function (keyword, callback) { - callback($.grep(this.words, function (item) { - return item.indexOf(keyword) === 0; - })); - } - } -}); + height: 100, + toolbar: false, + placeholder: "type with apple, orange, watermelon and lemon", + hint: { + words: ["apple", "orange", "watermelon", "lemon"], + match: /\b(\w{1,})$/, + search: function (keyword, callback) { + callback( + $.grep(this.words, function (item) { + return item.indexOf(keyword) === 0 + }) + ) + }, + }, +}) diff --git a/src/assets/js/pages/sweetalert2.js b/src/assets/js/pages/sweetalert2.js index 26f5894f7..d570ed64a 100644 --- a/src/assets/js/pages/sweetalert2.js +++ b/src/assets/js/pages/sweetalert2.js @@ -1,155 +1,142 @@ - -document.getElementById('basic').addEventListener('click', (e) => { - Swal.fire('Any fool can use a computer') +document.getElementById("basic").addEventListener("click", (e) => { + Swal.fire("Any fool can use a computer") }) -document.getElementById('footer').addEventListener('click', (e) => { - Swal.fire({ - icon: 'error', - title: 'Oops...', - text: 'Something went wrong!', - footer: 'Why do I have this issue?' - }) +document.getElementById("footer").addEventListener("click", (e) => { + Swal.fire({ + icon: "error", + title: "Oops...", + text: "Something went wrong!", + footer: "Why do I have this issue?", + }) }) -document.getElementById('title').addEventListener('click', (e) => { - Swal.fire( - 'The Internet?', - 'That thing is still around?', - 'question' - ) +document.getElementById("title").addEventListener("click", (e) => { + Swal.fire("The Internet?", "That thing is still around?", "question") }) -document.getElementById('success').addEventListener('click', (e) => { - Swal.fire({ - icon: "success", - title: "Success" - }) +document.getElementById("success").addEventListener("click", (e) => { + Swal.fire({ + icon: "success", + title: "Success", + }) }) -document.getElementById('error').addEventListener('click', (e) => { - Swal.fire({ - icon: "error", - title: "Error" - }) +document.getElementById("error").addEventListener("click", (e) => { + Swal.fire({ + icon: "error", + title: "Error", + }) }) -document.getElementById('warning').addEventListener('click', (e) => { - Swal.fire({ - icon: "warning", - title: "Warning" - }) +document.getElementById("warning").addEventListener("click", (e) => { + Swal.fire({ + icon: "warning", + title: "Warning", + }) }) -document.getElementById('info').addEventListener('click', (e) => { - Swal.fire({ - icon: "info", - title: "Info" - }) +document.getElementById("info").addEventListener("click", (e) => { + Swal.fire({ + icon: "info", + title: "Info", + }) }) -document.getElementById('question').addEventListener('click', (e) => { - Swal.fire({ - icon: "question", - title: "Question" - }) +document.getElementById("question").addEventListener("click", (e) => { + Swal.fire({ + icon: "question", + title: "Question", + }) }) -document.getElementById('text').addEventListener('click', (e) => { - - Swal.fire({ - title: 'Enter your IP address', - input: 'text', - inputLabel: 'Your IP address', - showCancelButton: true, - }) - +document.getElementById("text").addEventListener("click", (e) => { + Swal.fire({ + title: "Enter your IP address", + input: "text", + inputLabel: "Your IP address", + showCancelButton: true, + }) }) -document.getElementById('email').addEventListener('click', async (e) => { - - const { value: email } = await Swal.fire({ - title: 'Input email address', - input: 'email', - inputLabel: 'Your email address', - inputPlaceholder: 'Enter your email address' - }) - - if (email) { - Swal.fire(`Entered email: ${email}`) - } +document.getElementById("email").addEventListener("click", async (e) => { + const { value: email } = await Swal.fire({ + title: "Input email address", + input: "email", + inputLabel: "Your email address", + inputPlaceholder: "Enter your email address", + }) + if (email) { + Swal.fire(`Entered email: ${email}`) + } }) -document.getElementById('url').addEventListener('click', async (e) => { - - const { value: url } = await Swal.fire({ - input: 'url', - inputLabel: 'URL address', - inputPlaceholder: 'Enter the URL' - }) - - if (url) { - Swal.fire(`Entered URL: ${url}`) - } +document.getElementById("url").addEventListener("click", async (e) => { + const { value: url } = await Swal.fire({ + input: "url", + inputLabel: "URL address", + inputPlaceholder: "Enter the URL", + }) + + if (url) { + Swal.fire(`Entered URL: ${url}`) + } }) -document.getElementById('password').addEventListener('click', async (e) => { +document.getElementById("password").addEventListener("click", async (e) => { + const { value: password } = await Swal.fire({ + title: "Enter your password", + input: "password", + inputLabel: "Password", + inputPlaceholder: "Enter your password", + inputAttributes: { + maxlength: 10, + autocapitalize: "off", + autocorrect: "off", + }, + }) - const { value: password } = await Swal.fire({ - title: 'Enter your password', - input: 'password', - inputLabel: 'Password', - inputPlaceholder: 'Enter your password', - inputAttributes: { - maxlength: 10, - autocapitalize: 'off', - autocorrect: 'off' - } - }) - - if (password) { - Swal.fire(`Entered password: ${password}`) - } - + if (password) { + Swal.fire(`Entered password: ${password}`) + } }) -document.getElementById('textarea').addEventListener('click', async (e) => { - const { value: text } = await Swal.fire({ - input: 'textarea', - inputLabel: 'Message', - inputPlaceholder: 'Type your message here...', - inputAttributes: { - 'aria-label': 'Type your message here' - }, - showCancelButton: true - }) - - if (text) { - Swal.fire(text) - } +document.getElementById("textarea").addEventListener("click", async (e) => { + const { value: text } = await Swal.fire({ + input: "textarea", + inputLabel: "Message", + inputPlaceholder: "Type your message here...", + inputAttributes: { + "aria-label": "Type your message here", + }, + showCancelButton: true, + }) + + if (text) { + Swal.fire(text) + } }) -document.getElementById('select').addEventListener('click', async (e) => { - const { value: fruit } = await Swal.fire({ - title: 'Select field validation', - input: 'select', - inputOptions: { - 'Fruits': { - apples: 'Apples', - bananas: 'Bananas', - grapes: 'Grapes', - oranges: 'Oranges' - }, - 'Vegetables': { - potato: 'Potato', - broccoli: 'Broccoli', - carrot: 'Carrot' - }, - 'icecream': 'Ice cream' - }, - inputPlaceholder: 'Select a fruit', - showCancelButton: true, - inputValidator: (value) => { - return new Promise((resolve) => { - if (value === 'oranges') { - resolve() - } else { - resolve('You need to select oranges :)') - } - }) +document.getElementById("select").addEventListener("click", async (e) => { + const { value: fruit } = await Swal.fire({ + title: "Select field validation", + input: "select", + inputOptions: { + Fruits: { + apples: "Apples", + bananas: "Bananas", + grapes: "Grapes", + oranges: "Oranges", + }, + Vegetables: { + potato: "Potato", + broccoli: "Broccoli", + carrot: "Carrot", + }, + icecream: "Ice cream", + }, + inputPlaceholder: "Select a fruit", + showCancelButton: true, + inputValidator: (value) => { + return new Promise((resolve) => { + if (value === "oranges") { + resolve() + } else { + resolve("You need to select oranges :)") } }) - - if (fruit) { - Swal.fire(`You selected: ${fruit}`) - } - -}) \ No newline at end of file + }, + }) + + if (fruit) { + Swal.fire(`You selected: ${fruit}`) + } +}) diff --git a/src/assets/js/pages/tinymce.js b/src/assets/js/pages/tinymce.js index 5724c2409..0bf819b5a 100644 --- a/src/assets/js/pages/tinymce.js +++ b/src/assets/js/pages/tinymce.js @@ -1,6 +1,5 @@ - document.addEventListener("DOMContentLoaded", () => { - console.log("initing", document.body.classList.contains("theme-dark")); + console.log("initing", document.body.classList.contains("theme-dark")) const themeOptions = document.body.classList.contains("theme-dark") ? { @@ -10,14 +9,14 @@ document.addEventListener("DOMContentLoaded", () => { : { skin: "oxide", content_css: "default", - }; + } - tinymce.init({ selector: "#default", ...themeOptions }); + tinymce.init({ selector: "#default", ...themeOptions }) tinymce.init({ selector: "#dark", toolbar: "undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code", plugins: "code", ...themeOptions, - }); -}); + }) +}) diff --git a/src/assets/js/pages/toastify.js b/src/assets/js/pages/toastify.js index 2970e5e02..51d91de49 100644 --- a/src/assets/js/pages/toastify.js +++ b/src/assets/js/pages/toastify.js @@ -1,82 +1,81 @@ - -document.getElementById('basic').addEventListener('click', () => { - Toastify({ - text: "This is a toast", - duration: 3000 - }).showToast(); +document.getElementById("basic").addEventListener("click", () => { + Toastify({ + text: "This is a toast", + duration: 3000, + }).showToast() }) -document.getElementById('background').addEventListener('click', () => { - Toastify({ - text: "This is a toast", - duration: 3000, - backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", - }).showToast(); +document.getElementById("background").addEventListener("click", () => { + Toastify({ + text: "This is a toast", + duration: 3000, + backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", + }).showToast() }) -document.getElementById('close').addEventListener('click', () => { - Toastify({ - text: "Click close button", - duration: 3000, - close:true, - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("close").addEventListener("click", () => { + Toastify({ + text: "Click close button", + duration: 3000, + close: true, + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('top-left').addEventListener('click', () => { - Toastify({ - text: "This is toast in top left", - duration: 3000, - close:true, - gravity:"top", - position: "left", - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("top-left").addEventListener("click", () => { + Toastify({ + text: "This is toast in top left", + duration: 3000, + close: true, + gravity: "top", + position: "left", + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('top-center').addEventListener('click', () => { - Toastify({ - text: "This is toast in top center", - duration: 3000, - close:true, - gravity:"top", - position: "center", - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("top-center").addEventListener("click", () => { + Toastify({ + text: "This is toast in top center", + duration: 3000, + close: true, + gravity: "top", + position: "center", + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('top-right').addEventListener('click', () => { - Toastify({ - text: "This is toast in top right", - duration: 3000, - close:true, - gravity:"top", - position: "right", - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("top-right").addEventListener("click", () => { + Toastify({ + text: "This is toast in top right", + duration: 3000, + close: true, + gravity: "top", + position: "right", + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('bottom-right').addEventListener('click', () => { - Toastify({ - text: "This is toast in bottom right", - duration: 3000, - close:true, - gravity:"bottom", - position: "right", - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("bottom-right").addEventListener("click", () => { + Toastify({ + text: "This is toast in bottom right", + duration: 3000, + close: true, + gravity: "bottom", + position: "right", + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('bottom-center').addEventListener('click', () => { - Toastify({ - text: "This is toast in bottom center", - duration: 3000, - close:true, - gravity:"bottom", - position: "center", - backgroundColor: "#4fbe87", - }).showToast(); +document.getElementById("bottom-center").addEventListener("click", () => { + Toastify({ + text: "This is toast in bottom center", + duration: 3000, + close: true, + gravity: "bottom", + position: "center", + backgroundColor: "#4fbe87", + }).showToast() +}) +document.getElementById("bottom-left").addEventListener("click", () => { + Toastify({ + text: "This is toast in bottom left", + duration: 3000, + close: true, + gravity: "bottom", + position: "left", + backgroundColor: "#4fbe87", + }).showToast() }) -document.getElementById('bottom-left').addEventListener('click', () => { - Toastify({ - text: "This is toast in bottom left", - duration: 3000, - close:true, - gravity:"bottom", - position: "left", - backgroundColor: "#4fbe87", - }).showToast(); -}) \ No newline at end of file diff --git a/src/assets/js/pages/ui-apexchart.js b/src/assets/js/pages/ui-apexchart.js index 8b807e5bb..ef631f5df 100644 --- a/src/assets/js/pages/ui-apexchart.js +++ b/src/assets/js/pages/ui-apexchart.js @@ -11,299 +11,299 @@ var lineOptions = { xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999], }, -}; +} var candleOptions = { -series: [ + series: [ { - name: "candle", - data: [ + name: "candle", + data: [ { - x: new Date(1538778600000), - y: [6629.81, 6650.5, 6623.04, 6633.33], + x: new Date(1538778600000), + y: [6629.81, 6650.5, 6623.04, 6633.33], }, { - x: new Date(1538780400000), - y: [6632.01, 6643.59, 6620, 6630.11], + x: new Date(1538780400000), + y: [6632.01, 6643.59, 6620, 6630.11], }, { - x: new Date(1538782200000), - y: [6630.71, 6648.95, 6623.34, 6635.65], + x: new Date(1538782200000), + y: [6630.71, 6648.95, 6623.34, 6635.65], }, { - x: new Date(1538784000000), - y: [6635.65, 6651, 6629.67, 6638.24], + x: new Date(1538784000000), + y: [6635.65, 6651, 6629.67, 6638.24], }, { - x: new Date(1538785800000), - y: [6638.24, 6640, 6620, 6624.47], + x: new Date(1538785800000), + y: [6638.24, 6640, 6620, 6624.47], }, { - x: new Date(1538787600000), - y: [6624.53, 6636.03, 6621.68, 6624.31], + x: new Date(1538787600000), + y: [6624.53, 6636.03, 6621.68, 6624.31], }, { - x: new Date(1538789400000), - y: [6624.61, 6632.2, 6617, 6626.02], + x: new Date(1538789400000), + y: [6624.61, 6632.2, 6617, 6626.02], }, { - x: new Date(1538791200000), - y: [6627, 6627.62, 6584.22, 6603.02], + x: new Date(1538791200000), + y: [6627, 6627.62, 6584.22, 6603.02], }, { - x: new Date(1538793000000), - y: [6605, 6608.03, 6598.95, 6604.01], + x: new Date(1538793000000), + y: [6605, 6608.03, 6598.95, 6604.01], }, { - x: new Date(1538794800000), - y: [6604.5, 6614.4, 6602.26, 6608.02], + x: new Date(1538794800000), + y: [6604.5, 6614.4, 6602.26, 6608.02], }, { - x: new Date(1538796600000), - y: [6608.02, 6610.68, 6601.99, 6608.91], + x: new Date(1538796600000), + y: [6608.02, 6610.68, 6601.99, 6608.91], }, { - x: new Date(1538798400000), - y: [6608.91, 6618.99, 6608.01, 6612], + x: new Date(1538798400000), + y: [6608.91, 6618.99, 6608.01, 6612], }, { - x: new Date(1538800200000), - y: [6612, 6615.13, 6605.09, 6612], + x: new Date(1538800200000), + y: [6612, 6615.13, 6605.09, 6612], }, { - x: new Date(1538802000000), - y: [6612, 6624.12, 6608.43, 6622.95], + x: new Date(1538802000000), + y: [6612, 6624.12, 6608.43, 6622.95], }, { - x: new Date(1538803800000), - y: [6623.91, 6623.91, 6615, 6615.67], + x: new Date(1538803800000), + y: [6623.91, 6623.91, 6615, 6615.67], }, { - x: new Date(1538805600000), - y: [6618.69, 6618.74, 6610, 6610.4], + x: new Date(1538805600000), + y: [6618.69, 6618.74, 6610, 6610.4], }, { - x: new Date(1538807400000), - y: [6611, 6622.78, 6610.4, 6614.9], + x: new Date(1538807400000), + y: [6611, 6622.78, 6610.4, 6614.9], }, { - x: new Date(1538809200000), - y: [6614.9, 6626.2, 6613.33, 6623.45], + x: new Date(1538809200000), + y: [6614.9, 6626.2, 6613.33, 6623.45], }, { - x: new Date(1538811000000), - y: [6623.48, 6627, 6618.38, 6620.35], + x: new Date(1538811000000), + y: [6623.48, 6627, 6618.38, 6620.35], }, { - x: new Date(1538812800000), - y: [6619.43, 6620.35, 6610.05, 6615.53], + x: new Date(1538812800000), + y: [6619.43, 6620.35, 6610.05, 6615.53], }, { - x: new Date(1538814600000), - y: [6615.53, 6617.93, 6610, 6615.19], + x: new Date(1538814600000), + y: [6615.53, 6617.93, 6610, 6615.19], }, { - x: new Date(1538816400000), - y: [6615.19, 6621.6, 6608.2, 6620], + x: new Date(1538816400000), + y: [6615.19, 6621.6, 6608.2, 6620], }, { - x: new Date(1538818200000), - y: [6619.54, 6625.17, 6614.15, 6620], + x: new Date(1538818200000), + y: [6619.54, 6625.17, 6614.15, 6620], }, { - x: new Date(1538820000000), - y: [6620.33, 6634.15, 6617.24, 6624.61], + x: new Date(1538820000000), + y: [6620.33, 6634.15, 6617.24, 6624.61], }, { - x: new Date(1538821800000), - y: [6625.95, 6626, 6611.66, 6617.58], + x: new Date(1538821800000), + y: [6625.95, 6626, 6611.66, 6617.58], }, { - x: new Date(1538823600000), - y: [6619, 6625.97, 6595.27, 6598.86], + x: new Date(1538823600000), + y: [6619, 6625.97, 6595.27, 6598.86], }, { - x: new Date(1538825400000), - y: [6598.86, 6598.88, 6570, 6587.16], + x: new Date(1538825400000), + y: [6598.86, 6598.88, 6570, 6587.16], }, { - x: new Date(1538827200000), - y: [6588.86, 6600, 6580, 6593.4], + x: new Date(1538827200000), + y: [6588.86, 6600, 6580, 6593.4], }, { - x: new Date(1538829000000), - y: [6593.99, 6598.89, 6585, 6587.81], + x: new Date(1538829000000), + y: [6593.99, 6598.89, 6585, 6587.81], }, { - x: new Date(1538830800000), - y: [6587.81, 6592.73, 6567.14, 6578], + x: new Date(1538830800000), + y: [6587.81, 6592.73, 6567.14, 6578], }, { - x: new Date(1538832600000), - y: [6578.35, 6581.72, 6567.39, 6579], + x: new Date(1538832600000), + y: [6578.35, 6581.72, 6567.39, 6579], }, { - x: new Date(1538834400000), - y: [6579.38, 6580.92, 6566.77, 6575.96], + x: new Date(1538834400000), + y: [6579.38, 6580.92, 6566.77, 6575.96], }, { - x: new Date(1538836200000), - y: [6575.96, 6589, 6571.77, 6588.92], + x: new Date(1538836200000), + y: [6575.96, 6589, 6571.77, 6588.92], }, { - x: new Date(1538838000000), - y: [6588.92, 6594, 6577.55, 6589.22], + x: new Date(1538838000000), + y: [6588.92, 6594, 6577.55, 6589.22], }, { - x: new Date(1538839800000), - y: [6589.3, 6598.89, 6589.1, 6596.08], + x: new Date(1538839800000), + y: [6589.3, 6598.89, 6589.1, 6596.08], }, { - x: new Date(1538841600000), - y: [6597.5, 6600, 6588.39, 6596.25], + x: new Date(1538841600000), + y: [6597.5, 6600, 6588.39, 6596.25], }, { - x: new Date(1538843400000), - y: [6598.03, 6600, 6588.73, 6595.97], + x: new Date(1538843400000), + y: [6598.03, 6600, 6588.73, 6595.97], }, { - x: new Date(1538845200000), - y: [6595.97, 6602.01, 6588.17, 6602], + x: new Date(1538845200000), + y: [6595.97, 6602.01, 6588.17, 6602], }, { - x: new Date(1538847000000), - y: [6602, 6607, 6596.51, 6599.95], + x: new Date(1538847000000), + y: [6602, 6607, 6596.51, 6599.95], }, { - x: new Date(1538848800000), - y: [6600.63, 6601.21, 6590.39, 6591.02], + x: new Date(1538848800000), + y: [6600.63, 6601.21, 6590.39, 6591.02], }, { - x: new Date(1538850600000), - y: [6591.02, 6603.08, 6591, 6591], + x: new Date(1538850600000), + y: [6591.02, 6603.08, 6591, 6591], }, { - x: new Date(1538852400000), - y: [6591, 6601.32, 6585, 6592], + x: new Date(1538852400000), + y: [6591, 6601.32, 6585, 6592], }, { - x: new Date(1538854200000), - y: [6593.13, 6596.01, 6590, 6593.34], + x: new Date(1538854200000), + y: [6593.13, 6596.01, 6590, 6593.34], }, { - x: new Date(1538856000000), - y: [6593.34, 6604.76, 6582.63, 6593.86], + x: new Date(1538856000000), + y: [6593.34, 6604.76, 6582.63, 6593.86], }, { - x: new Date(1538857800000), - y: [6593.86, 6604.28, 6586.57, 6600.01], + x: new Date(1538857800000), + y: [6593.86, 6604.28, 6586.57, 6600.01], }, { - x: new Date(1538859600000), - y: [6601.81, 6603.21, 6592.78, 6596.25], + x: new Date(1538859600000), + y: [6601.81, 6603.21, 6592.78, 6596.25], }, { - x: new Date(1538861400000), - y: [6596.25, 6604.2, 6590, 6602.99], + x: new Date(1538861400000), + y: [6596.25, 6604.2, 6590, 6602.99], }, { - x: new Date(1538863200000), - y: [6602.99, 6606, 6584.99, 6587.81], + x: new Date(1538863200000), + y: [6602.99, 6606, 6584.99, 6587.81], }, { - x: new Date(1538865000000), - y: [6587.81, 6595, 6583.27, 6591.96], + x: new Date(1538865000000), + y: [6587.81, 6595, 6583.27, 6591.96], }, { - x: new Date(1538866800000), - y: [6591.97, 6596.07, 6585, 6588.39], + x: new Date(1538866800000), + y: [6591.97, 6596.07, 6585, 6588.39], }, { - x: new Date(1538868600000), - y: [6587.6, 6598.21, 6587.6, 6594.27], + x: new Date(1538868600000), + y: [6587.6, 6598.21, 6587.6, 6594.27], }, { - x: new Date(1538870400000), - y: [6596.44, 6601, 6590, 6596.55], + x: new Date(1538870400000), + y: [6596.44, 6601, 6590, 6596.55], }, { - x: new Date(1538872200000), - y: [6598.91, 6605, 6596.61, 6600.02], + x: new Date(1538872200000), + y: [6598.91, 6605, 6596.61, 6600.02], }, { - x: new Date(1538874000000), - y: [6600.55, 6605, 6589.14, 6593.01], + x: new Date(1538874000000), + y: [6600.55, 6605, 6589.14, 6593.01], }, { - x: new Date(1538875800000), - y: [6593.15, 6605, 6592, 6603.06], + x: new Date(1538875800000), + y: [6593.15, 6605, 6592, 6603.06], }, { - x: new Date(1538877600000), - y: [6603.07, 6604.5, 6599.09, 6603.89], + x: new Date(1538877600000), + y: [6603.07, 6604.5, 6599.09, 6603.89], }, { - x: new Date(1538879400000), - y: [6604.44, 6604.44, 6600, 6603.5], + x: new Date(1538879400000), + y: [6604.44, 6604.44, 6600, 6603.5], }, { - x: new Date(1538881200000), - y: [6603.5, 6603.99, 6597.5, 6603.86], + x: new Date(1538881200000), + y: [6603.5, 6603.99, 6597.5, 6603.86], }, { - x: new Date(1538883000000), - y: [6603.85, 6605, 6600, 6604.07], + x: new Date(1538883000000), + y: [6603.85, 6605, 6600, 6604.07], }, { - x: new Date(1538884800000), - y: [6604.98, 6606, 6604.07, 6606], + x: new Date(1538884800000), + y: [6604.98, 6606, 6604.07, 6606], }, - ], + ], }, -], -chart: { + ], + chart: { height: 350, type: "candlestick", -}, -title: { + }, + title: { text: "CandleStick Chart - Category X-axis", align: "left", -}, -annotations: { + }, + annotations: { xaxis: [ - { + { x: "Oct 06 14:00", borderColor: "#00E396", label: { - borderColor: "#00E396", - style: { + borderColor: "#00E396", + style: { fontSize: "12px", color: "#fff", background: "#00E396", + }, + orientation: "horizontal", + offsetY: 7, + text: "Annotation Test", }, - orientation: "horizontal", - offsetY: 7, - text: "Annotation Test", - }, - }, + }, ], -}, -tooltip: { + }, + tooltip: { enabled: true, -}, -xaxis: { + }, + xaxis: { type: "category", labels: { - formatter: function(val) { - return dayjs(val).format("MMM DD HH:mm"); - }, + formatter: function (val) { + return dayjs(val).format("MMM DD HH:mm") + }, }, -}, -yaxis: { + }, + yaxis: { tooltip: { - enabled: true, + enabled: true, }, -}, -}; + }, +} var barOptions = { series: [ @@ -352,13 +352,12 @@ var barOptions = { }, tooltip: { y: { - formatter: function(val) { - return "$ " + val + " thousands"; + formatter: function (val) { + return "$ " + val + " thousands" }, }, }, -}; - +} var radialGradientOptions = { series: [75], @@ -411,8 +410,8 @@ var radialGradientOptions = { fontSize: "17px", }, value: { - formatter: function(val) { - return parseInt(val); + formatter: function (val) { + return parseInt(val) }, color: "#111", fontSize: "36px", @@ -438,46 +437,46 @@ var radialGradientOptions = { lineCap: "round", }, labels: ["Percent"], -}; - var areaOptions = { - series: [ - { - name: "series1", - data: [31, 40, 28, 51, 42, 109, 100], - }, - { - name: "series2", - data: [11, 32, 45, 32, 34, 52, 41], - }, - ], - chart: { - height: 350, - type: "area", - }, - dataLabels: { - enabled: false, - }, - stroke: { - curve: "smooth", - }, - xaxis: { - type: "datetime", - categories: [ - "2018-09-19T00:00:00.000Z", - "2018-09-19T01:30:00.000Z", - "2018-09-19T02:30:00.000Z", - "2018-09-19T03:30:00.000Z", - "2018-09-19T04:30:00.000Z", - "2018-09-19T05:30:00.000Z", - "2018-09-19T06:30:00.000Z", - ], - }, - tooltip: { - x: { - format: "dd/MM/yy HH:mm", - }, - }, - }; +} +var areaOptions = { + series: [ + { + name: "series1", + data: [31, 40, 28, 51, 42, 109, 100], + }, + { + name: "series2", + data: [11, 32, 45, 32, 34, 52, 41], + }, + ], + chart: { + height: 350, + type: "area", + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: "smooth", + }, + xaxis: { + type: "datetime", + categories: [ + "2018-09-19T00:00:00.000Z", + "2018-09-19T01:30:00.000Z", + "2018-09-19T02:30:00.000Z", + "2018-09-19T03:30:00.000Z", + "2018-09-19T04:30:00.000Z", + "2018-09-19T05:30:00.000Z", + "2018-09-19T06:30:00.000Z", + ], + }, + tooltip: { + x: { + format: "dd/MM/yy HH:mm", + }, + }, +} var radialBarOptions = { series: [44, 55, 67, 83], chart: { @@ -496,24 +495,27 @@ var radialBarOptions = { total: { show: true, label: "Total", - formatter: function(w) { + formatter: function (w) { // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function - return 249; + return 249 }, }, }, }, }, labels: ["Apples", "Oranges", "Bananas", "Berries"], -}; -var bar = new ApexCharts(document.querySelector("#bar"), barOptions); -var line = new ApexCharts(document.querySelector("#line"), lineOptions); -var candle = new ApexCharts(document.querySelector("#candle"), candleOptions); -var radialGradient = new ApexCharts(document.querySelector("#radialGradient"), radialGradientOptions); -var area = new ApexCharts(document.querySelector("#area"), areaOptions); +} +var bar = new ApexCharts(document.querySelector("#bar"), barOptions) +var line = new ApexCharts(document.querySelector("#line"), lineOptions) +var candle = new ApexCharts(document.querySelector("#candle"), candleOptions) +var radialGradient = new ApexCharts( + document.querySelector("#radialGradient"), + radialGradientOptions +) +var area = new ApexCharts(document.querySelector("#area"), areaOptions) -area.render(); -radialGradient.render(); -candle.render(); -bar.render(); -line.render(); +area.render() +radialGradient.render() +candle.render() +bar.render() +line.render() diff --git a/src/assets/js/pages/ui-chartjs.js b/src/assets/js/pages/ui-chartjs.js index b3312860d..3648c8053 100644 --- a/src/assets/js/pages/ui-chartjs.js +++ b/src/assets/js/pages/ui-chartjs.js @@ -1,421 +1,439 @@ - var chartColors = { - red: 'rgb(255, 99, 132)', - orange: 'rgb(255, 159, 64)', - yellow: 'rgb(255, 205, 86)', - green: 'rgb(75, 192, 192)', - info: '#41B1F9', - blue: '#3245D1', - purple: 'rgb(153, 102, 255)', - grey: '#EBEFF6' -}; + red: "rgb(255, 99, 132)", + orange: "rgb(255, 159, 64)", + yellow: "rgb(255, 205, 86)", + green: "rgb(75, 192, 192)", + info: "#41B1F9", + blue: "#3245D1", + purple: "rgb(153, 102, 255)", + grey: "#EBEFF6", +} var config1 = { - type: "line", - data: { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [ - { - label: "Balance", - backgroundColor: "#fff", - borderColor: "#fff", - data: [20, 40, 20, 70, 10, 50, 20], - fill: false, - pointBorderWidth: 100, - pointBorderColor: "transparent", - pointRadius: 3, - pointBackgroundColor: "transparent", - pointHoverBackgroundColor: "rgba(63,82,227,1)", - }, - ], + type: "line", + data: { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [ + { + label: "Balance", + backgroundColor: "#fff", + borderColor: "#fff", + data: [20, 40, 20, 70, 10, 50, 20], + fill: false, + pointBorderWidth: 100, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: { + left: -10, + top: 10, + }, }, - options: { - responsive: true, - maintainAspectRatio: false, - layout: { - padding: { - left: -10, - top: 10, - }, - }, - legend: { + legend: { + display: false, + }, + title: { + display: false, + }, + tooltips: { + mode: "index", + intersect: false, + }, + hover: { + mode: "nearest", + intersect: true, + }, + scales: { + xAxes: [ + { + gridLines: { + drawBorder: false, display: false, - }, - title: { + }, + ticks: { display: false, + }, }, - tooltips: { - mode: "index", - intersect: false, - }, - hover: { - mode: "nearest", - intersect: true, - }, - scales: { - xAxes: [ - { - gridLines: { - drawBorder: false, - display: false, - }, - ticks: { - display: false, - }, - }, - ], - yAxes: [ - { - gridLines: { - display: false, - drawBorder: false, - }, - ticks: { - display: false, - }, - }, - ], + ], + yAxes: [ + { + gridLines: { + display: false, + drawBorder: false, + }, + ticks: { + display: false, + }, }, + ], }, -}; + }, +} var config2 = { - type: "line", - data: { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [ - { - label: "Revenue", - backgroundColor: "#fff", - borderColor: "#fff", - data: [20, 800, 300, 400, 10, 50, 20], - fill: false, - pointBorderWidth: 100, - pointBorderColor: "transparent", - pointRadius: 3, - pointBackgroundColor: "transparent", - pointHoverBackgroundColor: "rgba(63,82,227,1)", - }, - ], + type: "line", + data: { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [ + { + label: "Revenue", + backgroundColor: "#fff", + borderColor: "#fff", + data: [20, 800, 300, 400, 10, 50, 20], + fill: false, + pointBorderWidth: 100, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: { + left: -10, + top: 10, + }, }, - options: { - responsive: true, - maintainAspectRatio: false, - layout: { - padding: { - left: -10, - top: 10, - }, - }, - legend: { + legend: { + display: false, + }, + title: { + display: false, + }, + tooltips: { + mode: "index", + intersect: false, + }, + hover: { + mode: "nearest", + intersect: true, + }, + scales: { + xAxes: [ + { + gridLines: { + drawBorder: false, display: false, - }, - title: { + }, + ticks: { display: false, + }, }, - tooltips: { - mode: "index", - intersect: false, - }, - hover: { - mode: "nearest", - intersect: true, - }, - scales: { - xAxes: [ - { - gridLines: { - drawBorder: false, - display: false, - }, - ticks: { - display: false, - }, - }, - ], - yAxes: [ - { - gridLines: { - display: false, - drawBorder: false, - }, - ticks: { - display: false, - }, - }, - ], + ], + yAxes: [ + { + gridLines: { + display: false, + drawBorder: false, + }, + ticks: { + display: false, + }, }, + ], }, -}; + }, +} var config3 = { - type: "line", - data: { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [ - { - label: "Orders", - backgroundColor: "#fff", - borderColor: "#fff", - data: [20, 40, 20, 200, 10, 540, 723], - fill: false, - pointBorderWidth: 100, - pointBorderColor: "transparent", - pointRadius: 3, - pointBackgroundColor: "transparent", - pointHoverBackgroundColor: "rgba(63,82,227,1)", - }, - ], + type: "line", + data: { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [ + { + label: "Orders", + backgroundColor: "#fff", + borderColor: "#fff", + data: [20, 40, 20, 200, 10, 540, 723], + fill: false, + pointBorderWidth: 100, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: { + left: -10, + top: 10, + }, }, - options: { - responsive: true, - maintainAspectRatio: false, - layout: { - padding: { - left: -10, - top: 10, - }, - }, - legend: { + legend: { + display: false, + }, + title: { + display: false, + text: "Chart.js Line Chart", + }, + tooltips: { + mode: "index", + intersect: false, + }, + hover: { + mode: "nearest", + intersect: true, + }, + scales: { + xAxes: [ + { + gridLines: { + drawBorder: false, display: false, - }, - title: { + }, + ticks: { display: false, - text: "Chart.js Line Chart", + }, }, - tooltips: { - mode: "index", - intersect: false, - }, - hover: { - mode: "nearest", - intersect: true, - }, - scales: { - xAxes: [ - { - gridLines: { - drawBorder: false, - display: false, - }, - ticks: { - display: false, - }, - }, - ], - yAxes: [ - { - gridLines: { - display: false, - drawBorder: false, - }, - ticks: { - display: false, - }, - }, - ], + ], + yAxes: [ + { + gridLines: { + display: false, + drawBorder: false, + }, + ticks: { + display: false, + }, }, + ], }, -}; + }, +} var config4 = { - type: "line", - data: { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [ - { - label: "My First dataset", - backgroundColor: "#fff", - borderColor: "#fff", - data: [20, 40, 20, 70, 10, 5, 23], - fill: false, - pointBorderWidth: 100, - pointBorderColor: "transparent", - pointRadius: 3, - pointBackgroundColor: "transparent", - pointHoverBackgroundColor: "rgba(63,82,227,1)", - }, - ], + type: "line", + data: { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [ + { + label: "My First dataset", + backgroundColor: "#fff", + borderColor: "#fff", + data: [20, 40, 20, 70, 10, 5, 23], + fill: false, + pointBorderWidth: 100, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + layout: { + padding: { + left: -10, + top: 10, + }, }, - options: { - responsive: true, - maintainAspectRatio: false, - layout: { - padding: { - left: -10, - top: 10, - }, - }, - legend: { + legend: { + display: false, + }, + title: { + display: false, + text: "Chart.js Line Chart", + }, + tooltips: { + mode: "index", + intersect: false, + }, + hover: { + mode: "nearest", + intersect: true, + }, + scales: { + xAxes: [ + { + gridLines: { + drawBorder: false, display: false, - }, - title: { + }, + ticks: { display: false, - text: "Chart.js Line Chart", - }, - tooltips: { - mode: "index", - intersect: false, + }, }, - hover: { - mode: "nearest", - intersect: true, - }, - scales: { - xAxes: [ - { - gridLines: { - drawBorder: false, - display: false, - }, - ticks: { - display: false, - }, - }, - ], - yAxes: [ - { - gridLines: { - display: false, - drawBorder: false, - }, - ticks: { - display: false, - }, - }, - ], + ], + yAxes: [ + { + gridLines: { + display: false, + drawBorder: false, + }, + ticks: { + display: false, + }, }, + ], }, -}; + }, +} - -var ctxBar = document.getElementById("bar").getContext("2d"); +var ctxBar = document.getElementById("bar").getContext("2d") var myBar = new Chart(ctxBar, { - type: 'bar', - data: { - labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], - datasets: [{ - label: 'Students', - backgroundColor: [chartColors.grey, chartColors.grey, chartColors.grey, chartColors.grey, chartColors.info, chartColors.blue, chartColors.grey], - data: [ - 5, - 10, - 30, - 40, - 35, - 55, - 15, - ] - }] + type: "bar", + data: { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + datasets: [ + { + label: "Students", + backgroundColor: [ + chartColors.grey, + chartColors.grey, + chartColors.grey, + chartColors.grey, + chartColors.info, + chartColors.blue, + chartColors.grey, + ], + data: [5, 10, 30, 40, 35, 55, 15], + }, + ], + }, + options: { + responsive: true, + barRoundness: 1, + title: { + display: true, + text: "Students in 2020", }, - options: { - responsive: true, - barRoundness: 1, - title: { - display: true, - text: "Students in 2020" + legend: { + display: false, + }, + scales: { + yAxes: [ + { + ticks: { + beginAtZero: true, + suggestedMax: 40 + 20, + padding: 10, + }, + gridLines: { + drawBorder: false, + }, }, - legend: { - display: false + ], + xAxes: [ + { + gridLines: { + display: false, + drawBorder: false, + }, }, - scales: { - yAxes: [{ - ticks: { - beginAtZero: true, - suggestedMax: 40 + 20, - padding: 10, - }, - gridLines: { - drawBorder: false, - } - }], - xAxes: [{ - gridLines: { - display: false, - drawBorder: false - } - }] - } - } -}); -var line = document.getElementById("line").getContext("2d"); -var gradient = line.createLinearGradient(0, 0, 0, 400); -gradient.addColorStop(0, 'rgba(50, 69, 209,1)'); -gradient.addColorStop(1, 'rgba(265, 177, 249,0)'); + ], + }, + }, +}) +var line = document.getElementById("line").getContext("2d") +var gradient = line.createLinearGradient(0, 0, 0, 400) +gradient.addColorStop(0, "rgba(50, 69, 209,1)") +gradient.addColorStop(1, "rgba(265, 177, 249,0)") -var gradient2 = line.createLinearGradient(0, 0, 0, 400); -gradient2.addColorStop(0, 'rgba(255, 91, 92,1)'); -gradient2.addColorStop(1, 'rgba(265, 177, 249,0)'); +var gradient2 = line.createLinearGradient(0, 0, 0, 400) +gradient2.addColorStop(0, "rgba(255, 91, 92,1)") +gradient2.addColorStop(1, "rgba(265, 177, 249,0)") var myline = new Chart(line, { - type: 'line', - data: { - labels: ['16-07-2018', '17-07-2018', '18-07-2018', '19-07-2018', '20-07-2018', '21-07-2018', '22-07-2018', '23-07-2018', '24-07-2018', '25-07-2018'], - datasets: [{ - label: 'Balance', - data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45], - backgroundColor: "rgba(50, 69, 209,.6)", - borderWidth: 3, - borderColor: 'rgba(63,82,227,1)', - pointBorderWidth: 0, - pointBorderColor: 'transparent', - pointRadius: 3, - pointBackgroundColor: 'transparent', - pointHoverBackgroundColor: 'rgba(63,82,227,1)', - }, { - label: 'Balance', - data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53], - backgroundColor: "rgba(253, 183, 90,.6)", - borderWidth: 3, - borderColor: 'rgba(253, 183, 90,.6)', - pointBorderWidth: 0, - pointBorderColor: 'transparent', - pointRadius: 3, - pointBackgroundColor: 'transparent', - pointHoverBackgroundColor: 'rgba(63,82,227,1)', - }] + type: "line", + data: { + labels: [ + "16-07-2018", + "17-07-2018", + "18-07-2018", + "19-07-2018", + "20-07-2018", + "21-07-2018", + "22-07-2018", + "23-07-2018", + "24-07-2018", + "25-07-2018", + ], + datasets: [ + { + label: "Balance", + data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45], + backgroundColor: "rgba(50, 69, 209,.6)", + borderWidth: 3, + borderColor: "rgba(63,82,227,1)", + pointBorderWidth: 0, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + { + label: "Balance", + data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53], + backgroundColor: "rgba(253, 183, 90,.6)", + borderWidth: 3, + borderColor: "rgba(253, 183, 90,.6)", + pointBorderWidth: 0, + pointBorderColor: "transparent", + pointRadius: 3, + pointBackgroundColor: "transparent", + pointHoverBackgroundColor: "rgba(63,82,227,1)", + }, + ], + }, + options: { + responsive: true, + layout: { + padding: { + top: 10, + }, }, - options: { - responsive: true, - layout: { - padding: { - top: 10, - }, - }, - tooltips: { - intersect: false, - titleFontFamily: 'Helvetica', - titleMarginBottom: 10, - xPadding: 10, - yPadding: 10, - cornerRadius: 3, - }, - legend: { + tooltips: { + intersect: false, + titleFontFamily: "Helvetica", + titleMarginBottom: 10, + xPadding: 10, + yPadding: 10, + cornerRadius: 3, + }, + legend: { + display: true, + }, + scales: { + yAxes: [ + { + gridLines: { + display: true, + drawBorder: true, + }, + ticks: { display: true, + }, }, - scales: { - yAxes: [ - { - gridLines: { - display: true, - drawBorder: true, - }, - ticks: { - display: true, - }, - }, - ], - xAxes: [ - { - gridLines: { - drawBorder: false, - display: false, - }, - ticks: { - display: false, - }, - }, - ], + ], + xAxes: [ + { + gridLines: { + drawBorder: false, + display: false, + }, + ticks: { + display: false, + }, }, - } -}); + ], + }, + }, +}) // let ctx1 = document.getElementById("canvas1").getContext("2d"); // let ctx2 = document.getElementById("canvas2").getContext("2d"); diff --git a/src/assets/js/pages/ui-todolist.js b/src/assets/js/pages/ui-todolist.js index 92e1f5da5..b5ff50298 100644 --- a/src/assets/js/pages/ui-todolist.js +++ b/src/assets/js/pages/ui-todolist.js @@ -1,2 +1,5 @@ - -dragula([document.getElementById("widget-todo-list")], { moves: function (e, a, t) { return t.classList.contains("cursor-move") } }) \ No newline at end of file +dragula([document.getElementById("widget-todo-list")], { + moves: function (e, a, t) { + return t.classList.contains("cursor-move") + }, +})