From e8dfde91dc0a052e03460ca7320127d7433a3aaa Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <isaiah7hamilton@gmail.com>
Date: Wed, 16 Feb 2022 22:46:08 -0500
Subject: [PATCH] fix: ResponsiveContainer warning

---
 .../to-be-cleaned/Charts/ChartRenderer.tsx        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx b/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
index 739088ee430..f1deaaefcfd 100644
--- a/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
+++ b/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
@@ -200,6 +200,9 @@ export function BarChart({
 
   const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
 
+  // For future reference: https://github.com/supabase/supabase/pull/5311#discussion_r800852828
+  const chartHeight = minimalChart ? 96 : 160
+
   return (
     <Loading active={!data}>
       <div className={className}>
@@ -214,10 +217,10 @@ export function BarChart({
           customDateFormat={customDateFormat}
           displayDateInUtc={displayDateInUtc}
         />
-        <div style={{ width: '100%', height: minimalChart ? '96px' : '160px' }}>
+        <div style={{ width: '100%', height: `${chartHeight}px` }}>
           {hasData ? (
             <>
-              <ResponsiveContainer>
+              <ResponsiveContainer width="100%" height={chartHeight}>
                 <RechartBarChart
                   data={data}
                   margin={{
@@ -270,7 +273,6 @@ export function BarChart({
                       />
                     ))}
                   </Bar>
-                </Bar>
                 </RechartBarChart>
               </ResponsiveContainer>
               {data && (
@@ -326,6 +328,9 @@ export function AreaChart({
     setMouseLeave(true)
   }
 
+  // For future reference: https://github.com/supabase/supabase/pull/5311#discussion_r800852828
+  const chartHeight = 160
+
   return (
     <Loading active={!data}>
       <Header
@@ -340,12 +345,12 @@ export function AreaChart({
       <div
         style={{
           width: '100%',
-          height: '160px',
+          height: `${chartHeight}px`,
         }}
       >
         {hasData ? (
           <>
-            <ResponsiveContainer width="100%" height={160}>
+            <ResponsiveContainer width="100%" height={chartHeight}>
               <RechartAreaChart
                 data={data}
                 margin={{