fix(Charts): dynamic chart size (#154)

Author: vbersch

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

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

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

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

packages/charts/src/interfaces/ChartBaseProps.ts

@@ -8,6 +8,8 @@ export interface ChartBaseProps extends CommonProps {
   colors?: Array<CSSProperties['color']>;
   height?: number | string;
   width?: number | string;
+  minHeight?: number;
+  minWidth?: number;
   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

@@ -1,18 +1,33 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export const useSizeMonitor = (heightProp, widthProp, container) => {
+export const useSizeMonitor = (props, container) => {
+  const { height: heightProp, width: widthProp, minHeight, minWidth } = props;
   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 recalculateSize = useCallback(
+    (e?) => {
+      let clientRectHeight;
+      let clientRectWidth;
+
+      if (!e || !e[0] || !e[0].contentRect) {
+        clientRectHeight = container.current.getBoundingClientRect().height;
+        clientRectWidth = container.current.getBoundingClientRect().width;
+      } else {
+        clientRectHeight = e[0].contentRect.height;
+        clientRectWidth = e[0].contentRect.width;
+      }
+
+      // console.log(props);
+
+      setHeight(Math.max(minHeight, clientRectHeight));
+      setWidth(Math.max(minWidth, clientRectWidth));
+    },
+    [container.current, setHeight, setWidth]
+  );
 
   const observer = useRef(new ResizeObserver(recalculateSize));
 

packages/charts/src/internal/withChartContainer.tsx

@@ -4,19 +4,15 @@ import { ChartBaseProps } from '../interfaces/ChartBaseProps';
 import { getLoadingState } from './Placeholder';
 import { useSizeMonitor } from './useSizeMonitor';
 
-// const calculateChartHeight = (props) => {
-//   if (props.noLegend) {
-//     return `${props.height}px`;
-//   }
-//   return `${props.height - 60}px`;
-// };
+const calculateChartHeight = (props) => {
+  if (props.noLegend) {
+    return typeof props.height === 'string' ? props.height : `${props.height}px`;
+  }
+  return typeof props.height === 'string' ? `calc(${props.height} - 60px)` : `${props.height - 60}px`;
+};
 
 const styles = {
   chart: {
-    // '& svg': {
-    //   width: (props) => `${props.width}px`,
-    //   height: calculateChartHeight
-    // },
     '& .legend': {
       height: '55px',
       maxHeight: '55px',
@@ -26,6 +22,10 @@ const styles = {
       flexWrap: 'wrap',
       padding: '0 1rem',
       boxSizing: 'border-box'
+    },
+    '& svg': {
+      width: (props) => `${props.width}px`,
+      height: calculateChartHeight
     }
   }
 };
@@ -49,7 +49,7 @@ export const withChartContainer = (Component: ComponentType<any>) => {
       return getLoadingState(loading, datasets, (Component as any).LoadingPlaceholder);
     }, [loading, datasets, Component]);
 
-    const { height, width } = useSizeMonitor(props.height, props.width, outerContainer);
+    const { height, width } = useSizeMonitor(props, outerContainer);
 
     const inlineStyle: CSSProperties = useMemo(() => {
       return {
@@ -90,11 +90,7 @@ export const withChartContainer = (Component: ComponentType<any>) => {
     );
   });
 
-  ChartContainer.defaultProps = {
-    width: 350,
-    height: 350,
-    ...(Component.defaultProps || {})
-  };
+  ChartContainer.defaultProps = Component.defaultProps;
   ChartContainer.displayName = Component.displayName;
 
   return ChartContainer;

packages/charts/src/util/ChartBaseDefaultProps.ts

@@ -5,6 +5,8 @@ export const ChartBaseDefaultProps: ChartBaseProps = {
   datasets: [],
   colors: [],
   height: 300,
+  minHeight: 300,
+  minWidth: 300,
   width: 300,
   options: {},
   categoryAxisFormatter: (d) => d,