fix(ColumnChartWithTrend): correct height calculation (#7172)

Fixes #6204

Author: Lukas742

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

@@ -85,6 +85,29 @@ describe('ColumnChartWithTrend', () => {
     cy.contains('Loading...').should('exist');
   });
 
+  it('in Grid', () => {
+    cy.mount(
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '500px',
+          gridTemplateRows: '500px'
+        }}
+      >
+        <ColumnChartWithTrend
+          dataset={complexDataSet}
+          dimensions={dimensions}
+          measures={measures}
+          style={{ height: '100%' }}
+          data-testid="ccwt"
+        />
+      </div>
+    );
+
+    cy.findByTestId('ccwt').should('be.visible').invoke('prop', 'offsetHeight').should('eq', 500);
+    cy.findByTestId('ccwt').invoke('prop', 'offsetWidth').should('eq', 500);
+  });
+
   testChartZoomingTool(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });
 
   testChartLegendConfig(ColumnChartWithTrend, { dataset: complexDataSet, dimensions, measures });

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.module.css

@@ -0,0 +1,23 @@
+.container {
+  /*ChartContainer styles*/
+  font-size: var(--sapFontSmallSize);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  width: 100%;
+  height: 400px;
+  min-height: fit-content;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.trendContainer {
+  height: auto;
+  flex: 0 0 20%;
+}
+
+.chartContainer {
+  height: auto;
+  flex-grow: 1;
+}

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
+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';
@@ -13,6 +14,7 @@ import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { defaultFormatter } from '../../internal/defaults.js';
 import { ComposedChart } from '../ComposedChart/index.js';
+import { classNames, content } from './ColumnChartWithTrend.module.css.js';
 import { ColumnChartWithTrendPlaceholder } from './Placeholder.js';
 
 interface MeasureConfig extends IChartMeasure {
@@ -111,9 +113,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     loading,
     loadingDelay,
     dataset,
-    style,
     className,
-    slot,
     onClick,
     noLegend,
     noAnimation,
@@ -122,9 +122,10 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     ChartPlaceholder,
     ...rest
   } = props;
-
   const syncId = useId();
 
+  useStylesheet(content, ColumnChartWithTrend.displayName);
+
   const chartConfig: ColumnChartWithTrendProps['chartConfig'] = {
     yAxisVisible: false,
     xAxisVisible: true,
@@ -165,25 +166,19 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
   const { chartConfig: _0, dimensions: _1, measures: _2, ...propsWithoutOmitted } = rest;
 
   return (
-    <div
-      ref={ref}
-      style={{ display: 'flex', flexDirection: 'column', height: style?.height, width: style?.width, ...style }}
-      className={className}
-      slot={slot}
-      {...propsWithoutOmitted}
-    >
+    <div ref={ref} className={clsx(className, classNames.container)} {...propsWithoutOmitted}>
       {dataset?.length !== 0 && (
         <ComposedChart
-          className={
-            typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
-          }
+          className={clsx(
+            typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined,
+            classNames.trendContainer
+          )}
           tooltipConfig={lineTooltipConfig}
           noAnimation={noAnimation}
           loading={loading}
           loadingDelay={loadingDelay}
           onClick={onClick}
           syncId={syncId}
-          style={{ ...style, height: `calc(${style?.height} * 0.2)` }}
           dataset={dataset}
           measures={lineMeasures}
           dimensions={dimensions}
@@ -201,6 +196,10 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
         />
       )}
       <ComposedChart
+        className={clsx(
+          typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined,
+          classNames.chartContainer
+        )}
         onLegendClick={onLegendClick}
         tooltipConfig={columnTooltipConfig}
         noAnimation={noAnimation}
@@ -215,10 +214,6 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
         measures={columnMeasures}
         dimensions={dimensions}
         chartConfig={chartConfig}
-        style={{ ...style, height: `calc(${style?.height} * ${dataset?.length !== 0 ? 0.8 : 1})` }}
-        className={
-          typeof onDataPointClick === 'function' || typeof onClick === 'function' ? 'has-click-handler' : undefined
-        }
       />
     </div>
   );