in pontoon/insights/static/js/insights_tab.js [391:593]
renderTranslationActivity: function () {
const chart = $('#translation-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('--dark-green'));
gradient.addColorStop(1, 'transparent');
const humanData = chart.data('human-translations') || [];
const machineryData = chart.data('machinery-translations') || [];
const newSourcesData = chart.data('new-source-strings') || [];
new Chart(chart, {
type: 'bar',
data: {
labels: $('#insights').data('dates'),
datasets: [
{
type: 'line',
label: 'Completion',
data: chart.data('completion'),
yAxisID: 'completion-y-axis',
backgroundColor: gradient,
borderColor: [style.getPropertyValue('--status-translated')],
borderWidth: 2,
pointBackgroundColor: style.getPropertyValue(
'--status-translated',
),
pointHitRadius: 10,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor: style.getPropertyValue(
'--status-translated',
),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
fill: true,
tension: 0.4,
},
humanData.length > 0 && {
type: 'bar',
label: 'Human translations',
data: humanData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--green'),
hoverBackgroundColor: style.getPropertyValue('--green'),
stack: 'translations',
order: 2,
},
machineryData.length > 0 && {
type: 'bar',
label: 'Machinery translations',
data: machineryData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--forest-green-1'),
hoverBackgroundColor:
style.getPropertyValue('--forest-green-1'),
stack: 'translations',
order: 1,
},
newSourcesData.length > 0 && {
type: 'bar',
label: 'New source strings',
data: newSourcesData,
yAxisID: 'strings-y-axis',
backgroundColor: style.getPropertyValue('--black-3'),
hoverBackgroundColor: style.getPropertyValue('--black-3'),
stack: 'source-strings',
order: 3,
hidden: true,
},
].filter(Boolean), // Filter out empty values
},
options: {
clip: false,
scales: {
x: {
stacked: true,
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM yyyy',
},
grid: {
display: false,
},
offset: true,
ticks: {
source: 'data',
},
},
'completion-y-axis': {
position: 'right',
title: {
display: true,
text: 'COMPLETION',
color: style.getPropertyValue('--white-1'),
fontStyle: 100,
},
grid: {
display: false,
},
ticks: {
stepSize: 20,
callback: function (value) {
return pf.format(value / 100);
},
},
max: 100,
beginAtZero: true,
},
'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: {
htmlLegend: {
containerID: 'translation-activity-chart-legend',
},
legend: {
display: false,
},
tooltip: {
mode: 'index',
intersect: false,
position: 'nearest',
borderColor: style.getPropertyValue('--status-translated'),
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 === 2 && b.datasetIndex === 1) {
return 1;
}
},
callbacks: {
labelColor: (context) =>
Pontoon.insights.setLabelColor(context),
label: function (context) {
const {
chart,
raw: items,
datasetIndex,
dataIndex: index,
} = context;
const human = chart.data.datasets[1].data[index];
const machinery = chart.data.datasets[2].data[index];
const label = chart.data.datasets[datasetIndex].label;
const value = items;
const base = label + ': ' + nf.format(value);
switch (label) {
case 'Completion':
return label + ': ' + pf.format(value / 100);
case 'Human translations':
case 'Machinery translations': {
const pct = Pontoon.insights.getPercent(
value,
human + machinery,
);
return `${base} (${pct} of all translations)`;
}
default:
return base;
}
},
},
},
},
},
plugins: [Pontoon.insights.htmlLegendPlugin()],
});
},