diff --git a/frontend/src/scenes/billing/BillingGauge.tsx b/frontend/src/scenes/billing/BillingGauge.tsx
index 5d9b563e0ec84..2ddff49a1dade 100644
--- a/frontend/src/scenes/billing/BillingGauge.tsx
+++ b/frontend/src/scenes/billing/BillingGauge.tsx
@@ -7,7 +7,7 @@ import { useMemo } from 'react'
import { BillingProductV2Type } from '~/types'
-import { BillingGaugeItemKind, BillingGaugeItemType } from './types'
+import { BillingGaugeItemType } from './types'
/*
* Billing Gauge Item: Individual bars on the billing gauge.
@@ -18,47 +18,8 @@ type BillingGaugeItemProps = {
isWithinUsageLimit: boolean
}
-const getBgColorClassForItem = (item: BillingGaugeItemType, isWithinUsageLimit: boolean): string => {
- if (item.type === BillingGaugeItemKind.FreeTier) {
- return 'bg-success-light'
- } else if (item.type === BillingGaugeItemKind.CurrentUsage) {
- return isWithinUsageLimit ? 'bg-success' : 'bg-danger'
- } else if (item.type === BillingGaugeItemKind.ProjectedUsage) {
- return 'bg-border'
- } else if (item.type === BillingGaugeItemKind.BillingLimit) {
- return 'bg-primary-alt-light'
- } else {
- throw new Error(`Unknown type: ${item.type}`)
- }
-}
-
const BillingGaugeItem = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => {
const width = `${(item.value / maxValue) * 100}%`
- const bgColorClass = getBgColorClassForItem(item, isWithinUsageLimit)
-
- return (
-
)
}
-
-export function BillingGauge3000({ items, product }: BillingGaugeProps): JSX.Element {
- const maxValue = useMemo(() => {
- return Math.max(100, ...items.map((item) => item.value)) * 1.3
- }, [items])
- const isWithinUsageLimit = product.percentage_usage <= 1
-
- return (
-
- {items.map((item, i) => (
-
- ))}
-
- )
-}
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index d4a5a76604b1b..a7b71fabc5d68 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -23,7 +23,7 @@ import { getProductIcon } from 'scenes/products/Products'
import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
-import { BillingGauge3000 } from './BillingGauge'
+import { BillingGauge } from './BillingGauge'
import { BillingLimitInput } from './BillingLimitInput'
import { billingLogic } from './billingLogic'
import { billingProductLogic } from './billingProductLogic'
@@ -193,7 +193,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
const {
customLimitUsd,
showTierBreakdown,
- billingGaugeItems3000,
+ billingGaugeItems,
isPricingModalOpen,
isPlanComparisonModalOpen,
currentAndUpgradePlans,
@@ -457,7 +457,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
/>
)}
-
+
{product.current_amount_usd ? (
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index bc0d986bc7f83..cfecd1697ca29 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -163,43 +163,6 @@ export const billingProductLogic = kea([
},
],
billingGaugeItems: [
- (s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
- (product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
- return [
- freeTier
- ? {
- type: BillingGaugeItemKind.FreeTier,
- text: 'Free tier limit',
- value: freeTier,
- top: true,
- }
- : undefined,
- {
- type: BillingGaugeItemKind.CurrentUsage,
- text: 'Current',
- value: product.current_usage || 0,
- top: false,
- },
- product.projected_usage && product.projected_usage > (product.current_usage || 0)
- ? {
- type: BillingGaugeItemKind.ProjectedUsage,
- text: 'Projected',
- value: product.projected_usage || 0,
- top: false,
- }
- : undefined,
- billingLimitAsUsage
- ? {
- type: BillingGaugeItemKind.BillingLimit,
- text: 'Billing limit',
- top: true,
- value: billingLimitAsUsage || 0,
- }
- : (undefined as any),
- ].filter(Boolean)
- },
- ],
- billingGaugeItems3000: [
(s, p) => [p.product, s.freeTier, s.billingLimitAsUsage],
(product, freeTier, billingLimitAsUsage): BillingGaugeItemType[] => {
return [