Merge branch 'master' into enh/3957-legend-item-click-event

.eslintignore

@@ -15,5 +15,6 @@ test/typescript-karma
 tools/eslint-plugin-highcharts/node_modules/**
 tools/gulptasks/dashboards/api-docs/**/*.js
 tools/jsdoc/storage/**/*.js
+tools/move-doclets.mjs
 ts/**/*.js
 vendor/**/*

.eslintrc

@@ -37,6 +37,7 @@
         "jsdoc/require-jsdoc": 0,
         "jsdoc/require-param": 1,
         "jsdoc/require-returns": 0,
+        "node/shebang": 0,
         "node/no-unpublished-require": 0
     },
     "settings": {

.github/workflows/highcharts-headless.yml

@@ -19,7 +19,7 @@ on:
 jobs:
   test_unit_tests:
     name: Node unit tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.github/workflows/highcharts-webpack.yml

@@ -51,14 +51,16 @@ jobs:
         with:
           github-token: ${{secrets.PR_COMMENT_TOKEN}}
           script: |
-            const { createOrUpdateComment } = require('./.github/scripts/commentOnPR');
-            const { readFileSync } = require('node:fs')
+            if (github.head_ref !== github.base_ref) {
+              const { createOrUpdateComment } = require('./.github/scripts/commentOnPR');
+              const { readFileSync } = require('node:fs')
 
-            const failed = (readFileSync('./test/console.log') || '').includes('FAILED');
+              const failed = (readFileSync('./test/console.log') || '').includes('FAILED');
 
-            await createOrUpdateComment(github, context, 'Webpack monitoring',
-              failed ?
-                ':rotating_light: Webpack tests failed.' +
-                ' Check demos and masters with `npx gulp test --webpack`.' :
-                'LGTM :+1:'
-            );
+              await createOrUpdateComment(github, context, 'Webpack monitoring',
+                failed ?
+                  ':x: Webpack tests failed.' +
+                  ' Check demos and masters with `npx gulp test --webpack`.' :
+                  ':white_check_mark: Webpack tests succeeded.'
+              );
+            }

.github/workflows/test-tooling.yml

@@ -0,0 +1,36 @@
+name: Test tooling
+
+on:
+  pull_request:
+    branches: [ 'master' ]
+    paths:
+      - 'tools/**/*'
+      - '.github/workflows/test-tooling.yml'
+  workflow_dispatch:
+
+permissions:
+   contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Run test
+        run: node --test ./tools/gulptasks-tests/
+

.github/workflows/visual-compare.yml

@@ -76,7 +76,7 @@ jobs:
           --master ./tmp/filesizes/master.json \
           --proposed ./tmp/filesizes/${{github.event.pull_request.number}}.json \
           --pr ${{github.event.pull_request.number}} \
-          --user circleci-mu
+          --user highsoft-bot
         env:
           GITHUB_TOKEN: ${{secrets.PR_COMMENT_TOKEN}}
 
@@ -142,7 +142,7 @@ jobs:
         run: |
           npx gulp update-pr-testresults \
           --fail-silently \
-          --user circleci-mu \
+          --user highsoft-bot \
           --pr ${{github.event.pull_request.number}}
         if: ${{ always() }}
         env:

changelog/changelog.html

@@ -13705,6 +13705,35 @@ <h3 class="release-header">
             <h2 id="highcharts-dashboards">Highcharts Dashboards</h2>
           </div>
           <div class="changelog-container">
+            <h3 class="release-header">
+              <a id="highcharts-dashboards-v2.1.0"></a>
+              <span>Highcharts Dashboards v2.1.0 (2024-04-17)</span>
+              <a class="release-header-hashtag" href="#highcharts-dashboards-v2.1.0">#</a>
+              <span class="download-link" ><a href="https://code.highcharts.com/dashboards/zips/Highcharts-Dashboards-2.1.0.zip" title="Download the zip archive for Highcharts Dashboards v2.1.0"><i class="fas fa-download"></i></a></span>
+            </h3>
+            <ul>
+              <li>It&#39;s now possible to connect <a href="https://www.highcharts.com/docs/dashboards/highcharts-component#multiple-connectors">more than one data source</a> to a Highcharts Component, as the <code>connector</code> option now can accept an array of connectors.</li>
+              <li>Added <code>affectedSeriesId</code> option to the Highcharts Component&#39;s highlight sync.</li>
+            </ul>
+            <div class="accordion card-group">
+              <div class="card">
+
+                <div id="hd-heading-2-1-0-bug-fixes" class="card-header">
+                  <h4 class="card-title" aria-label="Bug Fixes Highcharts-dashboards v2.1.0">
+                    <button aria-label="Bug Fixes Highcharts-dashboards v2.1.0" aria-expanded="false" class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bug-fixes-hd-2-1-0"><span> Bug fixes </span></button>
+                  </h4>
+                </div>
+                <div id="bug-fixes-hd-2-1-0" class="collapse" aria-labelledby="hd-heading-2-1-0-bug-fixes" data-parent=".accordion">
+                  <div class="card-body">
+                    <ul>
+                      <li>Added an error handling for rendering components in the same cell.</li>
+                      <li>Fixed <a href="https://github.com/highcharts/highcharts/issues/20661">#20661</a>, dashboards were broken when used non-unique ids of cells.</li>
+                    </ul>
+
+                  </div>
+                </div>
+              </div>
+            </div>
             <h3 class="release-header">
               <a id="highcharts-dashboards-v2.0.0"></a>
               <span>Highcharts Dashboards v2.0.0 (2024-03-13)</span>

changelog/highcharts-dashboards/2.1.0.md

@@ -0,0 +1,9 @@
+# Changelog for Highcharts Dashboards v2.1.0 (2024-04-17)
+
+- It's now possible to connect [more than one data source](https://www.highcharts.com/docs/dashboards/highcharts-component#multiple-connectors) to a Highcharts Component, as the `connector` option now can accept an array of connectors.
+- Added `affectedSeriesId` option to the Highcharts Component's highlight sync.
+
+## Bug fixes
+
+- Added an error handling for rendering components in the same cell.
+- Fixed [#20661](https://github.com/highcharts/highcharts/issues/20661), dashboards were broken when used non-unique ids of cells.

docs/chart-and-series-types/angular-gauges.md

@@ -9,9 +9,9 @@ One thing that is important to notice is that gauges have no x-axis. The x-axis
 
 To create an Angular gauge set chart.type to "gauge":
 
-    
+
     chart: {
-        type: 'gauge'            
+        type: 'gauge'
     }
 
 Normally there is only one point in a gauge series, but it also handles multiple point, like in our clock example with three dials. You can add as many background elements as you like to the gauge, allowing you to style it all the way from the minimal default design to heavy, 3D like works of art with shadows and reflections created with linear and radial gradients.
@@ -24,6 +24,7 @@ Since Highcharts 4, we also provide a second type of gauges, the `solidgauge`. I
 Gauge examples
 --------------
 
+*   [Simple gauge with rounded plot bands](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/plotbands-gauge-borderradius)
 *   [Speedometer with dual axes](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-dual)
 *   [The Highcharts Clock](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-clock)
 *   [VU meter](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-vu-meter)

docs/dashboards/custom-component.md

@@ -293,10 +293,6 @@ class ThresholdComponent extends Component {
     constructor(cell, options) {
         super(cell, options);
         this.type = 'Threshold';
-        this.sync = new Component.Sync(
-            this,
-            this.syncHandlers
-        );
         return this;
     }
 
@@ -386,3 +382,69 @@ Dashboards.board('container', {
     }]
 });
 ```
+
+
+## Custom Component with data from the DataConnector
+
+The example below shows how to develop a custom component that fetches data from the DataConnector, processes and displays it on the dashboard.
+
+The custom component is created by extending the `HTMLComponent` class and it displays the total revenue.
+
+<iframe style="width: 100%; height: 700px; border: none;" src='https://www.highcharts.com/samples/embed/dashboards/components/custom-component-data-connector' allow="fullscreen"></iframe>
+
+The DataConnector is registered on the `load` that is why we need to execute and await the `super.load()` method first to make sure that the DataConnector is registered. An important part is that the `load` method is `async` because we need to wait for the data to be fetched and processed.
+
+When the data is ready, the `getTotalRevenue` method is used to calculate the total revenue. The `getElementsFromString` method is used to parse the HTML string into the AST-like object. The `render` method is used to render the component on the dashboard.
+
+```js
+const { ComponentRegistry } = Dashboards,
+    HTMLComponent = ComponentRegistry.types.HTML;
+
+class TotalRevenueHTML extends HTMLComponent {
+    constructor(cell, options) {
+        super(cell, options);
+
+        this.type = 'TotalRevenueHTML';
+
+        return this;
+    }
+
+    async load() {
+        await super.load();
+        const revenue = this.getTotalRevenue();
+
+        this.elements = this.getElementsFromString(
+            `
+            <div class="revenue">
+                <p class="title">Total revenue</p>
+                <p class="value">${revenue} €</p>
+            </div>
+            `
+        );
+        this.render();
+    }
+
+    getTotalRevenue() {
+        const connector = this.getFirstConnector();
+        const table = connector.table.modified;
+
+        return table.columns.Revenue.reduce((acc, cur) => acc + cur);
+    }
+}
+
+ComponentRegistry.registerComponent('TotalRevenueHTML', TotalRevenueHTML);
+```
+
+Later on the component can be used in the dashboard by referencing the name it was registered with, in this case, `TotalRevenueHTML`.
+
+```js
+...
+components: [{
+    type: 'TotalRevenueHTML',
+    renderTo: 'cell-id-0',
+    connector: {
+        id: 'data'
+    }
+},
+...
+```

docs/dashboards/highcharts-component.md

@@ -177,6 +177,27 @@ columnAssignment: [{
 ```
 <iframe style="width: 100%; height: 600px; border: none;" src=https://www.highcharts.com/samples/embed/dashboards/components/highcharts-column-assignment-keys-data allow="fullscreen"></iframe>
 
+### Multiple connectors
+
+The Highcharts Component also supports more than one data source. That means the connector option should then be configured as an array of objects rather than a single object.
+
+Code sample:
+```js
+components: [{
+    type: 'Highcharts',
+    connector: [{
+        id: 'connector-1',
+        columnAssignment: [ ... ]
+    }, {
+        id: 'connector-2',
+        columnAssignment: [ ... ]
+    }]
+}]
+```
+
+Example:
+<iframe style="width: 100%; height: 470px; border: none;" src="https://www.highcharts.com/samples/embed/dashboards/highcharts-components/multiple-connectors" allow="fullscreen"></iframe>
+
 
 ## Components synchronization
 
@@ -192,6 +213,33 @@ See demos of `sync` types below:
 * [Visibility Sync](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/sync-visibility/)
 
 
+### Highlight sync options
+
+Highlight sync can have additional options:
+```js
+sync: {
+    highlight: {
+        enabled: true,
+        affectedSeriesId: 'series-1',
+        highlightPoint: true,
+        showTooltip: false,
+        showCrosshair: true
+    }
+}
+```
+
+If you want to force highlight sync to always affect one specific series, use the [`affectedSeriesId`](https://api.highcharts.com/dashboards/#interfaces/Dashboards_Components_HighchartsComponent_HighchartsComponentOptions.HighchartsHighlightSyncOptions#affectedSeriesId) option in the argument specifying the ID of that series. When undefined, empty or set to null, option assignment works by default based on the hovered column and column assignment.
+
+Demo:
+<iframe style="width: 100%; height: 470px; border: none;" src=https://www.highcharts.com/samples/embed/dashboards/sync/highcharts-highlight-affected-series allow="fullscreen"></iframe>
+
+If you want to determine how the highlight of points on the chart should work (i.e. whether the hover state should be set for a marker, whether the crosshair should be synced and whether the tooltip should be shown), use the `highlightPoint`, `showCrosshair` and `showTooltip` options. Read more in the [API docs](https://api.highcharts.com/dashboards/#interfaces/Dashboards_Components_HighchartsComponent_HighchartsComponentOptions.HighchartsHighlightSyncOptions#affectedSeriesId).
+
+Demo:
+<iframe style="width: 100%; height: 470px; border: none;" src=https://www.highcharts.com/samples/embed/dashboards/sync/sync-highlight-options allow="fullscreen"></iframe>
+
+
+
 ## API options
 For the full set of available options, see the [API](https://api.highcharts.com/dashboards/#interfaces/Dashboards_Components_HighchartsComponent_HighchartsComponentOptions.ConnectorOptions).
 

docs/dashboards/navigator-component.md

@@ -28,7 +28,7 @@ Dashboard.board('container', {
       connector: {
         id: 'Range Selection'
       },
-      columnAssignments: {
+      columnAssignment: {
         'TXC': 'y'
       },
       sync: {
@@ -80,7 +80,7 @@ Dashboard.board('container', {
       connector: {
         id: 'Economy'
       },
-      columnAssignments: {
+      columnAssignment: {
         'Agriculture': 'y'
       },
       sync: {
@@ -93,7 +93,7 @@ Dashboard.board('container', {
       connector: {
         id: 'Economy'
       },
-      columnAssignments: {
+      columnAssignment: {
         'Industry': 'y'
       },
       sync: {