in pontoon/insights/static/js/insights_tab.js [162:277]
renderTimeToReviewSuggestions: function () {
const chart = $('#time-to-review-suggestions-chart');
if (chart.length === 0) {
return;
}
const ctx = chart[0].getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 160);
gradient.addColorStop(0, style.getPropertyValue('--green-blue'));
gradient.addColorStop(1, 'transparent');
new Chart(chart, {
type: 'bar',
data: {
labels: $('#insights').data('dates'),
datasets: [
{
type: 'line',
label: 'Current month',
data: chart.data('time-to-review-suggestions'),
backgroundColor: gradient,
borderColor: [style.getPropertyValue('--blue-1')],
borderWidth: 2,
pointBackgroundColor: style.getPropertyValue('--blue-1'),
pointHitRadius: 10,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor: style.getPropertyValue('--blue-1'),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 2,
spanGaps: true,
fill: true,
tension: 0.4,
},
{
type: 'line',
label: '12-month average',
data: chart.data('time-to-review-suggestions-12-month-avg'),
borderColor: [style.getPropertyValue('--status-unreviewed')],
borderWidth: 1,
pointBackgroundColor: style.getPropertyValue(
'--status-unreviewed',
),
pointHitRadius: 10,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor: style.getPropertyValue(
'--status-unreviewed',
),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 1,
spanGaps: true,
fill: true,
tension: 0.4,
},
],
},
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--status-unreviewed'),
borderWidth: 1,
caretPadding: 5,
padding: {
x: 10,
y: 10,
},
callbacks: {
labelColor: (context) =>
Pontoon.insights.setLabelColor(context),
label(context) {
const { chart, datasetIndex, dataIndex } = context;
const dataset = chart.data.datasets[datasetIndex];
const value = dataset.data[dataIndex];
const label = dataset.label;
return `${label}: ${value} days`;
},
},
},
},
scales: {
x: {
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM yyyy',
},
grid: {
display: false,
},
offset: true,
ticks: {
source: 'data',
},
},
y: {
grid: {
display: false,
},
position: 'right',
ticks: {
maxTicksLimit: 3,
precision: 0,
callback: (value) => `${value} days`,
},
beginAtZero: true,
},
},
},
});
},