Skip to content

Commit 8a5e825

Browse files
davidgasquezdavidgasquez
committed
✨ Refactor timeframe selection logic and enhance styling for improved user experience
1 parent 4d3be36 commit 8a5e825

File tree

2 files changed

+118
-46
lines changed

2 files changed

+118
-46
lines changed

‎numbers/src/index.md

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -51,58 +51,13 @@ import { movingAverageLinePlot } from "./components/movingAverageLinePlot.js";
5151
```
5252
5353
54-
<div class="card">
55-
<h2>TIMEFRAME</h2>
56-
57-
```js
58-
const timeframe = view(Inputs.radio(["All", "365d", "180d", "90d", "30d", "Custom"], {value: params.has('from_date') || params.has('to_date') ? "Custom" : "All"}));
59-
```
60-
61-
```js
62-
const startDate = timeframe === "Custom" ? view(Inputs.date({
63-
label: "Start",
64-
value: from_date,
65-
})) : from_date;
66-
67-
const endDate = timeframe === "Custom" ? view(Inputs.date({
68-
label: "End",
69-
value: to_date,
70-
})) : to_date;
71-
```
72-
73-
```js
74-
if (timeframe === "Custom") {
75-
updateURLParams(startDate.toISOString().split('T')[0], endDate.toISOString().split('T')[0]);
76-
} else if (timeframe === "365d") {
77-
const daysAgo = new Date();
78-
daysAgo.setDate(daysAgo.getDate() - 365);
79-
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
80-
} else if (timeframe === "180d") {
81-
const daysAgo = new Date();
82-
daysAgo.setDate(daysAgo.getDate() - 180);
83-
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
84-
} else if (timeframe === "90d") {
85-
const daysAgo = new Date();
86-
daysAgo.setDate(daysAgo.getDate() - 90);
87-
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
88-
} else if (timeframe === "30d") {
89-
const daysAgo = new Date();
90-
daysAgo.setDate(daysAgo.getDate() - 30);
91-
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
92-
} else if (timeframe === "All") {
93-
// Clear URL params
94-
window.history.replaceState({}, '', window.location.pathname);
95-
}
96-
```
97-
98-
</div>
9954
10055
10156
```js
10257
function getFilteredData(data, timeframe, startDate, endDate) {
10358
if (timeframe === "All") return data;
10459
if (timeframe === "Custom") return data.filter(d => d.date >= startDate && d.date <= endDate);
105-
60+
10661
const days = parseInt(timeframe.replace('d', ''));
10762
const cutoffDate = new Date();
10863
cutoffDate.setDate(cutoffDate.getDate() - days);
@@ -1333,3 +1288,49 @@ Here are some resources for you to explore and learn more about Filecoin data.
13331288
13341289
13351290
_Charts shown here are for informational purposes only. The data pipelines powering this are optimized for analytical purposes and might not be 100% accurate._
1291+
1292+
<div id="timeframe-selector">
1293+
<h3>Timeframe</h3>
1294+
1295+
```js
1296+
const timeframe = view(Inputs.radio(["All", "365d", "180d", "90d", "30d", "Custom"], {value: params.has('from_date') || params.has('to_date') ? "Custom" : "All"}));
1297+
```
1298+
1299+
```js
1300+
const startDate = timeframe === "Custom" ? view(Inputs.date({
1301+
label: "Start",
1302+
value: from_date,
1303+
})) : from_date;
1304+
1305+
const endDate = timeframe === "Custom" ? view(Inputs.date({
1306+
label: "End",
1307+
value: to_date,
1308+
})) : to_date;
1309+
```
1310+
1311+
```js
1312+
if (timeframe === "Custom") {
1313+
updateURLParams(startDate.toISOString().split('T')[0], endDate.toISOString().split('T')[0]);
1314+
} else if (timeframe === "365d") {
1315+
const daysAgo = new Date();
1316+
daysAgo.setDate(daysAgo.getDate() - 365);
1317+
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
1318+
} else if (timeframe === "180d") {
1319+
const daysAgo = new Date();
1320+
daysAgo.setDate(daysAgo.getDate() - 180);
1321+
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
1322+
} else if (timeframe === "90d") {
1323+
const daysAgo = new Date();
1324+
daysAgo.setDate(daysAgo.getDate() - 90);
1325+
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
1326+
} else if (timeframe === "30d") {
1327+
const daysAgo = new Date();
1328+
daysAgo.setDate(daysAgo.getDate() - 30);
1329+
updateURLParams(daysAgo.toISOString().split('T')[0], new Date().toISOString().split('T')[0]);
1330+
} else if (timeframe === "All") {
1331+
// Clear URL params
1332+
window.history.replaceState({}, '', window.location.pathname);
1333+
}
1334+
```
1335+
1336+
</div>

‎numbers/src/style.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,84 @@ h2 {
7373
border-radius: 0rem;
7474
}
7575

76+
#observablehq-toc {
77+
z-index: 1 !important;
78+
pointer-events: none !important;
79+
}
80+
7681
#observablehq-toc nav {
7782
text-transform: uppercase;
7883
width: 192px;
7984
margin: 2rem 0;
8085
padding: 0 1rem;
8186
box-sizing: border-box;
8287
border-left: solid 0px var(--theme-foreground-faintest);
88+
z-index: 1 !important;
89+
pointer-events: auto !important;
90+
}
91+
92+
#observablehq-toc nav a {
93+
pointer-events: auto !important;
94+
}
95+
96+
aside#observablehq-toc {
97+
z-index: 1 !important;
98+
pointer-events: none !important;
99+
overflow: hidden !important;
100+
}
101+
102+
#timeframe-selector {
103+
position: fixed !important;
104+
bottom: 20px !important;
105+
right: 20px !important;
106+
background: var(--theme-background-alt);
107+
border: 2px solid var(--theme-foreground-faintest);
108+
border-radius: 8px;
109+
padding: 1rem;
110+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
111+
z-index: 999999 !important;
112+
max-width: 280px;
113+
text-transform: uppercase;
114+
font-family: var(--sans-serif);
115+
pointer-events: auto !important;
116+
}
117+
118+
#timeframe-selector h3 {
119+
margin: 0 0 0.5rem 0;
120+
font-size: 0.875rem;
121+
text-transform: uppercase;
122+
font-weight: 600;
123+
}
124+
125+
#timeframe-selector input[type="radio"] {
126+
margin-right: 0.5rem;
127+
pointer-events: auto !important;
128+
z-index: 999999 !important;
129+
position: relative;
130+
}
131+
132+
#timeframe-selector label {
133+
display: block;
134+
margin-bottom: 0.25rem;
135+
font-size: 0.875rem;
136+
cursor: pointer;
137+
pointer-events: auto !important;
138+
z-index: 999999 !important;
139+
position: relative;
140+
}
141+
142+
#timeframe-selector input[type="date"] {
143+
width: 100%;
144+
padding: 0.25rem;
145+
margin-top: 0.25rem;
146+
border: 1px solid var(--theme-foreground-faintest);
147+
border-radius: 4px;
148+
background: var(--theme-background);
149+
color: var(--theme-foreground);
150+
font-family: var(--sans-serif);
151+
pointer-events: auto !important;
152+
z-index: 999999 !important;
153+
position: relative;
83154
}
84155

85156
.card:target {

0 commit comments

Comments
 (0)