@ons/design-system 72.10.1 → 72.10.3

package/components/chart/bar-chart.js

@@ -122,8 +122,6 @@ class BarChart {
                 }
             });
         });
-
-        currentChart.redraw();
     };
 
     getBarChartLabelsInsideOptions = () => ({

package/components/chart/chart.js

@@ -79,6 +79,8 @@ class HighchartsBaseChart {
         this.boxplot = new Boxplot();
         this.extraLines = this.checkForExtraLines();
         this.extraScatter = this.checkForExtraScatter();
+        // This code only needs to run once per request as it sets
+        // options that are used for all charts
         if (window.isCommonChartOptionsDefined === undefined) {
             this.setCommonChartOptions();
             window.isCommonChartOptionsDefined = true;
@@ -175,7 +177,7 @@ class HighchartsBaseChart {
         }
 
         // Disable the legend for single series charts
-        this.commonChartOptions.disableLegendForSingleSeries(this.config);
+        this.specificChartOptions.disableLegendForSingleSeries(this.config);
     };
 
     // Check if the data labels should be hidden
@@ -188,7 +190,7 @@ class HighchartsBaseChart {
     // Note this is not the same as the viewport width
     // All responsive rules should be defined here to avoid overriding existing rules
     setResponsiveOptions = () => {
-        let mobileChartOptions = this.commonChartOptions.getMobileOptions(this.xAxisTickIntervalMobile, this.yAxisTickIntervalMobile);
+        let mobileChartOptions = this.specificChartOptions.getMobileOptions(this.xAxisTickIntervalMobile, this.yAxisTickIntervalMobile);
         if (this.chartType === 'column' || this.chartType === 'boxplot') {
             const mobileColumnChartOptions = this.columnChart.getColumnChartMobileOptions(
                 this.config,
@@ -282,9 +284,6 @@ class HighchartsBaseChart {
                     this.scatterChart.updateMarkersForConfidenceLevels(scatterSeries);
                 }
             }
-            if (this.chartType != 'bar') {
-                this.commonChartOptions.adjustChartHeight(currentChart, this.percentageHeightDesktop, this.percentageHeightMobile);
-            }
 
             // If the chart has an extra line or lines, hide the data labels for
             // that series, update the last point marker
@@ -295,8 +294,6 @@ class HighchartsBaseChart {
                     }
                 });
             }
-            // Update the legend items for all charts
-            this.commonChartOptions.updateLegendSymbols(currentChart);
             currentChart.redraw(false);
         };
     };
@@ -310,6 +307,11 @@ class HighchartsBaseChart {
             if (this.rangeAnnotationsOptions) {
                 this.rangeAnnotationsOptions.addLine(currentChart);
             }
+            if (this.chartType != 'bar') {
+                this.specificChartOptions.adjustChartHeight(currentChart, this.percentageHeightDesktop, this.percentageHeightMobile);
+            }
+            // Update the legend symbols on render to maintain them during resize
+            this.specificChartOptions.updateLegendSymbols(currentChart);
         };
     };
 
@@ -324,9 +326,8 @@ class HighchartsBaseChart {
                 // Update the data labels when the window is resized
                 if (this.chartType === 'bar' && !this.hideDataLabels) {
                     this.barChart.postLoadDataLabels(currentChart);
-                }
-                if (this.chartType != 'bar') {
-                    this.commonChartOptions.adjustChartHeight(currentChart, this.percentageHeightDesktop, this.percentageHeightMobile);
+                    // Force a single redraw after all updates
+                    currentChart.redraw(false);
                 }
             }, 50);
         });

package/components/chart/common-chart-options.js

@@ -135,20 +135,6 @@ class CommonChartOptions {
 
     getOptions = () => this.options;
 
-    getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
-        return {
-            tooltip: {
-                enabled: false,
-            },
-            xAxis: {
-                tickInterval: xAxisTickInterval,
-            },
-            yAxis: {
-                tickInterval: yAxisTickInterval,
-            },
-        };
-    };
-
     hideDataLabels = (series) => {
         series.forEach((series) => {
             series.update({
@@ -158,107 +144,6 @@ class CommonChartOptions {
             });
         });
     };
-
-    disableLegendForSingleSeries = (config) => {
-        if (config.chart.type != 'boxplot' && config.series.length === 1) {
-            config.legend = {
-                enabled: false,
-            };
-            config.chart.marginTop = 50;
-        }
-    };
-
-    updateLegendSymbols = (chart) => {
-        if (chart.legend.options.enabled) {
-            chart.legend.allItems.forEach((item, index) => {
-                const { legendItem, userOptions } = item;
-                const seriesType = userOptions?.type;
-                const { label, symbol, line } = legendItem || {};
-
-                if (seriesType === 'line') {
-                    // This is the case for the column plus line chart - the series type is
-                    // line, but the chart type is column. In this case we show a simple
-                    // line symbol in the legend, but we need to move the label to the right
-                    // to account for the longer line symbol
-                    if (chart.userOptions.chart.type !== 'line') {
-                        label?.attr({
-                            x: 30, // Adjust label position to account for longer line
-                        });
-                    }
-
-                    // This is the scenario for a line chart with markers disabled
-                    // We have custom code in line-chart.js to update the last point to
-                    // display as a symbol. This code checks if there is no symbol in the legend
-                    // (which means it is a line chart with markers disabled)
-                    // and if so, it updates the legend to display as a symbol rather than as a line
-                    // We only to this for chart types that are explicitly line charts - i.e. not column with line
-                    if (!symbol && label && label.element && chart.userOptions.chart.type === 'line') {
-                        // Hide the line in the legend
-                        if (line) {
-                            line.hide();
-                        }
-
-                        // Create a custom symbol for the legend using the line marker symbol options
-                        const renderer = chart.renderer;
-                        const bbox = label.element.getBBox();
-                        const markerStyle = this.constants.lineMarkerStyles[index % this.constants.lineMarkerStyles.length];
-
-                        const legendSymbol = renderer
-                            .symbol(markerStyle.symbol, bbox.x - 30, bbox.y + 4, 12, markerStyle.radius, markerStyle.radius)
-                            .attr({
-                                fill: item.color,
-                                stroke: item.color,
-                                'stroke-width': 1,
-                                width: 12,
-                                height: 12,
-                            });
-
-                        legendSymbol.add(label.parentGroup);
-                        label?.attr({
-                            x: 15, // Adjust label position to account for shorter space that the symbol takes up
-                        });
-                    }
-                } else if (seriesType === 'columnrange') {
-                    symbol.attr({
-                        width: 14,
-                        height: 14,
-                        y: 8,
-                    });
-                } else {
-                    if (!symbol) return;
-                    // Update the symbol width and height
-                    // For column, bar and other chart types
-                    else {
-                        symbol.attr({
-                            width: 12,
-                            height: 12,
-                            y: 8,
-                        });
-                    }
-                }
-            });
-        }
-    };
-
-    adjustChartHeight = (currentChart, percentageHeightDesktop, percentageHeightMobile) => {
-        // get height and width of the plot area
-        const plotHeight = currentChart.plotHeight;
-        const plotWidth = currentChart.plotWidth;
-        // calculate the new plot height based on the percentage height
-        // default to the current height
-        let newPlotHeight = plotHeight;
-        if (plotWidth > 400) {
-            newPlotHeight = plotWidth * (percentageHeightDesktop / 100);
-        } else {
-            newPlotHeight = plotWidth * (percentageHeightMobile / 100);
-        }
-        const totalHeight = currentChart.plotTop + newPlotHeight + currentChart.marginBottom;
-
-        // set the new size of the chart
-        if (totalHeight !== currentChart.chartHeight) {
-            currentChart.setSize(null, totalHeight, false);
-        }
-    };
 }
 
 export default CommonChartOptions;

package/components/chart/specific-chart-options.js

@@ -18,6 +18,49 @@ class SpecificChartOptions {
 
     getOptions = () => this.options;
 
+    getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
+        return {
+            tooltip: {
+                enabled: false,
+            },
+            xAxis: {
+                tickInterval: xAxisTickInterval,
+            },
+            yAxis: {
+                tickInterval: yAxisTickInterval,
+            },
+        };
+    };
+
+    disableLegendForSingleSeries = (config) => {
+        if (config.chart.type != 'boxplot' && config.series.length === 1) {
+            config.legend = {
+                enabled: false,
+            };
+            config.chart.marginTop = 50;
+        }
+    };
+
+    adjustChartHeight = (currentChart, percentageHeightDesktop, percentageHeightMobile) => {
+        // get height and width of the plot area
+        const plotHeight = currentChart.plotHeight;
+        const plotWidth = currentChart.plotWidth;
+        // calculate the new plot height based on the percentage height
+        // default to the current height
+        let newPlotHeight = plotHeight;
+        if (plotWidth > 400) {
+            newPlotHeight = Math.round(plotWidth * (percentageHeightDesktop / 100));
+        } else {
+            newPlotHeight = Math.round(plotWidth * (percentageHeightMobile / 100));
+        }
+        const totalHeight = currentChart.plotTop + newPlotHeight + currentChart.marginBottom;
+
+        // set the new size of the chart
+        if (totalHeight !== currentChart.chartHeight) {
+            currentChart.setSize(null, totalHeight, false);
+        }
+    };
+
     // Add zero line or custom reference line (but only for column or line charts)
     getReferenceLine = (customReferenceLineValue, chartType) => {
         let lineValue = 0;
@@ -38,6 +81,80 @@ class SpecificChartOptions {
             },
         };
     };
+
+    updateLegendSymbols = (chart) => {
+        if (chart.legend.options.enabled) {
+            chart.legend.allItems.forEach((item, index) => {
+                const { legendItem, userOptions } = item;
+                const seriesType = userOptions?.type;
+                const { label, symbol, line } = legendItem || {};
+
+                if (seriesType === 'line') {
+                    // This is the case for the column plus line chart - the series type is
+                    // line, but the chart type is column. In this case we show a simple
+                    // line symbol in the legend, but we need to move the label to the right
+                    // to account for the longer line symbol
+                    if (chart.userOptions.chart.type !== 'line') {
+                        label?.attr({
+                            x: 30, // Adjust label position to account for longer line
+                        });
+                    }
+
+                    // This is the scenario for a line chart with markers disabled
+                    // We have custom code in line-chart.js to update the last point to
+                    // display as a symbol. This code checks if there is no symbol in the legend
+                    // (which means it is a line chart with markers disabled)
+                    // and if so, it updates the legend to display as a symbol rather than as a line
+                    // We only to this for chart types that are explicitly line charts - i.e. not column with line
+                    if (!symbol && label && label.element && chart.userOptions.chart.type === 'line') {
+                        // Hide the line in the legend
+                        if (line) {
+                            line.hide();
+                        }
+
+                        // Remove any existing custom symbols for this legend item
+                        const existingSymbols = label.parentGroup.element.querySelectorAll('[data-custom-legend-symbol]');
+                        existingSymbols.forEach((symbol) => symbol.remove());
+
+                        // Create a custom symbol for the legend using the line marker symbol options
+                        const renderer = chart.renderer;
+                        const bbox = label.element.getBBox();
+                        const markerStyle = this.constants.lineMarkerStyles[index % this.constants.lineMarkerStyles.length];
+
+                        const legendSymbol = renderer
+                            .symbol(markerStyle.symbol, bbox.x - 22, bbox.y + 4, 12, markerStyle.radius, markerStyle.radius)
+                            .attr({
+                                fill: item.color,
+                                stroke: item.color,
+                                'stroke-width': 1,
+                                width: 12,
+                                height: 12,
+                                'data-custom-legend-symbol': true,
+                            });
+                        legendSymbol.add(label.parentGroup);
+                        label?.attr({
+                            x: 15, // Adjust label position to account for shorter space that the symbol takes up
+                        });
+                    }
+                } else if (seriesType === 'columnrange') {
+                    symbol.attr({
+                        width: 14,
+                        height: 14,
+                        y: 8,
+                    });
+                } else {
+                    if (!symbol) return;
+                    // Update the symbol width and height
+                    // For column, bar and other chart types
+                    symbol.attr({
+                        width: 12,
+                        height: 12,
+                        y: 8,
+                    });
+                }
+            });
+        }
+    };
 }
 
 export default SpecificChartOptions;