Added cubic interpolation and gradients back

mozilla · May 16, 2024 · 5309640 · 5309640
1 parent e940f2d
commit 5309640
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/pontoon/insights/static/js/insights_charts.js b/pontoon/insights/static/js/insights_charts.js
@@ -37,6 +37,7 @@ var Pontoon = (function (my) {
 
         // Set up default Chart.js configuration
         Chart.defaults.color = style.getPropertyValue('--light-grey-7');
+        Chart.defaults.borderColor = style.getPropertyValue('--dark-grey-1');
         Chart.defaults.font.family = 'Open Sans';
         Chart.defaults.font.weight = '100'; // Chart.js uses 'weight' instead of 'style' for font
         Chart.defaults.plugins.legend.display = false;

diff --git a/pontoon/insights/static/js/insights_tab.js b/pontoon/insights/static/js/insights_tab.js
@@ -447,12 +447,14 @@ var Pontoon = (function (my) {
                   '--status-translated',
                 ),
                 pointHitRadius: 10,
-                pointRadius: 4,
+                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',
@@ -631,12 +633,14 @@ var Pontoon = (function (my) {
                   '--status-unreviewed',
                 ),
                 pointHitRadius: 10,
-                pointRadius: 4,
+                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',
@@ -823,11 +827,13 @@ var Pontoon = (function (my) {
                 borderWidth: 2,
                 pointBackgroundColor: style.getPropertyValue('--lilac'),
                 pointHitRadius: 10,
-                pointRadius: 4,
+                pointRadius: 3.25,
                 pointHoverRadius: 6,
                 pointHoverBackgroundColor: style.getPropertyValue('--lilac'),
                 pointHoverBorderColor: style.getPropertyValue('--white-1'),
                 spanGaps: true,
+                fill: true,
+                tension: 0.4
               },
               {
                 type: 'line',
@@ -839,11 +845,13 @@ var Pontoon = (function (my) {
                 borderWidth: 2,
                 pointBackgroundColor: style.getPropertyValue('--purple'),
                 pointHitRadius: 10,
-                pointRadius: 4,
+                pointRadius: 3.25,
                 pointHoverRadius: 6,
                 pointHoverBackgroundColor: style.getPropertyValue('--purple'),
                 pointHoverBorderColor: style.getPropertyValue('--white-1'),
                 spanGaps: true,
+                fill: true,
+                tension: 0.4
               },
               approvedData.length > 0 && {
                 type: 'bar',