Fix drawchart accessibility module imports

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsfinland/pxvisualizer",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Component library for visualizing PxGraf data",
   "main": "./dist/pxv.cjs",
   "jestSonar": {

src/core/highcharts/drawChart.test.tsx

@@ -0,0 +1,41 @@
+import * as Highcharts from "highcharts";
+import { drawChart } from "./drawChart";
+import { GROUP_VERTICAL_BAR_CHART_CHART_FIXTURE } from "../../react/components/chart/testFixtures/pxGrafResponses";
+
+jest.mock("highcharts", () => ({
+    chart: jest.fn().mockReturnValue({ mockedChart: true }),
+    setOptions: jest.fn()
+}));
+
+jest.mock('highcharts/modules/accessibility.js', () => jest.fn(), { virtual: true });
+jest.mock('highcharts/modules/exporting.js', () => jest.fn(), { virtual: true });
+jest.mock('highcharts/modules/offline-exporting.js', () => jest.fn(), { virtual: true });
+jest.mock('highcharts/modules/pattern-fill.js', () => jest.fn(), { virtual: true });
+
+describe('drawChart tests', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        document.body.innerHTML = '<div id="chart-container"></div>';
+    });
+
+    it('calls Highcharts.chart with correct parameters', () => {
+        // Arrange
+        const customOptions = { accessibilityMode: true };
+        const selectedVariableCodes = { 'variableCode1': ['value1', 'value2'] };
+
+        // Act
+        const result = drawChart(
+            'chart-container',
+            GROUP_VERTICAL_BAR_CHART_CHART_FIXTURE,
+            'fi',
+            selectedVariableCodes,
+            customOptions
+        );
+
+        // 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

@@ -1,31 +1,36 @@
 import * as Highcharts from "highcharts";
-import 'highcharts/modules/pattern-fill.js';
 import { convertPxGraphDataToChartOptions } from "../conversion";
 import { IQueryVisualizationResponse } from "../types";
 import { defaultTheme } from "./themes";
-import highchartsAccessibility from "highcharts/modules/accessibility.js";
-import highchartsExporting from 'highcharts/modules/exporting.js';
-import highchartsOfflineExporting from 'highcharts/modules/offline-exporting.js';
 import { TVariableSelections } from "../types/variableSelections";
 import { extractSelectableVariableValues } from "../conversion/helpers";
 import { convertPxGrafResponseToView } from "../conversion/viewUtils";
 import { formatLocale } from "../chartOptions/Utility/formatters";
 import { IChartOptions } from "../types/chartOptions";
 
+// Only load Highcharts modules in a browser environment
+const loadHighchartsModules = () => {
+    if (typeof window !== 'undefined') {
+        try {
+            require('highcharts/modules/pattern-fill.js');
+            require('highcharts/modules/accessibility.js');
+            require('highcharts/modules/exporting.js');
+            require('highcharts/modules/offline-exporting.js');
+        } catch (e) {
+            console.error('Error loading Highcharts modules:', e);
+        }
+    }
+};
+
 export const drawChart = (
     container: string,
     pxGraphData: IQueryVisualizationResponse,
     locale: string,
     selectedVariableCodes: TVariableSelections | null = null,
     options: IChartOptions) =>
 {
+    loadHighchartsModules();
     const validLocale = formatLocale(locale);
-
-    if (typeof Highcharts === 'object') {
-        highchartsAccessibility(Highcharts);
-        highchartsExporting(Highcharts);
-        highchartsOfflineExporting(Highcharts);
-    }
     Highcharts.setOptions(defaultTheme(validLocale));
     const variableSelections = extractSelectableVariableValues(pxGraphData.selectableVariableCodes, pxGraphData.metaData, pxGraphData.visualizationSettings.defaultSelectableVariableCodes, selectedVariableCodes);
     const view = convertPxGrafResponseToView(pxGraphData, variableSelections);

src/stories/chartstories/scatterplot-drawChart.stories.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import { Meta } from '@storybook/react';
+import { drawChart } from '../../core/highcharts/drawChart';
+import { 
+  SCATTER_PLOT,
+  SCATTER_PLOT_WITH_SELECTABLES 
+} from '../fixtures/scatterPlot';
+import { IChartOptions } from '../../core/types/chartOptions';
+
+export default {
+  title: 'Charts/drawChart Scatter plot',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+/**
+ * Component that uses drawChart directly
+ */
+interface DirectChartProps {
+  pxGraphData: any;
+  locale: string;
+  selectedVariableCodes?: any;
+}
+
+const DirectChart: React.FC<DirectChartProps> = ({ 
+  pxGraphData, 
+  locale = 'en', 
+  selectedVariableCodes = null 
+}) => {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<any>(null);
+  const containerId = `chart-${Math.random().toString(36).substring(2, 9)}`;
+
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
+    }
+
+    if (chartRef.current) {
+      chartRef.current.id = containerId;
+
+      const options: IChartOptions = { accessibilityMode: false };
+      chartInstance.current = drawChart(
+        containerId,
+        pxGraphData,
+        locale,
+        selectedVariableCodes,
+        options
+      );
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, [pxGraphData, locale, selectedVariableCodes]);
+
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
+    </div>
+  );
+};
+
+export const SimpleScatterPlotDirect = () => (
+  <DirectChart 
+    pxGraphData={SCATTER_PLOT.pxGraphData} 
+    locale="en"
+  />
+);
+SimpleScatterPlotDirect.storyName = 'Simple Scatter Plot (drawChart)';
+
+export const SelectableScatterPlotDirect = () => (
+  <DirectChart 
+    pxGraphData={SCATTER_PLOT_WITH_SELECTABLES.pxGraphData} 
+    locale="en"
+    selectedVariableCodes={SCATTER_PLOT_WITH_SELECTABLES.selectedVariableCodes}
+  />
+);
+SelectableScatterPlotDirect.storyName = 'Selectable Scatter Plot (drawChart)';