blob: 883460c0dda8a773a07388a82024ee9865c4227c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<script lang="ts">
import { pushToast } from '$lib/stores/toasts';
import type { PageData } from './$types';
let { data }: { data: PageData } = $props();
const monthName = new Date().toLocaleDateString('en-US', {
month: 'long',
year: 'numeric'
});
function fmt(n: number): string {
return n.toLocaleString('en-US');
}
const curlExample = `curl https://api.tidyindex.com/v1/datasets/irs-990/records/20-0049703 \\
-H "Authorization: Bearer YOUR_API_KEY"`;
async function copyCurl() {
try {
await navigator.clipboard.writeText(curlExample);
pushToast('Copied', 'success');
} catch {
pushToast("Couldn't copy", 'error');
}
}
let pct = $derived.by(() => {
if (!Number.isFinite(data.plan.requestsPerMonth)) return 0;
const p = (data.total / data.plan.requestsPerMonth) * 100;
return Math.min(100, Math.max(0, p));
});
let limitLabel = $derived(
Number.isFinite(data.plan.requestsPerMonth)
? fmt(data.plan.requestsPerMonth)
: 'unlimited'
);
</script>
<p class="section-marker">§ 02 · usage</p>
<h1 class="page-title">This month.</h1>
<p class="page-subtitle">
Requests counted against your plan limit for {monthName}.
</p>
<div class="card">
<div class="usage-summary">
<div>
<p class="text-mono text-mute" style="margin:0 0 6px;">
requests / {limitLabel}
</p>
<p class="usage-count">
{fmt(data.total)}
{#if Number.isFinite(data.plan.requestsPerMonth)}
<small> of {limitLabel}</small>
{/if}
</p>
</div>
<div>
<span class="badge">{data.plan.name.toLowerCase()} plan</span>
</div>
</div>
{#if Number.isFinite(data.plan.requestsPerMonth)}
<div class="usage-bar" aria-label="Usage bar">
<div class="usage-bar-fill" style="width: {pct}%"></div>
</div>
{/if}
</div>
<div class="card mt-24">
<div class="card-head">
<h2 class="card-title">By dataset</h2>
<p class="card-sub">Which datasets drew the most traffic.</p>
</div>
{#if data.byDataset.length === 0}
<div class="empty-state">
<p class="empty-title">No requests yet this month.</p>
<p>Usage data will show up here once your keys start making calls.</p>
</div>
{:else}
<table class="usage-table">
<thead>
<tr>
<th>dataset</th>
<th style="text-align:right;">requests</th>
<th style="text-align:right; width: 140px;">share</th>
</tr>
</thead>
<tbody>
{#each data.byDataset as row}
<tr>
<td>{row.dataset}</td>
<td class="num">{fmt(row.count)}</td>
<td class="num">
{data.total > 0
? ((row.count / data.total) * 100).toFixed(1)
: '0.0'}%
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
<div class="card mt-24">
<div class="card-head">
<h2 class="card-title">By key</h2>
<p class="card-sub">Traffic attributed to each of your keys.</p>
</div>
{#if data.byKey.length === 0}
<div class="empty-state">
<p class="empty-title">No keys yet.</p>
<p>Create one on the Keys tab.</p>
</div>
{:else}
<table class="usage-table">
<thead>
<tr>
<th>key</th>
<th style="text-align:right;">requests</th>
</tr>
</thead>
<tbody>
{#each data.byKey as row}
<tr>
<td>{row.name}</td>
<td class="num">{fmt(row.count)}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
<div class="card mt-24">
<div class="card-head">
<h2 class="card-title">API base URL</h2>
</div>
<p class="card-sub">All endpoints live under this host.</p>
<pre class="code-block mt-16">https://api.tidyindex.com/v1</pre>
</div>
<div class="card mt-24">
<div class="card-head">
<h2 class="card-title">Quick start</h2>
<button class="btn btn-sm btn-ghost" onclick={copyCurl}>Copy curl</button>
</div>
<p class="card-sub">Fetch one record from the IRS 990 dataset.</p>
<pre class="code-block mt-16">{curlExample}</pre>
</div>
|
