From 109bbbcb7a7a5a6db30897e0bc0036ee45f8629a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 6 Jun 2023 17:15:47 +0200
Subject: [PATCH] daily stats chart

---
 .../components/interfaces/BillingV2/Usage/Usage.tsx | 13 ++-----------
 .../interfaces/BillingV2/Usage/UsageSection.tsx     |  9 +++++----
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
index 3ac504bc2d1..ff7b59efb16 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
@@ -49,21 +49,12 @@ const Usage = () => {
   const dailyStatsEndDate = useMemo(() => {
     // If end date is in future, set end date to now
     if (endDate && dayjs(endDate).isAfter(dayjs())) {
-      const yesterday = dayjs(new Date()).subtract(1, 'day')
-
-      /**
-       * Currently, daily-stats data is only available a day later, so we'll use yesterday as end date, as otherwise the current day would just show up with "0" values
-       *
-       * We are actively working on removing this restriction on the data-eng/LF side and can remove this workaround once that's done
-       */
-      const newEndDate = yesterday.isAfter(dayjs(startDate)) ? yesterday : new Date()
-
       // LF seems to have an issue with the milliseconds, causes infinite loading sometimes
-      return newEndDate.toISOString().slice(0, -5) + 'Z'
+      return new Date().toISOString().slice(0, -5) + 'Z'
     } else if (endDate) {
       return endDate
     }
-  }, [endDate, startDate])
+  }, [endDate])
 
   const { data: ioBudgetData } = useInfraMonitoringQuery({
     projectRef: selectedProjectRef,
diff --git a/studio/components/interfaces/BillingV2/Usage/UsageSection.tsx b/studio/components/interfaces/BillingV2/Usage/UsageSection.tsx
index db512cd7ad2..9ef58b96335 100644
--- a/studio/components/interfaces/BillingV2/Usage/UsageSection.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/UsageSection.tsx
@@ -8,7 +8,7 @@ import {
 } from 'data/usage/project-usage-query'
 import { DataPoint } from 'data/analytics/constants'
 import SectionContent from './SectionContent'
-import { Button, IconAlertTriangle } from 'ui'
+import { Button, IconAlertTriangle, IconBarChart2 } from 'ui'
 import { USAGE_APPROACHING_THRESHOLD } from '../Billing.constants'
 import Link from 'next/link'
 import SparkBar from 'components/ui/SparkBar'
@@ -175,10 +175,11 @@ const UsageSection = ({ projectRef, categoryKey, chartMeta, subscription }: Usag
               ) : (
                 <Panel>
                   <Panel.Content>
-                    <div className="flex flex-col items-center justify-center space-y-2">
-                      <p>No data</p>
+                    <div className="flex flex-col items-center justify-center">
+                      <IconBarChart2 className="text-scale-1100 mb-2" />
+                      <p className='text-sm'>No data in period</p>
                       <p className="text-sm text-scale-1000">
-                        No {notAllValuesZero ? 'data' : 'usage'} in period
+                        May take up to 24 hours to show
                       </p>
                     </div>
                   </Panel.Content>