feat(Charts): enable passing width and height in percentage

packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`BarChart loading placeholder 1`] = `
 <div
-  class="ChartContainer--chart- ChartContainer--chart-0-"
+  class="ChartContainer--chart-"
   style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
 >
   <svg

packages/charts/src/components/BarChart/demo.stories.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import { BarChart } from './index';
+import { Button } from '@ui5/webcomponents-react/lib/Button';
 
 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 const datasets = [
@@ -38,6 +39,50 @@ export default {
   component: BarChart
 };
 
+function Demo() {
+  const [full, setFull] = useState(true);
+
+  return (
+    <div
+      style={{
+        display: 'flex'
+      }}
+    >
+      <div
+        style={{
+          width: full ? '600px' : '300px',
+          height: full ? '450px' : '225px'
+        }}
+      >
+        <BarChart
+          labels={labels}
+          datasets={datasets}
+          height="100%"
+          width="100%"
+          getElementAtEvent={action('getElementAtEvent')}
+          loading={boolean('loading', false)}
+          noLegend={boolean('noLegend', false)}
+        />
+      </div>
+      <Button
+        onClick={() => {
+          setFull(!full);
+        }}
+      >
+        Enable Full Width
+      </Button>
+    </div>
+  );
+}
+
+export const resizeDemo = () => {
+  return <Demo />;
+};
+
+resizeDemo.story = {
+  name: 'resizeDemo'
+};
+
 export const defaultStory = () => (
   <BarChart
     labels={labels}

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

@@ -107,8 +107,8 @@ const BarChartComponent = forwardRef((props: BarChartPropTypes, ref: Ref<any>) =
     <HorizontalBar
       ref={chartRef}
       data={data}
-      height={height}
-      width={width}
+      height={height as number}
+      width={width as number}
       options={mergedOptions}
       getDatasetAtEvent={getDatasetAtEvent}
       getElementAtEvent={getElementAtEvent}

packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ColumnChart loading placeholder 1`] = `
 <div
-  class="ChartContainer--chart- ChartContainer--chart-0-"
+  class="ChartContainer--chart-"
   style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
 >
   <svg

packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`DonutChart loading placeholder 1`] = `
 <div
-  class="ChartContainer--chart- ChartContainer--chart-0-"
+  class="ChartContainer--chart-"
   style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
 >
   <svg

packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`LineChart loading placeholder 1`] = `
 <div
-  class="ChartContainer--chart- ChartContainer--chart-0-"
+  class="ChartContainer--chart-"
   style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
 >
   <svg

packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`PieChart loading placeholder 1`] = `
 <div
-  class="ChartContainer--chart- ChartContainer--chart-0-"
+  class="ChartContainer--chart-"
   style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
 >
   <svg

packages/charts/src/interfaces/ChartBaseProps.ts

@@ -6,8 +6,8 @@ export interface ChartBaseProps extends CommonProps {
   labels?: string[];
   datasets?: ChartDataSets[];
   colors?: Array<CSSProperties['color']>;
-  height?: number;
-  width?: number;
+  height?: number | string;
+  width?: number | string;
   options?: ChartOptions;
   categoryAxisFormatter?: (value: any, currentDataset?: object, currentContext?: object) => string | number;
   valueAxisFormatter?: (value: any, currentDataset?: object, currentContext?: object) => string | number;

packages/charts/src/internal/useSizeMonitor.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export const useSizeMonitor = (heightProp, widthProp, container) => {
+  const [height, setHeight] = useState(null);
+  const [width, setWidth] = useState(null);
+
+  const enableSizeMonitor = typeof heightProp === 'string' || typeof widthProp === 'string';
+
+  const recalculateSize = useCallback(() => {
+    const { height: clientRectHeight, width: clientRectWidth } = container.current.getBoundingClientRect();
+
+    setHeight(clientRectHeight);
+    setWidth(clientRectWidth);
+  }, [container.current, setHeight, setWidth]);
+
+  const observer = useRef(new ResizeObserver(recalculateSize));
+
+  // @ts-ignore
+  useEffect(() => {
+    if (enableSizeMonitor && container.current) {
+      observer.current.observe(container.current);
+
+      recalculateSize();
+      return () => {
+        observer.current.disconnect();
+      };
+    }
+  }, []);
+
+  return {
+    height: enableSizeMonitor ? height : heightProp,
+    width: enableSizeMonitor ? width : widthProp
+  };
+};

packages/charts/src/internal/withChartContainer.tsx

@@ -2,20 +2,21 @@ import React, { ComponentType, CSSProperties, forwardRef, Ref, useMemo, useRef }
 import { createUseStyles } from 'react-jss';
 import { ChartBaseProps } from '../interfaces/ChartBaseProps';
 import { getLoadingState } from './Placeholder';
+import { useSizeMonitor } from './useSizeMonitor';
 
-const chartHeight = (props) => {
-  if (props.noLegend) {
-    return `${props.height}px`;
-  }
-  return `${props.height - 60}px`;
-};
+// const calculateChartHeight = (props) => {
+//   if (props.noLegend) {
+//     return `${props.height}px`;
+//   }
+//   return `${props.height - 60}px`;
+// };
 
 const styles = {
   chart: {
-    '& svg': {
-      width: (props) => `${props.width}px`,
-      height: chartHeight
-    },
+    // '& svg': {
+    //   width: (props) => `${props.width}px`,
+    //   height: calculateChartHeight
+    // },
     '& .legend': {
       height: '55px',
       maxHeight: '55px',
@@ -33,7 +34,10 @@ const useStyles = createUseStyles(styles, { name: 'ChartContainer' });
 
 export const withChartContainer = (Component: ComponentType<any>) => {
   const ChartContainer = forwardRef((props: ChartBaseProps, ref: Ref<any>) => {
-    const { style, className, tooltip, loading, datasets, slot, noLegend, height, width, ...rest } = props;
+    const { style, className, tooltip, loading, datasets, slot, noLegend, ...rest } = props;
+
+    const outerContainer = useRef(null);
+    const legendRef = useRef(null);
 
     const classes = useStyles(props);
     let classNames = classes.chart;
@@ -45,16 +49,17 @@ export const withChartContainer = (Component: ComponentType<any>) => {
       return getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
     }, [loading, datasets, Component]);
 
-    const inlineStyle: CSSProperties = useMemo(
-      () => ({
+    const { height, width } = useSizeMonitor(props.height, props.width, outerContainer);
+
+    const inlineStyle: CSSProperties = useMemo(() => {
+      return {
         position: 'relative',
         paddingTop: '6px',
-        width: `${width}px`,
-        height: `${height}px`,
+        width: typeof props.width === 'string' ? props.width : `${width}px`,
+        height: typeof props.height === 'string' ? props.height : `${height}px`,
         ...style
-      }),
-      [width, height, style]
-    );
+      };
+    }, [props.width, props.height, width, height, style]);
 
     const chartHeight = useMemo(() => (noLegend ? height : height - 60), [noLegend, height]);
 
@@ -63,11 +68,10 @@ export const withChartContainer = (Component: ComponentType<any>) => {
       [chartHeight, width]
     );
 
-    const legendRef = useRef(null);
     return (
-      <div className={classNames} style={inlineStyle} title={tooltip} slot={slot}>
+      <div ref={outerContainer} className={classNames} style={inlineStyle} title={tooltip} slot={slot}>
         {loadingIndicator}
-        {datasets.length > 0 && (
+        {height && datasets.length > 0 && (
           <div style={chartWrapperStyles}>
             <Component
               {...rest}
@@ -86,7 +90,11 @@ export const withChartContainer = (Component: ComponentType<any>) => {
     );
   });
 
-  ChartContainer.defaultProps = Component.defaultProps;
+  ChartContainer.defaultProps = {
+    width: 350,
+    height: 350,
+    ...(Component.defaultProps || {})
+  };
   ChartContainer.displayName = Component.displayName;
 
   return ChartContainer;

packages/main/package.json

@@ -24,7 +24,8 @@
     "lodash.debounce": "^4.0.8",
     "react-table": "7.0.0-beta.0",
     "react-toastify": "^5.0.1",
-    "react-window": "^1.8.5"
+    "react-window": "^1.8.5",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "diff": "^4.0.1",

yarn.lock

@@ -2960,7 +2960,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.9.2", "@types/react@^16.9.2":
+"@types/react@*", "@types/react@^16.9.2":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
   integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==