@ons/design-system 72.8.0 → 72.9.1

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;

package/components/table-of-contents/_macro.njk

@@ -61,17 +61,7 @@
 
         {% if params.button %}
             <div class="ons-table-of-contents__button ons-u-pt-l">
-                {% set allVariants = ['small', 'secondary'] %}
-
-                {% if params.button.variants %}
-                    {% if params.button.variants is string %}
-                        {% set allVariants = (allVariants.push(params.button.variants), allVariants) %}
-                    {% else %}
-                        {% for variant in params.button.variants %}
-                            {% set allVariants = (allVariants.push(variant), allVariants) %}
-                        {% endfor %}
-                    {% endif %}
-                {% endif %}
+                {% set allVariants = ['small', 'secondary', 'print'] %}
 
                 {{
                     onsButton({

package/components/table-of-contents/example-table-of-contents-related-links-with-button.njk

@@ -53,8 +53,7 @@
             ]
         },
         "button": {
-            "text": 'Save or print this page',
-            "variants": 'print'
+            "text": 'Save or print this page'
         }
     })
 -}}