in pontoon/insights/static/js/insights_tab.js [594:795]
renderReviewActivity: function () {
const chart = $('#review-activity-chart');
if (chart.length === 0) {
return;
}
const ctx = chart[0].getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, style.getPropertyValue('--status-unreviewed'));
gradient.addColorStop(1, 'transparent');
const unreviewedData = chart.data('unreviewed') || [];
const peerApprovedData = chart.data('peer-approved') || [];
const selfApprovedData = chart.data('self-approved') || [];
const rejectedData = chart.data('rejected') || [];
const newSuggestionsData = chart.data('new-suggestions') || [];
new Chart(chart, {
type: 'bar',
data: {
labels: $('#insights').data('dates'),
datasets: [
{
type: 'line',
label: 'Unreviewed',
data: unreviewedData,
yAxisID: 'strings-y-axis',
backgroundColor: gradient,
borderColor: [style.getPropertyValue('--status-unreviewed')],
borderWidth: 2,
pointBackgroundColor: style.getPropertyValue(
'--status-unreviewed',
),
pointHitRadius: 10,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor: style.getPropertyValue(
'--status-unreviewed',
),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
fill: true,
tension: 0.4,
},
peerApprovedData.length > 0 && {
type: 'bar',
label: 'Peer-approved',
data: peerApprovedData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--blue-1'),
hoverBackgroundColor: style.getPropertyValue('--blue-1'),
stack: 'review-actions',
order: 3,
},
selfApprovedData.length > 0 && {
type: 'bar',
label: 'Self-approved',
data: selfApprovedData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--grey-5'),
hoverBackgroundColor: style.getPropertyValue('--grey-5'),
stack: 'review-actions',
order: 2,
},
rejectedData.length > 0 && {
type: 'bar',
label: 'Rejected',
data: rejectedData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--magenta'),
hoverBackgroundColor: style.getPropertyValue('--magenta'),
stack: 'review-actions',
order: 1,
},
newSuggestionsData.length > 0 && {
type: 'bar',
label: 'New suggestions',
data: chart.data('new-suggestions'),
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--black-3'),
hoverBackgroundColor: style.getPropertyValue('--black-3'),
stack: 'new-suggestions',
order: 4,
hidden: true,
},
].filter(Boolean), // Filter out empty values
},
options: {
clip: false,
plugins: {
htmlLegend: {
containerID: 'review-activity-chart-legend',
},
legend: {
display: false,
},
tooltip: {
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--status-unreviewed'),
borderWidth: 1,
caretPadding: 5,
padding: {
x: 10,
y: 10,
},
itemSort: function (a, b) {
// Dataset order affects stacking, tooltip and
// legend, but it doesn't work intuitively, so
// we need to manually sort tooltip items.
if (
(a.datasetIndex === 3 && b.datasetIndex === 2) ||
(a.datasetIndex === 3 && b.datasetIndex === 1) ||
(a.datasetIndex === 2 && b.datasetIndex === 1)
) {
return 1;
}
},
callbacks: {
labelColor: (context) =>
Pontoon.insights.setLabelColor(context),
label: function (context) {
const { chart, parsed, datasetIndex, dataIndex } = context;
const label = chart.data.datasets[datasetIndex].label;
const value = parsed.y;
const base = label + ': ' + nf.format(value);
if (chart.data.datasets.length < 4) {
return base;
}
const peerApproved = chart.data.datasets[1].data[dataIndex];
const selfApproved = chart.data.datasets[2].data[dataIndex];
const rejected = chart.data.datasets[3].data[dataIndex];
switch (label) {
case 'Self-approved': {
const pct = Pontoon.insights.getPercent(
value,
peerApproved + selfApproved,
);
return `${base} (${pct} of all approvals)`;
}
case 'Peer-approved':
case 'Rejected': {
const pct = Pontoon.insights.getPercent(
value,
peerApproved + rejected,
);
return `${base} (${pct} of peer-reviews)`;
}
default:
return base;
}
},
},
},
},
scales: {
x: {
stacked: true,
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM yyyy',
},
grid: {
display: false,
},
offset: true,
ticks: {
source: 'data',
},
},
'strings-y-axis': {
stacked: true,
position: 'left',
title: {
display: true,
text: 'STRINGS',
color: style.getPropertyValue('--white-1'),
fontStyle: 100,
},
grid: {
display: false,
},
ticks: {
precision: 0,
callback: function (value) {
return nf.format(value);
},
},
beginAtZero: true,
},
},
},
plugins: [Pontoon.insights.htmlLegendPlugin()],
});
},