Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: minor fixes in pricing calculator #356

Merged
merged 3 commits into from
Aug 30, 2024
Merged

feat: minor fixes in pricing calculator #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d2b076
fixes: pricing page
dharamveergit Aug 30, 2024
8bb9f30
delete: about/pricing
dharamveergit Aug 30, 2024
71bb687
Merge pull request #13 from dharamveergit/gtx
HoomanDgtl Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/components/about-pages/nav-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,4 @@ export const nav: any = [
link: "/about/tenants/",
enabled: true,
},
{
label: "Pricing",
link: "/about/pricing/custom/",
enabled: true,
},
];
56 changes: 34 additions & 22 deletions src/components/pricing-page/gpus/gpu-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,9 @@ export const modifyModel = (model: string) => {
? "A6000"
: model?.includes("rtx")
? model?.replace("rtx", "RTX ").replace("ti", " Ti")
: model;
: model?.includes("gtx")
? model?.replace("gtx", "GTX ").replace("ti", " Ti")
: model;
};

export const price = (price: number) => {
Expand All @@ -130,6 +132,22 @@ export const Tables = ({
}) => {
const [filteredData, setFilteredData] = React.useState<Gpus["models"]>([]);
const [filters, setFilters] = React.useState<Filters>(defaultFilters);
const totalGpus =
filteredData?.length > 0
? filteredData?.reduce(
(prev, curr) => prev + (curr?.availability?.total ?? 0),
0,
)
: data?.availability?.total || 0;

const totalAvailableGpus =
filteredData?.length > 0
? filteredData?.reduce(
(prev, curr) => prev + (curr?.availability?.available ?? 0),
0,
)
: data?.availability?.available || 0;

console.log(filteredData);
return (
<section
Expand All @@ -147,7 +165,7 @@ export const Tables = ({
<Skeleton className="h-8 w-20" />
) : (
<p className="text-2xl font-bold text-foreground">
{data?.availability?.total || 0}
{totalGpus}
</p>
)}
</div>
Expand All @@ -160,8 +178,7 @@ export const Tables = ({
<p className="text-[10px] font-medium text-foreground">
<span className="font-bold">
{(
((data?.availability?.available || 0) /
(data?.availability?.total || 1)) *
((totalAvailableGpus || 0) / (totalGpus || 1)) *
100
).toFixed(2)}
</span>
Expand All @@ -178,9 +195,7 @@ export const Tables = ({
<span className="font-bold">
{(
100 -
((data?.availability?.available || 0) /
(data?.availability?.total || 1)) *
100
((totalAvailableGpus || 0) / (totalGpus || 1)) * 100
).toFixed(2)}
</span>
% Used
Expand All @@ -192,11 +207,7 @@ export const Tables = ({
<CircularProgressBar
diameter={80}
strokeWidth={15}
progressValue={
((data?.availability?.available || 0) /
(data?.availability?.total || 1)) *
100
}
progressValue={((totalAvailableGpus || 0) / (totalGpus || 1)) * 100}
gapSize={1.5}
/>
</div>
Expand All @@ -216,10 +227,10 @@ export const Tables = ({
<div className="my-2 flex justify-between">
<Card className="px-2 py-1">
<span className="font-bold text-[#09090B] dark:text-[#EDEDED]">
{data?.availability?.total || 0}{" "}
{totalAvailableGpus || 0}{" "}
</span>
<span className="text-sm text-[#71717A]">
(of {data?.availability?.available || 0})
(of {totalGpus || 0})
</span>
</Card>
<div className="flex gap-1">
Expand Down Expand Up @@ -313,20 +324,20 @@ export const Tables = ({
Average price:
</span>
<span className="font-semibold">
${model?.price?.avg || 0}
{price(model?.price?.avg)}
</span>
</div>
<HoverCard openDelay={2} closeDelay={2}>
<HoverCardTrigger className="flex items-center justify-between pt-1.5">
<div className="flex items-center justify-center gap-1">
<span className="text-sm font-medium text-[#71717A] dark:text-para">
Min: ${model?.price?.min || 0}
Min: {price(model?.price?.min)}
</span>
<span className="text-sm font-medium text-[#71717A] dark:text-para">
-
</span>
<span className="text-sm font-medium text-[#71717A] dark:text-para">
Max: ${model?.price?.max || 0}
Max: {price(model?.price?.max)}
</span>
</div>
<Info size={12} className="text-[#71717A]" />
Expand Down Expand Up @@ -409,7 +420,7 @@ export const Tables = ({
Availability
</th>
<th className="w-[26%] whitespace-nowrap pr-2 text-left text-sm font-medium tracking-normal text-linkText ">
Price (USD)
Price (USD per hour)
</th>
<th className=""></th>
</tr>
Expand Down Expand Up @@ -487,19 +498,19 @@ export const Tables = ({
<div className="flex justify-between border-b pb-1 text-lg">
<span className="font-semibold">Average price:</span>
<span className="font-semibold">
${model?.price?.avg || 0}
{price(model?.price?.avg)}
</span>
</div>
<HoverCard openDelay={2} closeDelay={2}>
<HoverCardTrigger className="flex items-center justify-between pt-1.5">
<span className="text-sm font-medium text-[#71717A] dark:text-para">
Min: ${model?.price?.min || 0}
Min: {price(model?.price?.min)}
</span>
<span className="text-sm font-medium text-[#71717A] dark:text-para">
-
</span>
<span className="text-sm font-medium text-[#71717A] dark:text-para">
Max: ${model?.price?.max || 0}
Max: {price(model?.price?.max)}
</span>
<Info size={12} className="text-[#71717A]" />
</HoverCardTrigger>
Expand Down Expand Up @@ -547,7 +558,8 @@ export const Tables = ({
<td className="rounded-r-lg border-y border-r px-2 text-center xl:px-8">
<a
id={`${model?.model}-(gpu-rent)`}
href={`https://console.akash.network/rent-gpu?vendor=${model?.vendor}&gpu=${model?.model}&interface=${model?.interface}&vram=${model?.ram}`}
// href={`https://console.akash.network/rent-gpu?vendor=${model?.vendor}&gpu=${model?.model}&interface=${model?.interface}&vram=${model?.ram}`}
href="https://console.akash.network/new-deployment"
target="_blank"
className="inline-flex gap-1.5 rounded-md bg-foreground px-4 py-2 text-white hover:bg-primary dark:text-black dark:hover:text-inherit"
>
Expand Down
48 changes: 36 additions & 12 deletions src/components/pricing-page/provider/month-earning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,41 @@
import { Skeleton } from "@/components/ui/skeleton";

type MonthEarning = {
size?: 20 | 24;
className?: string;
value?: string;
title?: string;
}
size?: 20 | 24;
className?: string;
value?: string;
title?: string;
suffix?: string;
loading?: boolean;
};

const MonthEarning = ({ size, className, value, title }: MonthEarning) => {
return (
<div className="">
<p className={`pb-2 border-b font-medium text-sm text-black dark:text-white`}>{title}</p>
<p className={`pt-2 font-semibold text-black dark:text-white ${size === 20 ? "text-xl" : "text-2xl"}`}>{value}/month</p>
</div>
);
const MonthEarning = ({
size,
className,
value,
title,
suffix,
loading,
}: MonthEarning) => {
return (
<div className="">
<p
className={`border-b pb-2 text-sm font-medium text-black dark:text-white`}
>
{title}
</p>
{loading ? (
<Skeleton className="mt-2 h-8 w-1/2" />
) : (
<p
className={`pt-2 font-semibold text-black dark:text-white ${size === 20 ? "text-xl" : "text-2xl"}`}
>
{value}
{suffix ?? "/month"}
</p>
)}
</div>
);
};

export default MonthEarning;
27 changes: 21 additions & 6 deletions src/components/pricing-page/provider/provider-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,8 @@ export const Tables = ({
endpointInput: 1,
endpointPricing: 0.01,
};

const [loading, setIsLoading] = useState(false);
const [loadingDaily, setIsLoadingDaily] = useState(false);
const [leasePercentInput, setLeasePercentInput] = useState(100);
const [cpuInput, setCpuInput] = useState(10);
const [cpuPricing, setCpuPricing] = useState(10);
Expand Down Expand Up @@ -186,6 +187,8 @@ export const Tables = ({
});

useEffect(() => {
setIsLoading(true);
setIsLoadingDaily(true);
let currentPrice = 0.0;
let averagePrice = 0.0;
fetch("https://api.coingecko.com/api/v3/coins/akash-network/tickers")
Expand All @@ -198,6 +201,7 @@ export const Tables = ({
break;
}
}
setIsLoading(false);
});
fetch(
"https://api.coingecko.com/api/v3/coins/akash-network/market_chart?vs_currency=usd&days=30&interval=daily",
Expand All @@ -212,6 +216,7 @@ export const Tables = ({
setAktAverage(false);
}
setMonthlyAverage(mean);
setIsLoadingDaily(false);
});
}, []);

Expand Down Expand Up @@ -276,6 +281,10 @@ export const Tables = ({
setAktAverage(value);
};

const convertPricing = (value: number) => {
return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

return (
<section
className={clsx(
Expand All @@ -289,18 +298,24 @@ export const Tables = ({
<div className="flex w-full flex-col gap-10 rounded-md border bg-background2 p-6 text-black shadow-sm dark:text-white md:w-[340px]">
<MonthEarning
size={24}
title="Total Monthly Earnings in USD"
value={`$${usdPrices?.totalPrice?.toFixed(2)}`}
suffix=""
title="Total Monthly Earnings (USD)"
value={`$${convertPricing(usdPrices?.totalPrice)}`}
loading={loading || loadingDaily}
/>
<MonthEarning
size={24}
title="Total Monthly Earnings in AKT"
value={`${calculateAKTPrice(usdPrices.totalPrice)}AKT`}
suffix=""
title="Total Monthly Earnings (AKT)"
value={`${convertPricing(
+calculateAKTPrice(usdPrices.totalPrice),
)} AKT`}
loading={loading || loadingDaily}
/>
<div className="flex items-center justify-between gap-5">
<div>
<p className="text-[14px] text-foreground">
Use 30day average price of AKT
Use the 30-Day Average Price of AKT
</p>
<p className="text-muted-foreground text-[14px]">
Average Price for 1 AKT is ${monthlyAverage.toFixed(2)} USD.
Expand Down
Loading