@@ -10478,13 +10478,27 @@ const ChartComputersDisco = new ApexCharts(document.querySelector("#ChartCompute
ChartComputersDisco.render();
// --------------------------
-// Computers Page - Computers Count by OS
+// Computers Page - Computers Count by OS (Data shown as percentages)
// --------------------------
-// Initialize ApexCharts
+// Calculate the total sum of the series to convert values to percentages
+const total = $DomainComputerOSListJsValues.reduce((a, b) => a + b, 0);
+
+// Map the OS names and values into a combined array and sort by values in descending order
+const sortedData = $DomainComputerOSListJsNames.map((name, index) => ({
+ name: name,
+ value: ($DomainComputerOSListJsValues[index] / total) * 100 // Convert to percentages
+})).sort((a, b) => b.value - a.value); // Sort by percentage in descending order
+
+// Extract the sorted names and values back into separate arrays
+const sortedNames = sortedData.map(item => item.name);
+const sortedValues = sortedData.map(item => item.value);
+
+// Initialize ApexCharts with sorted data
const ChartComputersOSOptions = {
series: [{
- data: $DomainComputerOSListJsValues
+ name: 'Percentage',
+ data: sortedValues // Use sorted values for percentages
}],
chart: {
type: 'bar',
@@ -10507,32 +10521,55 @@ const ChartComputersOSOptions = {
}
},
dataLabels: {
- enabled: false
+ enabled: false // Disable data labels
+ },
+ tooltip: {
+ y: {
+ formatter: function (val) {
+ return val.toFixed(2) + "%"; // Show tooltips as percentages
+ }
+ }
},
grid: {
show: false
},
xaxis: {
- categories: $DomainComputerOSListJsNames,
+ categories: sortedNames, // Use sorted names for categories
labels: {
style: {
fontSize: '12px'
}
+ },
+ title: {
+ text: 'Percentage', // Custom label for x-axis
+ style: {
+ fontSize: '12px',
+ fontWeight: 'normal',
+ color: '#000'
+ }
}
},
yaxis: {
labels: {
style: {
fontSize: '12px',
- width: 400 // This will allocate a fixed space for the y-axis labels (adjust width as needed)
+ width: 400 // Allocate fixed space for y-axis labels
},
- maxWidth: 400 // This ensures the y-axis labels take up to 50% of the chart space
+ maxWidth: 400
+ },
+ title: {
+ text: 'OS', // Custom label for y-axis
+ style: {
+ fontSize: '12px',
+ fontWeight: 'normal',
+ color: '#000'
+ }
}
},
title: {
- text: 'Computer Count by OS',
- align: 'center', // Aligns the title, can be 'left', 'center', or 'right'
- margin: 10, // Adjusts the space between the title and the chart
+ text: 'Computer Count OS Percentage Summary',
+ align: 'center', // Aligns the title
+ margin: 10, // Space between the title and the chart
style: {
fontSize: '16px',
fontWeight: 'bold',