Update chart colors for plans with and without spend cap

studio/components/interfaces/BillingV2/Usage/Activity.tsx

@@ -12,7 +12,7 @@ import dayjs from 'dayjs'
 import Link from 'next/link'
 import { Button, IconAlertTriangle } from 'ui'
 import { USAGE_APPROACHING_THRESHOLD } from '../Billing.constants'
-import BarChart from './BarChart'
+import UsageBarChart from './UsageBarChart'
 import SectionContent from './SectionContent'
 import SectionHeader from './SectionHeader'
 import { USAGE_CATEGORIES } from './Usage.constants'
@@ -33,6 +33,8 @@ const Activity = ({ projectRef }: ActivityProps) => {
 
   const upgradeUrl = getUpgradeUrl(projectRef, subscription)
   const isFreeTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.FREE
+  const isProTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PRO
+  const exceededLimitStyle = isFreeTier || isProTier ? 'text-red-900' : 'text-amber-900'
 
   const { data: mauData, isLoading: isLoadingMauData } = useDailyStatsQuery({
     projectRef,
@@ -165,13 +167,13 @@ const Activity = ({ projectRef }: ActivityProps) => {
                   </p>
                   {usageRatio >= 1 ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
-                      <IconAlertTriangle size={14} strokeWidth={2} className="text-red-900" />
-                      <p className="text-sm text-red-900">Exceeded limit</p>
+                      <IconAlertTriangle size={14} strokeWidth={2} className={exceededLimitStyle} />
+                      <p className={`text-sm ${exceededLimitStyle}`}>Exceeded limit</p>
                     </div>
                   ) : usageRatio >= USAGE_APPROACHING_THRESHOLD ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
                       <IconAlertTriangle size={14} strokeWidth={2} className="text-amber-900" />
-                      <p className="text-sm text-red-900">Approaching limit</p>
+                      <p className="text-sm text-amber-900">Approaching limit</p>
                     </div>
                   ) : null}
                 </div>
@@ -245,7 +247,7 @@ const Activity = ({ projectRef }: ActivityProps) => {
                     <ShimmeringLoader className="w-1/2" />
                   </div>
                 ) : (
-                  <BarChart
+                  <UsageBarChart
                     hasQuota
                     name={attribute.name}
                     unit={attribute.unit}
@@ -254,6 +256,7 @@ const Activity = ({ projectRef }: ActivityProps) => {
                     yLimit={usageMeta?.limit ?? 0}
                     yLeftMargin={chartMeta[attribute.key].margin}
                     yFormatter={(value) => value.toLocaleString()}
+                    quotaWarningType={isFreeTier || isProTier ? 'danger' : 'warning'}
                   />
                 )}
               </>

studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx

@@ -13,7 +13,7 @@ import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/const
 import { formatBytes } from 'lib/helpers'
 import Link from 'next/link'
 import { Button, IconAlertTriangle } from 'ui'
-import BarChart from './BarChart'
+import UsageBarChart from './UsageBarChart'
 import SectionContent from './SectionContent'
 import SectionHeader from './SectionHeader'
 import { USAGE_CATEGORIES } from './Usage.constants'
@@ -33,6 +33,8 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => {
 
   const upgradeUrl = getUpgradeUrl(projectRef, subscription)
   const isFreeTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.FREE
+  const isProTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PRO
+  const exceededLimitStyle = isFreeTier || isProTier ? 'text-red-900' : 'text-amber-900'
 
   const { data: dbEgressData, isLoading: isLoadingDbEgressData } = useDailyStatsQuery({
     projectRef,
@@ -100,13 +102,13 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => {
                   </p>
                   {usageRatio >= 1 ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
-                      <IconAlertTriangle size={14} strokeWidth={2} className="text-red-900" />
-                      <p className="text-sm text-red-900">Exceeded limit</p>
+                      <IconAlertTriangle size={14} strokeWidth={2} className={exceededLimitStyle} />
+                      <p className={`text-sm ${exceededLimitStyle}`}>Exceeded limit</p>
                     </div>
                   ) : usageRatio >= USAGE_APPROACHING_THRESHOLD ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
                       <IconAlertTriangle size={14} strokeWidth={2} className="text-amber-900" />
-                      <p className="text-sm text-red-900">Approaching limit</p>
+                      <p className="text-sm text-amber-900">Approaching limit</p>
                     </div>
                   ) : null}
                 </div>
@@ -169,7 +171,7 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => {
                 <ShimmeringLoader className="w-1/2" />
               </div>
             ) : (
-              <BarChart
+              <UsageBarChart
                 hasQuota
                 name={attribute.name}
                 unit={attribute.unit}
@@ -178,6 +180,7 @@ const Bandwidth = ({ projectRef }: BandwidthProps) => {
                 yLimit={usageMeta?.limit ?? 0}
                 yLeftMargin={chartMeta[attribute.key].margin}
                 yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
+                quotaWarningType={isFreeTier || isProTier ? 'danger' : 'warning'}
               />
             )}
           </SectionContent>

studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx

@@ -2,7 +2,7 @@ import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useInfraMonitoringQuery } from 'data/analytics/infra-monitoring-query'
 import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import dayjs from 'dayjs'
-import BarChart from './BarChart'
+import UsageBarChart from './UsageBarChart'
 import SectionContent from './SectionContent'
 import SectionHeader from './SectionHeader'
 import { USAGE_CATEGORIES } from './Usage.constants'
@@ -146,7 +146,7 @@ const Infrastructure = ({ projectRef }: InfrastructureProps) => {
                 <ShimmeringLoader className="w-1/2" />
               </div>
             ) : (
-              <BarChart
+              <UsageBarChart
                 name={attribute.name}
                 unit={attribute.unit}
                 attribute={attribute.attribute}

studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx

@@ -14,11 +14,11 @@ import { formatBytes } from 'lib/helpers'
 import Link from 'next/link'
 import { Badge, Button, IconAlertTriangle, IconExternalLink } from 'ui'
 import { USAGE_APPROACHING_THRESHOLD } from '../Billing.constants'
-import BarChart from './BarChart'
+import UsageBarChart from './UsageBarChart'
 import SectionContent from './SectionContent'
 import SectionHeader from './SectionHeader'
 import { USAGE_CATEGORIES } from './Usage.constants'
-import { getUpgradeUrl } from './Usage.utils'
+import { generateUsageData, getUpgradeUrl } from './Usage.utils'
 
 export interface SizeAndCountsProps {
   projectRef: string
@@ -34,6 +34,8 @@ const SizeAndCounts = ({ projectRef }: SizeAndCountsProps) => {
 
   const upgradeUrl = getUpgradeUrl(projectRef, subscription)
   const isFreeTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.FREE
+  const isProTier = subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PRO
+  const exceededLimitStyle = isFreeTier || isProTier ? 'text-red-900' : 'text-amber-900'
 
   const { data: dbSizeData, isLoading: isLoadingDbSizeData } = useDailyStatsQuery({
     projectRef,
@@ -115,13 +117,13 @@ const SizeAndCounts = ({ projectRef }: SizeAndCountsProps) => {
                   </p>
                   {usageRatio >= 1 ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
-                      <IconAlertTriangle size={14} strokeWidth={2} className="text-red-900" />
-                      <p className="text-sm text-red-900">Exceeded limit</p>
+                      <IconAlertTriangle size={14} strokeWidth={2} className={exceededLimitStyle} />
+                      <p className={`text-sm ${exceededLimitStyle}`}>Exceeded limit</p>
                     </div>
                   ) : usageRatio >= USAGE_APPROACHING_THRESHOLD ? (
                     <div className="flex items-center space-x-2 min-w-[115px]">
                       <IconAlertTriangle size={14} strokeWidth={2} className="text-amber-900" />
-                      <p className="text-sm text-red-900">Approaching limit</p>
+                      <p className="text-sm text-amber-900">Approaching limit</p>
                     </div>
                   ) : null}
                 </div>
@@ -219,7 +221,7 @@ const SizeAndCounts = ({ projectRef }: SizeAndCountsProps) => {
                 <ShimmeringLoader className="w-1/2" />
               </div>
             ) : (
-              <BarChart
+              <UsageBarChart
                 hasQuota
                 name={attribute.name}
                 unit={attribute.unit}
@@ -232,11 +234,22 @@ const SizeAndCounts = ({ projectRef }: SizeAndCountsProps) => {
                     ? formatBytes(value, 1, 'GB').replace(/\s/g, '')
                     : value.toLocaleString()
                 }
+                quotaWarningType={isFreeTier || isProTier ? 'danger' : 'warning'}
               />
             )}
           </SectionContent>
         )
       })}
+      <UsageBarChart
+        hasQuota
+        name={'Sample'}
+        unit={'percentage'}
+        attribute={'sample_data'}
+        data={generateUsageData('sample_data', 30)}
+        yLimit={50}
+        yLeftMargin={0}
+        quotaWarningType={isFreeTier || isProTier ? 'danger' : 'warning'}
+      />
     </>
   )
 }

studio/components/interfaces/BillingV2/Usage/Usage.constants.ts

@@ -128,8 +128,9 @@ export const USAGE_CATEGORIES: {
         name: 'Monthly active users',
         unit: 'absolute',
         description:
-          'The amount of distinct users requesting your API throughout the billing period. Resets at the beginning of every billing period.',
-        chartDescription: 'The data shown here is refreshed over a period of 24 hours.',
+          'The amount of distinct users requesting your API throughout the billing period.',
+        chartDescription:
+          'The data shown here is refreshed over a period of 24 hours and resets at the beginning of every billing period.',
       },
       {
         key: 'monthly_active_sso_users',
@@ -137,8 +138,9 @@ export const USAGE_CATEGORIES: {
         name: 'Monthly active single sign-on users',
         unit: 'absolute',
         description:
-          'The amount of distinct Single Sign-On users requesting your API throughout the billing period. Resets at the beginning of every billing period.',
-        chartDescription: 'The data shown here is refreshed over a period of 24 hours.',
+          'The amount of distinct Single Sign-On users requesting your API throughout the billing period.',
+        chartDescription:
+          'The data shown here is refreshed over a period of 24 hours and resets at the beginning of every billing period.',
       },
       {
         key: 'storage_image_render_count',

studio/components/interfaces/BillingV2/Usage/UsageBarChart.tsx

@@ -16,7 +16,7 @@ import dayjs from 'dayjs'
 // [Joshen] This BarChart is specifically for usage, hence not a reusable component, and not
 // replacing the existing BarChart in ui/Charts
 
-export interface BarChartProps {
+export interface UsageBarChartProps {
   data: DataPoint[]
   name: string // Used within the tooltip
   attribute: string
@@ -25,9 +25,10 @@ export interface BarChartProps {
   yLimit?: number
   yLeftMargin?: number
   yFormatter?: (value: number | string) => string
+  quotaWarningType?: 'warning' | 'danger'
 }
 
-const BarChart = ({
+const UsageBarChart = ({
   data,
   name,
   attribute,
@@ -36,9 +37,11 @@ const BarChart = ({
   yLimit,
   yLeftMargin = 10,
   yFormatter,
-}: BarChartProps) => {
+  quotaWarningType = 'warning',
+}: UsageBarChartProps) => {
   const yMin = 0 // We can consider passing this as a prop if there's a use case in the future
   const yMax = (yLimit ?? 0) * Y_DOMAIN_CEILING_MULTIPLIER
+  const quotaWarningClass = quotaWarningType === 'warning' ? 'fill-amber-900' : 'fill-red-900'
 
   const yDomain = [yMin, yLimit ?? 0]
   const ticks =
@@ -101,7 +104,7 @@ const BarChart = ({
                   key={`cell-${attribute}-${idx}`}
                   className={
                     yLimit !== undefined && Number(entry[attribute]) >= yLimit
-                      ? 'fill-amber-900'
+                      ? quotaWarningClass
                       : 'fill-scale-1200'
                   }
                 />
@@ -131,4 +134,4 @@ const BarChart = ({
   )
 }
 
-export default BarChart
+export default UsageBarChart