@react-magma/charts 13.0.4-next.0 → 13.1.1-next.0

package/src/components/ChartTable/ChartDataTable.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from 'react-magma-dom';
+
+export interface ChartDataTableColumn {
+  /** Header text for this column */
+  header: string;
+  /** Key to read from each row object */
+  key: string;
+}
+
+export interface ChartDataTableProps {
+  /** Column definitions (header + key). If omitted, columns are auto-derived from the dataset object keys with the first character capitalized (e.g. "group" → "Group"). */
+  columns?: ChartDataTableColumn[];
+  /** Array of data objects. Each object should have keys matching the column `key` values. */
+  dataSet: Array<Record<string, React.ReactNode>>;
+  /**
+   * If true, the table uses inverse (dark) styling.
+   * @default false
+   */
+  isInverse?: boolean;
+}
+
+function deriveColumns(
+  dataSet: Array<Record<string, React.ReactNode>>
+): ChartDataTableColumn[] {
+  if (!dataSet.length) return [];
+  return Object.keys(dataSet[0]).map(key => ({
+    header: key.charAt(0).toUpperCase() + key.slice(1),
+    key,
+  }));
+}
+
+export function ChartDataTable({
+  columns,
+  dataSet,
+  isInverse,
+}: ChartDataTableProps) {
+  const resolvedColumns = columns || deriveColumns(dataSet);
+  return (
+    <Table isInverse={isInverse}>
+      <TableHead>
+        <TableRow>
+          {resolvedColumns.map(col => (
+            <TableHeaderCell key={col.key}>{col.header}</TableHeaderCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {dataSet.map((row, index) => {
+          const rowKey = resolvedColumns
+            .map(col => String(row[col.key] ?? ''))
+            .join('-');
+          return (
+            <TableRow key={`${rowKey}-${index}`}>
+              {resolvedColumns.map(col => (
+                <TableCell key={col.key}>{row[col.key]}</TableCell>
+              ))}
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/ChartTable/ChartFullscreenButton.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import { ButtonVariant, IconButton, Tooltip } from 'react-magma-dom';
+
+import { useChartToolbarI18n } from './chartToolbarI18n';
+
+export interface ChartFullscreenButtonProps {
+  /** Accessible label for the button, e.g. "View Overall Performance in full screen" */
+  ariaLabel: string;
+  /** Icon rendered when not in fullscreen mode */
+  icon: React.ReactElement;
+  /** Icon rendered when in fullscreen mode. Falls back to `icon` if omitted. */
+  exitIcon?: React.ReactElement;
+  /**
+   * If true, the button uses inverse (dark) styling.
+   * @default false
+   */
+  isInverse?: boolean;
+  /** Whether the chart is currently in fullscreen mode */
+  isFullscreen: boolean;
+  /** Click handler – should toggle fullscreen */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Optional ref forwarded to the underlying IconButton */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * Tooltip text shown on hover.
+   * @default "Make full screen" / "Exit full screen" based on state (i18n overridable)
+   */
+  tooltipContent?: string;
+}
+
+export function ChartFullscreenButton({
+  ariaLabel,
+  buttonRef,
+  exitIcon,
+  icon,
+  isInverse,
+  isFullscreen,
+  onClick,
+  tooltipContent,
+}: ChartFullscreenButtonProps) {
+  const t = useChartToolbarI18n();
+  const resolvedTooltip =
+    tooltipContent ?? (isFullscreen ? t.exitFullScreen : t.makeFullScreen);
+  const resolvedIcon = isFullscreen && exitIcon ? exitIcon : icon;
+
+  return (
+    <Tooltip content={resolvedTooltip} isInverse={isInverse}>
+      <IconButton
+        aria-label={ariaLabel}
+        icon={resolvedIcon}
+        isInverse={isInverse}
+        onClick={onClick}
+        ref={buttonRef}
+        variant={ButtonVariant.link}
+      />
+    </Tooltip>
+  );
+}

package/src/components/ChartTable/ChartMoreOptionsButton.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import {
+  ButtonVariant,
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from 'react-magma-dom';
+
+import { useChartToolbarI18n } from './chartToolbarI18n';
+
+export interface ChartMoreOptionsButtonProps {
+  /**
+   * Accessible label for the trigger button.
+   * @default "More options" (i18n overridable)
+   */
+  ariaLabel?: string;
+  /** Menu items rendered inside the dropdown (DropdownMenuItem, DropdownDivider, etc.) */
+  children: React.ReactNode;
+  /** Icon element rendered inside the trigger button */
+  icon: React.ReactElement;
+  /**
+   * If true, the dropdown uses inverse (dark) styling.
+   * @default false
+   */
+  isInverse?: boolean;
+}
+
+export function ChartMoreOptionsButton({
+  ariaLabel,
+  children,
+  icon,
+  isInverse,
+}: ChartMoreOptionsButtonProps) {
+  const t = useChartToolbarI18n();
+  const resolvedAriaLabel = ariaLabel ?? t.moreOptionsAriaLabel;
+  return (
+    <Dropdown isInverse={isInverse}>
+      <DropdownButton
+        aria-label={resolvedAriaLabel}
+        icon={icon}
+        variant={ButtonVariant.link}
+      />
+      <DropdownContent>{children}</DropdownContent>
+    </Dropdown>
+  );
+}

package/src/components/ChartTable/ChartTable.stories.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
+import { Card } from 'react-magma-dom';
+
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '../CarbonChart';
+
+export default {
+  component: CarbonChart,
+  title: 'CarbonChart/ChartToolbar',
+  argTypes: {
+    isInverse: {
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta;
+
+// ---------------------------------------------------------------------------
+// Shared data
+// ---------------------------------------------------------------------------
+
+const donutDataSet = [
+  { group: 'Not attempted', value: 5 },
+  { group: 'Poor performance (Score less than 33%)', value: 15 },
+  { group: 'High performance (Score greater than 66%)', value: 50 },
+  { group: 'Average performance (Score between 33% and 66%)', value: 30 },
+];
+
+const barDataSet = [
+  { group: 'Chapter 1', value: 85 },
+  { group: 'Chapter 2', value: 72 },
+  { group: 'Chapter 3', value: 91 },
+  { group: 'Chapter 4', value: 64 },
+];
+
+// ---------------------------------------------------------------------------
+// Full toolbar – Donut chart (all buttons via chartToolbar prop)
+// ---------------------------------------------------------------------------
+
+/**
+ * Full toolbar with Show as Table, Full Screen, and More Options buttons,
+ * driven entirely by the `chartToolbar` prop on CarbonChart.
+ *
+ * Carbon's built-in toolbar is automatically disabled when `chartToolbar`
+ * is provided. The Magma toolbar renders accessible replacements with
+ * proper ARIA attributes, focus management, and heading semantics.
+ */
+const FullToolbarTemplate: StoryFn<CarbonChartProps> = args => (
+  <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
+    <CarbonChart {...args} />
+  </Card>
+);
+
+export const DonutWithToolbar = {
+  render: FullToolbarTemplate,
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: donutDataSet,
+    options: {
+      title: 'Overall Activity Performance',
+      resizable: true,
+      height: '400px',
+      donut: {
+        center: { label: 'Questions' },
+      },
+      legend: {
+        truncation: { type: 'none' },
+      },
+    },
+    chartToolbar: {},
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Bar chart with custom table columns
+// ---------------------------------------------------------------------------
+
+export const BarWithToolbar = {
+  render: FullToolbarTemplate,
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bar,
+    dataSet: barDataSet,
+    options: {
+      title: 'Chapter Performance',
+      axes: {
+        left: { mapsTo: 'value' },
+        bottom: { mapsTo: 'group', scaleType: 'labels' },
+      },
+      height: '400px',
+    },
+    chartToolbar: {
+      tableColumns: [
+        { header: 'Chapter', key: 'group' },
+        { header: 'Score (%)', key: 'value' },
+      ],
+    },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Inverse theme
+// ---------------------------------------------------------------------------
+
+export const InverseTheme = {
+  render: FullToolbarTemplate,
+  args: {
+    isInverse: true,
+    type: CarbonChartType.donut,
+    dataSet: donutDataSet,
+    options: {
+      title: 'Inverse Theme Demo',
+      resizable: true,
+      height: '400px',
+      donut: {
+        center: { label: 'Questions' },
+      },
+      legend: {
+        truncation: { type: 'none' },
+      },
+    },
+    chartToolbar: {},
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Table only (no fullscreen or more options)
+// ---------------------------------------------------------------------------
+
+export const TableOnly = {
+  render: FullToolbarTemplate,
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: donutDataSet,
+    options: {
+      title: 'Table Only (No Fullscreen)',
+      resizable: true,
+      height: '400px',
+      donut: {
+        center: { label: 'Questions' },
+      },
+      legend: {
+        truncation: { type: 'none' },
+      },
+    },
+    chartToolbar: {
+      fullscreen: false,
+    },
+  },
+};