@ons/design-system 72.10.2 → 72.10.4

package/components/card/_card.scss

@@ -5,6 +5,7 @@
     &--feature {
         background-color: var(--ons-color-banner-bg);
         padding: 2rem;
+        outline: 1px solid transparent;
     }
 
     &__link {

package/components/card/example-card-set-with-headline-figures.njk

@@ -1,8 +1,8 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 <div class="ons-container">
-    <div class="ons-grid ons-grid-flex ons-grid-flex--vertical-top">
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -20,7 +20,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -38,7 +38,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',

package/components/chart/_macro.njk

@@ -2,14 +2,9 @@
 
 {% macro onsChart(params) %}
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
-    {% set supportedChartTypesWithLine = ['column', 'columnrange'] %}
+    {% set supportedChartTypesWithLine = ['column'] %}
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
-
-    {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
-        {% set headingLevel = params.headingLevel %}
-    {% else %}
-        {% set headingLevel = 2 %}
-    {% endif %}
+    {% set headingLevel = params.headingLevel | default(2) %}
     {% set openingTitleTag = "<h" ~ headingLevel %}
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
     {% set openingSubtitleTag = "<h" ~  (headingLevel + 1) %}
@@ -53,8 +48,11 @@
     >
         <figure class="ons-chart">
             {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
-            {{ openingSubtitleTag | safe }}
-            class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% if params.subtitle %}
+                {{ openingSubtitleTag | safe }}
+                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% endif %}
+
             {% if params.description %}
                 <p class="ons-u-vh">{{ params.description }}</p>
             {% endif %}
@@ -83,28 +81,31 @@
                 Footnotes for the annotations at mobile
                 Hidden from screen readers because the full text will be read out where they appear in the chart
             #}
-            <ul class="ons-chart__footnotes" aria-hidden="true">
-                {% for annotation in params.annotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number">{{ loop.index }}</span>
-                        {{ annotation.text }}
-                    </li>
-                {% endfor %}
-                {% for rangeAnnotation in params.rangeAnnotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
-                        {{ rangeAnnotation.text }}
-                    </li>
-                {% endfor %}
-                {% for referenceLineAnnotation in params.referenceLineAnnotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number"
-                            >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
-                        >
-                        {{ referenceLineAnnotation.text }}
-                    </li>
-                {% endfor %}
-            </ul>
+            {% if params.annotations or params.rangeAnnotations or params.referenceLineAnnotations %}
+                <ul class="ons-chart__footnotes" aria-hidden="true">
+                    {% for annotation in params.annotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number">{{ loop.index }}</span>
+                            {{ annotation.text }}
+                        </li>
+                    {% endfor %}
+                    {% for rangeAnnotation in params.rangeAnnotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
+                            {{ rangeAnnotation.text }}
+                        </li>
+                    {% endfor %}
+                    {% for referenceLineAnnotation in params.referenceLineAnnotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number"
+                                >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
+                            >
+                            {{ referenceLineAnnotation.text }}
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+
             {% if params.caption %}
                 <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
             {% endif %}
@@ -132,7 +133,7 @@
                         "name": item.name if item.name else '',
                         "data": item.data if item.data else [],
                         "marker": {
-                            "enabled": item.marker if item.marker else false
+                            "enabled": true if (item.type == 'scatter' or params.chartType == 'scatter' or item.marker == true) else false
                         },
                         "dataLabels": {
                             "enabled": item.dataLabels if item.dataLabels else false
@@ -160,8 +161,7 @@
         {%
             set config = {
                 "chart": {
-                    "type": params.chartType,
-                    "inverted": params.isChartInverted if params.isChartInverted == true else false
+                    "type": params.chartType
                 },
                 "legend": {
                     "enabled" : legendValue

package/components/chart/_macro.spec.js

@@ -1132,55 +1132,6 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"type":"columnrange"');
                     expect(configScript).toContain('"type":"scatter"');
                 });
-
-                describe('GIVEN: Params: isChartInverted', () => {
-                    describe('WHEN: isChartInverted parameter is provided and set to true', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: true,
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to true', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":true}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is provided and set to false', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: false,
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is not provided', () => {
-                        const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_RANGE_CHART_PARAMS));
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is provided but is not a boolean', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: 'false',
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-                });
             });
         });
     });

package/components/chart/bar-chart.js

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

package/components/chart/chart.js

@@ -62,14 +62,20 @@ class HighchartsBaseChart {
         this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
             ? parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop)
             : undefined;
-        this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
+        this.commonChartOptions = new CommonChartOptions();
         this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
         this.uncertainyRangeLabel = this.node.dataset.highchartsUncertaintyRangeLabel;
         this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
             ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
             : undefined;
 
-        this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
+        this.specificChartOptions = new SpecificChartOptions(
+            this.theme,
+            this.chartType,
+            this.config,
+            this.xAxisTickIntervalDesktop,
+            this.yAxisTickIntervalDesktop,
+        );
         this.lineChart = new LineChart();
         this.barChart = new BarChart();
         this.columnChart = new ColumnChart();
@@ -79,6 +85,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 +183,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 +196,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,
@@ -257,46 +265,45 @@ class HighchartsBaseChart {
             const currentChart = event.target;
             if (this.chartType === 'line') {
                 this.lineChart.updateLastPointMarker(currentChart.series);
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'bar') {
                 this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout);
                 if (!this.hideDataLabels) {
                     this.barChart.postLoadDataLabels(currentChart);
                 } else {
-                    this.commonChartOptions.hideDataLabels(currentChart.series);
+                    this.specificChartOptions.hideDataLabels(currentChart.series);
                 }
             }
             if (this.chartType === 'column') {
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'scatter') {
                 this.scatterChart.updateMarkers(currentChart);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
+            }
+            if (this.chartType === 'boxplot') {
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'columnrange') {
                 this.columnRangeChart.updateColumnRangeChartHeight(this.config, currentChart);
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
 
                 if (this.extraScatter > 0) {
                     const scatterSeries = currentChart.series.filter((series) => series.type === 'scatter');
                     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
             if (this.extraLines > 0) {
                 currentChart.series.forEach((series) => {
                     if (series.type === 'line') {
-                        this.commonChartOptions.hideDataLabels([series]);
+                        this.specificChartOptions.hideDataLabels([series]);
                     }
                 });
             }
-            // Update the legend items for all charts
-            this.commonChartOptions.updateLegendSymbols(currentChart);
             currentChart.redraw(false);
         };
     };
@@ -310,6 +317,11 @@ class HighchartsBaseChart {
             if (this.rangeAnnotationsOptions) {
                 this.rangeAnnotationsOptions.addLine(currentChart);
             }
+            if (this.chartType != 'bar' && this.chartType != 'columnrange') {
+                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 +336,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/columnrange-chart.js

@@ -57,6 +57,9 @@ class ColumnRangeChart {
                     useHTML: false,
                 },
             },
+            chart: {
+                inverted: true, // Invert the chart to make it horizontal
+            },
             legend: {
                 symbolRadius: 0,
                 itemStyle: {

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

@@ -2,7 +2,7 @@ import ChartConstants from './chart-constants';
 
 // Options that are common to all chart types - these are set once in the Highcharts.setOptions() method
 class CommonChartOptions {
-    constructor(xAxisTickInterval, yAxisTickInterval) {
+    constructor() {
         this.constants = ChartConstants.constants();
 
         this.options = {
@@ -85,7 +85,6 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
-                tickInterval: yAxisTickInterval,
             },
             xAxis: {
                 labels: {
@@ -109,7 +108,6 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
-                tickInterval: xAxisTickInterval,
             },
             plotOptions: {
                 series: {
@@ -134,131 +132,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({
-                dataLabels: {
-                    enabled: false,
-                },
-            });
-        });
-    };
-
-    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/example-bar-with-confidence-levels.njk

@@ -3,9 +3,7 @@
 {{
     onsChart({
         "chartType": "columnrange",
-        "isChartInverted": true,
         "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
-        "theme": "primary",
         "title": "Food stores showed a strong rise on the month, while non-food stores fell",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "uuid",
@@ -56,13 +54,10 @@
                     [-10.5, 12.0],
                     [-12.1, 18.5]
                 ],
-                "dataLabels": true,
                 "name": "Values"
             },
             {
                 "data": [1,2,3,4,5,6,7,8,9,10,3,11,12],
-                "marker": true,
-                "dataLabels": false,
                 "name": "Another test data source",
                 "type": "scatter"
             }

package/components/chart/example-column-with-confidence-levels.njk

@@ -4,7 +4,6 @@
     onsChart({
         "chartType": "boxplot",
         "description": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
-        "theme": "primary",
         "title": "Figure 6: Net debt as a percentage of GDP remains at levels last seen in the early 1960s",
         "subtitle": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
         "id": "uuid",
@@ -39,9 +38,7 @@
                     [817, 817, 817, 817, 817],
                     [806, 806, 806, 806, 806],
                     [864, 864, 864, 864, 864]
-                ],
-                "dataLabels": false,
-                "name": "Net debt"
+                ]
             }
         ],
         'estimateLineLabel': 'Data line',

package/components/chart/example-scatter-chart.njk

@@ -46,8 +46,7 @@
                     [163.5, 54.9], [158.7, 51.2], [165.5, 57.8], [160.4, 52.7],
                     [162.7, 55.4], [166.4, 58.4], [159.4, 51.5], [164.8, 56.5],
                     [158.6, 50.6], [163.4, 53.5]
-                ],
-                "marker": true
+                ]
             },
             {
                 "name": "Male",
@@ -60,8 +59,7 @@
                     [178.7, 68.8], [182.2, 74.7], [176.4, 67.5], [188.0, 77.6],
                     [184.1, 73.4], [179.2, 70.8], [186.6, 79.8], [183.4, 75.4],
                     [177.8, 69.6], [185.5, 76.7]
-                ],
-                "marker": true
+                ]
             },
             {
                 "name": "Adolescent Male",
@@ -72,8 +70,7 @@
                     [168.8, 58.6], [171.5, 62.8], [169.2, 59.4], [173.7, 63.5],
                     [170.2, 61.6], [172.4, 64.2], [168.2, 58.1], [173.9, 64.8],
                     [169.8, 60.7], [171.4, 63.6]
-                ],
-                "marker": true
+                ]
             },
             {
                 "name": "Adolescent Female",
@@ -84,8 +81,7 @@
                     [164.5, 55.1], [166.2, 57.5], [163.4, 53.6], [165.9, 56.2],
                     [162.6, 52.5], [167.5, 58.4], [164.4, 55.6], [166.6, 57.6],
                     [163.8, 53.7], [165.2, 56.9]
-                ],
-                "marker": true
+                ]
             }
         ],
         "percentageHeightDesktop": 35,