Fix a few bugs

docs/dashboard.html

@@ -174,17 +174,17 @@ <h4>Stars</h4>
       <div class="row">
         <div class="col-md-6">
           <div class="tile">
-            <h3 class="tile-title">Monthly Sales</h3>
+            <h3 class="tile-title">Weekly Sales - Last week</h3>
             <div class="ratio ratio-16x9">
-              <canvas id="salesChart"></canvas>
+              <div id="salesChart"></div>
             </div>
           </div>
         </div>
         <div class="col-md-6">
           <div class="tile">
             <h3 class="tile-title">Support Requests</h3>
-            <div class="ratio ratio-16x9 d-flex justify-content-center">
-              <canvas id="supportRequestChart"></canvas>
+            <div class="ratio ratio-16x9">
+              <div id="supportRequestChart"></div>
             </div>
           </div>
         </div>
@@ -195,55 +195,70 @@ <h3 class="tile-title">Support Requests</h3>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/main.js"></script>
     <!-- Page specific javascripts-->
-    <script type="text/javascript" src="js/plugins/chart.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
     <script type="text/javascript">
       const salesData = {
-      	type: "line",
-      	data: {
-      		labels: [
-      			"Jan",
-      			"Feb",
-      			"March",
-      			"April",
-      			"May",
-      			"June",
-      		],
-      		datasets: [{
-      			label: 'Monthly Sales',
-      			data: [65, 59, 80, 81, 56, 55, 40],
-      			fill: false,
-      			borderColor: 'rgb(75, 192, 192)',
-      			tension: 0.1
-      		}]
+      	xAxis: {
+      		type: 'category',
+      		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      	},
+      	yAxis: {
+      		type: 'value',
+      		axisLabel: {
+      			formatter: '${value}'
+      		}
+      	},
+      	series: [
+      		{
+      			data: [150, 230, 224, 218, 135, 147, 260],
+      			type: 'line',
+      			smooth: true
+      		}
+      	],
+      	tooltip: {
+      		trigger: 'axis',
+      		formatter: "<b>{b0}:</b> ${c0}"
       	}
       }
 
       const supportRequests = {
-      	type: "doughnut",
-      	data: {
-      		labels: [
-      			'In-Progress',
-      			'Complete',
-      			'Delayed'
-      		],
-      		datasets: [{
-      			label: 'Support Requests',
-      			data: [300, 50, 100],
-      			backgroundColor: [
-      				'#EFCC00',
-      				'#5AD3D1',
-      				'#FF5A5E'
+      	tooltip: {
+      		trigger: 'item'
+      	},
+      	legend: {
+      		orient: 'vertical',
+      		left: 'left'
+      	},
+      	series: [
+      		{
+      			name: 'Support Requests',
+      			type: 'pie',
+      			radius: '50%',
+      			data: [
+      				{ value: 300, name: 'In Progress' },
+      				{ value: 50, name: 'Delayed' },
+      				{ value: 100, name: 'Complete' }
       			],
-      			hoverOffset: 4
-      		}]
-      	}
+      			emphasis: {
+      				itemStyle: {
+      					shadowBlur: 10,
+      					shadowOffsetX: 0,
+      					shadowColor: 'rgba(0, 0, 0, 0.5)'
+      				}
+      			}
+      		}
+      	]
       };
 
-      const salesChartCtx = document.getElementById('salesChart');
-      new Chart(salesChartCtx, salesData);
+      const salesChartElement = document.getElementById('salesChart');
+      const salesChart = echarts.init(salesChartElement, null, { renderer: 'svg' });
+      salesChart.setOption(salesData);
+      new ResizeObserver(() => salesChart.resize()).observe(salesChartElement);
 
-      const supportChartCtx = document.getElementById('supportRequestChart');
-      new Chart(supportChartCtx, supportRequests);
+      const supportChartElement = document.getElementById("supportRequestChart")
+      const supportChart = echarts.init(supportChartElement, null, { renderer: 'svg' });
+      supportChart.setOption(supportRequests);
+      new ResizeObserver(() => supportChart.resize()).observe(supportChartElement);
     </script>
     <!-- Google analytics script-->
     <script type="text/javascript">

node-dev-server.js

@@ -1,12 +1,12 @@
 // Node JS development server for Vali Admin
 
-var http = require("http"),
-	url = require("url"),
-	path = require("path"),
-	fs = require("fs")
-	port = process.argv[2] || 8888;
+const http = require("http");
+const url = require("url");
+const path = require("path");
+const fs = require("fs");
+const port = process.argv[2] || 8888;
 
-http.createServer(function(request, response) {
+http.createServer(function (request, response) {
 	var uri = url.parse(request.url).pathname,
 		filename = path.join(process.cwd(), 'docs', uri);
 
@@ -19,29 +19,29 @@ http.createServer(function(request, response) {
 		case '.ico': contentType = 'image/x-icon'; break;
 		case '.svg': contentType = 'image/svg+xml'; break;
 	}
-	
-	fs.exists(filename, function(exists) {
-		if(!exists) {
-			response.writeHead(404, {"Content-Type": "text/plain"});
+
+	fs.exists(filename, function (exists) {
+		if (!exists) {
+			response.writeHead(404, { "Content-Type": "text/plain" });
 			response.write("404 Not Found\n");
 			response.end();
 			return;
 		}
 
 		if (fs.statSync(filename).isDirectory()) filename += '/index.html';
 
-		fs.readFile(filename, "binary", function(err, file) {
-			if(err) {
-				response.writeHead(500, {"Content-Type": "text/plain"});
+		fs.readFile(filename, "binary", function (err, file) {
+			if (err) {
+				response.writeHead(500, { "Content-Type": "text/plain" });
 				response.write(err + "\n");
 				response.end();
 				return;
 			}
-			response.writeHead(200, {'Content-Type': contentType});
+			response.writeHead(200, { 'Content-Type': contentType });
 			response.write(file, "binary");
 			response.end();
 		});
 	});
 }).listen(parseInt(port, 10));
 
-console.log("Server is running on http://localhost:" + port );
+console.log("Server is running on http://localhost:" + port);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vali-admin",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "An admin theme built with Bootstrap, sass and PugJs",
   "devDependencies": {
     "autoprefixer": "^9.8.8",
@@ -10,7 +10,7 @@
     "grunt-contrib-watch": "^1.1.0",
     "grunt-postcss": "^0.9.0",
     "grunt-sass": "^3.1.0",
-    "sass": "^1.63.4"
+    "sass": "^1.69.3"
   },
   "scripts": {
     "dev": "grunt watch",
@@ -33,7 +33,7 @@
   },
   "homepage": "http://pratikborsadiya.in/blog/vali-admin",
   "dependencies": {
-    "bootstrap": "^5.3.0"
+    "bootstrap": "^5.3.2"
   },
   "files": [
     "docs"