replace highcharts.js diagram with chart.js

README.md

@@ -14,7 +14,7 @@ You should have received a copy of the GNU General Public License
 along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
 Please note that this plugin also contains files that are under the
-- MIT License: namely index.js, jquery-3.2.1, textclipper.js.
+- MIT License: namely index.js, jquery-3.2.1, textclipper.js, chart.js
 - Apache License, Version 2.0: namely pdf.js.
 
 Google Charts Api is used in download function to convert latex formulae to png: <https://chart.googleapis.com/chart>.

controller.php

@@ -446,7 +446,7 @@ if ($action === 'statistic') {
     $strings = $stringman->load_component_strings('pdfannotator', 'en'); // Method gets the strings of the language files.
     $PAGE->requires->strings_for_js(array_keys($strings), 'pdfannotator'); // Method to use the language-strings in javascript.
     $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/locallib.js?ver=00002"));
-    $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/statistic.js"));
+    $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/statistic.js?ver=0001"));
     $myrenderer = $PAGE->get_renderer('mod_pdfannotator');
     $capabilities = new stdClass();
     $capabilities->viewquestions = has_capability('mod/pdfannotator:viewquestions', $context);

locallib.php

@@ -58,7 +58,7 @@ function pdfannotator_display_embed($pdfannotator, $cm, $course, $file, $page =
     $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/pdf.js"));
     $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/pdf_viewer.js"));
     $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/textclipper.js"));
-    $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/index.js?ver=00011"));
+    $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/index.js?ver=00012"));
     $PAGE->requires->js(new moodle_url("/mod/pdfannotator/shared/locallib.js?ver=00002"));
 
     // Pass parameters from PHP to JavaScript.

shared/statistic.js

@@ -7,58 +7,95 @@
 
 // R: The first parameter has to be Y, because it is a default YUI-object (demanded by moodle).
 function setCharts(Y, names, otherquestions, myquestions, otheranswers, myanswers) {
-    Highcharts.setOptions({
-        colors: ['rgb(0,84,159)', 'rgb(142,186,229)', 'rgb(87,171,39)', 'rgb(184,214,152)']
-    });
 
-    Highcharts.chart('chart_questions_answers', {
-        chart: {
-            type: 'column',
-            borderColor: 'black',
-            borderWidth: 1
+    // On small screens set width depending on number of annotators. Otherwise the diagram is very small.
+    let width = Math.max(names.length * 25, 300);
+    width = names.length * 40;
+    if (window.innerWidth < width) {
+        document.getElementById('chart-container').style.width = width + "px";
+    }
+
+    var maxValue = calculateMax(otherquestions, myquestions, otheranswers, myanswers);
+
+    var ctx = document.getElementById('myChart').getContext('2d');
+    var myChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: names,
+            datasets: [{
+                label: M.util.get_string('myquestions', 'pdfannotator'),
+                stack: 'questions',
+                data: myquestions,
+                backgroundColor: 'rgb(0,84,159)',
+            }, {
+                label: M.util.get_string('questions', 'pdfannotator') + ' ' + M.util.get_string('by_other_users', 'pdfannotator'),
+                stack: 'questions',
+                data: otherquestions,
+                backgroundColor: 'rgb(142,186,229)',
             },
-        title: {
-            text: M.util.get_string('chart_title', 'pdfannotator'),
+            {
+                label: M.util.get_string('myanswers', 'pdfannotator'),
+                stack: 'answers',
+                data: myanswers,
+                backgroundColor: 'rgb(87,171,39)',
             },
-        xAxis: {
-            categories: names
+            {
+                label: M.util.get_string('answers', 'pdfannotator') + ' ' + M.util.get_string('by_other_users', 'pdfannotator'),
+                stack: 'answers',
+                data: otheranswers,
+                backgroundColor: 'rgb(184,214,152)',
+            }]
         },
-        yAxis: {
-            allowDecimals: false,
+        options: {
+            maintainAspectRatio: false,
             title: {
-                text: M.util.get_string('count', 'pdfannotator')
+                display: true,
+                text: M.util.get_string('chart_title', 'pdfannotator'),
+                fontSize: 20
             },
-            reversedStacks: false
+            legend: {
+                display: true,
+                position: 'bottom'
             },
-        plotOptions: {
-            column: {
-                stacking: 'normal'
+            scales: {
+
+                xAxes: [{
+                    stacked: true
+                }],
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        precision: 0,
+                        max: maxValue + 2
                     }
+                }]
             },
-        tooltip: {
-            headerFormat: '<b>{point.key}</b><br/>',
-            pointFormat: '{series.name}: {point.y}<br/>' + M.util.get_string('total', 'pdfannotator') + ': {point.stackTotal}'
-        },
-        legend: {
-            itemWidth: 225
+            tooltips: {
+                mode: 'x'
             },
-        series: [{
-            name: M.util.get_string('myquestions', 'pdfannotator'),
-            data: myquestions,
-            stack: 'questions'
-        }, {
-            name: M.util.get_string('questions', 'pdfannotator') + ' ' + M.util.get_string('by_other_users', 'pdfannotator'),
-            data: otherquestions,
-            stack: 'questions'
-        }, {
-            name: M.util.get_string('myanswers', 'pdfannotator'),
-            data: myanswers,
-            stack: 'answers'
-        }, {
-            name: M.util.get_string('answers', 'pdfannotator') + ' ' + M.util.get_string('by_other_users', 'pdfannotator'),
-            data: otheranswers,
-            stack: 'answers'
-        }]
+            layout: {
+                padding: {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0
+                }
+            }
+        }
     });
 
 }
+
+function calculateMax(otherquestions, myquestions, otheranswers, myanswers) {
+    let max = 0;
+    for (let i = 0; i < otherquestions.length; ++i) {
+        if (otherquestions[i] + myquestions[i] > max) {
+            max = otherquestions[i] + myquestions[i];
+        }
+        if (otheranswers[i] + myanswers[i] > max) {
+            max = otheranswers[i] + myanswers[i];
+        }
+    }
+
+    return max;
+}

styles.css

@@ -424,11 +424,11 @@ body {
 }
 
 .path-mod-pdfannotator .chat-message.mark {
-    border: 3px solid red !important
+    border: 3px solid red !important;
 }
 
 .path-mod-pdfannotator .chat-message.correct {
-    border: 3px solid green !important
+    border: 3px solid green !important;
 }
 
 .path-mod-pdfannotator .chat-message:not(.questioncomment) {
@@ -691,8 +691,7 @@ table td, table th { padding: 9px 10px; text-align: left; }
     #mod-pdfannotator-reports th:nth-child(3), #mod-pdfannotator-reports td:nth-child(3),
     #mod-pdfannotator-reports th:nth-child(4), #mod-pdfannotator-reports td:nth-child(4),
     #mod-pdfannotator-reports th:nth-child(5), #mod-pdfannotator-reports td:nth-child(5),
-        .path-mod-pdfannotator .text
-        {
+    .path-mod-pdfannotator .text {
         display: none;
         visibility: hidden;
     }
@@ -772,7 +771,7 @@ header, section, footer, aside, nav, main, article, figure {
 
 /* Change color of dropdown links on hover */
 .path-mod-pdfannotator .dropdown-content a:hover {
-    background-color: #ddd
+    background-color: #ddd;
 }
 
 .path-mod-pdfannotator .dropdown [type="button"] {
@@ -857,3 +856,7 @@ header, section, footer, aside, nav, main, article, figure {
     from { bottom:-100px; opacity:0 }
     to { bottom:0; opacity:1 }
 }
+
+.path-mod-pdfannotator .pdfannotator-statistic #chart-container {
+    min-height: 500px;
+}

templates/statistic.mustache

- <script src="https://code.highcharts.com/highcharts.js"></script> <!-- TODO replace with local version! -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" charset="utf-8"></script>
 
 <div class="pdfannotator-statistic">
     
@@ -28,5 +28,15 @@
 
     </div>
 
+    <div class="row">
+        <div class="col-md-12">
+
+            <div id="chart-container">
+                <canvas id="myChart"></canvas> 
+            </div>
+
+        </div>
+    </div>
+    
 </div>
 

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'mod_pdfannotator'; // Full name of the plugin (used for diagnostics).
-$plugin->version   = 2019070900; // The current module version (Date: YYYYMMDDXX).
+$plugin->version   = 2019100100; // The current module version (Date: YYYYMMDDXX).
 $plugin->release  = 'PDF Annotator v1.1 release 1';
 $plugin->requires  = 2016112900; // Requires this Moodle version.
 $plugin->cron      = 0;          // Period for cron to check this module (secs).