Update charts on theme change

jet/dashboard/static/jet.dashboard/dashboard_modules/google_analytics.js

@@ -13,7 +13,7 @@
                 data.push($(this).data('value'));
             });
 
-            new Chart(ctx).Line({
+            var chart = new Chart(ctx).Line({
                 labels: labels,
                 datasets: [
                     {
@@ -30,6 +30,25 @@
                 scaleLineColor: $chart.find('.chart-scaleLineColor').css('color'),
                 scaleFontColor: $chart.find('.chart-scaleFontColor').css('color')
             });
+
+            var updateChartColors = function(chart) {
+                for (var i = 0; i < chart.datasets.length; ++i) {
+                    chart.datasets[i]['fillColor'] = $chart.find('.chart-fillColor').css('color');
+                    chart.datasets[i]['strokeColor'] = $chart.find('.chart-strokeColor').css('color');
+                    chart.datasets[i]['pointColor'] = $chart.find('.chart-pointColor').css('color');
+                    chart.datasets[i]['pointHighlightFill'] = $chart.find('.chart-pointHighlightFill').css('color');
+                }
+
+                chart.scale['gridLineColor'] = $chart.find('.chart-scaleGridLineColor').css('color');
+                chart.scale['lineColor'] = $chart.find('.chart-scaleLineColor').css('color');
+                chart.scale['textColor'] = $chart.find('.chart-scaleFontColor').css('color');
+
+                chart.update();
+            };
+
+            $(document).on('theme:changed', function() {
+                updateChartColors(chart);
+            });
         }
     });
 })(jet.jQuery);

jet/dashboard/static/jet.dashboard/dashboard_modules/yandex_metrika.js

@@ -13,7 +13,7 @@
                 data.push($(this).data('value'));
             });
 
-            new Chart(ctx).Line({
+            var chart = new Chart(ctx).Line({
                 labels: labels,
                 datasets: [
                     {
@@ -30,6 +30,25 @@
                 scaleLineColor: $chart.find('.chart-scaleLineColor').css('color'),
                 scaleFontColor: $chart.find('.chart-scaleFontColor').css('color')
             });
+
+            var updateChartColors = function(chart) {
+                for (var i = 0; i < chart.datasets.length; ++i) {
+                    chart.datasets[i]['fillColor'] = $chart.find('.chart-fillColor').css('color');
+                    chart.datasets[i]['strokeColor'] = $chart.find('.chart-strokeColor').css('color');
+                    chart.datasets[i]['pointColor'] = $chart.find('.chart-pointColor').css('color');
+                    chart.datasets[i]['pointHighlightFill'] = $chart.find('.chart-pointHighlightFill').css('color');
+                }
+
+                chart.scale['gridLineColor'] = $chart.find('.chart-scaleGridLineColor').css('color');
+                chart.scale['lineColor'] = $chart.find('.chart-scaleLineColor').css('color');
+                chart.scale['textColor'] = $chart.find('.chart-scaleFontColor').css('color');
+
+                chart.update();
+            };
+
+            $(document).on('theme:changed', function() {
+                updateChartColors(chart);
+            });
         }
     });
 })(jet.jQuery);