diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx index 592c5eb10c2..138a54f501e 100644 --- a/packages/charts/src/internal/ChartContainer.tsx +++ b/packages/charts/src/internal/ChartContainer.tsx @@ -2,8 +2,9 @@ import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createC import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps'; +import { Label } from '@ui5/webcomponents-react/lib/Label'; import { Loader } from '@ui5/webcomponents-react/lib/Loader'; -import React, { ComponentType, CSSProperties, FC, forwardRef, ReactElement, Ref, useMemo } from 'react'; +import React, { ComponentType, CSSProperties, FC, forwardRef, ReactElement, ReactNode, Ref, useMemo } from 'react'; import { ResponsiveContainer } from 'recharts'; export interface ContainerProps extends CommonProps { @@ -41,6 +42,25 @@ const chartContainerStyles = { const useStyles = createComponentStyles(chartContainerStyles, { name: 'ChartContainer' }); +class ErrorBoundary extends React.Component<{ children: ReactNode }, { errorCount: number }> { + state = { + errorCount: 0 + }; + + componentDidCatch() { + if (this.state.errorCount < 3) { + this.setState((old) => ({ ...old, errorCount: old.errorCount + 1 })); + } + } + + render() { + if (this.state.errorCount >= 3) { + return ; + } + return this.props.children; + } +} + const ChartContainer: FC = forwardRef((props: ContainerProps, ref: Ref) => { const { Placeholder, loading = false, dataset, style, className, tooltip, slot, children, resizeDebounce } = props; useStyles(); @@ -65,9 +85,11 @@ const ChartContainer: FC = forwardRef((props: ContainerProps, re <> {loading && } { - - {children} - + + + {children} + + } ) : (