in pontoon/contributors/static/js/profile.js [36:151]
renderRateChart: function (chart, data1, data2) {
if (chart.length === 0) {
return;
}
const ctx = chart[0].getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 160);
gradient.addColorStop(0, style.getPropertyValue('--dark-green'));
gradient.addColorStop(1, 'transparent');
new Chart(chart, {
type: 'bar',
data: {
labels: $('#insights').data('dates'),
datasets: [
{
type: 'line',
label: 'Current month',
data: data1,
backgroundColor: gradient,
borderColor: [style.getPropertyValue('--forest-green-1')],
borderWidth: 2,
pointBackgroundColor:
style.getPropertyValue('--forest-green-1'),
pointHitRadius: 10,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor:
style.getPropertyValue('--forest-green-1'),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 2,
fill: true,
tension: 0.4,
},
{
type: 'line',
label: '12-month average',
data: data2,
borderColor: [style.getPropertyValue('--status-translated')],
borderWidth: 1,
pointBackgroundColor: style.getPropertyValue(
'--status-translated',
),
pointHitRadius: 10,
pointRadius: 4,
pointHoverRadius: 6,
pointHoverBackgroundColor: style.getPropertyValue(
'--status-translated',
),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 1,
fill: true,
tension: 0.4,
},
],
},
options: {
clip: false,
plugins: {
tooltip: {
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--status-translated'),
borderWidth: 1,
caretPadding: 5,
padding: {
x: 10,
y: 10,
},
callbacks: {
labelColor: (context) =>
Pontoon.insights.setLabelColor(context),
label: function (context) {
const { parsed, chart, datasetIndex } = context;
const label = chart.data.datasets[datasetIndex].label;
const value = nf.format(parsed.y / 100);
return `${label}: ${value}`;
},
},
},
},
scales: {
x: {
type: 'time',
time: {
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) => nf.format(value / 100),
},
beginAtZero: true,
max: 100,
},
},
},
});
},