All Prompts
All Prompts
paneldatacolumnsmetricstailwindinteractivelucide-icons
Data Columns Sidebar with Metrics & Visibility Controls
Боковая панель с колонками данных, статистикой и контролем видимости. Интерактивный список для аналитики и дашбордов. Tailwind CSS, Lucide icons.
Prompt
<aside
class="hidden lg:block lg:w-80 lg:border-l lg:border-t-0 bg-black w-full border-neutral-800/70 border-t pt-3 pr-3 pb-3 pl-3"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > main:nth-of-type(1) > div:nth-of-type(2) > section:nth-of-type(2) > div:nth-of-type(2) > aside:nth-of-type(1)"
id="columnsPanel">
<div class="flex items-center justify-between">
<div class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="columns-3"
class="lucide lucide-columns-3 h-3.5 w-3.5 align-middle">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M9 3v18" class=""></path>
<path d="M15 3v18" class=""></path>
</svg>
<span class="text-[13px] font-medium tracking-tight">
Columns
</span>
</div>
<button id="colsClose" type="button" class="rounded-md p-1 hover:bg-neutral-950">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-3.5 w-3.5 align-middle"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
<div class="mt-3 space-y-2" id="columnsList">
<div class="">
<div class="flex items-center justify-between rounded-md border border-neutral-800/70 bg-neutral-950 px-2 py-1.5">
<div class="inline-flex items-center gap-2">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-sm bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="pilcrow" class="lucide lucide-pilcrow h-3 w-3 text-neutral-500 align-middle"><path d="M13 4v16" class=""></path><path d="M17 4v16" class=""></path><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" class=""></path></svg>
</span>
<span class="text-[12px]">specialty</span>
<span class="ml-2 hidden rounded-sm bg-neutral-900 px-1 py-0.5 text-[10px] text-neutral-500 sm:inline">text</span>
</div>
<div class="inline-flex items-center gap-1">
<button data-metrics="specialty" class="inline-flex items-center gap-1 rounded-md border border-neutral-800/70 bg-black px-2 py-1 text-[11px] text-neutral-300 hover:bg-neutral-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-3.5 w-3.5 align-middle"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>Metrics</button>
<button data-toggle="specialty" class="group inline-flex items-center gap-2 rounded-md border border-neutral-800/70 px-2 py-1 text-[11px] bg-emerald-500/10 text-emerald-300 hover:bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-3.5 w-3.5 align-middle"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Visible
</button>
</div>
</div>
<div id="metrics-specialty" class="mt-2 hidden rounded-md border border-neutral-800/70 bg-black p-2">
<div class="grid grid-cols-2 gap-2 text-[11px] text-neutral-300 sm:grid-cols-3">
<div>Count <div class="text-neutral-500">15</div>
</div>
<div>Nulls <div class="text-neutral-500">0 (0%)</div>
</div>
<div>Distinct <div class="text-neutral-500">4</div>
</div>
<div>Len min <div class="text-neutral-500">9</div>
</div>
<div>Len avg <div class="text-neutral-500">10</div>
</div>
<div>Len max <div class="text-neutral-500">11</div>
</div>
</div>
<div class="mt-2">
<div class="mb-1 text-[10px] uppercase tracking-wide text-neutral-500">Top values</div>
<div class="space-y-1">
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">Cardiology</span>
<span class="text-neutral-500">5 • 33%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:33%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">Pediatrics</span>
<span class="text-neutral-500">4 • 27%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:27%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">Orthopedics</span>
<span class="text-neutral-500">3 • 20%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:20%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">Neurology</span>
<span class="text-neutral-500">3 • 20%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:20%"></div>
</div>
</div>
</div>
</div>
<div class="mt-2">
<div class="mb-1 text-[10px] uppercase tracking-wide text-neutral-500">Samples</div>
<div class="flex flex-wrap gap-1">
<span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">Cardiology</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">Cardiology</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">Pediatrics</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">Pediatrics</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">Orthopedics</span>
</div>
</div>
</div>
</div>
<div class="">
<div class="flex items-center justify-between rounded-md border border-neutral-800/70 bg-neutral-950 px-2 py-1.5">
<div class="inline-flex items-center gap-2">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-sm bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="pilcrow" class="lucide lucide-pilcrow h-3 w-3 text-neutral-500 align-middle"><path d="M13 4v16" class=""></path><path d="M17 4v16" class=""></path><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" class=""></path></svg>
</span>
<span class="text-[12px]">zip_code</span>
<span class="ml-2 hidden rounded-sm bg-neutral-900 px-1 py-0.5 text-[10px] text-neutral-500 sm:inline">text</span>
</div>
<div class="inline-flex items-center gap-1">
<button data-metrics="zip_code" class="inline-flex items-center gap-1 rounded-md border border-neutral-800/70 bg-black px-2 py-1 text-[11px] text-neutral-300 hover:bg-neutral-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-3.5 w-3.5 align-middle"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>Metrics</button>
<button data-toggle="zip_code" class="group inline-flex items-center gap-2 rounded-md border border-neutral-800/70 px-2 py-1 text-[11px] bg-emerald-500/10 text-emerald-300 hover:bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-3.5 w-3.5 align-middle"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Visible
</button>
</div>
</div>
<div id="metrics-zip_code" class="mt-2 hidden rounded-md border border-neutral-800/70 bg-black p-2">
<div class="grid grid-cols-2 gap-2 text-[11px] text-neutral-300 sm:grid-cols-3">
<div>Count <div class="text-neutral-500">15</div>
</div>
<div>Nulls <div class="text-neutral-500">0 (0%)</div>
</div>
<div>Distinct <div class="text-neutral-500">6</div>
</div>
<div>Len min <div class="text-neutral-500">5</div>
</div>
<div>Len avg <div class="text-neutral-500">5</div>
</div>
<div>Len max <div class="text-neutral-500">5</div>
</div>
</div>
<div class="mt-2">
<div class="mb-1 text-[10px] uppercase tracking-wide text-neutral-500">Top values</div>
<div class="space-y-1">
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">10001</span>
<span class="text-neutral-500">4 • 27%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:27%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">10002</span>
<span class="text-neutral-500">4 • 27%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:27%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">10003</span>
<span class="text-neutral-500">3 • 20%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:20%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">10004</span>
<span class="text-neutral-500">2 • 13%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:13%"></div>
</div>
</div>
<div class="text-[11px]">
<div class="flex items-center justify-between gap-2">
<span class="truncate">10005</span>
<span class="text-neutral-500">1 • 7%</span>
</div>
<div class="h-1.5 rounded bg-neutral-800/70">
<div class="h-1.5 rounded bg-sky-500" style="width:7%"></div>
</div>
</div>
</div>
</div>
<div class="mt-2">
<div class="mb-1 text-[10px] uppercase tracking-wide text-neutral-500">Samples</div>
<div class="flex flex-wrap gap-1">
<span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">10001</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">10002</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">10001</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">10003</span><span class="max-w-[200px] truncate rounded-sm bg-neutral-900 px-1.5 py-0.5 text-[11px] text-neutral-300">10002</span>
</div>
</div>
</div>
</div>
<div class="">
<div class="flex items-center justify-between rounded-md border border-neutral-800/70 bg-neutral-950 px-2 py-1.5">
<div class="inline-flex items-center gap-2">
<span class="inline-flex h-5 w-5 items-center justify-center rounded-sm bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="hash" class="lucide lucide-hash h-3 w-3 text-neutral-500 align-middle"><line x1="4" x2="20" y1="9" y2="9" class=""></line><line x1="4" x2="20" y1="15" y2="15" class=""></line><line x1="10" x2="8" y1="3" y2="21" class=""></line><line x1="16" x2="14" y1="3" y2="21" class=""></line></svg>
</span>
<span class="text-[12px]">provider_count</span>
<span class="ml-2 hidden rounded-sm bg-neutral-900 px-1 py-0.5 text-[10px] text-neutral-500 sm:inline">number</span>
</div>
<div class="inline-flex items-center gap-1">
<button data-metrics="provider_count" class="inline-flex items-center gap-1 rounded-md border border-neutral-800/70 bg-black px-2 py-1 text-[11px] text-neutral-300 hover:bg-neutral-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-3.5 w-3.5 align-middle"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>Metrics</button>
<button data-toggle="provider_count" class="group inline-flex items-center gap-2 rounded-md border border-neutral-800/70 px-2 py-1 text-[11px] bg-emerald-500/10 text-emerald-300 hover:bg-neutral-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-3.5 w-3.5 align-middle"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Visible
</button>
</div>
</div>
<div id="metrics-provider_count" class="mt-2 hidden rounded-md border border-neutral-800/70 bg-black p-2">
<div class="grid grid-cols-2 gap-2 text-[11px] text-neutral-300 sm:grid-cols-3">
<div>Count <div class="text-neutral-500">15</div>
</div>
<div>Nulls <div class="text-neutral-500">0 (0%)</div>
</div>
<div>Distinct <div class="text-neutral-500">15</div>
</div>
<div>Min <div class="text-neutral-500">6</div>
</div>
<div>P25 <div class="text-neutral-500">13</div>
</div>
<div>Median <div class="text-neutral-500">19</div>
</div>
<div>P75 <div class="text-neutral-500">28</div>
</div>
<div>Max <div class="text-neutral-500">42</div>
</div>
<div>Mean <div class="text-neutral-500">21.07</div>
</div>
<div>Std dev <div class="text-neutral-500">10.62</div>
</div>
</div>
<div class="mt-2">
<div class="mb-1 text-[10px] uppercase tracking-wide text-neutral-500">Distribution</div>
<div class="flex items-end gap-0.5">
<div class="w-3 rounded-t bg-sky-500/70" style="height:50px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:50px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:50px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:50px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:25px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:50px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:25px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:25px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:25px"></div>
<div class="w-3 rounded-t bg-sky-500/70" style="height:25px"></div>
</div>
</div>
</div>
</div>
</div>
</aside>