Draft: add bar and column charts

.github/workflows/macro-and-script-tests.yml

@@ -21,4 +21,4 @@ jobs:
             - name: Clear jest cache
               run: yarn test:clear-cache
             - name: Run macro and script tests
-              run: yarn test
+              run: yarn test | grep -v "Google analytics not connected"

package.json

@@ -135,5 +135,6 @@
     },
     "dependencies": {
         "highcharts": "^12.1.2"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/chart/_chart.scss

@@ -4,4 +4,18 @@
         @extend .ons-u-pt-l;
         @extend .ons-u-fs-r--b;
     }
+    &__title {
+        font-size: 20px;
+        line-height: 26px;
+    }
+
+    &__subtitle {
+        font-size: 16px;
+        line-height: 20.8px;
+    }
+
+    &__caption {
+        font-size: 16px;
+        line-height: 19.2px;
+    }
 }

src/components/chart/_macro-options.md

@@ -1,14 +1,15 @@
-| Name        | Type   | Required | Description                                                                                |
-| ----------- | ------ | -------- | ------------------------------------------------------------------------------------------ |
-| chartType   | string | true     | The type of chart to render (e.g., 'line', 'bar', etc.).                                   |
-| theme       | string | true     | The theme to apply to the chart. Either `primary` or `alternate`.                          |
-| title       | string | true     | The main title of the chart.                                                               |
-| subtitle    | string | true     | A subtitle that appears under the main title.                                              |
-| uuid        | string | true     | A unique identifier for the chart instance.                                                |
-| caption     | string | false    | A caption providing additional context for the chart.                                      |
-| description | string | false    | A textual description of the chart for screen readers.                                     |
-| download    | object | false    | Object for (download)[#download] options.                                                  |
-| config      | object | true     | The full [configuration](#config) object passed to Highcharts, defining axes, series, etc. |
+| Name             | Type    | Required | Description                                                                                 |
+| ---------------- | ------- | -------- | ------------------------------------------------------------------------------------------- |
+| chartType        | string  | true     | The type of chart to render (e.g., 'line', 'bar', etc.).                                    |
+| theme            | string  | true     | The theme to apply to the chart. Either `primary` or `alternate`.                           |
+| title            | string  | true     | The main title of the chart.                                                                |
+| subtitle         | string  | true     | A subtitle that appears under the main title.                                               |
+| uuid             | string  | true     | A unique identifier for the chart instance.                                                 |
+| caption          | string  | false    | A caption providing additional context for the chart.                                       |
+| description      | string  | false    | A textual description of the chart for screen readers.                                      |
+| download         | object  | false    | Object for (download)[#download] options.                                                   |
+| useStackedLayout | boolean | false    | Determines whether the chart should use a stacked layout. It is useful only for bar charts. |
+| config           | object  | true     | The full [configuration](#config) object passed to Highcharts, defining axes, series, etc.  |
 
 ### Download
 
@@ -87,31 +88,16 @@
 | name       | string | true     | The name of the series.                                                                     |
 | data       | array  | true     | The data values for the series. Each value corresponds to a category on the x-axis.         |
 | dataLabels | object | false    | Configuration options for displaying labels on the data points.                             |
-| marker     | object | false    | Configuration options for the series (markers)[#markers].                                   |
 | tooltip    | object | false    | Customization options for the (tooltip)[#tooltip] displayed when hovering over data points. |
-| animation  | object | false    | Defines (animation)[#animation] options for rendering the series. Defaults to false.        |
 
 ### DataLabel
 
 | Name    | Type    | Required | Description                                              |
 | ------- | ------- | -------- | -------------------------------------------------------- |
 | enabled | boolean | false    | Whether the DataLabel is displayed. Defaults to `false`. |
 
-### Marker
-
-| Name    | Type    | Required | Description                                                       |
-| ------- | ------- | -------- | ----------------------------------------------------------------- |
-| enabled | boolean | false    | Whether markers are displayed for the series. Defaults to `true`. |
-| symbol  | string  | false    | The shape of the marker (`circle`, `square`, `diamond`, etc.).    |
-
 ### Tooltip
 
-| Name        | Type   | Required | Description                                                  |
-| ----------- | ------ | -------- | ------------------------------------------------------------ |
-| valueSuffix | string | false    | A string to append to each tooltip value (e.g., '°C', 'kg'). |
-
-#### Animation
-
-| Name     | Type   | Required | Description                                                   |
-| -------- | ------ | -------- | ------------------------------------------------------------- |
-| duration | number | false    | Duration of the animation in milliseconds. Default is `1000`. |
+| Name        | Type   | Required | Description                               |
+| ----------- | ------ | -------- | ----------------------------------------- |
+| valueSuffix | string | false    | A string to append to each tooltip value. |

src/components/chart/_macro.njk

@@ -7,14 +7,18 @@
         data-highcharts-theme="{{ params.theme }}"
         data-highcharts-title="{{ params.title }}"
         data-highcharts-uuid="{{ params.uuid }}"
+        {% if params.useStackedLayout %}data-highcharts-use-stacked-layout{% endif %}
+        id="{{ params.uuid }}"
     >
         <figure class="ons-chart">
-            <h3>{{ params.title }}</h3>
-            <h4>{{ params.subtitle }}</h4>
-            <h5 class="ons-u-vh">{{ params.description }}</h5>
+            <h3 class="ons-chart__title">{{ params.title }}</h3>
+            <h4 class="ons-chart__subtitle">{{ params.subtitle }}</h4>
+            {% if params.description %}
+                <h5 class="ons-u-vh">{{ params.description }}</h5>
+            {% endif %}
             <div data-highcharts-chart></div>
             {% if params.caption %}
-                <figcaption>{{ params.caption }}</figcaption>
+                <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
             {% endif %}
         </figure>
 
@@ -29,8 +33,10 @@
         {% endif %}
 
         <!-- Set scripts to pass the config values as json to the javascript -->
-        {# <script type="application/json" data-highcharts-config--{{ params.uuid }}>
+        <!-- prettier-ignore-start -->
+        <script type="application/json" data-highcharts-config--{{ params.uuid }}>
             {{ params.config | dump | safe }}
-        </script> #}
+        </script>
+        <!-- prettier-ignore-end -->
     </div>
 {% endmacro %}

src/components/chart/_macro.spec.js

@@ -0,0 +1,116 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_CHART_REQUIRED_PARAMS, EXAMPLE_CHART_WITH_CONFIG_PARAMS } from './_test-examples';
+
+describe('FOR: Macro: Chart', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('chart', EXAMPLE_CHART_REQUIRED_PARAMS));
+
+            test('THEN: it passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: it renders the chart container with the correct data attributes', () => {
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('line');
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Line Chart');
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-uuid')).toBe('chart-123');
+            });
+
+            test('THEN: it includes the Highcharts JSON config', () => {
+                const configScript = $(`script[data-highcharts-config--chart-123]`).html();
+                expect(configScript).toContain('"type":"line"');
+                expect(configScript).toContain('"text":"X Axis Title"');
+                expect(configScript).toContain('"text":"Y Axis Title"');
+            });
+
+            test('THEN: it does NOT render optional fields', () => {
+                expect($('figcaption').length).toBe(0);
+                expect($('.ons-chart__download-title').length).toBe(0);
+            });
+        });
+    });
+
+    describe('GIVEN: Params: Config', () => {
+        describe('WHEN: config params are provided', () => {
+            const $ = cheerio.load(renderComponent('chart', EXAMPLE_CHART_WITH_CONFIG_PARAMS));
+
+            test('THEN: it renders the legend when enabled', () => {
+                const configScript = $(`script[data-highcharts-config--chart-456]`).html();
+                expect(configScript).toContain('"enabled":true');
+                expect(configScript).toContain('"align":"right"');
+                expect(configScript).toContain('"verticalAlign":"top"');
+                expect(configScript).toContain('"layout":"vertical"');
+            });
+
+            test('THEN: it includes correct xAxis and yAxis titles', () => {
+                const configScript = $(`script[data-highcharts-config--chart-456]`).html();
+                expect(configScript).toContain('"text":"X Axis Label"');
+                expect(configScript).toContain('"text":"Y Axis Label"');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: Caption', () => {
+        describe('WHEN: caption is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('chart', {
+                    ...EXAMPLE_CHART_REQUIRED_PARAMS,
+                    caption: 'This is an example caption for the chart.',
+                }),
+            );
+
+            test('THEN: it renders the caption when provided', () => {
+                expect($('figcaption').text()).toBe('This is an example caption for the chart.');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: Description)', () => {
+        describe('WHEN: description is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('chart', {
+                    ...EXAMPLE_CHART_REQUIRED_PARAMS,
+                    description: 'An accessible description for screen readers.',
+                }),
+            );
+
+            test('THEN: it renders the description for accessibility', () => {
+                expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: Download)', () => {
+        describe('WHEN: download object are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('chart', {
+                    ...EXAMPLE_CHART_REQUIRED_PARAMS,
+                    download: {
+                        title: 'Download Chart Data',
+                        itemsList: [
+                            { text: 'Download as PNG', url: 'https://example.com/chart.png' },
+                            { text: 'Download as CSV', url: 'https://example.com/chart.csv' },
+                        ],
+                    },
+                }),
+            );
+
+            test('THEN: it renders the download section correctly', () => {
+                expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+
+                const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                expect(downloadLinks.eq(0).text()).toBe('Download as PNG');
+                expect(downloadLinks.eq(0).attr('href')).toBe('https://example.com/chart.png');
+                expect(downloadLinks.eq(1).text()).toBe('Download as CSV');
+                expect(downloadLinks.eq(1).attr('href')).toBe('https://example.com/chart.csv');
+            });
+        });
+    });
+});

src/components/chart/_test-examples.js

@@ -0,0 +1,34 @@
+export const EXAMPLE_CHART_REQUIRED_PARAMS = {
+    chartType: 'line',
+    theme: 'primary',
+    title: 'Example Line Chart',
+    subtitle: 'A sample subtitle',
+    uuid: 'chart-123',
+    config: {
+        chart: { type: 'line' },
+        xAxis: { title: { text: 'X Axis Title' }, categories: ['Jan', 'Feb', 'Mar'] },
+        yAxis: { title: { text: 'Y Axis Title' } },
+        series: [
+            { name: 'Series 1', data: [10, 20, 30] },
+            { name: 'Series 2', data: [15, 25, 35] },
+        ],
+    },
+};
+
+export const EXAMPLE_CHART_WITH_CONFIG_PARAMS = {
+    chartType: 'bar',
+    theme: 'alternate',
+    title: 'Example Bar Chart',
+    subtitle: 'A detailed subtitle',
+    uuid: 'chart-456',
+    config: {
+        chart: { type: 'bar' },
+        legend: { enabled: true, align: 'right', verticalAlign: 'top', layout: 'vertical' },
+        xAxis: { title: { text: 'X Axis Label' }, categories: ['A', 'B', 'C'] },
+        yAxis: { title: { text: 'Y Axis Label' }, reversed: false },
+        series: [
+            { name: 'Category 1', data: [5, 15, 25] },
+            { name: 'Category 2', data: [10, 20, 30] },
+        ],
+    },
+};