@react-magma/charts 14.0.0-rc.3 → 14.0.0-rc.5

package/src/components/ChartTable/ChartTable.test.tsx

@@ -0,0 +1,452 @@
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { DropdownMenuItem } from 'react-magma-dom';
+import {
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MoreVertIcon,
+  TableChartIcon,
+} from 'react-magma-icons';
+
+import { ChartDataTable } from './ChartDataTable';
+import { ChartFullscreenButton } from './ChartFullscreenButton';
+import { ChartMoreOptionsButton } from './ChartMoreOptionsButton';
+import { ChartTableButton } from './ChartTableButton';
+import { ChartTableModal } from './ChartTableModal';
+import { ChartToolbar } from './ChartToolbar';
+
+const dataSet = [
+  { group: 'High performance', value: 50 },
+  { group: 'Average performance', value: 30 },
+  { group: 'Poor performance', value: 15 },
+  { group: 'Not attempted', value: 5 },
+];
+
+// ---------------------------------------------------------------------------
+// ChartDataTable
+// ---------------------------------------------------------------------------
+describe('ChartDataTable', () => {
+  it('derives column headers from dataset keys when no columns prop is given', () => {
+    render(<ChartDataTable dataSet={dataSet} />);
+
+    expect(
+      screen.getByRole('columnheader', { name: 'Group' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('columnheader', { name: 'Value' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders all data rows', () => {
+    render(<ChartDataTable dataSet={dataSet} />);
+
+    expect(
+      screen.getByRole('cell', { name: 'High performance' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: '50' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', { name: 'Not attempted' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: '5' })).toBeInTheDocument();
+  });
+
+  it('accepts custom column definitions', () => {
+    const columns = [
+      { header: 'Category', key: 'group' },
+      { header: 'Count', key: 'value' },
+    ];
+
+    render(<ChartDataTable columns={columns} dataSet={dataSet} />);
+
+    expect(
+      screen.getByRole('columnheader', { name: 'Category' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('columnheader', { name: 'Count' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders with isInverse without error', () => {
+    render(<ChartDataTable dataSet={dataSet} isInverse />);
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ChartTableModal
+// ---------------------------------------------------------------------------
+describe('ChartTableModal', () => {
+  it('renders a dialog with semantic heading when open', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        isOpen
+        onClose={jest.fn()}
+        title="Overall Performance"
+      />
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', {
+        level: 2,
+        name: 'Tabular representation Overall Performance',
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('respects custom headerLevel', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        headerLevel={1}
+        isOpen
+        onClose={jest.fn()}
+        title="Test"
+      />
+    );
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+
+  it('respects custom headerLabel', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        headerLabel="Data table"
+        isOpen
+        onClose={jest.fn()}
+        title="My Chart"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Data table My Chart' })
+    ).toBeInTheDocument();
+  });
+
+  it('does not render dialog when closed', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        isOpen={false}
+        onClose={jest.fn()}
+        title="Test"
+      />
+    );
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the data table inside the modal', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        isOpen
+        onClose={jest.fn()}
+        title="Test"
+      />
+    );
+
+    expect(
+      screen.getByRole('columnheader', { name: 'Group' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', { name: 'High performance' })
+    ).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is activated', async () => {
+    jest.useFakeTimers();
+    const onClose = jest.fn();
+
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        isOpen
+        onClose={onClose}
+        title="Test"
+      />
+    );
+
+    fireEvent.click(screen.getByTestId('modal-closebtn'));
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
+  it('renders with isInverse without error', () => {
+    render(
+      <ChartTableModal
+        dataSet={dataSet}
+        isInverse
+        isOpen
+        onClose={jest.fn()}
+        title="Inverse Modal"
+      />
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ChartTableButton
+// ---------------------------------------------------------------------------
+describe('ChartTableButton', () => {
+  const icon = <TableChartIcon />;
+
+  it('renders with aria-haspopup="dialog"', () => {
+    render(
+      <ChartTableButton
+        ariaLabel="Overall Performance"
+        icon={icon}
+        isTableOpen={false}
+        onClick={jest.fn()}
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Overall Performance' });
+
+    expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+  });
+
+  it('sets aria-expanded to false when modal is closed', () => {
+    render(
+      <ChartTableButton
+        ariaLabel="Overall Performance"
+        icon={icon}
+        isTableOpen={false}
+        onClick={jest.fn()}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Overall Performance' })
+    ).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('sets aria-expanded to true when modal is open', () => {
+    render(
+      <ChartTableButton
+        ariaLabel="Overall Performance"
+        icon={icon}
+        isTableOpen
+        onClick={jest.fn()}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Overall Performance' })
+    ).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('calls onClick when activated', () => {
+    const onClick = jest.fn();
+
+    render(
+      <ChartTableButton
+        ariaLabel="Overall Performance"
+        icon={icon}
+        isTableOpen={false}
+        onClick={onClick}
+      />
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Overall Performance' })
+    );
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with custom tooltip content on hover', async () => {
+    render(
+      <ChartTableButton
+        ariaLabel="Overall Performance"
+        icon={icon}
+        isTableOpen={false}
+        onClick={jest.fn()}
+        tooltipContent="View data as table"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Overall Performance' });
+
+    fireEvent.mouseEnter(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('View data as table')).toBeInTheDocument();
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ChartFullscreenButton
+// ---------------------------------------------------------------------------
+describe('ChartFullscreenButton', () => {
+  it('does NOT have aria-haspopup', () => {
+    render(
+      <ChartFullscreenButton
+        ariaLabel="View chart in full screen"
+        icon={<FullscreenIcon />}
+        isFullscreen={false}
+        onClick={jest.fn()}
+      />
+    );
+
+    const button = screen.getByRole('button', {
+      name: 'View chart in full screen',
+    });
+
+    expect(button).not.toHaveAttribute('aria-haspopup');
+  });
+
+  it('calls onClick when activated', () => {
+    const onClick = jest.fn();
+
+    render(
+      <ChartFullscreenButton
+        ariaLabel="View chart in full screen"
+        icon={<FullscreenIcon />}
+        isFullscreen={false}
+        onClick={onClick}
+      />
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'View chart in full screen' })
+    );
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows "Make full screen" tooltip by default', async () => {
+    render(
+      <ChartFullscreenButton
+        ariaLabel="Fullscreen"
+        icon={<FullscreenIcon />}
+        isFullscreen={false}
+        onClick={jest.fn()}
+      />
+    );
+
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Fullscreen' }));
+    await waitFor(() => {
+      expect(screen.getByText('Make full screen')).toBeInTheDocument();
+    });
+  });
+
+  it('shows "Exit full screen" tooltip when in fullscreen', async () => {
+    render(
+      <ChartFullscreenButton
+        ariaLabel="Fullscreen"
+        icon={<FullscreenIcon />}
+        exitIcon={<FullscreenExitIcon />}
+        isFullscreen
+        onClick={jest.fn()}
+      />
+    );
+
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Fullscreen' }));
+    await waitFor(() => {
+      expect(screen.getByText('Exit full screen')).toBeInTheDocument();
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ChartMoreOptionsButton
+// ---------------------------------------------------------------------------
+describe('ChartMoreOptionsButton', () => {
+  it('renders with default "More options" label', () => {
+    render(
+      <ChartMoreOptionsButton icon={<MoreVertIcon />}>
+        <DropdownMenuItem>Download</DropdownMenuItem>
+      </ChartMoreOptionsButton>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'More options' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders with custom aria-label', () => {
+    render(
+      <ChartMoreOptionsButton ariaLabel="Chart actions" icon={<MoreVertIcon />}>
+        <DropdownMenuItem>Download</DropdownMenuItem>
+      </ChartMoreOptionsButton>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Chart actions' })
+    ).toBeInTheDocument();
+  });
+
+  it('opens dropdown menu on click', () => {
+    render(
+      <ChartMoreOptionsButton icon={<MoreVertIcon />}>
+        <DropdownMenuItem>Download as CSV</DropdownMenuItem>
+      </ChartMoreOptionsButton>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'More options' }));
+    expect(screen.getByText('Download as CSV')).toBeVisible();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// ChartToolbar
+// ---------------------------------------------------------------------------
+describe('ChartToolbar', () => {
+  it('renders the title as a heading', () => {
+    render(
+      <ChartToolbar title="Overall Performance">
+        <button>Action</button>
+      </ChartToolbar>
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 3, name: 'Overall Performance' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders children action buttons', () => {
+    render(
+      <ChartToolbar title="Test">
+        <button>Show as table</button>
+        <button>Full screen</button>
+      </ChartToolbar>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Show as table' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Full screen' })
+    ).toBeInTheDocument();
+  });
+
+  it('respects custom heading level', () => {
+    render(
+      <ChartToolbar title="Test" headingLevel={2}>
+        <button>Action</button>
+      </ChartToolbar>
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: 'Test' })
+    ).toBeInTheDocument();
+  });
+});

package/src/components/ChartTable/ChartTableButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { ButtonVariant, IconButton, Tooltip } from 'react-magma-dom';
+
+import { useChartToolbarI18n } from './chartToolbarI18n';
+
+export interface ChartTableButtonProps {
+  /** Accessible label for the button – should describe the chart, e.g. "Overall Performance" */
+  ariaLabel: string;
+  /** Icon element rendered inside the button */
+  icon: React.ReactElement;
+  /**
+   * If true, the button uses inverse (dark) styling.
+   * @default false
+   */
+  isInverse?: boolean;
+  /** Whether the associated modal is currently open */
+  isTableOpen: boolean;
+  /** Click handler – should open the modal */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Optional ref forwarded to the underlying IconButton */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * Tooltip text shown on hover.
+   * @default "Show as table" (i18n overridable)
+   */
+  tooltipContent?: string;
+}
+
+export function ChartTableButton({
+  ariaLabel,
+  buttonRef,
+  icon,
+  isInverse,
+  isTableOpen,
+  onClick,
+  tooltipContent,
+}: ChartTableButtonProps) {
+  const t = useChartToolbarI18n();
+  const resolvedTooltip = tooltipContent ?? t.showAsTableTooltip;
+
+  return (
+    <Tooltip content={resolvedTooltip} isInverse={isInverse}>
+      <IconButton
+        aria-expanded={isTableOpen}
+        aria-haspopup="dialog"
+        aria-label={ariaLabel}
+        icon={icon}
+        isInverse={isInverse}
+        onClick={onClick}
+        ref={buttonRef}
+        variant={ButtonVariant.link}
+      />
+    </Tooltip>
+  );
+}

package/src/components/ChartTable/ChartTableModal.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+
+import styled from '@emotion/styled';
+import { Button, Modal, ModalSize, ThemeContext } from 'react-magma-dom';
+
+import { ChartDataTable, ChartDataTableColumn } from './ChartDataTable';
+import { useChartToolbarI18n } from './chartToolbarI18n';
+
+export interface ChartTableModalProps {
+  /** The chart's data passed to ChartDataTable */
+  dataSet: Array<Record<string, React.ReactNode>>;
+  /** Column definitions forwarded to ChartDataTable */
+  columns?: ChartDataTableColumn[];
+  /**
+   * DOM element to portal the modal into. Defaults to `document.body`.
+   * When the chart is in fullscreen, pass the fullscreen element so the
+   * modal renders inside it and is visible to the browser.
+   */
+  portalContainer?: HTMLElement | null;
+  /**
+   * If true, the modal uses inverse (dark) styling.
+   * @default false
+   */
+  isInverse?: boolean;
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Called when the modal requests to close */
+  onClose: () => void;
+  /** Called when the "Download as CSV" footer button is clicked */
+  onDownloadCsv?: () => void;
+  /** Chart title – displayed as a second line in the modal heading */
+  title: string;
+  /**
+   * Heading level for the modal header (1–6).
+   * @default 2
+   */
+  headerLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * First line of the modal heading.
+   * @default "Tabular representation" (i18n overridable)
+   */
+  headerLabel?: string;
+  /**
+   * Magma Modal size.
+   * @default ModalSize.large
+   */
+  size?: ModalSize;
+}
+
+const ModalFooter = styled.div<{ theme: any }>`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: ${props => props.theme.spaceScale.spacing05};
+`;
+
+const HeaderLabel = styled.span<{ isInverse?: boolean; theme: any }>`
+  display: block;
+  font-size: ${props => props.theme.typeScale.size02.fontSize};
+  font-weight: normal;
+  color: ${props =>
+    props.isInverse
+      ? props.theme.colors.neutral100
+      : props.theme.colors.neutral500};
+  line-height: ${props => props.theme.typeScale.size02.lineHeight};
+`;
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+const contentStyle: React.CSSProperties = {
+  width: '100%',
+  margin: 0,
+};
+
+const HeaderTitle = styled.span`
+  display: block;
+`;
+
+export function ChartTableModal({
+  columns,
+  portalContainer,
+  dataSet,
+  headerLabel,
+  headerLevel = 2,
+  isInverse,
+  isOpen,
+  onClose,
+  onDownloadCsv,
+  size = ModalSize.large,
+  title,
+}: ChartTableModalProps) {
+  const t = useChartToolbarI18n();
+  const theme = React.useContext(ThemeContext);
+  const resolvedHeaderLabel = headerLabel ?? t.tabularRepresentationLabel;
+  const header = React.useMemo(
+    () => (
+      <span>
+        <HeaderLabel isInverse={isInverse} theme={theme}>
+          {resolvedHeaderLabel}
+        </HeaderLabel>
+        <HeaderTitle>{title}</HeaderTitle>
+      </span>
+    ),
+    [resolvedHeaderLabel, title, isInverse, theme]
+  );
+
+  return (
+    <Modal
+      portalContainer={portalContainer}
+      containerStyle={portalContainer ? containerStyle : undefined}
+      header={header}
+      headerLevel={headerLevel}
+      isInverse={isInverse}
+      isOpen={isOpen}
+      onClose={onClose}
+      size={size}
+      style={portalContainer ? contentStyle : undefined}
+    >
+      <ChartDataTable
+        columns={columns}
+        dataSet={dataSet}
+        isInverse={isInverse}
+      />
+      {onDownloadCsv && (
+        <ModalFooter theme={theme}>
+          <Button isInverse={isInverse} onClick={onDownloadCsv}>
+            {t.downloadAsCsv}
+          </Button>
+        </ModalFooter>
+      )}
+    </Modal>
+  );
+}

package/src/components/ChartTable/ChartToolbar.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import styled from '@emotion/styled';
+import { Heading, ThemeContext, TypographyVisualStyle } from 'react-magma-dom';
+
+export interface ChartToolbarProps {
+  /** Toolbar action buttons (ChartTableButton, ChartFullscreenButton, ChartMoreOptionsButton, etc.) */
+  children: React.ReactNode;
+  /**
+   * Heading level for the chart title.
+   * @default 3
+   */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Visual style for the heading.
+   * @default TypographyVisualStyle.headingSmall
+   */
+  headingVisualStyle?: TypographyVisualStyle;
+  /** Chart title text */
+  title: string;
+}
+
+const ToolbarWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const ActionsWrapper = styled.div<{ theme: any }>`
+  align-items: center;
+  display: flex;
+  gap: ${props => props.theme.spaceScale.spacing02};
+`;
+
+export function ChartToolbar({
+  children,
+  headingLevel = 3,
+  headingVisualStyle = TypographyVisualStyle.headingSmall,
+  title,
+}: ChartToolbarProps) {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <ToolbarWrapper>
+      <Heading level={headingLevel} noMargins visualStyle={headingVisualStyle}>
+        {title}
+      </Heading>
+      <ActionsWrapper theme={theme}>{children}</ActionsWrapper>
+    </ToolbarWrapper>
+  );
+}