Merge branch 'main' into billing-graph-enhancement

.github/CODEOWNERS

@@ -188,7 +188,3 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
-
-## OpenAPI Schema - Generated
-/frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
-/docs/api/openapi.yml @therealpandey @vikrantgupta25 @srikanthccv

frontend/src/api/billing/getUsage.ts

@@ -3,13 +3,36 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
+export interface DayBreakdownEntry {
+	timestamp: number;
+	total: number;
+	quantity: number;
+	count: number;
+	size: number;
+}
+
+export interface TierEntry {
+	quantity: number;
+	unitPrice: number;
+	tierCost: number;
+}
+
+export interface BreakdownEntry {
+	type: string;
+	unit: string;
+	dayWiseBreakdown: {
+		breakdown: DayBreakdownEntry[];
+	};
+	tiers?: TierEntry[];
+}
+
 export interface UsageResponsePayloadProps {
-	billingPeriodStart: Date;
-	billingPeriodEnd: Date;
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: [];
+		breakdown: BreakdownEntry[];
 		billTotal: number;
 	};
 	discount: number;

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,17 +1,19 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
-import cx from 'classnames';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
 	btnShape,
 	type,
+	className,
 }: {
-	btnShape?: 'default' | 'round' | 'circle';
+	btnShape?: 'default' | 'round';
 	type?: 'button' | 'text' | 'tooltip';
+	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicenseRefetch } = useAppContext();
@@ -31,26 +33,35 @@ function RefreshPaymentStatus({
 		setIsLoading(false);
 	};
 
+	const button = (
+		<Button
+			variant={type === 'text' ? 'ghost' : 'outlined'}
+			color="secondary"
+			size="md"
+			style={btnShape === 'round' ? { borderRadius: '9999px' } : undefined}
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
+		>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
+	);
+
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
-			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
-				<Button
-					type={type === 'text' ? 'text' : 'default'}
-					shape={btnShape}
-					className={cx('periscope-btn', { text: type === 'text' })}
-					onClick={handleRefreshPaymentStatus}
-					icon={<RefreshCcw size={14} />}
-					loading={isLoading}
-				>
-					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-				</Button>
-			</Tooltip>
+			{type === 'tooltip' ? (
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
+			) : (
+				button
+			)}
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
 	btnShape: 'default',
 	type: 'button',
+	className: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -0,0 +1,199 @@
+.billingContainer {
+	margin-bottom: var(--spacing-20);
+	padding-top: 36px;
+	width: 90%;
+	margin: 0 auto;
+
+	.pageHeader {
+		margin-bottom: var(--spacing-8);
+
+		.pageHeaderTitle {
+			font-weight: var(--label-medium-500-font-weight);
+			font-size: var(--label-medium-500-font-size);
+			line-height: 32px;
+			letter-spacing: -0.08px;
+			color: var(--l1-foreground);
+		}
+
+		.pageHeaderSubtitle {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+			letter-spacing: -0.07px;
+			color: var(--l2-foreground);
+		}
+	}
+
+	.pageInfoTitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		color: var(--l1-foreground);
+	}
+
+	.pageInfoSubtitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		color: var(--l2-foreground);
+	}
+
+	.pageInfo {
+		:global(.ant-card) {
+			padding: var(--padding-3);
+		}
+
+		.billingManageBtn {
+			background: var(--l3-background);
+
+			&:hover {
+				background: var(--l3-background-hover);
+			}
+		}
+	}
+
+	.billingSummary {
+		margin: var(--spacing-12) var(--spacing-4);
+	}
+
+	.billingDetails {
+		margin: var(--spacing-12) 0;
+		border: 1px solid var(--l1-border);
+		border-radius: 2px;
+		overflow: hidden;
+
+		:global {
+			.ant-table {
+				background: var(--l2-background);
+			}
+
+			.ant-table-thead > tr > th {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				color: var(--l3-foreground);
+				font-size: var(--font-size-xs);
+				font-weight: var(--font-weight-medium);
+				letter-spacing: 0.48px;
+				text-transform: uppercase;
+			}
+
+			.ant-table-tbody > tr > td {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				background: var(--l2-background);
+				border-bottom: 1px solid var(--l1-border);
+				color: var(--l2-foreground);
+				font-size: var(--font-size-sm);
+
+				&:first-child {
+					color: var(--l1-foreground);
+				}
+
+				&:not(:first-child) {
+					font-feature-settings:
+						'zero' 1,
+						'lnum' 1,
+						'tnum' 1;
+				}
+			}
+
+			.ant-table-tbody > tr:last-child > td {
+				border-bottom: none;
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: var(--l2-background) !important;
+			}
+		}
+
+		.billingDetailsHeaderCell {
+			position: relative;
+			background: var(--l2-background) !important;
+			border: none !important;
+			border-bottom: 1px solid var(--l1-border) !important;
+			box-shadow: none !important;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset-block: 0;
+				inset-inline-end: 0;
+				width: 2px;
+				background: var(--l2-background);
+				z-index: 1;
+			}
+		}
+	}
+
+	.upgradePlanBenefits {
+		margin: 0 var(--spacing-4);
+		border: 1px solid var(--l1-border);
+		border-radius: 5px;
+		padding: 0 var(--padding-12);
+
+		.planBenefits {
+			.planBenefit {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-8);
+				margin: var(--spacing-8) 0;
+			}
+		}
+	}
+
+	.billingGraphSection {
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		overflow: hidden;
+		margin-bottom: var(--spacing-4);
+
+		.billingGraphFooter {
+			display: flex;
+			gap: var(--spacing-4);
+			padding: var(--padding-3) var(--padding-4);
+			border-top: 1px solid var(--l1-border);
+			background: var(--l2-background);
+
+			.billingFooterBtn {
+				background: var(--l3-background);
+
+				&:hover {
+					background: var(--l3-background-hover);
+				}
+			}
+		}
+	}
+
+	.emptyGraphCard {
+		:global(.ant-card-body) {
+			height: 40vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.billingUpdateNote {
+		margin-top: var(--spacing-8);
+		font-family: var(--font-family-inter);
+		font-size: var(--font-size-sm);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+		line-height: 22px;
+		letter-spacing: -0.07px;
+	}
+
+	:global {
+		.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
+			width: 100%;
+			min-width: 100%;
+		}
+
+		.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
+			min-width: 100% !important;
+		}
+	}
+}

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -1,70 +0,0 @@
-.billing-container {
-	margin-bottom: 40px;
-	padding-top: 36px;
-	width: 90%;
-	margin: 0 auto;
-
-	.billing-summary {
-		margin: 24px 8px;
-	}
-
-	.billing-details {
-		margin: 24px 0px;
-
-		.ant-table-title {
-			color: var(--l2-foreground);
-			background-color: var(--l3-background);
-		}
-
-		.ant-table-cell {
-			background-color: var(--l1-background);
-			border-color: var(--l1-border);
-		}
-
-		.ant-table-tbody {
-			td {
-				border-color: var(--l1-border);
-			}
-		}
-	}
-
-	.upgrade-plan-benefits {
-		margin: 0px 8px;
-		border: 1px solid var(--l1-border);
-		border-radius: 5px;
-		padding: 0 48px;
-		.plan-benefits {
-			.plan-benefit {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				margin: 16px 0;
-			}
-		}
-	}
-
-	.empty-graph-card {
-		.ant-card-body {
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.billing-update-note {
-		text-align: left;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		margin-top: 16px;
-	}
-}
-
-.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
-	width: 100%;
-	min-width: 100%;
-}
-
-.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
-	min-width: 100% !important;
-}

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -38,7 +38,7 @@ describe('BillingContainer', () => {
 		});
 		expect(pricePerUnit).toBeInTheDocument();
 		const cost = await screen.findByRole('columnheader', {
-			name: /cost \(billing period to date\)/i,
+			name: /cost/i,
 		});
 		expect(cost).toBeInTheDocument();
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,12 +1,11 @@
+import { Callout } from '@signozhq/ui/callout';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, CloudDownload } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
-	Alert,
-	Button,
 	Card,
 	Col,
 	Flex,
@@ -16,7 +15,10 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import getUsage, {
+	BreakdownEntry,
+	UsageResponsePayloadProps,
+} from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
@@ -29,7 +31,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
@@ -38,7 +40,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
-import './BillingContainer.styles.scss';
+import styles from './BillingContainer.module.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';
 
 interface DataType {
@@ -115,7 +117,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost (Billing period to date)',
+		title: 'Cost',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -130,7 +132,7 @@ export default function BillingContainer(): JSX.Element {
 	const [billAmount, setBillAmount] = useState(0);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
-	const [data, setData] = useState<any[]>([]);
+	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -150,7 +152,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: any): void => {
+		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -158,27 +160,23 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = data?.payload || {};
-			const formattedUsageData: any[] = [];
+			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const formattedUsageData: DataType[] = [];
 
 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element = breakdown[index];
+					const element: BreakdownEntry = breakdown[index];
 
-					element?.tiers.forEach(
-						(
-							tier: { quantity: number; unitPrice: number; tierCost: number },
-							i: number,
-						) => {
-							formattedUsageData.push({
-								key: `${index}${i}`,
-								name: i === 0 ? element?.type : '',
-								dataIngested: `${tier.quantity} ${element?.unit}`,
-								pricePerUnit: tier.unitPrice,
-								cost: `$ ${tier.tierCost}`,
-							});
-						},
-					);
+					element?.tiers?.forEach((tier, i: number) => {
+						formattedUsageData.push({
+							key: `${index}${i}`,
+							name: i === 0 ? element?.type : '',
+							unit: element?.unit ?? '',
+							dataIngested: `${tier.quantity} ${element?.unit}`,
+							pricePerUnit: String(tier.unitPrice),
+							cost: `$ ${tier.tierCost}`,
+						});
+					});
 				}
 			}
 
@@ -251,16 +249,19 @@ export default function BillingContainer(): JSX.Element {
 			title: 'Data Ingested',
 			dataIndex: 'dataIngested',
 			key: 'dataIngested',
+			align: 'right',
 		},
 		{
 			title: 'Price per Unit',
 			dataIndex: 'pricePerUnit',
 			key: 'pricePerUnit',
+			align: 'right',
 		},
 		{
-			title: 'Cost (Billing period to date)',
+			title: 'Cost',
 			dataIndex: 'cost',
 			key: 'cost',
+			align: 'right',
 		},
 	];
 
@@ -345,23 +346,6 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);
 
-	const BillingUsageGraphCallback = useCallback(
-		() =>
-			!isLoading && !isFetchingBillingData ? (
-				<>
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-					<div className="billing-update-note">
-						Note: Billing metrics are updated once every 24 hours.
-					</div>
-				</>
-			) : (
-				<Card className="empty-graph-card" bordered={false}>
-					<Spinner size="large" tip="Loading..." height="35vh" />
-				</Card>
-			),
-		[apiResponse, billAmount, isLoading, isFetchingBillingData],
-	);
-
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
@@ -415,12 +399,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;
 
 	return (
-		<div className="billing-container">
-			<Flex vertical style={{ marginBottom: 16 }}>
-				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
+		<div className={styles.billingContainer}>
+			<Flex vertical gap={4} className={styles.pageHeader}>
+				<Typography.Text className={styles.pageHeaderTitle}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text className={styles.pageHeaderSubtitle}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -428,50 +412,36 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className="page-info"
+				className={styles.pageInfo}
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical>
-						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
+					<Flex vertical gap={8}>
+						<p className={styles.pageInfoTitle}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</Typography.Title>
+						</p>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
+							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
-							</Typography.Text>
+							</p>
 						) : null}
 					</Flex>
-					<Flex gap={8}>
-						<Button
-							type="default"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading || isFetchingBillingData}
-							onClick={handleCsvDownload}
-							className="periscope-btn"
-						>
-							<Flex align="center" justify="center" gap={4}>
-								<CloudDownload size="md" />
-								Download CSV
-							</Flex>
-						</Button>
-						<Button
-							data-testid="header-billing-button"
-							type="primary"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading}
-							onClick={handleBilling}
-						>
-							{trialInfo?.trialConvertedToSubscription
-								? t('manage_billing')
-								: t('upgrade_plan')}
-						</Button>
-
-						<RefreshPaymentStatus type="tooltip" />
-					</Flex>
+					<Button
+						testId="header-billing-button"
+						variant="solid"
+						color="secondary"
+						size="md"
+						loading={isLoadingBilling || isLoadingManageBilling}
+						disabled={isLoading}
+						onClick={handleBilling}
+						prefix={<Landmark size={14} />}
+						className={styles.billingManageBtn}
+					>
+						{trialInfo?.trialConvertedToSubscription
+							? t('manage_billing')
+							: t('upgrade_plan')}
+					</Button>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -485,8 +455,8 @@ export default function BillingContainer(): JSX.Element {
 
 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Alert
-								message={headerText}
+							<Callout
+								title={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -503,8 +473,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Alert
-						message={`Your data is safe with us until ${getFormattedDate(
+					<Callout
+						title={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -515,26 +485,69 @@ export default function BillingContainer(): JSX.Element {
 
 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Alert
-							message={subscriptionPastDueMessage()}
-							type="error"
-							showIcon
-							style={{ marginTop: 12 }}
-						/>
+						<Callout type="error" showIcon style={{ marginTop: 12 }}>
+							{subscriptionPastDueMessage()}
+						</Callout>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>
 
-			<BillingUsageGraphCallback />
+			<div className={styles.billingGraphSection}>
+				{!isLoading && !isFetchingBillingData ? (
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+				) : (
+					<Card className={styles.emptyGraphCard} bordered={false}>
+						<Spinner size="large" tip="Loading..." height="35vh" />
+					</Card>
+				)}
+				{!isLoading && !isFetchingBillingData && (
+					<div className={styles.billingGraphFooter}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="md"
+							onClick={handleCsvDownload}
+							prefix={<MonitorDown size={14} />}
+							testId="download-csv-button"
+							className={styles.billingFooterBtn}
+						>
+							Download CSV
+						</Button>
+						<RefreshPaymentStatus type="button" className={styles.billingFooterBtn} />
+					</div>
+				)}
+			</div>
+			{!isLoading && !isFetchingBillingData && (
+				<Callout type="info" size="small" className={styles.billingUpdateNote}>
+					Billing metrics are updated once every 24 hours.
+				</Callout>
+			)}
 
-			<div className="billing-details">
+			<div className={styles.billingDetails}>
 				{!isLoading && !isFetchingBillingData && (
 					<Table
 						columns={columns}
 						dataSource={data}
 						pagination={false}
 						bordered={false}
+						components={{
+							header: {
+								cell: ({
+									style,
+									...props
+								}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
+									const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
+									return (
+										<th
+											{...props}
+											style={safeStyle}
+											className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
+										/>
+									);
+								},
+							},
+						}}
 					/>
 				)}
 
@@ -546,7 +559,7 @@ export default function BillingContainer(): JSX.Element {
 			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className="upgrade-plan-benefits">
+				<div className={styles.upgradePlanBenefits}>
 					<Row
 						justify="space-between"
 						align="middle"
@@ -555,16 +568,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className="plan-benefits">
-							<Typography.Text className="plan-benefit">
+						<Col span={20} className={styles.planBenefits}>
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -583,9 +596,10 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								data-testid="upgrade-plan-button"
-								type="primary"
-								size="middle"
+								testId="upgrade-plan-button"
+								variant="solid"
+								color="primary"
+								size="md"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss

@@ -0,0 +1,9 @@
+.headerRow {
+	padding: var(--spacing-8);
+}
+
+.itemList {
+	overflow-y: auto;
+	max-height: 300px;
+	padding: var(--padding-3);
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
+import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	TooltipContentItem,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
+import Styles from './BillingBarChartTooltip.module.scss';
+
+interface BillingBarChartTooltipProps extends TooltipRenderArgs {
+	billingApiResponse: MetricRangePayloadProps;
+}
+
+export function BillingBarChartTooltip({
+	billingApiResponse,
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	isPinned,
+}: BillingBarChartTooltipProps): JSX.Element {
+	const content = useMemo((): TooltipContentItem[] => {
+		const baseItems = buildTooltipContent({
+			data: uPlotInstance.data,
+			series: uPlotInstance.series,
+			dataIndexes,
+			activeSeriesIndex: seriesIndex,
+			uPlotInstance,
+			yAxisUnit: '',
+			isStackedBarChart: true,
+		});
+
+		return baseItems.map((item) => {
+			const match = billingApiResponse.data.result.find(
+				(r) => (r.legend || r.queryName) === item.label,
+			);
+
+			if (!match) {
+				return item;
+			}
+
+			const seriesIdx = uPlotInstance.series.findIndex(
+				(s) => s.label === item.label,
+			);
+			if (seriesIdx === -1) {
+				return item;
+			}
+
+			const dataIndex = dataIndexes[seriesIdx];
+			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
+			const unit = match.unit ?? '';
+			const quantityStr =
+				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
+
+			return {
+				...item,
+				tooltipValue: `$${getToolTipValue(item.value, '')}${quantityStr}`,
+			};
+		});
+	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
+
+	const activeItem = content.find((item) => item.isActive) ?? null;
+
+	return (
+		<div
+			className={cx(TooltipStyles.container, {
+				[TooltipStyles.pinned]: isPinned,
+			})}
+			data-testid="uplot-tooltip-container"
+		>
+			<TooltipHeader
+				uPlotInstance={uPlotInstance}
+				showTooltipHeader
+				isPinned={isPinned}
+				activeItem={null}
+				headerRowClassName={Styles.headerRow}
+				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
+			/>
+			{activeItem != null && <span className={TooltipStyles.divider} />}
+			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
+				{content.map((item) => (
+					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
+				))}
+			</div>
+		</div>
+	);
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.module.scss

@@ -0,0 +1,37 @@
+.graphContainer {
+	height: 100%;
+}
+
+.billingGraphCard {
+	:global {
+		.uplot-no-data {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.ant-card-body {
+			height: 40vh;
+
+			.uplot-graph-container {
+				padding: 8px;
+			}
+		}
+	}
+
+	.totalSpent {
+		font-family: 'SF Mono', monospace;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.totalSpentTitle {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 22px;
+		letter-spacing: 0.48px;
+		color: var(--l2-foreground);
+	}
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss

@@ -1,23 +0,0 @@
-.billing-graph-card {
-	.ant-card-body {
-		height: 40vh;
-		.uplot-graph-container {
-			padding: 8px;
-		}
-	}
-	.total-spent {
-		font-family: 'SF Mono' monospace;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 24px;
-	}
-
-	.total-spent-title {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 22px;
-		letter-spacing: 0.48px;
-		color: var(--l2-foreground);
-	}
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,221 +1,146 @@
-import { useMemo, useRef } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import Uplot from 'components/Uplot';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
-import getAxes from 'lib/uPlotLib/utils/getAxes';
-import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
-import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
-import uPlot from 'uplot';
-
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import {
+	LegendPosition,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import type uPlot from 'uplot';
+import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+
+import { BillingBarChartTooltip } from './BillingBarChartTooltip';
+import { prepareBillingBarConfig } from './prepareBillingBarConfig';
+import {
+	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
-import './BillingUsageGraph.styles.scss';
-import '../../../lib/uPlotLib/uPlotLib.styles.scss';
+import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: any;
+	data: Partial<UsageResponsePayloadProps>;
 	billAmount: number;
 }
-const paths = (
-	u: any,
-	seriesIdx: number,
-	idx0: number,
-	idx1: number,
-	extendGap: boolean,
-	buildClip: boolean,
-): uPlot.Series.PathBuilder => {
-	const s = u.series[seriesIdx];
-	const style = s.drawStyle;
-	const interp = s.lineInterpolation;
 
-	const renderer = getRenderer(style, interp);
-
-	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
-};
-
-const calculateStartEndTime = (
-	data: any,
-): { startTime: number; endTime: number } => {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
-			timestamps.push(entry?.timestamp);
-		});
-	});
-	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
-	const startTime: number = Math.min(...timestamps, ...billingTime);
-	const endTime: number = Math.max(...timestamps, ...billingTime);
-	return { startTime, endTime };
-};
+const numberFormatter = new Intl.NumberFormat('en-US');
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
-			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-			const nextDay = {
-				...currentDay,
-				timestamp: currentDay.timestamp + 86400,
-				count: 0,
-				size: 0,
-				quantity: 0,
-				total: 0,
-			};
-			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
-		}
-	});
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(data),
-		[data],
-	);
-	const chartData = getUPlotChartData(graphCompatibleData);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const { startTime, endTime } = useMemo(
-		() => calculateStartEndTime(data),
-		[data],
-	);
-
-	const getGraphSeries = (color: string, label: string): any => ({
-		drawStyle: 'bars',
-		paths,
-		lineInterpolation: 'spline',
-		show: true,
-		label,
-		fill: color,
-		stroke: color,
-		width: 2,
-		spanGaps: true,
-		points: {
-			size: 5,
-			show: false,
-			stroke: color,
-		},
-	});
-
-	const uPlotSeries: any = useMemo(
-		() => [
-			{ label: 'Timestamp', stroke: 'purple' },
-			getGraphSeries(
-				'#7CEDBE',
-				graphCompatibleData.data.result[0]?.legend as string,
-			),
-			getGraphSeries(
-				'#4E74F8',
-				graphCompatibleData.data.result[1]?.legend as string,
-			),
-			getGraphSeries(
-				'#F24769',
-				graphCompatibleData.data.result[2]?.legend as string,
-			),
-		],
-		[graphCompatibleData.data.result],
-	);
-
-	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
-
-	const optionsForChart: uPlot.Options = useMemo(
-		() => ({
-			id: 'billing-usage-breakdown',
-			series: uPlotSeries,
-			width: containerDimensions.width,
-			height: containerDimensions.height - 30,
-			axes: [
-				{
-					...axesOptions[0],
-					grid: {
-						...axesOptions.grid,
-						show: false,
-						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
-					},
-				},
-				{
-					...axesOptions[1],
-					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
-				},
-			],
-			scales: {
-				x: {
-					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
-				},
-				y: {
-					...getYAxisScale({
-						series: graphCompatibleData?.data?.newResult?.data?.result,
-						yAxisUnit: '',
-						softMax: null,
-						softMin: null,
-					}),
-				},
-			},
-			legend: {
-				show: true,
-				live: false,
-				isolate: true,
-			},
-			cursor: {
-				lock: false,
-				focus: {
-					prox: 1e6,
-					bias: 1,
-				},
-			},
-			focus: {
-				alpha: 0.3,
-			},
-			padding: [32, 32, 16, 16],
-			plugins: [
-				tooltipPlugin({
-					apiResponse: fillMissingValuesForQuantities(
-						graphCompatibleData,
-						chartData[0],
-					),
-					yAxisUnit: '',
-					isBillingUsageGraphs: true,
-					isDarkMode,
+	// Single-day data causes bars to span multiple days — add a synthetic
+	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
+	const normalizedData = useMemo(() => {
+		if (!data?.details?.breakdown) {
+			return data;
+		}
+		return {
+			...data,
+			details: {
+				...data.details,
+				breakdown: data.details.breakdown.map((breakdown) => {
+					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
+						return breakdown;
+					}
+					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+					const nextDay = {
+						...currentDay,
+						timestamp: currentDay.timestamp + 86400,
+						count: 0,
+						size: 0,
+						quantity: 0,
+						total: 0,
+					};
+					return {
+						...breakdown,
+						dayWiseBreakdown: {
+							...breakdown.dayWiseBreakdown,
+							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
+						},
+					};
 				}),
-			],
-		}),
-		[
-			axesOptions,
-			chartData,
-			containerDimensions.height,
-			containerDimensions.width,
-			endTime,
-			graphCompatibleData,
-			isDarkMode,
-			startTime,
-			uPlotSeries,
-		],
+			},
+		};
+	}, [data]);
+
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(normalizedData),
+		[normalizedData],
 	);
 
-	const numberFormatter = new Intl.NumberFormat('en-US');
+	const chartData = useMemo(
+		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
+		[graphCompatibleData],
+	);
+
+	const filledApiResponse = useMemo(
+		(): MetricRangePayloadProps =>
+			fillMissingValuesForQuantities(
+				graphCompatibleData,
+				chartData[0] as number[],
+			),
+		[graphCompatibleData, chartData],
+	);
+
+	const { startTime, endTime } = useMemo(
+		() =>
+			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
+		[normalizedData],
+	);
+
+	const config = useMemo(
+		() =>
+			prepareBillingBarConfig({
+				isDarkMode,
+				// Subtract 86400s (one day) from startTime to add a buffer before first bar
+				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
+				maxTimeScale: endTime,
+				apiResponse: graphCompatibleData,
+			}),
+		[isDarkMode, startTime, endTime, graphCompatibleData],
+	);
+
+	const renderBillingTooltip = useCallback(
+		(args: TooltipRenderArgs) => (
+			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
+		),
+		[filledApiResponse],
+	);
 
 	return (
-		<Card bordered={false} className="billing-graph-card">
+		<Card bordered={false} className={styles.billingGraphCard}>
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className="total-spent-title">
+					<Typography.Text className={styles.totalSpentTitle}>
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text className={styles.totalSpent}>
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Uplot data={chartData} options={optionsForChart} />
+			<div ref={graphRef} className={styles.graphContainer}>
+				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+					<BarChart
+						config={config}
+						data={chartData}
+						isStackedBarChart
+						legendConfig={{ position: LegendPosition.BOTTOM }}
+						customTooltip={renderBillingTooltip}
+						width={containerDimensions.width}
+						height={containerDimensions.height - 30}
+						canPinTooltip
+					/>
+				)}
 			</div>
 		</Card>
 	);

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/BillingBarChartTooltip.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen } from 'tests/test-utils';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
+
+// Mock buildTooltipContent so tests don't depend on uPlot stacking math
+jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
+	buildTooltipContent: jest.fn().mockReturnValue([
+		{
+			label: 'Logs',
+			value: 100,
+			tooltipValue: '$100.00',
+			color: '#7CEDBE',
+			isActive: true,
+			isHighlighted: false,
+		},
+		{
+			label: 'Traces',
+			value: 50,
+			tooltipValue: '$50.00',
+			color: '#4E74F8',
+			isActive: false,
+			isHighlighted: false,
+		},
+	]),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+function makeUPlotInstance(seriesLabels: string[]): uPlot {
+	return {
+		data: [
+			[1000, 2000],
+			[100, 200],
+			[50, 80],
+		],
+		cursor: { idx: 0 },
+		series: [
+			{ label: 'Timestamp', show: true, stroke: '#000' },
+			...seriesLabels.map((label) => ({
+				label,
+				show: true,
+				stroke: '#aabbcc',
+			})),
+		],
+	} as unknown as uPlot;
+}
+
+function makeBillingApiResponse(
+	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
+): MetricRangePayloadProps {
+	return {
+		data: {
+			result: entries.map((e) => ({
+				legend: e.legend,
+				queryName: e.legend,
+				metric: {},
+				values: [[1000, '10']] as [number, string][],
+				quantity: e.quantity as number[],
+				unit: e.unit,
+			})),
+			resultType: '',
+			newResult: { data: { result: [], resultType: '' } },
+		},
+	};
+}
+
+const baseTooltipArgs = {
+	isPinned: false,
+	dismiss: jest.fn(),
+	viaSync: false,
+	seriesIndex: 1,
+	dataIndexes: [null, 0, 0],
+};
+
+describe('BillingBarChartTooltip', () => {
+	it('augments tooltipValue with quantity and unit for each series', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
+			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
+		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
+	});
+
+	it('omits quantity line when quantity at dataIndex is null', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
+			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
+		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
+		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
+	});
+
+	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs']);
+		const { buildTooltipContent } = jest.requireMock(
+			'lib/uPlotV2/components/Tooltip/utils',
+		) as { buildTooltipContent: jest.Mock };
+		buildTooltipContent.mockReturnValueOnce([
+			{
+				label: 'Logs',
+				value: 0.3076171875,
+				tooltipValue: '$0.31',
+				color: '#7CEDBE',
+				isActive: true,
+				isHighlighted: false,
+			},
+		]);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
+	});
+
+	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
+		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
+	});
+});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -0,0 +1,101 @@
+import { Color } from '@signozhq/design-tokens';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
+
+const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
+	data: {
+		result: legends.map((legend) => ({
+			legend,
+			queryName: legend,
+			metric: {},
+			values: [[1000, '10']],
+		})),
+		resultType: '',
+		newResult: { data: { result: [], resultType: '' } },
+	},
+});
+
+describe('prepareBillingBarConfig', () => {
+	const baseProps = { isDarkMode: false };
+
+	it('returns a builder with no series when apiResponse is undefined', () => {
+		const builder = prepareBillingBarConfig(baseProps);
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('returns a builder with no series when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('adds one series per result entry with correct labels and colors', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(4);
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+		expect(config.series?.[2]?.label).toBe('Traces');
+		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
+		expect(config.series?.[3]?.label).toBe('Metrics');
+		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
+	});
+
+	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
+		});
+		const config = builder.getConfig();
+		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
+	});
+
+	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
+		expect(config.focus).toStrictEqual({ alpha: 0.3 });
+	});
+
+	it('sets no bands when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toBeUndefined();
+	});
+
+	it('uses queryName as label when legend is undefined', () => {
+		const apiResponse: MetricRangePayloadProps = {
+			data: {
+				result: [
+					{
+						legend: undefined as any,
+						queryName: 'Logs',
+						metric: {},
+						values: [[1000, '10']],
+					},
+				],
+				resultType: '',
+				newResult: { data: { result: [], resultType: '' } },
+			},
+		};
+		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
+		const config = builder.getConfig();
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+	});
+});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/utils.test.ts

@@ -0,0 +1,145 @@
+import {
+	calculateStartEndTime,
+	convertDataToMetricRangePayload,
+} from '../utils';
+
+const makeData = (
+	timestamps: number[],
+	billingPeriodStart?: number,
+	billingPeriodEnd?: number,
+) => ({
+	billingPeriodStart,
+	billingPeriodEnd,
+	details: {
+		total: 0,
+		baseFee: 0,
+		billTotal: 0,
+		breakdown: [
+			{
+				type: 'Logs',
+				unit: 'GB',
+				dayWiseBreakdown: {
+					breakdown: timestamps.map((timestamp) => ({
+						timestamp,
+						total: 0,
+						quantity: 0,
+						count: 0,
+						size: 0,
+					})),
+				},
+			},
+		],
+	},
+});
+
+describe('convertDataToMetricRangePayload', () => {
+	it('returns empty result when all dayWiseBreakdown.breakdown are null', () => {
+		const data = {
+			billingPeriodStart: 1778763678,
+			billingPeriodEnd: 1781442078,
+			details: {
+				total: 0,
+				baseFee: 49,
+				billTotal: 49,
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Traces',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(0);
+	});
+
+	it('includes only series that have day-wise data', () => {
+		const data = {
+			details: {
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						dayWiseBreakdown: { breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						dayWiseBreakdown: {
+							breakdown: [
+								{ timestamp: 1000, total: 5, quantity: 10, count: 0, size: 0 },
+							],
+						},
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(1);
+		expect(result.data.result[0].legend).toBe('Logs');
+	});
+});
+
+describe('calculateStartEndTime', () => {
+	it('returns min/max of all breakdown timestamps', () => {
+		const data = makeData([1000, 3000, 2000]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 3000,
+		});
+	});
+
+	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
+		const data = makeData([2000, 3000], 500, 4000);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 500,
+			endTime: 4000,
+		});
+	});
+
+	it('returns undefined when there are no timestamps and no billing period', () => {
+		expect(calculateStartEndTime({})).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('returns undefined when breakdown is empty', () => {
+		const data = makeData([]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('filters out non-finite billingPeriod values', () => {
+		const data = makeData([1000], NaN, Infinity);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 1000,
+		});
+	});
+
+	it('works when details is missing', () => {
+		expect(
+			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
+		).toStrictEqual({
+			startTime: 100,
+			endTime: 200,
+		});
+	});
+});

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -0,0 +1,71 @@
+import { Color } from '@signozhq/design-tokens';
+import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+const BILLING_SERIES_COLORS = [
+	Color.BG_FOREST_300,
+	Color.BG_ROBIN_500,
+	Color.BG_SAKURA_500,
+];
+
+export interface PrepareBillingBarConfigProps {
+	isDarkMode: boolean;
+	timezone?: Timezone;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	apiResponse?: MetricRangePayloadProps;
+}
+
+export function prepareBillingBarConfig({
+	isDarkMode,
+	timezone,
+	minTimeScale,
+	maxTimeScale,
+	apiResponse,
+}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		id: 'billing-usage-breakdown',
+		isDarkMode,
+		timezone,
+		panelType: PANEL_TYPES.BAR,
+		minTimeScale,
+		maxTimeScale,
+	});
+
+	const results = apiResponse?.data?.result;
+	if (!results?.length) {
+		return builder;
+	}
+
+	const labels = results.map((s) => s.legend || s.queryName || '');
+
+	const colorMapping = labels.reduce<Record<string, string>>(
+		(acc, label, index) => {
+			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
+			return acc;
+		},
+		{},
+	);
+
+	labels.forEach((label) => {
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping,
+			isDarkMode,
+			metric: {},
+		});
+	});
+
+	builder.setBands(getInitialStackedBands(results.length));
+	builder.setPadding([32, 32, 16, 16]);
+	builder.setFocus({ alpha: 0.3 });
+
+	return builder;
+}

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,23 +29,25 @@ export const convertDataToMetricRangePayload = (
 		return emptyStateData;
 	}
 
-	const payload = breakdown.map((info: any) => {
-		const metric = info.type;
-		const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
-			(a: any, b: any) => a.timestamp - b.timestamp,
-		);
-		const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
-			categoryInfo.timestamp,
-			categoryInfo.total,
-		]);
-		const queryName = info.type;
-		const legend = info.type;
-		const { unit } = info;
-		const quantity = sortedBreakdownData.map(
-			(categoryInfo: any) => categoryInfo.quantity,
-		);
-		return { metric, values, queryName, legend, quantity, unit };
-	});
+	const payload = breakdown
+		.map((info: any) => {
+			const metric = info.type;
+			const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
+				(a: any, b: any) => a.timestamp - b.timestamp,
+			);
+			const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
+				categoryInfo.timestamp,
+				categoryInfo.total,
+			]);
+			const queryName = info.type;
+			const legend = info.type;
+			const { unit } = info;
+			const quantity = sortedBreakdownData.map(
+				(categoryInfo: any) => categoryInfo.quantity,
+			);
+			return { metric, values, queryName, legend, quantity, unit };
+		})
+		.filter((series: any) => series.values.length > 0);
 
 	const sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -120,11 +122,40 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = getUPlotChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
+	const chartData = prepareChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(
+		graphCompatibleData,
+		chartData[0] as number[],
+	);
 
 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
+
+export function calculateStartEndTime(
+	data: Partial<UsageResponsePayloadProps>,
+): { startTime: number | undefined; endTime: number | undefined } {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
+			timestamps.push(entry.timestamp);
+		});
+	});
+
+	const billingTime: number[] = [
+		data?.billingPeriodStart,
+		data?.billingPeriodEnd,
+	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
+
+	const allTimes = [...timestamps, ...billingTime];
+	if (allTimes.length === 0) {
+		return { startTime: undefined, endTime: undefined };
+	}
+
+	return {
+		startTime: Math.min(...allTimes),
+		endTime: Math.max(...allTimes),
+	};
+}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx

@@ -18,6 +18,8 @@ interface TooltipHeaderProps {
 	showTooltipHeader: boolean;
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
+	headerRowClassName?: string;
+	dateFormat?: string;
 }
 
 export default function TooltipHeader({
@@ -26,6 +28,8 @@ export default function TooltipHeader({
 	showTooltipHeader,
 	isPinned,
 	activeItem,
+	headerRowClassName,
+	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -44,12 +48,13 @@ export default function TooltipHeader({
 		}
 		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+			.format(dateFormat);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
+		dateFormat,
 	]);
 
 	return (
@@ -58,7 +63,7 @@ export default function TooltipHeader({
 			data-testid="uplot-tooltip-header-container"
 		>
 			{showTooltipHeader && headerTitle && (
-				<div className={Styles.headerRow}>
+				<div className={cx(Styles.headerRow, headerRowClassName)}>
 					<span>{headerTitle}</span>
 					{isPinned && (
 						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">