renderRateChart: function()

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,
              },
            },
          },
        });
      },