Merge pull request #2 from alexdcrane/patch-3

Fixed dashboard widget chart

app_config.php

@@ -185,3 +185,21 @@
 	$apps[$x]['default_settings'][$y]['default_setting_value'] = "maintenance_logs";
 	$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
 	$apps[$x]['default_settings'][$y]['default_setting_description'] = "Maintenance log application to remove old entries.";
+	$y++;
+	$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "074addbd-c010-49f8-bb84-72f14d4ed197";
+	$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+	$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "dashboard_maintenance_chart_main_color";
+	$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+	$apps[$x]['default_settings'][$y]['default_setting_value'] = "#2a9df4";
+	$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+	$apps[$x]['default_settings'][$y]['default_setting_description'] = "";
+	$y++;
+	$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "2b39f31a-69ad-4083-98c7-e97f50bd30ce";
+	$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+	$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "dashboard_maintenance_chart_sub_color";
+	$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+	$apps[$x]['default_settings'][$y]['default_setting_value'] = "#d4d4d4";
+	$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+	$apps[$x]['default_settings'][$y]['default_setting_description'] = "";
+
+?>

resources/dashboard/maintenance.php

@@ -182,18 +182,67 @@
 if (permission_exists('maintenance_view')) {
 	//show the box
 	echo "<div class='hud_box'>";
-		echo "<div class='hud_container' onclick=\"$('#hud_maintenance_details').slideToggle('fast'); toggle_grid_row_end('Maintenance')\">";
-			echo "<span class='hud_title' onclick=\"document.location.href='/app/maintenance/maintenance.php'\">Maintenance</span>";
+		echo "<div class='hud_content' onclick=\"$('#hud_maintenance_details').slideToggle('fast'); toggle_grid_row_end('Maintenance')\">";
+			echo "<span class='hud_title' onclick=\"document.location.href='/app/maintenance/maintenance.php'\">".$text['label-maintenance']."</span>";
 			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 style='width: 150px; height: 150px; padding-top: 7px;'><canvas id='maintenance_chart'></canvas></div>";
-				echo "<script src='/app/maintenance/resources/javascript/maintenance_chart.js'></script>";
+				?>
+				<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') ?? "#2a9df4"); ?>',
+										'<?php echo ($settings->get('theme', 'dashboard_maintenance_chart_sub_color') ?? "#d4d4d4"); ?>'
+									],
+									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 === 'none') {
+			if ($dashboard_chart_type === 'number') {
 				//echo "<script src='/app/maintenance/resources/javascript/maintenance_chart.js'></script>";
-				echo "<span class='hud_stat' style='color: $dashboard_number_text_color; padding-bottom: 27px;'>$total_running_maintenance_apps / $total_maintenance_apps</span>";
+				echo "<span class='hud_stat'>$total_running_maintenance_apps / $total_maintenance_apps</span>";
 			}
 		echo "</div>";
 		//form for maintenance changes

resources/javascript/maintenance_chart.js

@@ -1,41 +0,0 @@
-const maintenance_chart = new Chart(
-		document.getElementById('maintenance_chart').getContext('2d'),
-		{
-			type: 'doughnut',
-			data: {
-				labels: [active, inactive],
-				datasets: [{
-						data: [domain_active, domain_inactive],
-						backgroundColor: [
-							maintenance_chart_main_background_color,
-							maintenance_chart_sub_background_color
-						],
-						borderColor: maintenance_chart_border_color,
-						borderWidth: maintenance_chart_border_width,
-						cutout: chart_cutout
-					}]
-			},
-			options: {
-				responsive: true,
-				maintainAspectRatio: false,
-				plugins: {
-					chart_counter: {
-						chart_text: domain_total
-					},
-					legend: {
-						position: 'right',
-						reverse: true,
-						labels: {
-							usePointStyle: true,
-							pointStyle: 'rect'
-						}
-					},
-					title: {
-						display: true,
-						text: label - maintenance
-					}
-				}
-			},
-			plugins: [chart_counter],
-		}
-);