Merge branch 'main' into docs/storybook-v9

Author: Lukas742

.gitignore

@@ -26,6 +26,8 @@ packages/main/scripts/wrapperGeneration/json
 packages/main/tmp
 packages/*/src/generated/
 
+cypress/downloads
+
 .nx
 
 debug-storybook.log

README.md

@@ -80,9 +80,9 @@ To consume `ui5-webcomponents-react`, you need to install the npm modules and re
 npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
 ```
 
-## Ongoing Support for Version 1.x
+## End of Support for Version 1.x
 
-We will continue to support version 1.x until end of June 2025, focusing on bug fixes to ensure continuity for our existing users.
+The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs).
 
 <!-- *********************************************************************** -->
 

docs/Welcome.mdx

@@ -29,11 +29,9 @@ In addition to that, UI5 Web Components for React is providing complex component
 - [Node.js](https://nodejs.org/) (**LTS version**)
 - If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
 
-## Ongoing Support for Version 1.x
+## End of Support for Version 1.x
 
-We will continue to support version 1.x until **end of June 2025**, focusing on bug fixes to ensure continuity for our existing users.
-
-[V1 Release Documentation](https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/getting-started--docs)
+The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](?path=/docs/migration-guide--docs).
 
 ## Getting Started
 

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.cy.tsx

@@ -28,9 +28,9 @@ describe('ColumnChartWithTrend', () => {
     cy.mount(<ColumnChartWithTrend dataset={complexDataSet} dimensions={dimensions} measures={measures} />);
     cy.get('.recharts-responsive-container').should('be.visible');
     cy.get('.recharts-bar').should('have.length', 1);
-    cy.get('.recharts-line').should('have.length', 2); // the column chart includes an empty line
+    cy.get('.recharts-line').should('have.length', 1);
     cy.get('.recharts-bar-rectangles').should('have.length', 1);
-    cy.get('.recharts-line-curve').should('have.length', 2); // the column chart includes an empty line
+    cy.get('.recharts-line-curve').should('have.length', 1);
   });
 
   it('click handlers', () => {
@@ -58,10 +58,9 @@ describe('ColumnChartWithTrend', () => {
           detail: Cypress.sinon.match({
             payload: {
               name: 'January',
-              users: 1,
+              users: 100,
               sessions: 300,
               volume: 756,
-              __users: 100,
             },
           }),
         }),

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.mdx

@@ -2,6 +2,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './ColumnChartWithTrend.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
+import TooltipStory from '../../resources/TooltipConfig.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -17,6 +18,8 @@ import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Canvas of={ComponentStories.LoadingPlaceholder} />
 
+<TooltipStory of={ComponentStories.WithCustomTooltipConfig} additionalDescription={<><b>Note: </b>The <code>tooltipConfig</code> is used for both LineChart and ColumnChart.</>} />
+
 <LegendStory of={ComponentStories.WithCustomLegendConfig} />
 
 <br />

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { complexDataSet, legendConfig } from '../../resources/DemoProps.js';
+import { complexDataSet, legendConfig, tooltipConfig } from '../../resources/DemoProps.js';
 import { ColumnChartWithTrend } from './ColumnChartWithTrend.js';
 
 const meta = {
@@ -18,7 +18,6 @@ const meta = {
       {
         accessor: 'users',
         label: 'Users',
-        formatter: (val) => val.toLocaleString(),
         type: 'line',
       },
       {
@@ -44,3 +43,7 @@ export const LoadingPlaceholder: Story = {
 export const WithCustomLegendConfig: Story = {
   args: legendConfig,
 };
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig,
+};

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -4,7 +4,8 @@ import { ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base'
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef, useId } from 'react';
-import type { TooltipProps, YAxisProps } from 'recharts';
+import type { DefaultLegendContentProps, YAxisProps } from 'recharts';
+import { DefaultLegendContent } from 'recharts';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { usePrepareTrendMeasures } from '../../hooks/usePrepareTrendMeasures.js';
@@ -51,10 +52,7 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface ColumnChartWithTrendProps
-  extends Omit<
-    IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>,
-    'syncId' | 'tooltipConfig'
-  > {
+  extends Omit<IChartBaseProps<Omit<ICartesianChartConfig, 'secondYAxis' | 'secondYAxisConfig'>>, 'syncId'> {
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -101,8 +99,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const lineTooltipConfig = { wrapperStyle: { visibility: 'hidden' } } as TooltipProps<any, any>;
-
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 type AvailableChartTypes = 'line' | 'bar' | string;
 /**
@@ -120,12 +116,12 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     onDataPointClick,
     onLegendClick,
     ChartPlaceholder,
+    tooltipConfig,
     ...rest
   } = props;
   const syncId = useId();
 
   useStylesheet(content, ColumnChartWithTrend.displayName);
-
   const chartConfig: ColumnChartWithTrendProps['chartConfig'] = {
     yAxisVisible: false,
     xAxisVisible: true,
@@ -147,21 +143,8 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     measureDefaults,
   );
 
-  const { lineMeasures, columnMeasures, columnDataset } = usePrepareTrendMeasures(measures, dataset);
-  const [yAxisWidth] = useLongestYAxisLabel(columnDataset, columnMeasures, chartConfig.legendPosition);
-
-  const columnTooltipConfig = {
-    formatter: (value, name, tooltipProps) => {
-      const line = lineMeasures.find(
-        (currLine) => currLine.type === 'line' && currLine.accessor === tooltipProps.dataKey,
-      );
-      if (line) {
-        return line.formatter(tooltipProps.payload[`__${line.accessor}`]);
-      }
-      const column = columnMeasures.find((currLine) => currLine.accessor === tooltipProps.dataKey);
-      return column.formatter(value, name, tooltipProps);
-    },
-  } as TooltipProps<any, any>;
+  const { lineMeasures, columnMeasures } = usePrepareTrendMeasures(measures);
+  const [yAxisWidth] = useLongestYAxisLabel(dataset, columnMeasures, chartConfig.legendPosition);
 
   const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;
 
@@ -173,7 +156,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
             typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined,
             classNames.trendContainer,
           )}
-          tooltipConfig={lineTooltipConfig}
+          tooltipConfig={{ ...tooltipConfig, wrapperStyle: { visibility: 'hidden' } }}
           noAnimation={noAnimation}
           loading={loading}
           loadingDelay={loadingDelay}
@@ -201,7 +184,10 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
           classNames.chartContainer,
         )}
         onLegendClick={onLegendClick}
-        tooltipConfig={columnTooltipConfig}
+        tooltipConfig={{
+          includeHidden: true,
+          ...tooltipConfig,
+        }}
         noAnimation={noAnimation}
         noLegend={noLegend}
         loading={loading}
@@ -210,10 +196,13 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
         onDataPointClick={onDataPointClick}
         syncId={syncId}
         ChartPlaceholder={ChartPlaceholder ?? ColumnChartWithTrendPlaceholder}
-        dataset={columnDataset}
+        dataset={dataset}
         measures={columnMeasures}
         dimensions={dimensions}
-        chartConfig={chartConfig}
+        chartConfig={{
+          ...chartConfig,
+          legendConfig: { ...chartConfig?.legendConfig, content: <DefaultLegendContentWithoutInactive /> },
+        }}
       />
     </div>
   );
@@ -222,3 +211,17 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
 ColumnChartWithTrend.displayName = 'ColumnChartWithTrend';
 
 export { ColumnChartWithTrend };
+
+/**
+ * Helper component to always keep legend items interactive.
+ * This is required, as otherwise internally hidden measures are greyed out in the Legend.
+ */
+const DefaultLegendContentWithoutInactive = (props: DefaultLegendContentProps) => {
+  const updatedPayload = props.payload.map((item) => {
+    return { ...item, inactive: undefined };
+  });
+  // @ts-expect-error: Type doesn't seem to allow class components which `DefaultLegendContent` is.
+  return <DefaultLegendContent {...props} payload={updatedPayload} />;
+};
+
+DefaultLegendContentWithoutInactive.displayName = 'DefaultLegendContentWithoutInactive';

packages/charts/src/components/ComposedChart/index.tsx

@@ -453,6 +453,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               chartElementProps.strokeWidth = element.width;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = element.showDot ?? !isBigDataSet;
+              chartElementProps.hide = element.hide;
               break;
             case 'bar':
               chartElementProps.hide = element.hide;

packages/charts/src/hooks/useLabelFormatter.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
-import type { DefaultTooltipContentProps } from 'recharts';
+import type { TooltipProps } from 'recharts';
 import type { NameType, TooltipLabelFormatter, ValueType } from '../interfaces/index.js';
 
 export const useLabelFormatter = (formatter: TooltipLabelFormatter) => {
   return useCallback<TooltipLabelFormatter>(
-    (label: DefaultTooltipContentProps<ValueType, NameType>['label'], payload) => {
+    (label: TooltipProps<ValueType, NameType>['label'], payload) => {
       if (typeof formatter === 'function') {
         return formatter(label, payload);
       }

packages/charts/src/hooks/usePrepareTrendMeasures.ts

@@ -1,17 +1,15 @@
 import { useMemo } from 'react';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { defaultFormatter } from '../internal/defaults.js';
 
 interface ITrendChartMeasure extends IChartMeasure {
   type: 'line' | 'bar';
 }
 
-export const usePrepareTrendMeasures = (measures: ITrendChartMeasure[], dataset: Record<string, unknown>[]) =>
+export const usePrepareTrendMeasures = (measures: ITrendChartMeasure[]) =>
   useMemo(() => {
     const lineMeasures = [];
     const columnMeasures = [];
-    const columnDataset = [];
 
     measures?.forEach((measure, index) => {
       if (measure.type === 'bar') {
@@ -39,28 +37,13 @@ export const usePrepareTrendMeasures = (measures: ITrendChartMeasure[], dataset:
         columnMeasures.push({
           ...measure,
           opacity: 0,
+          hide: true,
           hideDataLabel: true,
           showDot: false,
           formatter: defaultFormatter,
         });
       }
     });
 
-    dataset?.forEach((data) => {
-      const reducedLineValues = {};
-
-      lineMeasures.forEach((line) => {
-        if (line.type === 'line') {
-          reducedLineValues[`__${line.accessor}`] = getValueByDataKey(data, line.accessor);
-          reducedLineValues[line.accessor] = 1;
-        }
-      });
-
-      columnDataset.push({
-        ...data,
-        ...reducedLineValues,
-      });
-    });
-
-    return { lineMeasures, columnMeasures, columnDataset };
-  }, [measures, dataset]);
+    return { lineMeasures, columnMeasures };
+  }, [measures]);