Feature/chart autopivot

packages/pxweb2/public/config/config.js

@@ -38,4 +38,7 @@ globalThis.PxWeb2Config = {
     sv: '', // Set to your Swedish homepage URL
     en: '', // Set to your English homepage URL
   },
+  features: {
+    chartEnabled: true,
+  },  
 };

packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.spec.tsx

@@ -1,49 +1,114 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { MemoryRouter } from 'react-router';
+import userEvent from '@testing-library/user-event';
 
 import { DrawerView } from './DrawerView';
+import { renderWithProviders } from '../../../util/testing-utils';
 
-const mockGetConfig = vi.fn();
+const {
+  defaultMockConfig,
+  mockGetConfig,
+  mockPivotToTable,
+  mockPivotToChart,
+  mockIsMobile,
+} = vi.hoisted(() => {
+  const defaultMockConfig = {
+    baseApplicationPath: '/',
+    features: {
+      chartEnabled: true,
+    },
+    language: {
+      defaultLanguage: 'en',
+      fallbackLanguage: 'en',
+      supportedLanguages: [{ shorthand: 'en' }],
+      positionInPath: 'after',
+    },
+  };
+
+  return {
+    defaultMockConfig,
+    mockGetConfig: vi.fn(() => defaultMockConfig),
+    mockPivotToTable: vi.fn(),
+    mockPivotToChart: vi.fn(),
+    mockIsMobile: vi.fn(() => false),
+  };
+});
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
   }),
+  initReactI18next: {
+    type: '3rdParty',
+    init: () => undefined,
+  },
 }));
 
 vi.mock('../../../util/config/getConfig', () => ({
-  getConfig: () => mockGetConfig(),
+  getConfig: mockGetConfig,
+}));
+
+vi.mock('../../../context/useTableData', () => ({
+  default: () => ({
+    pivotToTable: mockPivotToTable,
+    pivotToChart: mockPivotToChart,
+  }),
+}));
+
+vi.mock('../../../context/useApp', () => ({
+  default: () => ({
+    isMobile: mockIsMobile(),
+  }),
 }));
 
 interface MockActionItemProps {
   label?: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+  toggleState?: boolean;
 }
 
-vi.mock('@pxweb2/pxweb2-ui', () => ({
-  ContentBox: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="content-box">{children}</div>
-  ),
-  ActionItem: ({ label }: MockActionItemProps) => (
-    <button data-testid="action-item">{label}</button>
-  ),
-  LocalAlert: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="local-alert">{children}</div>
-  ),
-}));
+vi.mock('@pxweb2/pxweb2-ui', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@pxweb2/pxweb2-ui')>();
+
+  return {
+    ...actual,
+    ContentBox: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="content-box">{children}</div>
+    ),
+    ActionItem: ({
+      label,
+      ariaLabel,
+      onClick,
+      toggleState,
+    }: MockActionItemProps) => (
+      <button
+        data-testid="action-item"
+        aria-label={ariaLabel}
+        data-toggle-state={toggleState ? 'on' : 'off'}
+        onClick={onClick}
+      >
+        {label}
+      </button>
+    ),
+    LocalAlert: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="local-alert">{children}</div>
+    ),
+  };
+});
 
 beforeEach(() => {
-  mockGetConfig.mockReturnValue({
-    features: {
-      chartEnabled: true,
-    },
-  });
+  vi.clearAllMocks();
+  mockGetConfig.mockReset();
+  mockGetConfig.mockReturnValue(defaultMockConfig);
+  mockIsMobile.mockReturnValue(false);
 });
 
 describe('DrawerView', () => {
   it('renders successfully', () => {
-    render(
+    renderWithProviders(
       <MemoryRouter>
         <DrawerView />
       </MemoryRouter>,
@@ -56,12 +121,13 @@ describe('DrawerView', () => {
 
   it('renders info alert when chart view is disabled', () => {
     mockGetConfig.mockReturnValue({
+      ...defaultMockConfig,
       features: {
         chartEnabled: false,
       },
     });
 
-    render(
+    renderWithProviders(
       <MemoryRouter>
         <DrawerView />
       </MemoryRouter>,
@@ -76,4 +142,78 @@ describe('DrawerView', () => {
   it('has correct display name', () => {
     expect(DrawerView.displayName).toBe('DrawerView');
   });
+
+  it('clicking table action pivots to desktop table when not mobile', async () => {
+    renderWithProviders(
+      <MemoryRouter initialEntries={['/?view=linechart']}>
+        <DrawerView />
+      </MemoryRouter>,
+    );
+
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole('button', {
+        name: 'presentation_page.side_menu.view.table.title',
+      }),
+    );
+
+    expect(mockPivotToTable).toHaveBeenCalledTimes(1);
+    expect(mockPivotToTable).toHaveBeenCalledWith(false);
+  });
+
+  it('clicking table action pivots to mobile table when mobile', async () => {
+    mockIsMobile.mockReturnValue(true);
+
+    renderWithProviders(
+      <MemoryRouter initialEntries={['/?view=linechart']}>
+        <DrawerView />
+      </MemoryRouter>,
+    );
+
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole('button', {
+        name: 'presentation_page.side_menu.view.table.title',
+      }),
+    );
+
+    expect(mockPivotToTable).toHaveBeenCalledTimes(1);
+    expect(mockPivotToTable).toHaveBeenCalledWith(true);
+  });
+
+  it('clicking linechart action pivots to chart', async () => {
+    renderWithProviders(
+      <MemoryRouter>
+        <DrawerView />
+      </MemoryRouter>,
+    );
+
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole('button', {
+        name: 'presentation_page.side_menu.view.linechart.title',
+      }),
+    );
+
+    expect(mockPivotToChart).toHaveBeenCalledTimes(1);
+    expect(mockPivotToTable).not.toHaveBeenCalled();
+  });
+
+  it('sets correct toggleState from search param view=linechart', () => {
+    renderWithProviders(
+      <MemoryRouter initialEntries={['/?view=linechart']}>
+        <DrawerView />
+      </MemoryRouter>,
+    );
+
+    const tableButton = screen.getByRole('button', {
+      name: 'presentation_page.side_menu.view.table.title',
+    });
+    const chartButton = screen.getByRole('button', {
+      name: 'presentation_page.side_menu.view.linechart.title',
+    });
+
+    expect(tableButton).toHaveAttribute('data-toggle-state', 'off');
+    expect(chartButton).toHaveAttribute('data-toggle-state', 'on');
+  });
 });

packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.tsx

@@ -1,20 +1,26 @@
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router';
 
-import { ActionItem, ContentBox, LocalAlert } from '@pxweb2/pxweb2-ui';
+import useTableData from '../../../context/useTableData';
+import useApp from '../../../context/useApp';
 import { getConfig } from '../../../util/config/getConfig';
 import {
   ViewMode,
   getSearchParamsWithViewMode,
   getViewMode,
 } from '../../../pages/TableViewer/Utils/tableViewerHelper';
+import { ActionItem, ContentBox, LocalAlert } from '@pxweb2/pxweb2-ui';
 import classes from './DrawerView.module.scss';
+
 export function DrawerView() {
   const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { pivotToChart, pivotToTable } = useTableData();
+  const { isMobile } = useApp();
   const config = getConfig();
   const chartEnabled = config.features?.chartEnabled === true;
   const selectedViewMode = getViewMode(searchParams, chartEnabled);
+
   function setViewMode(viewMode: ViewMode) {
     setSearchParams(getSearchParamsWithViewMode(searchParams, viewMode));
   }
@@ -29,7 +35,10 @@ export function DrawerView() {
               size="large"
               label={t('presentation_page.side_menu.view.table.title')}
               ariaLabel={t('presentation_page.side_menu.view.table.title')}
-              onClick={() => setViewMode('table')}
+              onClick={() => {
+                pivotToTable(isMobile);
+                setViewMode('table');
+              }}
               toggleState={selectedViewMode === 'table'}
             />
           </li>
@@ -39,7 +48,10 @@ export function DrawerView() {
               size="large"
               label={t('presentation_page.side_menu.view.linechart.title')}
               ariaLabel={t('presentation_page.side_menu.view.linechart.title')}
-              onClick={() => setViewMode('linechart')}
+              onClick={() => {
+                pivotToChart();
+                setViewMode('linechart');
+              }}
               toggleState={selectedViewMode === 'linechart'}
             />
           </li>

packages/pxweb2/src/app/components/Presentation/Presentation.tsx

@@ -25,7 +25,10 @@ import useTableData from '../../context/useTableData';
 import useVariables from '../../context/useVariables';
 import { useDebounce } from '@uidotdev/usehooks';
 import { getConfig } from '../../util/config/getConfig';
-import { getViewMode } from '../../pages/TableViewer/Utils/tableViewerHelper';
+import {
+  getViewMode,
+  getDataViewMode,
+} from '../../pages/TableViewer/Utils/tableViewerHelper';
 
 type propsType = {
   readonly selectedTabId: string;
@@ -139,11 +142,17 @@ export function Presentation({
       }
     };
   });
+
+  // Get the right view mode when switching between mobile/desktop screen sizes.
   useEffect(() => {
-    if (isMobile) {
-      tableData.pivotToMobile();
-    } else {
-      tableData.pivotToDesktop();
+    if (viewMode === 'table') {
+      if (isMobile) {
+        tableData.pivotToMobile();
+      } else {
+        tableData.pivotToDesktop();
+      }
+    } else if (viewMode === 'linechart') {
+      tableData.pivotToChart();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
@@ -162,7 +171,8 @@ export function Presentation({
 
     if (initialRun && !hasSelectedValues) {
       if (getSavedQueryId()?.length > 0) {
-        tableData.fetchSavedQuery(getSavedQueryId(), i18n, isMobile);
+        const dataViewMode = getDataViewMode(viewMode, isMobile);
+        tableData.fetchSavedQuery(getSavedQueryId(), i18n, dataViewMode);
       } else {
         fetchTableDataIfAllowed();
       }
@@ -203,7 +213,8 @@ export function Presentation({
 
   function fetchTableDataIfAllowed() {
     if (variables.isMatrixSizeAllowed) {
-      tableData.fetchTableData(tableId, i18n, isMobile);
+      const dataViewMode = getDataViewMode(viewMode, isMobile);
+      tableData.fetchTableData(tableId, i18n, dataViewMode);
     } else {
       // fade table and give warning
       setIsFadingTable(true);

packages/pxweb2/src/app/context/DataViewModeType.ts

@@ -0,0 +1,5 @@
+export enum DataViewModeType {
+  MobileTable = 'MobileTable',
+  DesktopTable = 'DesktopTable',
+  Chart = 'Chart',
+}