docs(charts): improve documentation (React19, ReadMe) (SAP#6756)

Author: Lukas742

.storybook/components/StoryCarousel.tsx

@@ -0,0 +1,45 @@
+import type { CarouselDomRef, CarouselPropTypes } from '@ui5/webcomponents-react';
+import { Carousel } from '@ui5/webcomponents-react';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+
+export function StoryCarousel(props: Omit<CarouselPropTypes, 'children'> & { children: ReactNode[] }) {
+  const { children } = props;
+  const carouselRef = useRef<CarouselDomRef>(null);
+  const counter = useRef(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const cleanUpInterval = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    const carousel = carouselRef.current;
+    if (carousel && children.length) {
+      intervalRef.current = setInterval(() => {
+        counter.current++;
+        carousel.navigateTo(counter.current % children.length);
+      }, 5000);
+    }
+
+    return () => {
+      cleanUpInterval();
+    };
+  }, [children]);
+
+  return (
+    <Carousel
+      style={{ height: '500px' }}
+      arrowsPlacement="Navigation"
+      cyclic
+      ref={carouselRef}
+      onNavigate={() => {
+        cleanUpInterval();
+      }}
+      {...props}
+    />
+  );
+}

.storybook/preview-head.html

@@ -30,6 +30,7 @@
   }
 
   .sbdocs-wrapper {
+    background-color: var(--sapBackgroundColor);
     padding-top: 2rem !important;
   }
 

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 import '@ui5/webcomponents-base/dist/features/F6Navigation.js';
-import { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react';
 import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
@@ -143,6 +143,7 @@ const preview: Preview = {
           'Testing with Cypress',
           ['Setup', 'Commands', 'Queries'],
           'Charts',
+          ['Docs'],
           'Data Display',
           'Inputs',
           'Layouts & Floorplans',

docs/ReadMeCharts.mdx

@@ -0,0 +1,50 @@
+import { Footer, TableOfContent } from '@sb/components';
+import { Markdown, Meta, Story } from '@storybook/blocks';
+import ReadMe from '../packages/charts/README.md?raw';
+import { StoryCarousel } from '@sb/components/StoryCarousel.tsx';
+import { Default as BarDefault } from '../packages/charts/src/components/BarChart/BarChart.stories.tsx';
+import { Default as BulletDefault } from '../packages/charts/src/components/BulletChart/BulletChart.stories.tsx';
+import { Default as ColumnDefault } from '../packages/charts/src/components/ColumnChart/ColumnChart.stories.tsx';
+import { Default as ColumnTrendDefault } from '../packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.stories.tsx';
+import { Default as ComposedDefault } from '../packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx';
+import { Default as DonutDefault } from '../packages/charts/src/components/DonutChart/DonutChart.stories.tsx';
+import { Default as LineDefault } from '../packages/charts/src/components/LineChart/LineChart.stories.tsx';
+import { Default as PieDefault } from '../packages/charts/src/components/PieChart/PieChart.stories.tsx';
+import { Default as RadarDefault } from '../packages/charts/src/components/RadarChart/RadarChart.stories.tsx';
+import { Default as RadialDefault } from '../packages/charts/src/components/RadialChart/RadialChart.stories.tsx';
+import { Default as ScatterDefault } from '../packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx';
+import { Title } from '@ui5/webcomponents-react';
+
+<Meta title="Charts / Docs" />
+
+<TableOfContent />
+
+<Markdown>{ReadMe.split('## Documentation')[0].trim()}</Markdown>
+
+## Charts
+
+<StoryCarousel>
+  {[
+    { name: 'BarChart', component: BarDefault },
+    { name: 'BulletChart', component: BulletDefault },
+    { name: 'ColumnChart', component: ColumnDefault },
+    { name: 'ColumnChartWithTrend', component: ColumnTrendDefault },
+    { name: 'ComposedChart', component: ComposedDefault },
+    { name: 'DonutChart', component: DonutDefault },
+    { name: 'LineChart', component: LineDefault },
+    { name: 'PieChart', component: PieDefault },
+    { name: 'RadarChart', component: RadarDefault },
+    { name: 'RadialChart', component: RadialDefault },
+    { name: 'ScatterChart', component: ScatterDefault }
+    //TimelineChart doesn't render in `Story` here
+  ].map((chart) => {
+    return (
+      <div style={{ width: '100%' }} key={chart.name}>
+        <Title>{chart.name}</Title>
+        <Story of={chart.component} />
+      </div>
+    );
+  })}
+</StoryCarousel>
+
+<Footer />

packages/charts/README.md

@@ -1,16 +1,22 @@
 # @ui5/webcomponents-react-charts
 
-Chart library for ui5-webcomponents-react.
+Chart library built on top of [recharts](https://recharts.org/) for ui5-webcomponents-react.
 
-## Usage
-
-### Installation
+## Installation
 
 ```bash
 npm install @ui5/webcomponents-react-charts
 ```
 
-### Documentation
+## Accessibility
+
+Charts only offer limited accessibility support with only basic built-in features, so it’s essential to ensure your implementation meets the accessibility standards of your application.
+
+## React 19 support
+
+To use this library with React 19 you have to override your `react-is` version to match your React version!
+
+## Documentation
 
 You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
 

packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx

@@ -12,15 +12,15 @@ const meta = {
     dataset: {
       control: { disable: true }
     }
-  }
+  },
+  args: { dataset: dummyDiscreteDataSet }
 } satisfies Meta<typeof TimelineChart>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    dataset: dummyDiscreteDataSet,
     totalDuration: 36,
     isDiscrete: true,
     start: 1,

packages/charts/src/components/TimelineChart/TimelineChart.tsx

@@ -20,7 +20,7 @@ import {
 import { IllegalConnectionError, InvalidDiscreteLabelError } from './util/error.js';
 import { classNames, styleData } from './util/TimelineChart.module.css.js';
 
-interface TimelineChartProps extends CommonProps {
+export interface TimelineChartProps extends CommonProps {
   /**
    * The data is an array of objects that is displayed on the chart.
    */