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 ( -
-
- -
- {item.text} -
{compactNumber(item.value)}
-
-
-
- ) -} - -const BillingGaugeItem3000 = ({ item, maxValue, isWithinUsageLimit }: BillingGaugeItemProps): JSX.Element => { - const width = `${(item.value / maxValue) * 100}%` 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 [