Release v1.4.5

.github/workflows/CD.yml

@@ -21,11 +21,13 @@ env:
 
 jobs:
   build:
-    permissions: read-all
+    permissions:
+        id-token: write
+        contents: read
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [21.x]
+        node-version: [24.x]
 
     runs-on: ${{ matrix.os }}
 
@@ -51,6 +53,4 @@ jobs:
       if: env.ENV == 'd' || env.ENV == 't'
 
     - name: Publish
-      run: npm publish --tag ${{ env.ENV }} --git-tag-version false
-      env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      run: npm publish --tag ${{ env.ENV }} --git-tag-version false

.github/workflows/CI.yml

@@ -21,7 +21,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [21.x]
+        node-version: [24.x]
 
     runs-on: ${{ matrix.os }}
 

.github/workflows/dependabot_version_increment.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '21.x'
+          node-version: '24.x'
 
       - name: Get version number from PR branch
         run: |

.storybook/main.ts

@@ -14,9 +14,8 @@ const config: StorybookConfig = {
   },
 
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-a11y",
     "@storybook/addon-webpack5-compiler-swc"
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsfinland/pxvisualizer",
-  "version": "1.4.2",
+  "version": "1.4.5",
   "description": "Component library for visualizing PxGraf data",
   "main": "./dist/pxv.cjs",
   "jestSonar": {
@@ -47,16 +47,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.28.4",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-links": "^10.2.17",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react": "^10.2.17",
+    "@storybook/react-webpack5": "^10.2.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/file-saver": "^2.0.7",
@@ -66,7 +62,7 @@
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^10.0.0",
     "babel-loader": "^10.0.0",
-    "clean-publish": "^5.1.0",
+    "clean-publish": "^6.0.3",
     "decimal.js": "^10.5.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
@@ -78,7 +74,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "semver": "^7.7.0",
-    "storybook": "^8.6.14",
+    "storybook": "^10.2.17",
     "styled-components": "^6.1.17",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
@@ -99,5 +95,8 @@
     "px-file",
     "px",
     "visualization"
-  ]
+  ],
+  "overrides": {
+    "serialize-javascript": "^7.0.4"
+  }
 }

src/core/chartOptions/Utility/timeIntervals.ts

@@ -55,7 +55,7 @@ export function getXAxisOptions(view: View, locale: string): XAxisOptions {
     }
     else {
         const labels: string[] = view.columnNameGroups.map(cng => cng.map(n => n[locale]).join(', '));
-        const numeric: boolean = labels.every(l => !isNaN(parseFloat(l)));
+        const numeric: boolean = labels.every(l => !Number.isNaN(Number.parseFloat(l)));
         if (view.seriesType === ESeriesType.Ordinal && numeric) {
             return getOrdinalOptions(view, locale);
         }

src/core/conversion/index.ts

@@ -1,4 +1,5 @@
 export { convertPxGraphDataToChartOptions } from './pxGrafDataConverter';
 export { extractSelectableVariableValues } from './helpers';
 export { convertPxGrafResponseToView } from './viewUtils';
-export { TTranslationPackage, AddTranslations } from './translations';
+export type { TTranslationPackage } from './translations';
+export { AddTranslations } from './translations';

src/core/conversion/seriesBuilder.ts

@@ -48,7 +48,7 @@ export class SeriesBuilder {
             const targetVariableCode: string = this.selectedViewMeta[targetIndex].code;
             const values: IVariableValueMeta[] = completeMap.find(v => v.code === targetVariableCode)?.values as IVariableValueMeta[];
             const targetVariable: IVariableMeta = this.selectedViewMeta.find(v => v.code === targetVariableCode) as IVariableMeta;
-            this.coordinates[variableIndex] = targetVariable.values.map(tv => values.findIndex(v => v === tv));
+            this.coordinates[variableIndex] = targetVariable.values.map(tv => values.indexOf(tv));
         }
     }
 

src/core/conversion/translations/index.ts

@@ -1,7 +1,7 @@
 import { TranslationManager } from './translationManager';
 import { TTranslations, TArrayTranslations, TTranslationPackage } from './translationTypes';
 
-export { TTranslationPackage } from './translationTypes';
+export type { TTranslationPackage } from './translationTypes';
 
 const Manager = new TranslationManager();
 

src/core/conversion/viewUtils.ts

@@ -121,11 +121,11 @@ export function getLastUpdated(
         dates = contentVar.values
             .filter(v => selectedValueCodes[contentVar.code].includes(v.code))
             .map(cvv => cvv.contentComponent?.lastUpdated)
-            .filter(onlyUnique);
+            .filter((value, index, array) => onlyUnique(value, index, array));
     } else {
         dates = contentVar.values
             .map(cvv => cvv.contentComponent?.lastUpdated)
-            .filter(onlyUnique);
+            .filter((value, index, array) => onlyUnique(value, index, array));
     }
 
     // Filter out undefined values and get the most recent date
@@ -206,9 +206,9 @@ function getContentProperty(
         return contentVar.values
             .filter(v => selectedValueCodes[contentVar.code].includes(v.code))
             .map(cvv => extractorFunc(cvv.contentComponent))
-            .filter(onlyUnique);
+            .filter((value, index, array) => onlyUnique(value, index, array));
     } else {
-        return contentVar.values.map(cvv => extractorFunc(cvv.contentComponent)).filter(onlyUnique);
+        return contentVar.values.map(cvv => extractorFunc(cvv.contentComponent)).filter((value, index, array) => onlyUnique(value, index, array));
     }
 }
 

src/core/highcharts/drawChart.test.tsx

@@ -38,4 +38,19 @@ describe('drawChart tests', () => {
         expect(Highcharts.chart).toHaveBeenCalledWith('chart-container', expect.any(Object));
         expect(result).toEqual({ mockedChart: true });
     });
+
+    it('calls Highcharts.chart with correct parameters when called without optional parameters', () => {
+        // Act
+        const result = drawChart(
+            'chart-container',
+            GROUP_VERTICAL_BAR_CHART_CHART_FIXTURE,
+            'fi'
+        );
+
+        // Assert
+        expect(Highcharts.setOptions).toHaveBeenCalledTimes(1);
+        expect(Highcharts.chart).toHaveBeenCalledTimes(1);
+        expect(Highcharts.chart).toHaveBeenCalledWith('chart-container', expect.any(Object));
+        expect(result).toEqual({ mockedChart: true });
+    });
 });

src/core/highcharts/drawChart.ts

@@ -10,7 +10,7 @@ import { IChartOptions } from "../types/chartOptions";
 
 // Only load Highcharts modules in a browser environment
 const loadHighchartsModules = () => {
-    if (typeof window !== 'undefined') {
+    if (globalThis.window !== undefined) {
         try {
             require('highcharts/modules/pattern-fill.js');
             require('highcharts/modules/accessibility.js');
@@ -27,7 +27,7 @@ export const drawChart = (
     pxGraphData: IQueryVisualizationResponse,
     locale: string,
     selectedVariableCodes: TVariableSelections | null = null,
-    options: IChartOptions) =>
+    options: IChartOptions | undefined = undefined) =>
 {
     loadHighchartsModules();
     const validLocale = formatLocale(locale);

src/core/tables/xlsx/xlsxDataBuilder.ts

@@ -19,21 +19,21 @@ export const buildCellRows: (view: View, locale: string) => TCell[][] = (view, l
     const rowHeaderCols = view.series[0]?.rowNameGroup.length ?? 0;
     const gridWidth = (view.series[0]?.series.length ?? 0) + rowHeaderCols;
 
-    // Add header
-    const stringTable: TCell[][] = [buildCellRow([view.header[locale]], 0, gridWidth)];
+    // Build header
+    const headerRow = buildCellRow([view.header[locale]], 0, gridWidth);
 
-    // Add subheader
-    if (view.subheaderValues.length > 0) {
-        stringTable.push(buildCellRow([view.subheaderValues.map(value => value[locale]).join(' | ')], 0, gridWidth));
-    }
+    // Build subheader
+    const subheaderRows = view.subheaderValues.length > 0
+        ? [buildCellRow([view.subheaderValues.map(value => value[locale]).join(' | ')], 0, gridWidth)]
+        : [];
 
-    // Add column variables
-    for (let index = 0; index < colHeaderRows; index++) {
-        stringTable.push(buildCellRow(view.columnNameGroups.map(group => group[index][locale]), rowHeaderCols, gridWidth));
-    }
+    // Build column header rows
+    const columnHeaderRows = Array.from({ length: colHeaderRows }, (_, index) =>
+        buildCellRow(view.columnNameGroups.map(group => group[index][locale]), rowHeaderCols, gridWidth)
+    );
 
-    // Add row variables + data
-    view.series.forEach((serie) => {
+    // Build data rows
+    const dataRows = view.series.map((serie) => {
         let row: (string | number)[] = []
         if (serie.rowNameGroup.length > 0) row = serie.rowNameGroup.map(name => name[locale]);
 
@@ -43,20 +43,26 @@ export const buildCellRows: (view: View, locale: string) => TCell[][] = (view, l
             else return Number(n.value.toFixed(n.precision));
         }));
 
-        stringTable.push(buildCellRow(row, 0, gridWidth));
+        return buildCellRow(row, 0, gridWidth);
     });
 
-    // Add unit information
-    stringTable.push(buildCellRow([`${Translations.unit[locale]}: ${getFormattedUnits(view.units, locale)}`], 0, gridWidth));
-
-    // Add source
-    stringTable.push(buildCellRow([`${Translations.source[locale]}: ${view.sources.map(source => source[locale]).join(', ')}`], 0, gridWidth));
+    // Build footer rows
+    const unitRow = buildCellRow([`${Translations.unit[locale]}: ${getFormattedUnits(view.units, locale)}`], 0, gridWidth);
+    const sourceRow = buildCellRow([`${Translations.source[locale]}: ${view.sources.map(source => source[locale]).join(', ')}`], 0, gridWidth);
 
-    return stringTable;
+    // Combine all rows
+    return [
+        headerRow,
+        ...subheaderRows,
+        ...columnHeaderRows,
+        ...dataRows,
+        unitRow,
+        sourceRow
+    ];
 }
 
 function buildCellRow(data: (number | string)[], startIndex: number, rowLen: number): TCell[] {
-    const cellRow: TCell[] = Array(rowLen);
+    const cellRow: TCell[] = new Array(rowLen);
     for (let i = 0; i < rowLen; i++) {
         if (i >= startIndex && i < startIndex + data.length) cellRow[i] = data[i - startIndex];
         else cellRow[i] = null;

src/core/tables/xlsx/xlsxUtils.ts

@@ -6,5 +6,5 @@ export function escapeXmlFunctionChars(input: string): string {
         '"': '"',
         "'": '''
     };
-    return input.replace(/[&<>"']/g, char => xmlCharMap[char]);
+    return input.replaceAll(/[&<>"']/g, char => xmlCharMap[char]);
 }

src/core/tables/xlsx/xlsxWorksheetBuilder.ts

@@ -47,7 +47,7 @@ function getColumnLetter(colIndex: number) : string {
 
     // If we run out of letters, we combine new letters after the prevous "prefix" ie. AA, AB, AC etc.
     const prefix = Math.floor(colIndex / 26);
-    const letter = String.fromCharCode(97 + (colIndex % 26)).toUpperCase();
+    const letter = String.fromCodePoint(97 + (colIndex % 26)).toUpperCase();
 
     if (prefix === 0) return letter;
     else return getColumnLetter(prefix - 1) + letter;

src/core/types/index.ts

@@ -1,10 +1,12 @@
-export { 
+export type { 
     IQueryVisualizationResponse,
-    EVisualizationType,
     TVisualizationType,
-    ETimeVariableInterval,
     TTimeVariableInterval,
-    EVariableType,
     TVariableType
 } from './queryVisualizationResponse';
-export { IChartOptions } from './chartOptions';
+export {
+    EVisualizationType,
+    ETimeVariableInterval,
+    EVariableType
+} from './queryVisualizationResponse';
+export type { IChartOptions } from './chartOptions';

src/react/components/burgerMenu/menuItem/__snapshots__/menuItem.test.tsx.snap

@@ -229,12 +229,13 @@ exports[`MenuItem, rendering tests should render with correct external icon 1`]
     class="c0"
   >
     <a
+      aria-label="NAPPI"
       class="c1"
       href="foobar"
       id="foo-menuitem--1"
       role="menuitem"
       tabindex="-1"
-      title="[object Object]"
+      title="NAPPI"
     >
       <div
         class="c2"

src/react/components/burgerMenu/menuItem/menuItem.tsx

@@ -32,7 +32,7 @@ const Button = styled(forwardRef<HTMLButtonElement, React.ComponentPropsWithoutR
     }
 `;
 
-const StyledLink = styled(forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>((props, ref) => (<a ref={ref} {...props} title={props.children ? props.children.toString() : ''} />)))`
+const StyledLink = styled.a`
     text-decoration: none;
     display: flex;
     align-items: center;
@@ -154,7 +154,7 @@ export const MenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IMenuI
     if (url) {
         return (
             <ListItem $isFirst={isFirst} $isLast={isLast} $separator={bottomSeparator}>
-                <StyledLink role="menuitem" id={`${idPrefix}-menuitem-${index}`} ref={ref as React.Ref<HTMLAnchorElement>} href={url} target={openNewTab ? '_blank' : undefined} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={tabIndex}>
+                <StyledLink role="menuitem" id={`${idPrefix}-menuitem-${index}`} ref={ref as React.Ref<HTMLAnchorElement>} href={url} target={openNewTab ? '_blank' : undefined} rel={openNewTab ? 'noopener noreferrer' : undefined} title={text} aria-label={text} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={tabIndex}>
                     {content}
                 </StyledLink>
             </ListItem>

src/react/components/chart/__snapshots__/ErrorInfo.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Rendering test renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bRKDuR hOGaEz"
+    class="sc-aXZVf fyUppu"
   >
     <h1>
       Kuviota ei voitu muodostaa