@ons/design-system 72.4.0 → 72.6.0

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

@@ -0,0 +1,247 @@
+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() {
+        this.constants = ChartConstants.constants();
+
+        this.options = {
+            chart: {
+                backgroundColor: 'transparent',
+                style: {
+                    fontFamily: '"OpenSans", "Helvetica Neue", arial, sans-serif',
+                    color: '#222222',
+                },
+            },
+            legend: {
+                align: 'left',
+                verticalAlign: 'top',
+                layout: 'horizontal',
+                // Symbol width and height are set in a postLoad event, depending on the series type
+                // Default to the line width to ensure there is enough space for the overall legend item for line symbols
+                symbolWidth: 20,
+                margin: 50,
+                navigation: {
+                    // ensures that when the legend is long, there is no pagination or scrollbar
+                    enabled: false,
+                },
+                itemDistance: 30,
+                itemHoverStyle: {
+                    color: this.constants.labelColor, // Prevents the text from changing color on hover
+                },
+                itemStyle: {
+                    cursor: 'default', // ensures that it does not change to a hand (pointer) on hover.
+                    color: this.constants.labelColor,
+                    fontSize: this.constants.desktopFontSize,
+                    fontWeight: 'normal',
+                },
+                // Disable click event on legend
+                // There is currently an issue because the legend items are still buttons
+                // and therefore the screen reader still announces that they can be clicked
+                events: {
+                    itemClick: () => {
+                        return false;
+                    },
+                },
+                accessibility: {
+                    keyboardNavigation: {
+                        enabled: false, // Prevents focus on legend items while keeping screen reader support
+                    },
+                },
+            },
+            // Remove the chart title as rendered by Highcharts, as this is rendered in the surrounding component
+            title: {
+                text: '',
+            },
+            credits: {
+                // Remove Highcharts watermark
+                enabled: false,
+            },
+            accessibility: {
+                enabled: true,
+            },
+            yAxis: {
+                labels: {
+                    style: {
+                        color: this.constants.axisLabelColor,
+                        fontSize: this.constants.desktopFontSize,
+                    },
+                },
+                title: {
+                    text: '', // Remove the default title rendered by Highcharts if not provided
+                    align: 'high',
+                    textAlign: 'middle',
+                    reserveSpace: false,
+                    useHTML: true,
+                    offset: 15,
+                    rotation: 0,
+                    y: -25,
+                    style: {
+                        color: this.constants.axisLabelColor,
+                        fontSize: this.constants.desktopFontSize,
+                    },
+                },
+                lineColor: this.constants.gridLineColor,
+                gridLineColor: this.constants.gridLineColor,
+                // Add zero line
+                plotLines: [
+                    {
+                        color: this.constants.zeroLineColor,
+                        width: 1,
+                        value: 0,
+                        zIndex: 2,
+                    },
+                ],
+                // Add tick marks
+                tickWidth: 1,
+                tickLength: 6,
+                tickColor: this.constants.gridLineColor,
+            },
+            xAxis: {
+                labels: {
+                    style: {
+                        color: this.constants.axisLabelColor,
+                        fontSize: this.constants.desktopFontSize,
+                    },
+                },
+                title: {
+                    align: 'high',
+                    style: {
+                        color: this.constants.axisLabelColor,
+                        fontSize: this.constants.desktopFontSize,
+                    },
+                },
+                lineColor: this.constants.gridLineColor,
+                gridLineColor: this.constants.gridLineColor,
+                // Add tick marks
+                tickWidth: 1,
+                tickLength: 6,
+                tickColor: this.constants.gridLineColor,
+            },
+            plotOptions: {
+                series: {
+                    // disables the tooltip on hover
+                    enableMouseTracking: false,
+                    animation: false,
+
+                    // disables the legend item hover
+                    states: {
+                        inactive: {
+                            opacity: 1, // Prevent dimming of other series
+                            enabled: false,
+                        },
+                        hover: {
+                            enabled: false, // Disable the hover effect
+                        },
+                    },
+                },
+            },
+        };
+    }
+
+    getOptions = () => this.options;
+
+    getMobileOptions = () => {
+        return {
+            legend: {
+                itemStyle: {
+                    fontSize: this.constants.mobileFontSize,
+                },
+            },
+            xAxis: {
+                labels: {
+                    style: {
+                        fontSize: this.constants.mobileFontSize,
+                    },
+                },
+                title: {
+                    style: {
+                        fontSize: this.constants.mobileFontSize,
+                    },
+                },
+            },
+            yAxis: {
+                labels: {
+                    style: {
+                        fontSize: this.constants.mobileFontSize,
+                    },
+                },
+                title: {
+                    style: {
+                        fontSize: this.constants.mobileFontSize,
+                    },
+                },
+            },
+        };
+    };
+
+    hideDataLabels = (series) => {
+        series.forEach((series) => {
+            series.update({
+                dataLabels: {
+                    enabled: false,
+                },
+            });
+        });
+    };
+
+    disableLegendForSingleSeries = (config) => {
+        if (config.series.length === 1) {
+            config.legend = {
+                enabled: false,
+            };
+            config.chart.marginTop = 50;
+        }
+    };
+
+    updateLegendSymbols = (chart) => {
+        if (chart.legend.options.enabled) {
+            chart.legend.allItems.forEach((item) => {
+                const { legendItem, userOptions } = item;
+                const seriesType = userOptions?.type;
+                // symbol is defined for bar / column series, and line is defined for line series
+                // if symbol is defined for a line series, it is the marker symbol
+                const { label, symbol } = legendItem || {};
+
+                if (seriesType === 'line') {
+                    symbol?.attr({
+                        x: 16, // Position the marker to the right of the line
+                    });
+
+                    label?.attr({
+                        x: 30, // Adjust label position to account for longer line
+                    });
+                } else {
+                    // Set the symbol size for bar / column series
+                    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-chart-with-annotations.njk

@@ -0,0 +1,62 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "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",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "xAxis": {
+            "categories": [
+                "All retailing",
+                "All retailing excluding Automotive fuel",
+                "Food stores",
+                "Department stores",
+                "Other non-food stores",
+                "Textile clothing \u0026 footwear stores",
+                "Household goods stores",
+                "Non-store retailing",
+                "Automotive fuel"
+            ],
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        },
+        "series": [
+            {
+                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
+                "dataLabels": true,
+                "name": "Jan-25"
+            }
+        ],
+        "annotations": [
+            {
+                "text": "A test annotation",
+                "point": {"x": 2, "y": 3},
+                "labelOffsetX": 40,
+                "labelOffsetY": -30
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,55 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "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",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "xAxis": {
+            "categories": [
+                "All retailing",
+                "All retailing excluding Automotive fuel",
+                "Food stores",
+                "Department stores",
+                "Other non-food stores",
+                "Textile clothing \u0026 footwear stores",
+                "Household goods stores",
+                "Non-store retailing",
+                "Automotive fuel"
+            ],
+            "title": "Retailing",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        },
+        "series": [
+            {
+                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
+                "dataLabels": true,
+                "name": "Jan-25"
+            }
+        ]
+    })
+}}

package/components/chart/example-bar-with-line-chart.njk

@@ -0,0 +1,64 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "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",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": true,
+        "xAxis": {
+            "categories": ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"],
+            "type": "linear",
+            "title": "Categories"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        },
+        "series": [
+            {
+                "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+                "dataLabels": true,
+                "name": "Values"
+            },
+            {
+                "data": [
+                    ["One", 6],
+                    ["Two", 4],
+                    ["Three", 5],
+                    ["Four", 7],
+                    ["Five", 2],
+                    ["Six", 9],
+                    ["Seven", 3],
+                    ["Eight", 8],
+                    ["Nine", 2],
+                    ["Ten", 1]
+                ],
+                "marker": true,
+                "dataLabels": false,
+                "name": "Another test data source",
+                "type": "line"
+            }
+        ]
+    })
+}}

package/components/chart/example-clustered-bar-chart.njk

@@ -0,0 +1,60 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "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",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": true,
+        "series": [
+            {
+                "data": [-6.2, 1.5, -15.9, 1.7],
+                "dataLabels": false,
+                "name": "2022"
+            },
+            {
+                "data": [-2.9, -2.7, -2.9, -3.5],
+                "dataLabels": false,
+                "name": "2023"
+            },
+            {
+                "data": [-1.6, 1.2, 3.2, 3.8],
+                "dataLabels": false,
+                "name": "2024"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Food stores",
+                "Non-food stores",
+                "Non-store retailing ",
+                "Automotive fuel"
+            ],
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        }
+    })
+}}

package/components/chart/example-clustered-column-chart.njk

@@ -0,0 +1,74 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
+        "theme": "alternate",
+        "title": "Clothing stores fell back, following three months of growth",
+        "subtitle": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
+        "id": "uuid",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": {
+            "enabled": true
+        },
+        "series": [
+            {
+                "data": [6.2, 1.5, 15.9, 1.7],
+                "dataLabels": false,
+                "name": "2022"
+            },
+            {
+                "data": [2.9, -2.7, 2.9, 3.5],
+                "dataLabels": false,
+                "name": "2023"
+            },
+            {
+                "data": [-1.6, 1.2, 3.2, 3.8],
+                "dataLabels": false,
+                "name": "2024"
+            },
+            {
+                "data": [3.0, 2, 5.6, 2.1],
+                "dataLabels": false,
+                "name": "2025"
+            },
+            {
+                "data": [2.0, 2, 3, 4],
+                "dataLabels": false,
+                "name": "2026"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Food stores",
+                "Non-food stores",
+                "Non-store retailing ",
+                "Automotive fuel"
+            ],
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "2022"
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/example-column-chart-with-annotations.njk

@@ -0,0 +1,62 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "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",
+        "caption": "Source: Public sector finances from the Office for Budget Responsibility (OBR) and the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": false,
+        "series": [
+            {
+                "data": [
+                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
+                    33.9, 31.8
+                ],
+                "dataLabels": false,
+                "name": "Public sector net debt as a % of GDP (PSND)"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percentage of GDP"
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90,
+        "annotations": [
+            {
+                "text": "A test annotation",
+                "point": {"x": 11, "y": 31.8},
+                "labelOffsetX": 10,
+                "labelOffsetY": -50
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,54 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "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",
+        "caption": "Source: Public sector finances from the Office for Budget Responsibility (OBR) and the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": false,
+        "series": [
+            {
+                "data": [
+                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
+                    33.9, 31.8
+                ],
+                "dataLabels": false,
+                "name": "Public sector net debt as a % of GDP (PSND)"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percentage of GDP"
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}