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

package/src/components/ChartTable/chartToolbarI18n.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { I18nContext } from 'react-magma-dom';
+
+export interface ChartToolbarI18n {
+  defaultTitle: string;
+  downloadAsCsv: string;
+  downloadAsJpg: string;
+  downloadAsPng: string;
+  exitFullScreen: string;
+  makeFullScreen: string;
+  moreOptionsAriaLabel: string;
+  showAsTableTooltip: string;
+  tabularRepresentationLabel: string;
+}
+
+const defaults: ChartToolbarI18n = {
+  defaultTitle: 'Chart',
+  downloadAsCsv: 'Download as CSV',
+  downloadAsJpg: 'Download as JPG',
+  downloadAsPng: 'Download as PNG',
+  exitFullScreen: 'Exit full screen',
+  makeFullScreen: 'Make full screen',
+  moreOptionsAriaLabel: 'More options',
+  showAsTableTooltip: 'Show as table',
+  tabularRepresentationLabel: 'Tabular representation',
+};
+
+/**
+ * Reads chart toolbar i18n strings from the I18nContext if available,
+ * falling back to English defaults.
+ */
+// eslint-disable-next-line complexity
+export function useChartToolbarI18n(): ChartToolbarI18n {
+  const i18n = React.useContext(I18nContext);
+  const toolbar = (i18n.charts as { toolbar?: Partial<ChartToolbarI18n> })
+    ?.toolbar;
+
+  if (!toolbar) return defaults;
+
+  return {
+    defaultTitle: toolbar.defaultTitle ?? defaults.defaultTitle,
+    downloadAsCsv: toolbar.downloadAsCsv ?? defaults.downloadAsCsv,
+    downloadAsJpg: toolbar.downloadAsJpg ?? defaults.downloadAsJpg,
+    downloadAsPng: toolbar.downloadAsPng ?? defaults.downloadAsPng,
+    exitFullScreen: toolbar.exitFullScreen ?? defaults.exitFullScreen,
+    makeFullScreen: toolbar.makeFullScreen ?? defaults.makeFullScreen,
+    moreOptionsAriaLabel:
+      toolbar.moreOptionsAriaLabel ?? defaults.moreOptionsAriaLabel,
+    showAsTableTooltip:
+      toolbar.showAsTableTooltip ?? defaults.showAsTableTooltip,
+    tabularRepresentationLabel:
+      toolbar.tabularRepresentationLabel ?? defaults.tabularRepresentationLabel,
+  };
+}

package/src/components/ChartTable/index.ts

@@ -0,0 +1,23 @@
+export { ChartDataTable } from './ChartDataTable';
+export type {
+  ChartDataTableProps,
+  ChartDataTableColumn,
+} from './ChartDataTable';
+
+export { ChartFullscreenButton } from './ChartFullscreenButton';
+export type { ChartFullscreenButtonProps } from './ChartFullscreenButton';
+
+export { ChartMoreOptionsButton } from './ChartMoreOptionsButton';
+export type { ChartMoreOptionsButtonProps } from './ChartMoreOptionsButton';
+
+export { ChartTableButton } from './ChartTableButton';
+export type { ChartTableButtonProps } from './ChartTableButton';
+
+export { ChartTableModal } from './ChartTableModal';
+export type { ChartTableModalProps } from './ChartTableModal';
+
+export { ChartToolbar } from './ChartToolbar';
+export type { ChartToolbarProps } from './ChartToolbar';
+
+export { useChartToolbarI18n } from './chartToolbarI18n';
+export type { ChartToolbarI18n } from './chartToolbarI18n';

package/src/components/LineChart/DataTable.tsx

@@ -15,7 +15,7 @@ export interface DataTableProps {
   data?: any;
 }
 
-export const DataTable = props => {
+export const DataTable = (props: DataTableProps) => {
   const { data } = props;
 
   return (
@@ -32,8 +32,8 @@ export const DataTable = props => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.map((dataset, i) => (
-            <TableRow key={i}>
+          {data.map((dataset: any, i: number) => (
+            <TableRow key={dataset.label ?? `row-${i}`}>
               <TableHeaderCell
                 scope={TableHeaderCellScope.row}
                 style={{

package/src/components/LineChart/LineChart.tsx

@@ -653,7 +653,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
               color={theme.iterableColors[i]}
               dataIndex={i}
               isHidden={hiddenData.includes(i)}
-              key={i}
+              key={name}
               name={name}
               onClick={handleLegendClick}
               onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/LineChart';
 export * from './components/CarbonChart';
+export * from './components/ChartTable';