Make pie charts theme-aware.

All pie charts can now handle fixed colors or CSS color variables that will be resolved on the client side using the actual values of the selected theme.
jenkinsci · May 15, 2023 · 6012afd · 6012afd
1 parent 6877521
commit 6012afd
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 113 deletions.
diff --git a/src/main/webapp/js/echarts-api.js b/src/main/webapp/js/echarts-api.js
@@ -530,5 +530,120 @@ const echartsJenkinsApi = {
      */
     renderTrendChart: function (chartDivId, enableLinks, ajaxProxy) {
         echartsJenkinsApi.renderConfigurableTrendChart(chartDivId, enableLinks, null, ajaxProxy);
+    },
+
+    /**
+     * Renders all div elements that have the class 'echarts-pie-chart' using ECharts.
+     */
+    renderPieCharts: function () {
+        /**
+         * Renders a trend chart in a div using ECharts.
+         *
+         * @param {String} chartDivId - the ID of the div where the chart should be shown in
+         */
+        function renderPieChart(chartDivId) {
+            function isEmpty(string) {
+                return (!string || string.length === 0);
+            }
+
+            /**
+             * Returns the title properties of the chart.
+             *
+             * @param {String} title - the title
+             */
+            function getTitle(title) {
+                if (!isEmpty(title)) {
+                    return {
+                        text: title,
+                        textStyle: {
+                            fontWeight: 'normal',
+                            fontSize: '16'
+                        },
+                        left: 'center'
+                    };
+                }
+                else {
+                    return null;
+                }
+            }
+
+            const chartPlaceHolder = jQuery3("#" + echartsJenkinsApi.escapeMetaCharacters(chartDivId));
+            const model = JSON.parse(chartPlaceHolder.attr('data-chart-model'));
+            const themedColors = model.colors.map(color => color.replaceAll(/--([a-z-]+)/g, function (match) {
+                return echartsJenkinsApi.resolveJenkinsColor(match)
+            }));
+            const title = chartPlaceHolder.attr('data-title');
+            const chartDiv = chartPlaceHolder[0];
+            const chart = echarts.init(chartDiv);
+            chartDiv.echart = chart;
+
+            const textColor = echartsJenkinsApi.getTextColor();
+
+            const options = {
+                title: getTitle(title),
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c} ({d}%)'
+                },
+                legend: {
+                    orient: 'horizontal',
+                    x: 'center',
+                    y: 'bottom',
+                    type: 'scroll',
+                    textStyle: {
+                        color: textColor
+                    }
+                },
+                series: [{
+                    type: 'pie',
+                    radius: ['30%', '70%'],
+                    avoidLabelOverlap: false,
+                    color: themedColors,
+                    label: {
+                        normal: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            show: false
+                        }
+                    },
+                    labelLine: {
+                        normal: {
+                            show: true
+                        }
+                    },
+                    data: model.data
+                }
+                ]
+            };
+            chart.setOption(options);
+            chart.resize();
+
+            const useLinks = chartPlaceHolder.attr('data-links');
+            if (useLinks && useLinks !== "false") {
+                chart.on('click', function (params) {
+                    window.location.assign(params.name);
+                });
+            }
+
+            return chart;
+        }
+
+        const allPieCharts = jQuery3('div.echarts-pie-chart');
+        const pieChartInstances = [];
+        allPieCharts.each(function () {
+            const chart = jQuery3(this);
+            const id = chart.attr('id');
+
+            pieChartInstances.push(renderPieChart(id));
+        });
+        if (pieChartInstances.length > 0) {
+            jQuery3(window).resize(function () {
+                pieChartInstances.forEach(function (chartInstance) {
+                    chartInstance.resize();
+                });
+            });
+        }
     }
 }
diff --git a/src/main/webapp/js/pie-chart.js b/src/main/webapp/js/pie-chart.js
@@ -1,118 +1,6 @@
 /* global jQuery3 */
 jQuery3(document).ready(function () {
-    /**
-     * Renders all div elements that have the class 'echarts-pie-chart' using ECharts.
-     */
-    function renderPieCharts() {
-        /**
-         * Renders a trend chart in a div using ECharts.
-         *
-         * @param {String} chartDivId - the ID of the div where the chart should be shown in
-         */
-        function renderPieChart(chartDivId) {
-            function isEmpty(string) {
-                return (!string || string.length === 0);
-            }
-
-            /**
-             * Returns the title properties of the chart.
-             *
-             * @param {String} title - the title
-             */
-            function getTitle(title) {
-                if (!isEmpty(title)) {
-                    return {
-                        text: title,
-                        textStyle: {
-                            fontWeight: 'normal',
-                            fontSize: '16'
-                        },
-                        left: 'center'
-                    };
-                }
-                else {
-                    return null;
-                }
-            }
-
-            const chartPlaceHolder = jQuery3("#" + echartsJenkinsApi.escapeMetaCharacters(chartDivId));
-            const model = JSON.parse(chartPlaceHolder.attr('data-chart-model'));
-            const title = chartPlaceHolder.attr('data-title');
-            const chartDiv = chartPlaceHolder[0];
-            const chart = echarts.init(chartDiv);
-            chartDiv.echart = chart;
-
-            const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || '#333';
-
-            const options = {
-                title: getTitle(title),
-                tooltip: {
-                    trigger: 'item',
-                    formatter: '{b}: {c} ({d}%)'
-                },
-                legend: {
-                    orient: 'horizontal',
-                    x: 'center',
-                    y: 'bottom',
-                    type: 'scroll',
-                    textStyle: {
-                        color: textColor
-                    }
-                },
-                series: [{
-                    type: 'pie',
-                    radius: ['30%', '70%'],
-                    avoidLabelOverlap: false,
-                    color: model.colors,
-                    label: {
-                        normal: {
-                            show: false,
-                            position: 'center'
-                        },
-                        emphasis: {
-                            show: false
-                        }
-                    },
-                    labelLine: {
-                        normal: {
-                            show: true
-                        }
-                    },
-                    data: model.data
-                }
-                ]
-            };
-            chart.setOption(options);
-            chart.resize();
-
-            const useLinks = chartPlaceHolder.attr('data-links');
-            if (useLinks && useLinks !== "false") {
-                chart.on('click', function (params) {
-                    window.location.assign(params.name);
-                });
-            }
-
-            return chart;
-        }
-
-        const allPieCharts = jQuery3('div.echarts-pie-chart');
-        const pieChartInstances = [];
-        allPieCharts.each(function () {
-            const chart = jQuery3(this);
-            const id = chart.attr('id');
-
-            pieChartInstances.push(renderPieChart(id));
-        });
-        if (pieChartInstances.length > 0) {
-            jQuery3(window).resize(function () {
-                pieChartInstances.forEach(function (chartInstance) {
-                    chartInstance.resize();
-                });
-            });
-        }
-    }
-
-    renderPieCharts();
+    echartsJenkinsApi.renderPieCharts();
 });