mirror of
https://github.com/LukeHagar/pypistats.dev.git
synced 2025-12-06 04:21:09 +00:00
Add chart data section to API documentation and improve layout consistency in package detail page
This commit is contained in:
@@ -20,6 +20,39 @@
|
||||
<h2 class="mt-8 mb-4 text-2xl font-semibold text-gray-100">Endpoints</h2>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Chart Data / Images -->
|
||||
<div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
|
||||
<h3 class="mb-3 text-xl font-semibold text-gray-100">Chart Data / Images</h3>
|
||||
<div class="mb-4 rounded-md bg-gray-950 p-4">
|
||||
<code class="text-sm text-gray-200">GET /api/packages/{package}/chart/{type}</code>
|
||||
</div>
|
||||
<p class="mb-4 text-gray-400">
|
||||
Returns either a PNG chart image (default) or JSON payload for interactive charts.
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<strong class="text-gray-100">Path params:</strong>
|
||||
<ul class="mt-2 list-disc pl-6 text-gray-400">
|
||||
<li><code>type</code>: one of <code>overall</code>, <code>python_major</code>, <code>python_minor</code>, <code>system</code>, <code>installer</code>, <code>version</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<strong class="text-gray-100">Query params:</strong>
|
||||
<ul class="mt-2 list-disc pl-6 text-gray-400">
|
||||
<li><code>format</code>: <code>json</code> to return the data model instead of an image</li>
|
||||
<li><code>chart</code>: <code>line</code> (default) or <code>bar</code></li>
|
||||
<li><code>mirrors</code>: for <code>overall</code>, include mirror downloads (<code>true</code>/<code>false</code>)</li>
|
||||
<li><code>version</code>: for <code>python_major</code>/<code>python_minor</code> filters</li>
|
||||
<li><code>os</code>: for <code>system</code> filter (e.g. <code>Linux</code>, <code>Windows</code>, <code>Darwin</code>)</li>
|
||||
<li><code>nocache</code> / <code>cache</code>: bypass caching (<code>nocache=1</code> or <code>cache=false</code>)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<strong class="text-gray-100">Example:</strong>
|
||||
<div class="mt-2 rounded-md bg-gray-950 p-4">
|
||||
<code class="text-sm text-gray-200">GET /api/packages/numpy/chart/overall?format=json&chart=line&mirrors=true</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Downloads -->
|
||||
<div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
|
||||
<h3 class="mb-3 text-xl font-semibold text-gray-100">Recent Downloads</h3>
|
||||
|
||||
@@ -275,7 +275,7 @@
|
||||
<div class="max-w-full min-w-[280px] flex-1 grow">
|
||||
<h4 class="mb-2 text-sm font-semibold text-gray-300">Recent</h4>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-800 overflow-hidden rounded-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
@@ -313,7 +313,7 @@
|
||||
<div class="max-w-full min-w-[280px] flex-1 grow">
|
||||
<h4 class="mb-2 text-sm font-semibold text-gray-300">Overall</h4>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-800 overflow-hidden rounded-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
@@ -353,7 +353,7 @@
|
||||
<div class="max-w-full min-w-[280px] flex-1 grow">
|
||||
<h4 class="mb-2 text-sm font-semibold text-gray-300">Systems</h4>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-800 overflow-hidden rounded-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
@@ -393,7 +393,7 @@
|
||||
<div class="mt-8">
|
||||
<h3 class="text-md mb-2 font-semibold text-gray-900">Python Versions</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<table class="min-w-full divide-y divide-gray-800 overflow-hidden rounded-md">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
@@ -532,16 +532,25 @@
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-100">API Links</h3>
|
||||
<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each apiEndpoints as ep}
|
||||
<div class="flex items-center justify-between rounded-md border border-gray-800 bg-gray-950 px-3 py-2">
|
||||
<div
|
||||
class="flex items-center justify-between rounded-md border border-gray-800 bg-gray-950 px-3 py-2"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="text-gray-300">{ep.label}</div>
|
||||
<a class="truncate text-xs text-blue-400 hover:text-blue-300" href={endpointUrl(ep.path)} rel="noopener" target="_blank">{endpointUrl(ep.path)}</a>
|
||||
<a
|
||||
class="truncate text-xs text-blue-400 hover:text-blue-300"
|
||||
href={endpointUrl(ep.path)}
|
||||
rel="noopener"
|
||||
target="_blank">{endpointUrl(ep.path)}</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="ml-3 shrink-0 rounded-md border border-blue-700 bg-blue-800 px-2 py-1 text-xs text-white hover:bg-blue-700"
|
||||
onclick={() => navigator.clipboard?.writeText(endpointUrl(ep.path))}
|
||||
aria-label={`Copy ${ep.label} URL`}
|
||||
>Copy</button>
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user