Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
35 lines
3.3 KiB
HTML
35 lines
3.3 KiB
HTML
<!-- @dsCard group="Components" name="Charts" subtitle="recharts conventions + 8-color series palette" width="780" height="420" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PPMS · Charts</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script>tailwind.config={theme:{extend:{colors:{neutral:{100:"#f5f5f5",200:"#e5e5e5",500:"#737373",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
|
|
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
|
|
</head>
|
|
<body class="bg-neutral-50 p-6 text-neutral-900">
|
|
<h2 class="text-lg font-semibold">Charts</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-neutral-600"><b>recharts</b> inside a standard card. Grid <code>strokeDasharray="3 3"</code> in <code>#f0f0f0</code>; axis ticks <code>11px #737373</code>; bars <code>radius</code>, lines <code>strokeWidth 2</code>. Y-axis money via <code>formatCompactINR</code>.</p>
|
|
<div class="mt-4 grid gap-4 lg:grid-cols-2">
|
|
<div class="rounded-lg border border-neutral-200 bg-white p-5">
|
|
<p class="mb-4 text-sm font-semibold">Spend by cost centre</p>
|
|
<svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/><g><rect x="50" y="40" width="34" height="100" rx="3" fill="#2563eb"/><rect x="104" y="64" width="34" height="76" rx="3" fill="#2563eb"/><rect x="158" y="80" width="34" height="60" rx="3" fill="#2563eb"/><rect x="212" y="98" width="34" height="42" rx="3" fill="#2563eb"/><rect x="266" y="112" width="34" height="28" rx="3" fill="#2563eb"/></g><g font-size="9" fill="#737373"><text x="2" y="44">₹3Cr</text><text x="0" y="92">₹1.5Cr</text><text x="10" y="140">₹0</text></g></svg>
|
|
</div>
|
|
<div class="rounded-lg border border-neutral-200 bg-white p-5">
|
|
<p class="mb-4 text-sm font-semibold">Monthly trend</p>
|
|
<svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/><polyline fill="none" stroke="#2563eb" stroke-width="2" points="46,70 92,52 138,96 184,60 230,108 276,46 308,72"/><polyline fill="none" stroke="#16a34a" stroke-width="2" points="46,110 92,100 138,118 184,88 230,124 276,96 308,104"/><g fill="#2563eb"><circle cx="92" cy="52" r="2.5"/><circle cx="276" cy="46" r="2.5"/></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 rounded-lg border border-neutral-200 bg-white p-5">
|
|
<p class="mb-3 text-sm font-semibold">Multi-series palette</p>
|
|
<div class="flex flex-wrap gap-2" id="p"></div>
|
|
</div>
|
|
<script>
|
|
const C=["#2563eb","#16a34a","#9333ea","#ea580c","#0891b2","#dc2626","#ca8a04","#4f46e5"];
|
|
document.getElementById("p").innerHTML=C.map(c=>`<div class="flex items-center gap-1.5 rounded-md border border-neutral-200 px-2 py-1"><span class="h-3.5 w-3.5 rounded" style="background:${c}"></span><code class="text-[10px] text-neutral-500">${c}</code></div>`).join("");
|
|
</script>
|
|
</body>
|
|
</html>
|