@ons/design-system 74.0.0-next.15 → 74.0.0-next.16

package/components/chart/_chart.scss

@@ -113,16 +113,6 @@
         }
     }
 
-    &__iframe {
-        width: 100%;
-        aspect-ratio: 16 / 9; // Default aspect ratio
-
-        @media (scripting: none) {
-            // Approximately matches the aspect ratio of the fallback image inside the iframe
-            aspect-ratio: 16 / 9;
-        }
-    }
-
     &__non-js-hide {
         @media (scripting: none) {
             display: none;
@@ -130,8 +120,6 @@
     }
 }
 
-@include iframe-aspect-ratio('ons-chart__iframe--{x}');
-
 // This is a workaround to position the axis title to the left
 .highcharts-axis-title {
     width: 100%;

package/components/chart/_macro.njk

@@ -7,44 +7,41 @@
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
     {% set instructionsId = "chart-instructions-" ~ params.id %}
-    {% set iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
     {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
 
     <div
-        {% if not params.iframeUrl %}
-            data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
-            data-highcharts-title="{{ params.title }}" data-highcharts-id="{{ params.id }}"
-            {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
-            {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
-                data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
-            {% endif %}
-            {% if params.percentageHeightMobile and params.chartType != 'bar' %}
-                data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
-            {% endif %}
-            {% if params.xAxis.tickIntervalMobile %}
-                data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
-            {% endif %}
-            {% if params.xAxis.tickIntervalDesktop %}
-                data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
-            {% endif %}
-            {% if params.yAxis.tickIntervalMobile %}
-                data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
-            {% endif %}
-            {% if params.yAxis.tickIntervalDesktop %}
-                data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
-            {% endif %}
-            {% if params.estimateLineLabel %}
-                data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
-            {% endif %}
-            {% if params.uncertaintyRangeLabel %}
-                data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
-            {% endif %}
-            {% if params.yAxis.customReferenceLineValue %}
-                data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
-            {% endif %}
-            {% if params.dataLabelDecimalPoints and params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
-                data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
-            {% endif %}
+        data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
+        data-highcharts-title="{{ params.title }}" data-highcharts-id="{{ params.id }}"
+        {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
+        {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
+            data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
+        {% endif %}
+        {% if params.percentageHeightMobile and params.chartType != 'bar' %}
+            data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
+        {% endif %}
+        {% if params.xAxis.tickIntervalMobile %}
+            data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.xAxis.tickIntervalDesktop %}
+            data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalMobile %}
+            data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalDesktop %}
+            data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.estimateLineLabel %}
+            data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
+        {% endif %}
+        {% if params.uncertaintyRangeLabel %}
+            data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
+        {% endif %}
+        {% if params.yAxis.customReferenceLineValue %}
+            data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
+        {% endif %}
+        {% if params.dataLabelDecimalPoints and params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
+            data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
         {% endif %}
     >
         {%
@@ -61,53 +58,38 @@
             })
         %}
             <div class="ons-chart">
-                {% if params.iframeUrl %}
+                {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
+                    <div class="ons-chart__boxplot-legend">
+                        {% if params.uncertaintyRangeLabel %}
+                            <div class="ons-chart__boxplot-legend-item">
+                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
+                                <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
+                            </div>
+                        {% endif %}
+                        {% if params.estimateLineLabel %}
+                            <div class="ons-chart__boxplot-legend-item">
+                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
+                                <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endif %}
+                {% if params.chartType in supportedChartTypes %}
                     <div
-                        class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
-                        id="iframe--{{ params.id }}"
+                        data-highcharts-chart-container
+                        class="ons-chart__container"
+                        tabindex="0"
+                        role="region"
+                        aria-label="chart container"
+                        aria-describedby="{{ instructionsId }}"
                     >
-                        <iframe
-                            src="{{ params.iframeUrl }}"
-                            title="{{ params.title }}"
-                            class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
-                            frameborder="0"
-                            scrolling="no"
-                        ></iframe>
+                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
+                        <div data-highcharts-chart class="ons-chart__chart"></div>
                     </div>
                 {% else %}
-                    {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
-                        <div class="ons-chart__boxplot-legend">
-                            {% if params.uncertaintyRangeLabel %}
-                                <div class="ons-chart__boxplot-legend-item">
-                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
-                                    <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
-                                </div>
-                            {% endif %}
-                            {% if params.estimateLineLabel %}
-                                <div class="ons-chart__boxplot-legend-item">
-                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
-                                    <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% endif %}
-                    {% if params.chartType in supportedChartTypes %}
-                        <div
-                            data-highcharts-chart-container
-                            class="ons-chart__container"
-                            tabindex="0"
-                            role="region"
-                            aria-label="chart container"
-                            aria-describedby="{{ instructionsId }}"
-                        >
-                            <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
-                            <div data-highcharts-chart class="ons-chart__chart"></div>
-                        </div>
-                    {% else %}
-                        <p data-invalid-chart-type data-unsupported-chart-text>
-                            <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
-                        </p>
-                    {% endif %}
+                    <p data-invalid-chart-type data-unsupported-chart-text>
+                        <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
+                    </p>
                 {% endif %}
 
                 {% if params.fallbackImageUrl %}
@@ -125,7 +107,7 @@
                 Footnotes for the annotations at mobile
                 Hidden from screen readers because the full text will be read out where they appear in the chart
             #}
-                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
+                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) %}
                     <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
                         {% for annotation in params.annotations %}
                             <li class="ons-chart__annotations-footnotes_item">
@@ -152,7 +134,7 @@
             </div>
         {% endcall %}
 
-        {% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
+        {% if (params.chartType in supportedChartTypes) %}
             {% set series = [] %}
             {% set lineSeriesCount = 0 %}
             {% for item in params.series %}

package/components/chart/_macro.spec.js

@@ -25,7 +25,6 @@ import {
     EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS,
     EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS,
     EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS,
-    EXAMPLE_IFRAME_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -2104,243 +2103,4 @@ describe('Macro: Chart', () => {
             });
         });
     });
-
-    describe('FOR: Iframe Chart', () => {
-        describe('GIVEN: Params: required', () => {
-            describe('WHEN: iframeUrl param is provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
-
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
-
-                test('THEN: it renders the iframe', () => {
-                    expect($('.ons-chart__iframe-wrapper').length).toBe(1);
-                });
-
-                test('THEN: the Highcharts config is not included', () => {
-                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
-                    expect(configScript).toBeNull();
-                });
-            });
-        });
-
-        describe('GIVEN: Params: theme', () => {
-            describe('WHEN: theme is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        theme: 'secondary',
-                    }),
-                );
-
-                test('THEN: the theme parameter is ignored', () => {
-                    expect($('[data-highcharts-theme]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: percentageHeightDesktop', () => {
-            describe('WHEN: percentageHeightDesktop is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        percentageHeightDesktop: 50,
-                    }),
-                );
-
-                test('THEN: the percentageHeightDesktop parameter is ignored', () => {
-                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: percentageHeightMobile', () => {
-            describe('WHEN: percentageHeightMobile is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        percentageHeightMobile: 10,
-                    }),
-                );
-
-                test('THEN: the percentageHeightMobile parameter is ignored', () => {
-                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: tickInterval', () => {
-            describe('WHEN: tickIntervalDesktop and tickIntervalMobile are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        xAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
-                        yAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
-                    }),
-                );
-
-                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
-                    expect($('[data-highcharts-x-axis-tick-interval-desktop]').length).toBe(0);
-                    expect($('[data-highcharts-x-axis-tick-interval-mobile]').length).toBe(0);
-                    expect($('[data-highcharts-y-axis-tick-interval-desktop]').length).toBe(0);
-                    expect($('[data-highcharts-y-axis-tick-interval-mobile]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: estimateLineLabel', () => {
-            describe('WHEN: estimateLineLabel is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        estimateLineLabel: 'Estimated value',
-                    }),
-                );
-
-                test('THEN: the estimateLineLabel parameter is ignored', () => {
-                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: uncertaintyRangeLabel', () => {
-            describe('WHEN: uncertaintyRangeLabel is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        uncertaintyRangeLabel: '95% Confidence Interval',
-                    }),
-                );
-
-                test('THEN: the uncertaintyRangeLabel parameter is ignored', () => {
-                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: customReferenceLineValue', () => {
-            describe('WHEN: customReferenceLineValue is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        yAxis: { customReferenceLineValue: 10 },
-                    }),
-                );
-
-                test('THEN: the customReferenceLineValue parameter is ignored', () => {
-                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: chartType', () => {
-            describe('WHEN: chartType is boxplot and legend params are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        chartType: 'boxplot',
-                        legend: true,
-                        estimateLineLabel: 'Estimated value',
-                        uncertaintyRangeLabel: '95% Confidence Interval',
-                    }),
-                );
-
-                test('THEN: the boxplot legend is not rendered', () => {
-                    expect($('.ons-chart__boxplot-legend').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: invalidChartType', () => {
-            describe('WHEN: an invalid chart type is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        chartType: 'foobar',
-                    }),
-                );
-
-                test('THEN: the invalid chart type is ignored', () => {
-                    expect($('[data-invalid-chart-type]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: annotations', () => {
-            describe('WHEN: annotations, rangeAnnotations and referenceLineAnnotations are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        annotations: [{ text: 'A test point annotation', point: { x: 2, y: 3 } }],
-                        rangeAnnotations: [{ text: 'Range annotation', range: { axisValue1: 10, axisValue2: 15 }, axis: 'x' }],
-                        referenceLineAnnotations: [{ text: 'Reference line', value: 34, axis: 'x' }],
-                    }),
-                );
-
-                test('THEN: annotations footnotes are not rendered', () => {
-                    expect($('[data-annotations-footnotes]').length).toBe(0);
-                });
-
-                test('THEN: annotation scripts are not rendered', () => {
-                    expect($('[data-highcharts-annotations--iframe-chart-123]').length).toBe(0);
-                    expect($('[data-highcharts-range-annotations--iframe-chart-123]').length).toBe(0);
-                    expect($('[data-highcharts-reference-line-annotations--iframe-chart-123]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: iframeAspectRatio', () => {
-            describe('WHEN: iframeAspectRatio is not set', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
-
-                test('THEN: it defaults to 16-9', () => {
-                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
-                });
-            });
-
-            describe('WHEN: iframeAspectRatio is unsupported', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        iframeAspectRatio: '16-10',
-                    }),
-                );
-
-                test('THEN: it defaults to 16-9', () => {
-                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
-                });
-            });
-
-            describe('WHEN: iframeAspectRatio is supported', () => {
-                const aspectRatio = '21-9';
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        iframeAspectRatio: aspectRatio,
-                    }),
-                );
-
-                test('THEN: it applies the aspect ratio class', () => {
-                    expect($('.ons-chart__iframe').hasClass(`ons-chart__iframe--${aspectRatio}`)).toBe(true);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: fallbackImageUrl', () => {
-            describe('WHEN: fallbackImageUrl is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
-                    }),
-                );
-
-                test('THEN: the iframe wrapper is hidden when JavaScript is disabled', () => {
-                    expect($('.ons-chart__iframe-wrapper').attr('class')).toContain('ons-chart__non-js-hide');
-                });
-            });
-        });
-    });
 });