Skip to content
This repository has been archived by the owner on Jun 17, 2024. It is now read-only.

feat:pricing calculation #1330

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat:pricing calculation #1330

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f203a1
feat:pricing calculation
akshay-bharadva Nov 25, 2023
1381183
updating pricing page
pranay01 Nov 25, 2023
8ff6b57
price model section improvements
pranay01 Nov 26, 2023
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
215 changes: 212 additions & 3 deletions src/pages/pricing/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ function Pricing() {
<PricingPlans />
{/* All Features */}
<ExploreAllFeature />
{/* Pricing Calculation */}
<PricingCalculator />
{/* Companies Logo */}
<TrustedByTeams />
{/* Cost Comparison Graph */}
Expand Down Expand Up @@ -366,7 +368,6 @@ const PricingPlans = () => {
Metrics
<br />
<br />

<i>Reach out to us for higher retention period</i>
</p>
<Divider isDashed />
Expand Down Expand Up @@ -423,7 +424,6 @@ const PricingPlans = () => {
<li>Dashboard locking</li>
<li>Visualize very large traces (&gt;10K spans)</li>
<li>Data centers available in the US, EU & India</li>

</ul>
</div>
<Divider isDashed />
Expand Down Expand Up @@ -600,7 +600,8 @@ const PricingPlans = () => {
<Heading type={1}>Run SigNoz within your infrastructure</Heading>
<SubHeading>
Get started with Community Edition and upgrade for
enterprise-ready features or get it managed by SigNoz in your cloud (BYOC)
enterprise-ready features or get it managed by SigNoz in your
cloud (BYOC)
</SubHeading>
</div>

Expand Down Expand Up @@ -1275,3 +1276,211 @@ const ExploreAllFeature = () => {
</div>
);
};

function PricingCalculator() {
const TRACES_AND_LOGS_PRICES = {
15: 0.3,
30: 0.4,
90: 0.6,
180: 0.8,
};
const METRICS_PRICES = {
1: 0.1,
3: 0.12,
6: 0.15,
13: 0.18,
};
const RETENTION_PERIOD = {
TRACES_AND_LOGS: [
{ days: 15, price: 0.3 },
{ days: 30, price: 0.4 },
{ days: 90, price: 0.6 },
{ days: 180, price: 0.8 },
],
METRICS: [
{ months: 1, price: 0.1 },
{ months: 3, price: 0.12 },
{ months: 6, price: 0.15 },
{ months: 13, price: 0.18 },
],
};
// Period
const [tracesRetentionPeriod, setTracesRetentionPeriod] = useState(
RETENTION_PERIOD.TRACES_AND_LOGS[0].days
);
const [logsRetentionPeriod, setLogsRetentionPeriod] = useState(
RETENTION_PERIOD.TRACES_AND_LOGS[0].days
);
const [metricsRetentionPeriod, setMetricsRetentionPeriod] = useState(
RETENTION_PERIOD.METRICS[0].months
);
// GB plan
const [tracesGB, setTracesGB] = useState(500);
const [logsGB, setLogsGB] = useState(500);
const [metricsGB, setMetricsGB] = useState(1000);

const [usageBasedCost, setUsageBasedCost] = useState(0);
const [amountToBePaid, setAmountToBePaid] = useState(0);

useEffect(() => {
let cost = 0;
let minimumCost = 199;
cost =
TRACES_AND_LOGS_PRICES[tracesRetentionPeriod] * tracesGB +
TRACES_AND_LOGS_PRICES[logsRetentionPeriod] * logsGB +
METRICS_PRICES[metricsRetentionPeriod] * metricsGB;
setUsageBasedCost(cost);
cost = Math.max(minimumCost, cost);
setAmountToBePaid(cost);
}, [
tracesRetentionPeriod,
logsRetentionPeriod,
metricsRetentionPeriod,
tracesGB,
logsGB,
metricsGB,
]);

return (
<div>
<div className="md:max-w-md lg:max-w-6xl mx-5 md:mx-auto overflow-hidden price-calc p-7 rounded-md my-16">
<div className="flex flex-col items-center mb-5 text-center">
<Heading type={1}>Estimate your costs with SigNoz</Heading>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 m-10 mx-2 md:m-10 gap-5">
<div className="col-span-1 md:col-span-2">
<div className="grid grid-cols-1 gap-y-8">
<div className="flex flex-col mb-5">
<Heading type={5}>Data ingested per month</Heading>
{/* <p>Data ingested per month</p> */}
</div>

<div className="grid grid-cols-5">
<p className="col-span-3 flex justify-start items-center text-lg md:text-xl font-extrabold whitespace-nowrap">
Logs
</p>
<p className="col-span-2 flex gap-2 flex-nowrap justify-end items-center">
<span className="text-primary-400 text-lg md:text-xl font-extrabold whitespace-nowrap">
{logsGB} GB
</span>
<span> with </span>
<select
className="border text-sm rounded-lg block w-fit p-2.5 placeholder-gray-400 text-white focus:ring-primary-500 focus:border-primary-500 accent-primary-400"
value={logsRetentionPeriod}
onChange={(e) =>
setLogsRetentionPeriod(Number(e.target.value))
}
>
{RETENTION_PERIOD.TRACES_AND_LOGS.map((option, idx) => (
<option
key={`${option.days}-${idx}`}
value={option.days}
>{`${option.days} days`}</option>
))}
</select>
<span>retention</span>
</p>
<p className="col-span-5">
<input
id="large-range"
type="range"
className="w-full h-3 slider"
min={0}
max={30000}
value={logsGB}
step={10}
onChange={(e) => setLogsGB(Number(e.target.value))}
/>
</p>
</div>
<div className="grid grid-cols-5">
<p className="col-span-3 flex justify-start items-center text-lg md:text-xl font-extrabold whitespace-nowrap">
Traces
</p>
<p className="col-span-2 flex gap-2 flex-nowrap justify-end items-center">
<span className="text-primary-400 text-lg md:text-xl font-extrabold whitespace-nowrap">
{tracesGB} GB
</span>
<span> with </span>
<select
className="border text-sm rounded-lg block w-fit p-2.5 placeholder-gray-400 text-white focus:ring-primary-500 focus:border-primary-500 accent-primary-400"
value={tracesRetentionPeriod}
onChange={(e) =>
setTracesRetentionPeriod(Number(e.target.value))
}
>
{RETENTION_PERIOD.TRACES_AND_LOGS.map((option, idx) => (
<option
key={`${option.days}-${idx}`}
value={option.days}
>{`${option.days} days`}</option>
))}
</select>
<span>retention</span>
</p>
<p className="col-span-5">
<input
id="large-range"
type="range"
className="w-full h-3 slider"
min={0}
max={30000}
value={tracesGB}
step={10}
onChange={(e) => setTracesGB(Number(e.target.value))}
/>
</p>
</div>
<div className="grid grid-cols-5">
<p className="col-span-3 flex justify-start items-center text-lg md:text-xl font-extrabold whitespace-nowrap">
Metrics
</p>
<p className="col-span-2 flex gap-2 flex-nowrap justify-end items-center">
<span className="text-primary-400 text-lg md:text-xl font-extrabold whitespace-nowrap">
{metricsGB} mn samples
</span>
<span> with </span>
<select
className="border text-sm rounded-lg block w-fit p-2.5 placeholder-gray-400 text-white focus:ring-primary-500 focus:border-primary-500 accent-primary-400"
value={metricsRetentionPeriod}
onChange={(e) =>
setMetricsRetentionPeriod(Number(e.target.value))
}
>
{RETENTION_PERIOD.METRICS.map((option, idx) => (
<option
key={`${option.months}-${idx}`}
value={option.months}
>{`${option.months} ${
option.months === 1 ? "month" : "months"
}`}</option>
))}
</select>
<span>retention</span>
</p>
<p className="col-span-5">
<input
id="large-range"
type="range"
className="w-full h-3 slider"
min={0}
max={100000}
value={metricsGB}
step={10}
onChange={(e) => setMetricsGB(Number(e.target.value))}
/>
</p>
</div>
</div>
</div>
<div className="col-span-1 flex flex-col justify-center items-center gap-1">
<span className="font-extrabold text-5xl md:leading-12 tracking-tight min-w-fit text-primary-400">
${new Intl.NumberFormat().format(amountToBePaid)}
</span>
<span>SigNoz Total cost per month</span>
</div>
</div>
</div>
</div>
);
}
Loading