Add color range to rating chart

templates/user/user-about.html

@@ -59,6 +59,7 @@
             <br>
         {% endif %}
 
+        <br>
         <h4 id="submission-activity-header"></h4>
         <div id="submission-activity" style="display: none;">
             <div id="submission-activity-actions">
@@ -286,6 +287,48 @@
                     return rating_history[index];
                 };
 
+                var originalDraw = Chart.controllers.scatter.prototype.draw;
+                Chart.helpers.extend(Chart.controllers.scatter.prototype, {
+                    draw: function () {
+                        var chart = this.chart;
+                        var yHighlight = chart.config.options.yHighlight;
+
+                        if (yHighlight != null) {
+                            var ctx = chart.chart.ctx;
+                            var xaxis = chart.scales['x-axis-1'];
+                            var yaxis = chart.scales['y-axis-1'];
+
+                            ctx.save();
+                            yHighlight.forEach(range => {
+                                var yRangeBeginPixel = yaxis.getPixelForValue(range.begin);
+                                var yRangeEndPixel = yaxis.getPixelForValue(range.end);
+
+                                if (range.begin >= yaxis.end || range.end <= yaxis.begin) {
+                                    return;
+                                }
+
+                                yRangeEndPixel = Math.max(yaxis.top + 1, yRangeEndPixel);
+                                yRangeBeginPixel = Math.min(yaxis.bottom - 1, yRangeBeginPixel);
+
+                                if (yRangeBeginPixel < yRangeEndPixel) {
+                                    return;
+                                }
+
+                                ctx.fillStyle = range.color;
+                                ctx.fillRect(
+                                    xaxis.left + 1,
+                                    yRangeEndPixel,
+                                    xaxis.right - xaxis.left,
+                                    yRangeBeginPixel - yRangeEndPixel,
+                                );
+                            });
+                            ctx.restore();
+                        }
+                        originalDraw.apply(this, arguments);
+                    }
+                });
+
+
                 window.rating_chart = new Chart(ctx, {
                     type: 'scatter',
                     data: {
@@ -293,8 +336,8 @@
                             label: 'rating',
                             backgroundColor: 'rgb(0,0,0,0)',
                             borderColor: '#A31515',
-                            pointBackgroundColor: '#A31515',
+                            pointBackgroundColor: '#FFF',
-                            pointHoverBackgroundColor: '#FFF',
+                            pointHoverBackgroundColor: '#A31515',
                             pointRadius: 5,
                             pointHoverRadius: 5,
                             showLine: true,
@@ -361,7 +404,44 @@
                                     fontStyle: tooltipModel._bodyFontStyle,
                                 }).show();
                             },
-                        }
+                        },
+                        yHighlight: [
+                            {
+                                begin: 0,
+                                end: 1000,
+                                color: 'rgb(153, 153, 153, 0.43)'
+                            },
+                            {
+                                begin: 1000,
+                                end: 1200,
+                                color: 'rgb(0, 169, 0, 0.4)'
+                            },
+                            {
+                                begin: 1200,
+                                end: 1500,
+                                color: 'rgb(0, 0, 255, 0.4)'
+                            },
+                            {
+                                begin: 1500,
+                                end: 1800,
+                                color: 'rgb(128, 0, 128, 0.37)'
+                            },
+                            {
+                                begin: 1800,
+                                end: 2200,
+                                color: 'rgb(255, 177, 0, 0.4)'
+                            },
+                            {
+                                begin: 2200,
+                                end: 3000,
+                                color: 'rgb(238, 0, 0, 0.4)'
+                            },
+                            {
+                                begin: 3000,
+                                end: 4000,
+                                color: 'rgb(160, 0, 0, 0.6)'
+                            }
+                        ],
                     }
                 });