refactor(charts): remove @ui5/webcomponents-react peer dep

Author: Lukas742

packages/charts/package.json

@@ -131,7 +131,6 @@
     "recharts": "2.15.4"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.21.0",
     "@ui5/webcomponents-react-base": "~2.21.0",
     "react": "^18 || ^19"
   },

packages/charts/src/internal/ChartBusyIndicator.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { classNames } from './ChartContainer.module.css.js';
+
+interface ChartBusyIndicatorProps {
+  delay: number;
+  className?: string;
+}
+
+function ChartBusyIndicator({ delay, className }: ChartBusyIndicatorProps) {
+  const [visible, setVisible] = useState(delay <= 0);
+
+  useEffect(() => {
+    if (delay <= 0) {
+      return;
+    }
+    const id = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(id);
+  }, [delay]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={className}
+      role="progressbar"
+      aria-label="Please wait"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuetext="Busy"
+    >
+      <div className={classNames.busyIndicatorCircles}>
+        <span className={`${classNames.busyIndicatorCircle} ${classNames.circleAnimation0}`} />
+        <span className={`${classNames.busyIndicatorCircle} ${classNames.circleAnimation1}`} />
+        <span className={`${classNames.busyIndicatorCircle} ${classNames.circleAnimation2}`} />
+      </div>
+    </div>
+  );
+}
+
+export { ChartBusyIndicator };

packages/charts/src/internal/ChartContainer.module.css

@@ -8,12 +8,62 @@
   position: relative;
 }
 
+.errorMessage {
+  font-family: var(--sapFontFamily);
+  font-size: var(--sapFontSize);
+  color: var(--sapContent_LabelColor);
+}
+
 .busyIndicator {
   background-color: color-mix(in srgb, var(--sapBackgroundColor) 45%, transparent);
   position: absolute;
   inset: 0;
   height: 100%;
   z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.busyIndicatorCircles {
+  line-height: 0;
+}
+
+.busyIndicatorCircle {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background-color: var(--sapContent_BusyColor);
+}
+
+.busyIndicatorCircle:not(:last-child) {
+  margin-inline-end: 0.1875rem;
+}
+
+.circleAnimation0 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circleAnimation1 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+  animation-delay: 0.2s;
+}
+
+.circleAnimation2 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+  animation-delay: 0.4s;
+}
+
+@keyframes grow {
+  0%,
+  50%,
+  100% {
+    transform: scale(0.5);
+  }
+  25% {
+    transform: scale(1);
+  }
 }
 
 :global(.has-click-handler) {

packages/charts/src/internal/ChartContainer.tsx

@@ -1,26 +1,12 @@
-import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator';
-import { Label } from '@ui5/webcomponents-react/Label';
 import { useStylesheet } from '@ui5/webcomponents-react-base/internal/hooks';
 import type { CommonProps } from '@ui5/webcomponents-react-base/internal/types';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/internal/utils';
 import { clsx } from 'clsx';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';
 import { ResponsiveContainer } from 'recharts';
+import { ChartBusyIndicator } from './ChartBusyIndicator.js';
 import { classNames, styleData } from './ChartContainer.module.css.js';
 
-addCustomCSSWithScoping(
-  'ui5-busy-indicator',
-  `
-:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area{
-    background:unset;
-},
-:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
-    border-radius: 0;
-}
-`,
-);
-
 export interface ContainerProps extends CommonProps {
   children: ReactElement;
   Placeholder: ComponentType;
@@ -43,7 +29,7 @@ class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: num
 
   render() {
     if (this.state.errorCount >= 3) {
-      return <Label>Sorry, something went wrong while rendering this chart!</Label>;
+      return <span className={classNames.errorMessage}>Sorry, something went wrong while rendering this chart!</span>;
     }
     return this.props.children;
   }
@@ -58,7 +44,7 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
     slot,
     children,
     resizeDebounce,
-    loadingDelay,
+    loadingDelay = 1000,
     ...rest
   } = props;
 
@@ -68,14 +54,7 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
     <div ref={ref} className={clsx(classNames.container, className)} slot={slot} {...rest}>
       {dataset?.length > 0 ? (
         <>
-          {loading && (
-            <BusyIndicator
-              active
-              delay={loadingDelay}
-              className={classNames.busyIndicator}
-              data-component-name="ChartContainerBusyIndicator"
-            />
-          )}
+          {loading && <ChartBusyIndicator delay={loadingDelay} className={classNames.busyIndicator} />}
           <ErrorBoundary>
             <ResponsiveContainer debounce={resizeDebounce}>{children}</ResponsiveContainer>
           </ErrorBoundary>