Highcharts update and legend accessibility improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsfinland/pxvisualizer",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Component library for visualizing PxGraf data",
   "main": "./dist/pxv.cjs",
   "jestSonar": {
@@ -68,7 +68,7 @@
     "babel-loader": "^8.4.1",
     "clean-publish": "^4.4.0",
     "decimal.js": "^10.5.0",
-    "highcharts": "^10.3.3",
+    "highcharts": "^12.1.2",
     "highcharts-react-official": "^3.2.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -88,9 +88,9 @@
     "uuid": "^11.0.5"
   },
   "dependencies": {
+    "highcharts": "^12.1.2",
     "decimal.js": "^10.5.0",
     "fflate": "^0.8.2",
-    "highcharts": "^10.3.3",
     "highcharts-react-official": "^3.2.1"
   },
   "peerDependencies": {

src/core/chartOptions/Utility/formatters.test.ts

@@ -1,4 +1,4 @@
-import { Point, Tooltip, TooltipFormatterContextObject } from "highcharts";
+import { DataLabelsOptions, Point, Tooltip } from "highcharts";
 import { formatLocale, getDataFormattedForChartType, getDataLabelFormatterFunction, getLineChartToolTipFormatterFunction, getToolTipFormatterFunction, parseScreenReaderFriendlyTimePeriods, shortenStringValue } from "./formatters";
 import { combinationValuesLinechartViewFixture, simpleQuarterLinechartViewFixture } from "./testFixtures/linechartViews";
 import { simpleHorizontalBarchartViewFixture } from "./testFixtures/horizontalbarchartViews";
@@ -127,40 +127,32 @@ describe('getToolTipFormatterFunction tests', () => {
 
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
         const mockContextObject = {
-            series: {
-                name: 'testSeriesName'
-            },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": true
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": true
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getToolTipFormatterFunction(simpleQuarterLinechartViewFixture, 'fi');
         const expectedtooltipString = "Vuosineljännes: testPointName<br/><br/>Ennakko";
         expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
     });
 
     it('The returned formatter function should return tooltip test without preliminary indicator', () => {
-
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
         const mockContextObject = {
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": false
+                }
+            },
             series: {
                 name: 'testSeriesName'
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": false
-                    }
-                }
-            }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getToolTipFormatterFunction(simpleQuarterLinechartViewFixture, 'fi');
         const expectedtooltipString = "Vuosineljännes: testPointName<br/>";
@@ -174,158 +166,135 @@ describe('getToolTipFormatterFunction tests', () => {
             series: {
                 name: 'testSeriesName'
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": false
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": false
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getToolTipFormatterFunction(simpleHorizontalBarchartViewFixture, 'fi');
         const expectedtooltipString = "Alue: testPointName<br/>";
         expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
     });
 
     it('The returned formatter function for horizontal barchart view should return tooltip test without preliminary indicator', () => {
-
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
-        const mockContextObject = {
+        const mockPoint = {
             series: {
                 name: 'testSeriesName'
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": false
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": false
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getToolTipFormatterFunction(simpleGroupHorizontalBarchartViewFixture, 'fi');
         const expectedtooltipString = "Vuosineljännes: testSeriesName<br/>Rahoitusmuoto: testPointName<br/>";
-        expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
+        expect(formatter.apply(mockPoint, [mockTooltip])).toEqual(expectedtooltipString);
     });
 
     it('Returns correctly formatted data label based on fi locale and precision', () => {
+        const mockDataLabelObject = {} as unknown as DataLabelsOptions;
         const mockPoint = {
+            key: 'y',
+            series: {
+                userOptions: {
+                    data: [mockDataLabelObject]
+                }
+            },
             y: 1234.567,
             options: {
                 custom: {
                     "precision": 2
                 }
             }
         } as unknown as Point;
-        const mockDataLabelObject = {
-            point: mockPoint,
-            key: 'y',
-            series: {
-                userOptions: {
-                    data: [mockPoint]
-                }
-            }
-        } as unknown as TooltipFormatterContextObject;
         const formatter = getDataLabelFormatterFunction('fi');
-        const result = formatter.apply(mockDataLabelObject, [mockPoint]);
+        const result = formatter.apply(mockPoint, [mockDataLabelObject]);
         // Intl.NumberFormat uses a non-breaking space "\xa0" as a thousand separator
         expect(result).toBe('1\xa0234,57');
     });
 
     it('Returns correctly formatted data label based on en locale and precision', () => {
+        const mockDataLabelObject = {} as unknown as DataLabelsOptions;
         const mockPoint = {
             y: 1234.567,
             options: {
                 custom: {
                     "precision": 2
                 }
-            }
+            },
+            key: 'y'
         } as unknown as Point;
-        const mockDataLabelObject = {
-            point: mockPoint,
-            key: 'y',
-            series: {
-                userOptions: {
-                    data: [mockPoint]
-                }
-            }
-        } as unknown as TooltipFormatterContextObject;
         const formatter = getDataLabelFormatterFunction('en');
-        const result = formatter.apply(mockDataLabelObject, [mockPoint]);
+        const result = formatter.apply(mockPoint, [mockDataLabelObject]);
         expect(result).toBe('1,234.57');
     });
 });
 
 describe('getLineChartToolTipFormatterFunction tests', () => {
 
     it('The returned formatter function should return tooltip test with preliminary indicator', () => {
-
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
-        const mockContextObject = {
+        const mockPoint = {
             series: {
                 name: 'testSeriesName'
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": true
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": true
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getLineChartToolTipFormatterFunction(simpleQuarterLinechartViewFixture, 'fi');
         const expectedtooltipString = "Vuosineljännes: testPointName<br/><br/>Ennakko";
-        expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
+        expect(formatter.apply(mockPoint, [mockTooltip])).toEqual(expectedtooltipString);
     });
 
     it('The returned formatter function should return tooltip test without preliminary indicator', () => {
-
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
-        const mockContextObject = {
+        const mockPoint = {
             series: {
                 name: 'testSeriesName'
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": false
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": false
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getLineChartToolTipFormatterFunction(simpleQuarterLinechartViewFixture, 'fi');
         const expectedtooltipString = "Vuosineljännes: testPointName<br/>";
-        expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
+        expect(formatter.apply(mockPoint, [mockTooltip])).toEqual(expectedtooltipString);
     });
 
     it('The returned formatter function should return tooltip where each variable value pair is on its own line', () => {
-
         const mockTooltip: Tooltip = {} as unknown as Tooltip;
-        const mockContextObject = {
+        const mockPoint = {
             series: {
                 name: 'testSeriesName',
                 index: 1
             },
-            point: {
-                name: 'testPointName',
-                options: {
-                    custom: {
-                        "preliminary": false
-                    }
+            name: 'testPointName',
+            options: {
+                custom: {
+                    "preliminary": false
                 }
             }
-        } as unknown as TooltipFormatterContextObject;
+        } as unknown as Point;
 
         const formatter = getLineChartToolTipFormatterFunction(combinationValuesLinechartViewFixture, 'fi');
         const expectedtooltipString = "Alue: Helsinki<br/>Huoneluku: Kaksiot<br/>Vuosineljännes: testPointName<br/>";
-        expect(formatter.apply(mockContextObject, [mockTooltip])).toEqual(expectedtooltipString);
+        expect(formatter.apply(mockPoint, [mockTooltip])).toEqual(expectedtooltipString);
     });
 });