diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/AssignmentStatisticsPanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/AssignmentStatisticsPanel.html index 34abf540a41f..6b364876d131 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/AssignmentStatisticsPanel.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/AssignmentStatisticsPanel.html @@ -4,7 +4,9 @@ - +
+ +
diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/CourseGradeStatisticsPanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/CourseGradeStatisticsPanel.html index 2c18f8098428..0b52ec03c7db 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/CourseGradeStatisticsPanel.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/CourseGradeStatisticsPanel.html @@ -4,7 +4,9 @@ - +
+ +
diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/SettingsGradingSchemaPanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/SettingsGradingSchemaPanel.html index 6c91c8add070..5b6b3d060bed 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/SettingsGradingSchemaPanel.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/SettingsGradingSchemaPanel.html @@ -64,7 +64,9 @@

There are no students with grades
- +
+ +
diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentAssignmentStatisticsPanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentAssignmentStatisticsPanel.html index 719c60e2f168..0b862e16403e 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentAssignmentStatisticsPanel.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentAssignmentStatisticsPanel.html @@ -4,7 +4,9 @@ - +
+ +
diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentCourseGradeStatisticsPanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentCourseGradeStatisticsPanel.html index 4096d99b2249..3e8904cc0855 100644 --- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentCourseGradeStatisticsPanel.html +++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/StudentCourseGradeStatisticsPanel.html @@ -4,7 +4,9 @@ - +
+ +
diff --git a/gradebookng/tool/src/webapp/scripts/gradebook-chart.js b/gradebookng/tool/src/webapp/scripts/gradebook-chart.js index ba394e3e9358..831197a9e4cf 100644 --- a/gradebookng/tool/src/webapp/scripts/gradebook-chart.js +++ b/gradebookng/tool/src/webapp/scripts/gradebook-chart.js @@ -1,4 +1,3 @@ - /** * GradebookNG Chart JS. * @@ -22,6 +21,17 @@ $(document).ready(function() { chartYourGradeMessage: TrimPath.parseTemplate( $("#chartYourGradeMessage").html().trim().toString()), }; + + // Handle window resizes + let resizeTimer; + $(window).on('resize', function() { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function() { + if (myChart) { + myChart.resize(); + } + }, 250); + }); }); var myChart; @@ -35,112 +45,129 @@ function renderChart(gbChartData) { var xAxisLabel = chartData.xAxisLabel; var yAxisLabel = chartData.yAxisLabel; + // Ensure the container is ready before initializing the chart var ctx = $('#'+chartId); - myChart = new Chart(ctx, { - type: chartType, - - options: { - - title: { - display: true, - text: chartTitle, - fontSize: 18, - fontStyle: 'bold', - fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), - }, - legend: { - display: false - }, - scales: { - xAxes: [{ - ticks: { - beginAtZero:true, - fontStyle: 'bold', - autoSkip: true, - maxRotation: 0, - fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), - callback: function(value, index, values) { - if (isNaN(value)) { - return value; - } - // Display student values only as integers - else if (Math.floor(value) === value) { - return value; - } - } - }, - scaleLabel: { - display: true, - labelString: xAxisLabel, - fontSize: 14, - fontFamily: 'Monospace', - fontStyle: 'bold', - fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), - } - }], - yAxes: [{ - ticks: { - beginAtZero:true, - fontStyle: 'bold', - fontFamily: 'Monospace', - fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), - autoskip: true, - maxRotation: 0, - callback: function(value, index, values) { - if (isNaN(value)) { - // Include a space to even out the plusses and minuses - return value + (value.length < 2 ? ' ' : ''); - } - // Display student values only as integers - else if (Math.floor(value) === value) { - return value; - } - } - }, - scaleLabel: { - display: true, - labelString: yAxisLabel, - fontSize: 14, - fontStyle: 'bold', - fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), - } - }] - }, - tooltips: { - displayColors: false, - callbacks: { - title: function(tooltipItem, data) { - var chartMessage = GbChart.templates['chartStudentsGradeMessage'].process(); - switch(chartType) { - case 'bar': - return chartMessage.replace('{0}', tooltipItem[0].yLabel).replace('{1}', tooltipItem[0].xLabel); - break; - case 'horizontalBar': - return chartMessage.replace('{0}', tooltipItem[0].xLabel).replace('{1}', tooltipItem[0].yLabel); - } + + // Destroy existing chart if it exists + if (myChart) { + myChart.destroy(); + } - }, - label: function() {}, - afterTitle: function(tooltipItem) { - if (typeof(window.studentGradeRange) !== "undefined") { + // Wait for Bootstrap to finish layout calculations + setTimeout(() => { + myChart = new Chart(ctx, { + type: chartType, + + options: { + responsive: true, + maintainAspectRatio: true, + aspectRatio: 2, + animation: { + delay: 10, + duration: 10 // Add a small animation duration for smoother rendering + }, + + title: { + display: true, + text: chartTitle, + fontSize: 18, + fontStyle: 'bold', + fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), + }, + legend: { + display: false + }, + scales: { + xAxes: [{ + ticks: { + beginAtZero:true, + fontStyle: 'bold', + autoSkip: true, + maxRotation: 0, + fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), + callback: function(value, index, values) { + if (isNaN(value)) { + return value; + } + // Display student values only as integers + else if (Math.floor(value) === value) { + return value; + } + } + }, + scaleLabel: { + display: true, + labelString: xAxisLabel, + fontSize: 14, + fontFamily: 'Monospace', + fontStyle: 'bold', + fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), + } + }], + yAxes: [{ + ticks: { + beginAtZero:true, + fontStyle: 'bold', + fontFamily: 'Monospace', + fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), + autoskip: true, + maxRotation: 0, + callback: function(value, index, values) { + if (isNaN(value)) { + // Include a space to even out the plusses and minuses + return value + (value.length < 2 ? ' ' : ''); + } + // Display student values only as integers + else if (Math.floor(value) === value) { + return value; + } + } + }, + scaleLabel: { + display: true, + labelString: yAxisLabel, + fontSize: 14, + fontStyle: 'bold', + fontColor: getComputedStyle(document.documentElement).getPropertyValue('--sakai-text-color-1'), + } + }] + }, + tooltips: { + displayColors: false, + callbacks: { + title: function(tooltipItem, data) { + var chartMessage = GbChart.templates['chartStudentsGradeMessage'].process(); switch(chartType) { case 'bar': - if (window.studentGradeRange != null && window.studentGradeRange == tooltipItem[0].xLabel) { - return GbChart.templates['chartYourGradeMessage'].process(); - } + return chartMessage.replace('{0}', tooltipItem[0].yLabel).replace('{1}', tooltipItem[0].xLabel); break; case 'horizontalBar': - if (window.studentGradeRange != null && window.studentGradeRange == tooltipItem[0].yLabel) { - return GbChart.templates['chartYourGradeMessage'].process(); + return chartMessage.replace('{0}', tooltipItem[0].xLabel).replace('{1}', tooltipItem[0].yLabel); + } + + }, + label: function() {}, + afterTitle: function(tooltipItem) { + if (typeof(window.studentGradeRange) !== "undefined") { + switch(chartType) { + case 'bar': + if (window.studentGradeRange != null && window.studentGradeRange == tooltipItem[0].xLabel) { + return GbChart.templates['chartYourGradeMessage'].process(); + } + break; + case 'horizontalBar': + if (window.studentGradeRange != null && window.studentGradeRange == tooltipItem[0].yLabel) { + return GbChart.templates['chartYourGradeMessage'].process(); + } } } } } } } - } - }); - renderChartData(gbChartData); + }); + renderChartData(gbChartData); + }, 0); } function renderChartData(gbChartData) {