lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add color range to rating chart

Browse source
This commit is contained in:
cuom1999 2020-12-25 19:14:27 -06:00
parent 528f229b79
commit 161f8ac023
1 changed files with 83 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
templates/user/user-about.html
View file

@ -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',
pointHoverBackgroundColor: '#FFF',
pointBackgroundColor: '#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)'
}
],
}
});