Skip to content

Commit a633d48

Browse files
TC-MOTC-MO
committed
docs: add storage pricing calculator component
add new component to calculate storage pricing style component add it to Storage usage page add link to calculator on Storage index page
1 parent a9fb17c commit a633d48

File tree

4 files changed

+540
-8
lines changed

4 files changed

+540
-8
lines changed

‎sources/platform/storage/index.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,21 @@ slug: /storage
88

99
import Card from "@site/src/components/Card";
1010
import CardGrid from "@site/src/components/CardGrid";
11-
12-
# Storage {#storage}
11+
import StoragePricingCalculator from "@site/src/components/StoragePricingCalculator";
1312

1413
**Store anything from images and key-value pairs to structured output data. Learn how to access and manage your stored data on the Apify Console or via the API.**
1514

1615
---
1716

1817
The Apify platform provides three types of storage accessible both within our [Apify Console](https://console.apify.com/storage) and externally through our [REST API](/api/v2) [Apify API Clients](/api) or [SDKs](/sdk).
1918

19+
20+
## Pricing calculator
21+
22+
Use the calculator to estimate storage costs by plan and storage type. Results are estimates.
23+
24+
See estimates with the [pricing calculator](./usage#pricing-calculator).
25+
2026
<CardGrid>
2127
<Card
2228
title="Dataset"

‎sources/platform/storage/usage.md‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,27 @@ category: platform
66
slug: /storage/usage
77
---
88

9+
import StoragePricingCalculator from "@site/src/components/StoragePricingCalculator";
10+
911
**Learn how to effectively use Apify's storage options. Understand key aspects of data retention, rate limiting, and secure sharing.**
1012

1113
---
1214

15+
## Pricing calculator
16+
17+
Use the calculator to estimate storage costs by plan and storage type. Results are estimates.
18+
19+
<details>
20+
<summary>Estimate your storage costs</summary>
21+
22+
1. Select a storage type.
23+
1. Choose a plan.
24+
1. Enter storage, duration, and operation counts.
25+
1. Review the estimated total and breakdown.
26+
27+
<StoragePricingCalculator />
28+
</details>
29+
1330
## Dataset {#dataset}
1431

1532
[Dataset](./dataset.md) storage allows you to store a series of data objects, such as results from web scraping, crawling, or data processing jobs. You can export your datasets in JSON, CSV, XML, RSS, Excel, or HTML formats.
@@ -171,11 +188,11 @@ You can delete storages in the following ways:
171188
[Key-value store](/sdk/python/reference/class/KeyValueStore#drop),
172189
or [Request queue](/sdk/python/reference/class/RequestQueue#drop) class.
173190
* [JavaScript API client](/api/client/js) - using the `.delete()` method in the
174-
[dataset](/api/client/js/reference/class/DatasetClient),
175-
[key-value store](/api/client/js/reference/class/KeyValueStoreClient),
176-
or [request queue](/api/client/js/reference/class/RequestQueueClient) clients.
191+
[dataset](/api/client/js/reference/class/DatasetClient),
192+
[key-value store](/api/client/js/reference/class/KeyValueStoreClient),
193+
or [request queue](/api/client/js/reference/class/RequestQueueClient) clients.
177194
* [Python API client](/api/client/python) - using the `.delete()` method in the
178-
[dataset](/api/client/python#datasetclient),
179-
[key-value store](/api/client/python/reference/class/KeyValueStoreClient),
180-
or [request queue](/api/client/python/reference/class/RequestQueueClient) clients.
195+
[dataset](/api/client/python#datasetclient),
196+
[key-value store](/api/client/python/reference/class/KeyValueStoreClient),
197+
or [request queue](/api/client/python/reference/class/RequestQueueClient) clients.
181198
* [API](/api/v2/key-value-store-delete) using the - `Delete [store]` endpoint, where `[store]` is the type of storage you want to delete.

‎src/components/StoragePricingCalculator/StoragePricingCalculator.module.css‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
.calculator {
2+
border: 1px solid #b3b8d2;
3+
border-radius: 0.5rem;
4+
padding: 1.5rem;
5+
margin: 2rem 0;
6+
background-color: var(--ifm-background-color);
7+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
8+
}
9+
10+
.dark {
11+
border-color: #4a5568;
12+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
13+
}
14+
15+
.header {
16+
text-align: center;
17+
margin-bottom: 2rem;
18+
}
19+
20+
.header h3 {
21+
margin: 0 0 0.5rem 0;
22+
color: var(--ifm-heading-color);
23+
font-size: 2.2rem;
24+
}
25+
26+
.header p {
27+
margin: 0;
28+
color: var(--ifm-color-content-secondary);
29+
font-size: 1.3rem;
30+
}
31+
32+
.controls {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 2rem;
36+
}
37+
38+
.selectionRow {
39+
display: grid;
40+
grid-template-columns: 1fr 1fr;
41+
gap: 2rem;
42+
align-items: stretch;
43+
}
44+
45+
.section {
46+
display: flex;
47+
flex-direction: column;
48+
gap: 1rem;
49+
height: 100%;
50+
}
51+
52+
.section h4 {
53+
margin: 0;
54+
color: var(--ifm-heading-color);
55+
font-size: 1.6rem;
56+
font-weight: 600;
57+
}
58+
59+
.radioGroup {
60+
display: flex;
61+
flex-direction: column;
62+
gap: 0.75rem;
63+
flex: 1;
64+
justify-content: space-between;
65+
}
66+
67+
.radioOption {
68+
display: flex;
69+
align-items: flex-start;
70+
gap: 0.75rem;
71+
padding: 1rem;
72+
border: 1px solid #e2e8f0;
73+
border-radius: 0.375rem;
74+
cursor: pointer;
75+
transition: all 0.2s ease;
76+
background-color: var(--ifm-background-color);
77+
min-height: 4.5rem;
78+
flex: 1;
79+
}
80+
81+
.dark .radioOption {
82+
border-color: #4a5568;
83+
}
84+
85+
.radioOption:hover {
86+
border-color: var(--ifm-color-primary);
87+
background-color: rgba(var(--ifm-color-primary-rgb), 0.05);
88+
}
89+
90+
.radioOption input[type="radio"] {
91+
margin: 0;
92+
margin-top: 0.125rem;
93+
accent-color: var(--ifm-color-primary);
94+
}
95+
96+
.radioContent {
97+
display: flex;
98+
flex-direction: column;
99+
gap: 0.25rem;
100+
flex: 1;
101+
}
102+
103+
.radioContent strong {
104+
color: var(--ifm-heading-color);
105+
font-size: 1.3rem;
106+
}
107+
108+
.radioContent span {
109+
color: var(--ifm-color-content-secondary);
110+
font-size: 1.2rem;
111+
line-height: 1.4;
112+
}
113+
114+
.inputGrid {
115+
display: grid;
116+
grid-template-columns: 1fr 1fr;
117+
gap: 1rem;
118+
}
119+
120+
.inputGroup {
121+
display: flex;
122+
flex-direction: column;
123+
gap: 0.5rem;
124+
}
125+
126+
.inputGroup label {
127+
font-weight: 500;
128+
color: var(--ifm-heading-color);
129+
font-size: 1.3rem;
130+
}
131+
132+
.inputGroup input {
133+
padding: 0.75rem;
134+
border: 1px solid #e2e8f0;
135+
border-radius: 0.375rem;
136+
font-size: 1.2rem;
137+
background-color: var(--ifm-background-color);
138+
color: var(--ifm-color-content);
139+
transition: border-color 0.2s ease;
140+
}
141+
142+
.dark .inputGroup input {
143+
border-color: #4a5568;
144+
}
145+
146+
.inputGroup input:focus {
147+
outline: none;
148+
border-color: var(--ifm-color-primary);
149+
box-shadow: 0 0 0 3px rgba(var(--ifm-color-primary-rgb), 0.1);
150+
}
151+
152+
.inputGroupFullWidth {
153+
display: flex;
154+
flex-direction: column;
155+
gap: 0.5rem;
156+
grid-column: 1 / -1;
157+
}
158+
159+
.inputGroupFullWidth label {
160+
font-weight: 500;
161+
color: var(--ifm-heading-color);
162+
font-size: 1.3rem;
163+
}
164+
165+
.inputGroupFullWidth input {
166+
padding: 0.75rem;
167+
border: 1px solid #e2e8f0;
168+
border-radius: 0.375rem;
169+
font-size: 1.2rem;
170+
background-color: var(--ifm-background-color);
171+
color: var(--ifm-color-content);
172+
transition: border-color 0.2s ease;
173+
}
174+
175+
.dark .inputGroupFullWidth input {
176+
border-color: #4a5568;
177+
}
178+
179+
.inputGroupFullWidth input:focus {
180+
outline: none;
181+
border-color: var(--ifm-color-primary);
182+
box-shadow: 0 0 0 3px rgba(var(--ifm-color-primary-rgb), 0.1);
183+
}
184+
185+
.results {
186+
margin-top: 2rem;
187+
padding: 1.5rem;
188+
background-color: rgba(var(--ifm-color-primary-rgb), 0.05);
189+
border-radius: 0.5rem;
190+
border: 1px solid rgba(var(--ifm-color-primary-rgb), 0.2);
191+
}
192+
193+
.results h4 {
194+
margin: 0 0 1rem 0;
195+
color: var(--ifm-heading-color);
196+
font-size: 1.6rem;
197+
font-weight: 600;
198+
}
199+
200+
.costBreakdown {
201+
display: flex;
202+
flex-direction: column;
203+
gap: 0.75rem;
204+
}
205+
206+
.costItem {
207+
display: flex;
208+
justify-content: space-between;
209+
align-items: center;
210+
padding: 0.5rem 0;
211+
border-bottom: 1px solid rgba(var(--ifm-color-primary-rgb), 0.1);
212+
font-size: 1.3rem;
213+
}
214+
215+
.costItem:last-of-type {
216+
border-bottom: none;
217+
}
218+
219+
.costItem span:first-child {
220+
color: var(--ifm-color-content);
221+
}
222+
223+
.costItem span:last-child {
224+
font-weight: 500;
225+
color: var(--ifm-color-primary);
226+
}
227+
228+
.totalCost {
229+
display: flex;
230+
justify-content: space-between;
231+
align-items: center;
232+
padding: 1rem 0;
233+
margin-top: 0.5rem;
234+
border-top: 2px solid var(--ifm-color-primary);
235+
font-size: 1.6rem;
236+
}
237+
238+
.totalCost strong {
239+
color: var(--ifm-heading-color);
240+
}
241+
242+
.totalCost strong:last-child {
243+
color: var(--ifm-color-primary);
244+
font-size: 1.8rem;
245+
}
246+
247+
/* Admonition spacing */
248+
.calculator :global(.theme-admonition) {
249+
margin: 1rem 0;
250+
}
251+
252+
/* Responsive design */
253+
@media (max-width: 768px) {
254+
.calculator {
255+
padding: 1rem;
256+
}
257+
258+
.selectionRow {
259+
grid-template-columns: 1fr;
260+
gap: 1.5rem;
261+
}
262+
263+
.inputGrid {
264+
grid-template-columns: 1fr;
265+
}
266+
267+
.radioOption {
268+
padding: 0.75rem;
269+
}
270+
271+
.results {
272+
padding: 1rem;
273+
}
274+
275+
.costItem {
276+
flex-direction: column;
277+
align-items: flex-start;
278+
gap: 0.25rem;
279+
}
280+
281+
.totalCost {
282+
flex-direction: column;
283+
align-items: flex-start;
284+
gap: 0.5rem;
285+
}
286+
}

0 commit comments

Comments
 (0)