Add chart data section to API documentation and improve layout consistency in package detail page

This commit is contained in:
Luke Hagar
2025-08-14 16:07:50 -05:00
parent 45d56b513f
commit 11fad6ba12
2 changed files with 108 additions and 66 deletions

View File

@@ -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/&#123;package&#125;/chart/&#123;type&#125;</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&amp;chart=line&amp;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>

View File

@@ -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>