@dhis2/analytics 28.0.4 → 28.1.0

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { HoverMenuDropdown } from '../index.js';
 describe('<HoverMenuDropdown/>', () => {
@@ -6,20 +6,20 @@ describe('<HoverMenuDropdown/>', () => {
    * in the mouse interaction tests for the HoverMenuBar.
    * Only the `dataTest` prop needs to be verified here. */
 
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    render(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
       label: "test dropdown",
       dataTest: dataTest
     }, "children"));
-    expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `className` prop', () => {
+  test('accepts a `className` prop', () => {
     const className = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    render(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
       label: "test dropdown",
       className: className
     }, "children"));
-    expect(wrapper.find('button')).toHaveClassName(className);
+    expect(screen.getByRole('button')).toHaveClass(className);
   });
 });

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuList.spec.js

@@ -1,29 +1,28 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
 import React from 'react';
 import { HoverMenuList, HoverMenuListItem } from '../index.js';
 describe('<HoverMenuList/>', () => {
   const dataTest = 'test';
   const childNode = 'children';
-  it('renders children', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  test('renders children', () => {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accept a `className` prop', () => {
+  test('accept a `className` prop', () => {
     const className = 'className';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest,
       className: className
     }, childNode));
-    expect(wrapper.find('ul')).toHaveClassName(className);
+    expect(screen.getByTestId(dataTest)).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+  test('accepts a `dataTest` prop', () => {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, {
       dataTest: dataTest
     }, childNode));
-    expect(wrapper.find('ul').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accept a `dense` prop', () => {
+  test('accept a `dense` prop', () => {
     render(/*#__PURE__*/React.createElement(HoverMenuList, {
       dense: true
     }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
@@ -34,18 +33,24 @@ describe('<HoverMenuList/>', () => {
     expect(screen.getByText('item 1').closest('li')).toHaveClass('dense');
     expect(screen.getByText('item 2').closest('li')).toHaveClass('dense');
   });
-  it('accept a `maxHeight` prop', () => {
+  test('accept a `maxHeight` prop', () => {
     const maxHeight = '100000px';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest,
       maxHeight: maxHeight
     }, childNode));
-    expect(wrapper.find('style').text()).toContain(`max-height: ${maxHeight}`);
+    expect(container).toMatchSnapshot();
   });
-  it('accept a `maxWidth` prop', () => {
+  test('accept a `maxWidth` prop', () => {
     const maxWidth = '100000px';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest,
       maxWidth: maxWidth
     }, childNode));
-    expect(wrapper.find('style').text()).toContain(`max-width: ${maxWidth}`);
+    expect(container).toMatchSnapshot();
   });
 });

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuListItem.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { HoverMenuListItem } from '../index.js';
 describe('<HoverMenuListItem/>', () => {
@@ -7,36 +7,42 @@ describe('<HoverMenuListItem/>', () => {
    * Only the `className`, `dataTest`, `destructive` and
    * `icon` prop need to be verified here. */
 
-  it('accepts a `className` prop', () => {
+  test('accepts a `className` prop', () => {
     const className = 'className';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
       className: className
     }));
-    expect(wrapper.find('li')).toHaveClassName(className);
+    expect(screen.getByTestId('dhis2-uicore-hovermenulistitem')).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
       dataTest: dataTest
     }));
-    expect(wrapper.find('li').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `destructive` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+  test('accepts a `destructive` prop', () => {
+    const dataTest = 'test';
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+      dataTest: dataTest,
       destructive: true
     }));
-    expect(wrapper.find('li')).toHaveClassName('destructive');
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts an `icon` prop', () => {
+  test('accepts an `icon` prop', () => {
+    const dataTest = 'test';
     const iconText = 'I am an icon';
     const icon = /*#__PURE__*/React.createElement("span", {
       id: "testicon"
     }, iconText);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+      dataTest: dataTest,
       icon: icon
     }));
-    expect(wrapper.find('span.icon')).toExist();
-    expect(wrapper.find('span#testicon')).toExist();
-    expect(wrapper.find('span#testicon').text()).toBe(iconText);
+    const iconWrapperEl = screen.getByTestId(dataTest).firstChild;
+    expect(iconWrapperEl).toBeInTheDocument();
+    expect(iconWrapperEl).toHaveClass('icon');
+    const iconEl = iconWrapperEl.closest('span');
+    expect(iconEl).toHaveTextContent(iconText);
   });
 });

package/build/es/components/Toolbar/HoverMenuBar/__tests__/__snapshots__/HoverMenuList.spec.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HoverMenuList/> accept a \`maxHeight\` prop 1`] = `
+<div>
+  <ul
+    data-test="test"
+  >
+    children
+    <style>
+      
+                    ul {
+                        position: relative;
+                        margin: 0;
+                        padding: 0;
+                        user-select: none;
+                        background: #ffffff;
+                        border: 1px solid #f3f5f7;
+                        border-radius: 3px;
+                        box-shadow: 0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05);
+                        display: inline-block;
+                        min-width: 128px;
+                        max-width: 380px;
+                        max-height: 100000px;
+                        padding: 4px 0;
+                        overflow: auto;
+                        list-style: none;
+                    }
+                
+    </style>
+  </ul>
+</div>
+`;
+
+exports[`<HoverMenuList/> accept a \`maxWidth\` prop 1`] = `
+<div>
+  <ul
+    data-test="test"
+  >
+    children
+    <style>
+      
+                    ul {
+                        position: relative;
+                        margin: 0;
+                        padding: 0;
+                        user-select: none;
+                        background: #ffffff;
+                        border: 1px solid #f3f5f7;
+                        border-radius: 3px;
+                        box-shadow: 0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05);
+                        display: inline-block;
+                        min-width: 128px;
+                        max-width: 100000px;
+                        max-height: auto;
+                        padding: 4px 0;
+                        overflow: auto;
+                        list-style: none;
+                    }
+                
+    </style>
+  </ul>
+</div>
+`;

package/build/es/components/Toolbar/InterpretationsAndDetailsToggler.js

@@ -14,7 +14,9 @@ export const InterpretationsAndDetailsToggler = ({
   disabled: disabled,
   "data-test": dataTest,
   className: "jsx-1238484262 " + `jsx-${menuButtonStyles.__hash}`
-}, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, null) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
+}, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, {
+  dataTest: `${dataTest}-showing`
+}) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: menuButtonStyles.__hash
 }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1238484262"

package/build/es/components/Toolbar/__tests__/InterpretationsAndDetailsToggler.spec.js

@@ -1,42 +1,43 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { InterpretationsAndDetailsToggler } from '../index.js';
 describe('<InterpretationsAndDetailsToggler/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `isShowing` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts an `isShowing` prop', () => {
+    const showingDataTest = 'dhis2-analytics-interpretationsanddetailstoggler-showing';
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop
     }));
-    const wrapperWithIsShowing = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    expect(screen.queryByTestId(showingDataTest)).not.toBeInTheDocument();
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       isShowing: true,
       onClick: noop
     }));
-    expect(wrapper.find('SvgChevronRight24')).toHaveLength(0);
-    expect(wrapper.find('SvgChevronLeft24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronRight24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronLeft24')).toHaveLength(0);
+    expect(screen.getByTestId(showingDataTest)).toBeInTheDocument();
   });
 });

package/build/es/components/Toolbar/__tests__/Toolbar.spec.js

@@ -1,17 +1,17 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Toolbar } from '../index.js';
 describe('<Toolbar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, {
+    render(/*#__PURE__*/React.createElement(Toolbar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
 });

package/build/es/components/Toolbar/__tests__/ToolbarSidebar.spec.js

@@ -1,23 +1,26 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { ToolbarSidebar } from '../index.js';
 describe('<ToolbarSidebar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `isHidden` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+  test('accepts a `isHidden` prop', () => {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       isHidden: true
     }));
-    expect(wrapper.find('div').hasClass('isHidden')).toEqual(true);
+    const divEl = container.querySelector('div');
+    expect(divEl).toHaveClass('isHidden');
   });
 });

package/build/es/components/Toolbar/__tests__/UpdateButton.spec.js

@@ -1,36 +1,38 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { UpdateButton } from '../index.js';
 describe('<UpdateButton/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `loading` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts an `loading` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       loading: true
     }));
-    expect(wrapper.find('CircularLoader')).toHaveLength(1);
+    expect(screen.getByTestId('dhis2-uicore-circularloader')).toBeInTheDocument();
   });
 });

package/build/es/components/TranslationDialog/TranslationModal/TranslationModal.js

@@ -29,7 +29,8 @@ export const TranslationModal = ({
   return /*#__PURE__*/React.createElement(Modal, {
     large: true,
     position: "middle",
-    onClose: onClose
+    onClose: onClose,
+    dataTest: "dhis2-analytics-translation-modal"
   }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Translate: {{objectName}}', {
     objectName: objectToTranslate.name || 'TEXT',
     // XXX

package/build/es/components/TranslationDialog/TranslationModal/__tests__/TranslationModal.spec.js

@@ -1,5 +1,5 @@
-import { ModalTitle, Modal } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { TranslationModal } from '../TranslationModal.js';
 const mockUseTranslationResults = jest.fn(() => ({
@@ -9,19 +9,26 @@ const mockUseTranslationResults = jest.fn(() => ({
 jest.mock('../useTranslationsResults.js', () => ({
   useTranslationsResults: args => mockUseTranslationResults(args)
 }));
-describe('The Translation Dialog component', () => {
-  let shallowTranslationModal;
+describe('TranslationDialog component', () => {
   let props;
   const onClose = jest.fn();
   const onTranslationSaved = jest.fn();
-  const getTranslationModalComponent = props => {
-    if (!shallowTranslationModal) {
-      shallowTranslationModal = shallow(/*#__PURE__*/React.createElement(TranslationModal, props));
-    }
-    return shallowTranslationModal;
+  const renderTranslationModalComponent = props => {
+    return render(/*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: {
+        i18n: {
+          name: 'Name',
+          description: 'Description'
+        },
+        'locales/db': [{
+          locale: 'en',
+          name: 'English',
+          displayName: 'English'
+        }]
+      }
+    }, /*#__PURE__*/React.createElement(TranslationModal, props)));
   };
   beforeEach(() => {
-    shallowTranslationModal = undefined;
     props = {
       fieldsToTranslate: ['name', 'description'],
       objectToTranslate: {
@@ -32,15 +39,17 @@ describe('The Translation Dialog component', () => {
       onTranslationSaved
     };
   });
-  it('renders a Modal component', () => {
-    expect(getTranslationModalComponent(props).find(Modal)).toHaveLength(1);
+  test('renders a Modal component', () => {
+    renderTranslationModalComponent(props);
+    expect(screen.getByTestId('dhis2-analytics-translation-modal')).toBeInTheDocument();
   });
-  it("renders a ModalTitle containing the object's name", () => {
-    expect(getTranslationModalComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Translate: ${props.objectToTranslate.name}`);
+  test("renders a ModalTitle containing the object's name", () => {
+    renderTranslationModalComponent(props);
+    expect(screen.getByText(`Translate: ${props.objectToTranslate.name}`)).toBeInTheDocument();
   });
   test.each(['https://dhis2.tld/path/api/visualization/object-id', 'https://dhis2.tld/path/api/42/visualization/object-id'])('uses the correct resource for the translation endpoint', href => {
     props.objectToTranslate.href = href;
-    getTranslationModalComponent(props);
+    renderTranslationModalComponent(props);
     expect(mockUseTranslationResults).toHaveBeenCalled();
     expect(mockUseTranslationResults).toHaveBeenCalledWith({
       resource: 'visualization/object-id'

package/build/es/index.js

@@ -129,6 +129,10 @@ export { HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST, HIDE_EMPTY_ROW_ITEMS_AFTER_LAST, HID
 
 export { renderValue as formatValue } from './modules/renderValue.js';
 
+// Modules: response
+
+export { transformResponse as transformEventAggregateResponse } from './modules/response/event/response.js';
+
 // Utils: colorSets
 export { COLOR_SET_DEFAULT, COLOR_SET_BASIC, COLOR_SET_EXTENDED, COLOR_SET_BRIGHT, COLOR_SET_DARK, COLOR_SET_GRAY, COLOR_SET_COLOR_BLIND, COLOR_SET_PATTERNS, colorSets } from './visualizations/util/colors/colorSets.js';
 

package/build/es/locales/en/translations.json

@@ -410,6 +410,7 @@
     "Data": "Data",
     "Organisation unit": "Organisation unit",
     "Assigned Categories": "Assigned Categories",
+    "No value": "No value",
     "Text": "Text",
     "Long text": "Long text",
     "Multi text": "Multi text",

package/build/es/modules/pivotTable/AdaptiveClippingController.js

@@ -74,7 +74,8 @@ export class AdaptiveClippingController {
           if (isColumn) {
             var _axis$sizes$index;
             const headerSize = this.measureText(label, {
-              maxWidth: isLeafHeader ? Math.max(CLIPPED_CELL_MIN_SIZE, ((_axis$sizes$index = axis.sizes[index]) === null || _axis$sizes$index === void 0 ? void 0 : _axis$sizes$index.size) || 0) : 0
+              maxWidth: isLeafHeader ? Math.max(CLIPPED_CELL_MIN_SIZE, ((_axis$sizes$index = axis.sizes[index]) === null || _axis$sizes$index === void 0 ? void 0 : _axis$sizes$index.size) || 0) : 0,
+              ...header.style
             });
             this.addSize({
               row: -headerStack.length + level,

package/build/es/modules/pivotTable/getHeaderForDisplay.js

@@ -32,6 +32,9 @@ export const getHeaderForDisplay = ({
   return {
     span,
     label,
-    includesHierarchy
+    includesHierarchy,
+    ...(currentHeader.style ? {
+      style: currentHeader.style
+    } : {})
   };
 };

package/build/es/modules/pivotTable/measureText.js

@@ -1,15 +1,15 @@
 import { CLIPPED_CELL_MAX_SIZE, WRAPPED_TEXT_JUSTIFY_BUFFER, WRAPPED_TEXT_LINE_HEIGHT } from './pivotTableConstants.js';
 let canvas;
-const getContext = fontSize => {
+const getContext = (fontSize = 11, fontFamily = 'Roboto, Arial, sans-serif') => {
   if (!canvas) {
     canvas = document.createElement('canvas');
   }
   const ctx = canvas.getContext('2d');
-  ctx.font = `${fontSize}px Roboto, Arial, sans-serif`;
+  ctx.font = `${fontSize}px ${fontFamily}`;
   return ctx;
 };
-const measureText = (text, fontSize = 11) => {
-  const ctx = getContext(fontSize);
+const measureText = (text, fontSize, fontFamily) => {
+  const ctx = getContext(fontSize, fontFamily);
   const textMetrics = ctx.measureText(text);
   return textMetrics.width;
 };
@@ -17,7 +17,8 @@ export const measureTextWithWrapping = (text, {
   fontSize = 11,
   maxWidth = CLIPPED_CELL_MAX_SIZE,
   justifyBuffer = WRAPPED_TEXT_JUSTIFY_BUFFER,
-  lineHeight = WRAPPED_TEXT_LINE_HEIGHT
+  lineHeight = WRAPPED_TEXT_LINE_HEIGHT,
+  fontFamily
 }) => {
   if (!text) {
     return {
@@ -36,7 +37,7 @@ export const measureTextWithWrapping = (text, {
     const words = paragraphs.shift().split(/\s+/);
     while (words.length) {
       const nextWord = (currentLineWidth === 0 ? '' : ' ') + words.shift();
-      const nextWordWidth = measureText(nextWord, fontSize);
+      const nextWordWidth = measureText(nextWord, fontSize, fontFamily);
       if (maxWidth && currentLineWidth + nextWordWidth > maxWidth) {
         if (currentLineWidth <= maxWidth - justifyBuffer) {
           // Wrapping this word would cause an unnaturally short line