@ons/design-system 72.8.0 → 72.9.0

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

@@ -22,7 +22,6 @@ class CommonChartOptions {
                 symbolWidth: 20,
                 margin: 50,
                 navigation: {
-                    // ensures that when the legend is long, there is no pagination or scrollbar
                     enabled: false,
                 },
                 itemDistance: 30,
@@ -30,9 +29,8 @@ class CommonChartOptions {
                     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,
+                    fontSize: this.constants.defaultFontSize,
                     fontWeight: 'normal',
                 },
                 // Disable click event on legend
@@ -64,7 +62,7 @@ class CommonChartOptions {
                 labels: {
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 title: {
@@ -78,7 +76,7 @@ class CommonChartOptions {
                     y: -25,
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 lineColor: this.constants.gridLineColor,
@@ -87,7 +85,7 @@ class CommonChartOptions {
                 plotLines: [
                     {
                         color: this.constants.zeroLineColor,
-                        width: 1,
+                        width: 1.5,
                         value: 0,
                         zIndex: 2,
                     },
@@ -104,14 +102,14 @@ class CommonChartOptions {
                     rotation: 0,
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 title: {
                     align: 'high',
                     style: {
                         color: this.constants.axisLabelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                     },
                 },
                 lineColor: this.constants.gridLineColor,
@@ -147,35 +145,10 @@ class CommonChartOptions {
 
     getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
         return {
-            legend: {
-                itemStyle: {
-                    fontSize: this.constants.mobileFontSize,
-                },
-            },
             xAxis: {
-                labels: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
-                title: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
                 tickInterval: xAxisTickInterval,
             },
             yAxis: {
-                labels: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
-                title: {
-                    style: {
-                        fontSize: this.constants.mobileFontSize,
-                    },
-                },
                 tickInterval: yAxisTickInterval,
             },
         };

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

@@ -0,0 +1,68 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "area",
+        "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails 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": [
+                    39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
+                    43.9, 41.8
+                ],
+                "name": "Test series 3"
+            },
+            {
+                "data": [
+                    28.8, 23.2, 33.0, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7,
+                    43.9, 41.8
+                ],
+                "name": "Test series 2"
+            },
+            {
+                "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
+                ],
+                "name": "Test series 1"
+            }
+        ],
+        "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": "Y axis title"
+        },
+        "percentageHeightDesktop": 50,
+        "percentageHeightMobile": 120
+    })
+}}

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

@@ -58,6 +58,8 @@
                 "name": "Another test data source",
                 "type": "line"
             }
-        ]
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
     })
 }}

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

@@ -0,0 +1,138 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "primary",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails 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": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015'
+            ]
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}"
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, null, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, -0.2, -1.0, null, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            }
+            ,
+            {
+                "name": 'Extra test series 1',
+                "data": [
+                    3.2, 3.7, 3.8, 3.9, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 2',
+                "data": [
+                    4.5, 4.3, 4.4, 4.5, 4.4, 4.2, 4.1, 4.2, 4.0, 4.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 3',
+                "data": [
+                    5.5, 5.3, 5.4, 5.5, 5.4, 5.2, 5.1, 5.2, 5.0, 5.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 4',
+                "data": [
+                    -3.5, -3.3, -3.4, -3.5, -3.4, -3.2, -3.1, -3.2, -3.0, -3.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 5',
+                "data": [
+                    -4.5, -4.3, -4.4, -4.5, -4.4, -4.2, -4.1, -4.2, -4.0, -4.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            },
+            {
+                "name": 'Extra test series 6',
+                "data": [
+                    -5.5, -5.3, -5.4, -5.5, -5.4, -5.2, -5.1, -5.2, -5.0, -5.3
+                ],
+                "marker": 'true',
+                "connectNulls": 'true'
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

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

@@ -0,0 +1,94 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "scatter",
+        "description": "Example scatter chart",
+        "theme": "alternate",
+        "title": "Example scatter chart",
+        "subtitle": "Scatter chart subtitle",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails 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": {
+            "title": "Height"
+        },
+        "yAxis": {
+            "title": "Weight"
+        },
+        "legend": 'true',
+        "series": [
+            {
+                "name": "Female",
+                "data": [
+                    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
+                    [163.8, 54.5], [158.4, 50.8], [165.2, 57.3], [160.7, 52.4],
+                    [162.3, 55.1], [166.8, 58.7], [159.8, 51.9], [164.5, 56.2],
+                    [158.9, 50.3], [163.1, 53.8],
+                    [161.8, 52.1], [167.1, 58.8], [159.2, 49.8], [157.4, 62.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",
+                "data": [
+                    [174.0, 65.6], [175.3, 71.8], [187.5, 80.7], [186.5, 72.6],
+                    [178.2, 68.4], [182.7, 74.3], [176.8, 67.9], [188.4, 77.2],
+                    [184.5, 73.8], [179.6, 70.5], [186.2, 79.4], [183.8, 75.1],
+                    [177.4, 69.2], [185.9, 76.3],
+                    [174.3, 66.1], [175.8, 71.4], [187.8, 80.2], [186.1, 72.9],
+                    [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",
+                "data": [
+                    [168.5, 58.2], [171.2, 62.4], [169.8, 59.7], [173.4, 63.8],
+                    [170.6, 61.2], [172.8, 64.5], [167.9, 57.8], [174.2, 65.1],
+                    [169.5, 60.3], [171.8, 63.2],
+                    [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",
+                "data": [
+                    [164.2, 54.8], [166.5, 57.2], [163.8, 53.9], [165.7, 56.4],
+                    [162.9, 52.8], [167.2, 58.1], [164.8, 55.3], [166.9, 57.8],
+                    [163.5, 53.4], [165.4, 56.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,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/line-chart.js

@@ -1,39 +1,34 @@
+import ChartConstants from './chart-constants';
 class LineChart {
+    constructor() {
+        this.chartConstants = ChartConstants.constants();
+        this.markerStyles = this.chartConstants.lineMarkerStyles;
+    }
+
     getLineChartOptions = () => {
         return {
             plotOptions: {
                 line: {
                     lineWidth: 3,
                     linecap: 'round',
-                    // In a later PR we will update the marker styles
-                    marker: {
-                        enabled: false,
-                        radius: 4,
-                        symbol: 'circle',
-                        lineWidth: 0,
-                    },
                 },
             },
         };
     };
 
     updateLastPointMarker = (series) => {
-        series.forEach((series) => {
-            // If markers are disabled, hide them all but the last point marker
-            if (series.options.marker.enabled.enabled === undefined) {
-                const points = series.points;
-                if (points && points.length > 0) {
-                    // Show only the last point marker
-                    const lastPoint = points[points.length - 1];
-                    lastPoint.update(
-                        {
-                            marker: {
-                                enabled: true,
-                            },
-                        },
-                        false,
-                    );
-                }
+        series.forEach((series, i) => {
+            const points = series.points;
+            if (points && points.length > 0) {
+                // Show only the last point marker
+                const lastPoint = points[points.length - 1];
+                lastPoint.update({
+                    marker: {
+                        enabled: true,
+                    },
+                });
+                // Update the marker styles to use for each series
+                series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
             }
         });
     };

package/components/chart/scatter-chart.js

@@ -0,0 +1,34 @@
+import ChartConstants from './chart-constants';
+
+class ScatterChart {
+    constructor() {
+        this.chartConstants = ChartConstants.constants();
+        this.markerStyles = this.chartConstants.scatterMarkerStyles;
+    }
+
+    getScatterChartOptions = () => {
+        return {
+            plotOptions: {
+                scatter: {
+                    // enable tooltips for scatter charts
+                    enableMouseTracking: true,
+                },
+            },
+            xAxis: {
+                gridLineWidth: 1,
+            },
+            yAxis: {
+                gridLineWidth: 1,
+            },
+        };
+    };
+
+    // Use a different set of marker styles for scatter charts
+    updateMarkers = (currentChart) => {
+        currentChart.series.forEach((series, i) => {
+            series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
+        });
+    };
+}
+
+export default ScatterChart;