fix(analytics): enforce trustworthy chart rendering

web/static/js/analysis-chart-theme.js

@@ -122,11 +122,11 @@
       return;
     }
 
-    if (typeof ds.backgroundColor !== 'function') {
+    if (typeof ds.backgroundColor !== 'function' && !Array.isArray(ds.backgroundColor)) {
       ds.backgroundColor =
         t === 'line' ? alpha(color, ds.fill ? 0.18 : 0.0) : alpha(color, 0.78);
     }
-    if (typeof ds.borderColor !== 'function') ds.borderColor = color;
+    if (typeof ds.borderColor !== 'function' && !Array.isArray(ds.borderColor)) ds.borderColor = color;
 
     ds.borderWidth = ds.borderWidth || (t === 'line' ? 2 : 1);
     ds.borderRadius = ds.borderRadius ?? (t === 'bar' ? 3 : undefined);
@@ -195,28 +195,28 @@
 
     const scales = config.options.scales || {};
     Object.keys(scales).forEach(k => {
+      const originalScale = scales[k];
       scales[k] = {
-        border: { color: theme.faint, ...(scales[k].border || {}) },
+        ...originalScale,
+        border: { color: theme.faint, ...(originalScale.border || {}) },
         grid: {
           color: theme.faint,
           tickColor: 'transparent',
           drawBorder: false,
-          ...(scales[k].grid || {})
+          ...(originalScale.grid || {})
         },
         ticks: {
           color: theme.muted,
           maxRotation: isCompact() ? 0 : 30,
-          autoSkip: isCompact(),
+          autoSkip: true,
           maxTicksLimit: isCompact() ? 5 : 8,
           font: {
             family: theme.mono,
             size: isCompact() ? 10 : 11,
             weight: '500'
           },
-          callback: v => formatNumber(v),
-          ...(scales[k].ticks || {})
-        },
-        ...scales[k]
+          ...(originalScale.ticks || {})
+        }
       };
     });
     config.options.scales = scales;
@@ -313,6 +313,7 @@
     const tuneAxis = axis => {
       if (!axis || typeof axis !== 'object') return axis;
       return {
+        ...axis,
         axisLine: { lineStyle: { color: theme.faint }, ...(axis.axisLine || {}) },
         axisTick: { lineStyle: { color: theme.faint }, ...(axis.axisTick || {}) },
         axisLabel: {
@@ -324,8 +325,7 @@
         splitLine: {
           lineStyle: { color: theme.faint, type: 'dashed' },
           ...(axis.splitLine || {})
-        },
-        ...axis
+        }
       };
     };
     const tuneAxisList = axes => {