Update maintenance.php

resources/dashboard/maintenance.php

@@ -187,55 +187,57 @@ if (permission_exists('maintenance_view')) {
 			echo "<script src='/app/maintenance/resources/javascript/maintenance_functions.js'></script>";
 			if ($dashboard_chart_type === 'doughnut') {
 				//add an event listener for showing and hiding the days input box
-				echo "<div class='hud_chart' style='width: 250px;'><canvas id='maintenance_chart'></canvas></div>";
-				echo "	<script>\n";
-				echo "		const maintenance_chart = new Chart(\n";
-				echo "			document.getElementById('maintenance_chart').getContext('2d'),\n";
-				echo "			{\n";
-				echo "				type: 'doughnut',\n";
-				echo "				data: {\n";
-				echo "					labels: ['".$text['label-active'].": ".$total_running_maintenance_apps."', '".$text['label-total'].": ".$total_maintenance_apps."'],\n";
-				echo "					datasets: [{\n";
-				echo "						data: [".$total_running_maintenance_apps.", ".$total_maintenance_apps."],\n";
-				echo "						backgroundColor: [\n";
-				echo "							'".$settings->get('theme', 'dashboard_maintenance_chart_main_color')."',\n";
-				echo "							'".$settings->get('theme', 'dashboard_maintenance_chart_sub_color')."'\n";
-				echo "						],\n";
-				echo "						borderColor: '".$settings->get('theme', 'dashboard_chart_border_color')."',\n";
-				echo "						borderWidth: '".$settings->get('theme', 'dashboard_chart_border_width')."',\n";
-				echo "					}]\n";
-				echo "				},\n";
-				echo "				options: {\n";
-				echo "					plugins: {\n";
-				echo "						chart_number: {\n";
-				echo "							text: ".$total_running_maintenance_apps."\n";
-				echo "						},\n";
-				echo "						legend: {\n";
-				echo "							display: true,\n";
-				echo "							position: 'right',\n";
-				echo "							reverse: true,\n";
-				echo "							labels: {\n";
-				echo "								usePointStyle: true,\n";
-				echo "								pointStyle: 'rect'\n";
-				echo "							}\n";
-				echo "						},\n";
-				echo "					}\n";
-				echo "				},\n";
-				echo "				plugins: [{\n";
-				echo "					id: 'chart_number',\n";
-				echo "					beforeDraw(chart, args, options){\n";
-				echo "						const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
-				echo "						ctx.font = chart_text_size + ' ' + chart_text_font;\n";
-				echo "						ctx.textBaseline = 'middle';\n";
-				echo "						ctx.textAlign = 'center';\n";
-				echo "						ctx.fillStyle = '".$dashboard_number_text_color."';\n";
-				echo "						ctx.fillText(options.text, width / 2, top + (height / 2));\n";
-				echo "						ctx.save();\n";
-				echo "					}\n";
-				echo "				}]\n";
-				echo "			}\n";
-				echo "		);\n";
-				echo "	</script>\n";
+				?>
+				<div class='hud_chart' style='width: 250px;'><canvas id='maintenance_chart'></canvas></div>
+				<script>
+					const maintenance_chart = new Chart(
+						document.getElementById('maintenance_chart').getContext('2d'),
+						{
+							type: 'doughnut',
+							data: {
+								labels: ['<?php echo $text['label-running']; ?>: <?php echo $total_running_maintenance_apps; ?>', '<?php echo $text['label-total']; ?>: <?php echo $total_maintenance_apps; ?>'],
+								datasets: [{
+									data: [<?php echo $total_running_maintenance_apps; ?>, <?php echo $total_maintenance_apps; ?>],
+									backgroundColor: [
+										'<?php echo $settings->get('theme', 'dashboard_maintenance_chart_main_color'); ?>',
+										'<?php echo $settings->get('theme', 'dashboard_maintenance_chart_sub_color'); ?>'
+									],
+									borderColor: '<?php echo $settings->get('theme', 'dashboard_chart_border_color'); ?>',
+									borderWidth: '<?php echo $settings->get('theme', 'dashboard_chart_border_width'); ?>',
+								}]
+							},
+							options: {
+								plugins: {
+									chart_number: {
+										text: '<?php echo $total_running_maintenance_apps; ?>'
+									},
+									legend: {
+										display: true,
+										position: 'right',
+										reverse: true,
+										labels: {
+											usePointStyle: true,
+											pointStyle: 'rect'
+										}
+									},
+								}
+							},
+							plugins: [{
+								id: 'chart_number',
+								beforeDraw(chart, args, options){
+									const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
+									ctx.font = chart_text_size + ' ' + chart_text_font;
+									ctx.textBaseline = 'middle';
+									ctx.textAlign = 'center';
+									ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
+									ctx.fillText(options.text, width / 2, top + (height / 2));
+									ctx.save();
+								}
+							}]
+						}
+					);
+				</script>
+				<?php
 				//echo "<span class='hud_stat' style='color: $dashboard_number_text_color; padding-bottom: 27px;'>$total_running_maintenance_apps / $total_maintenance_apps</span>";
 			}
 			if ($dashboard_chart_type === 'number') {