From 5368ee2b60ff299fa680ca6cc603276c351e5209 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Thu, 30 Nov 2023 18:18:28 +0000
Subject: [PATCH] =?UTF-8?q?Show=20a=20message=20if=20you=20haven=E2=80=99t?=
 =?UTF-8?q?=20done=20runs=20yet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/billing/ConcurrentRunsChart.tsx       | 9 ++++++---
 .../_app.orgs.$organizationSlug.billing._index/route.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
index c87b48d08..20f6106e5 100644
--- a/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
+++ b/apps/webapp/app/components/billing/ConcurrentRunsChart.tsx
@@ -29,9 +29,12 @@ export function ConcurrentRunsChart({
   concurrentRunsLimit: number;
 }) {
   return (
-    <>
+    <div className="relative">
       <Header3 className="mb-4">Monthly concurrent Runs</Header3>
-      <ResponsiveContainer width="100%" height="100%" className="min-h-[20rem]">
+      <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        No concurrent Runs to show
+      </Paragraph>
+      <ResponsiveContainer width="100%" height="100%" className="relative min-h-[20rem]">
         <LineChart
           data={ConcurrentRunsData}
           margin={{
@@ -57,7 +60,7 @@ export function ConcurrentRunsChart({
           <Line type="stepAfter" dataKey="Concurrent Runs" stroke="#16A34A" strokeWidth={2} />
         </LineChart>
       </ResponsiveContainer>
-    </>
+    </div>
   );
 }
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
index 9a9f42206..817137e40 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
@@ -97,8 +97,11 @@ export default function Page() {
             </div>
             <UsageBar numberOfCurrentRuns={15467} tierRunLimit={10000} projectedRuns={25347} />
           </div>
-          <div className="w-full">
+          <div className="relative w-full">
             <Header3 className="mb-4">Monthly Runs</Header3>
+            <Paragraph className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+              No Runs to show
+            </Paragraph>
             <ResponsiveContainer width="100%" height={200}>
               <BarChart
                 data={loaderData.chartData}