Home
JUGENDRA GANGWAR
Modern Retail Analytics Dashboard UI with Interactive Charts

Modern Retail Analytics Dashboard UI with Interactive Charts

Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Jul-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are drawer,Admin Dashboard, User dashboard

Header Card Sidebar Navigations Dashboard Navbar

Author JUGENDRA GANGWAR

254

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Maren & Co · Retail Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.4.1/tailwind.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          background: 'rgb(var(--c-background) / <alpha-value>)',
          foreground: 'rgb(var(--c-foreground) / <alpha-value>)',
          card: 'rgb(var(--c-card) / <alpha-value>)',
          'card-foreground': 'rgb(var(--c-foreground) / <alpha-value>)',
          border: 'rgb(var(--c-border) / <alpha-value>)',
          ring: 'rgb(var(--c-ring) / <alpha-value>)',
          primary: {
            DEFAULT: 'rgb(var(--c-primary) / <alpha-value>)',
            foreground: 'rgb(var(--c-primary-foreground) / <alpha-value>)',
          },
          secondary: {
            DEFAULT: 'rgb(var(--c-secondary) / <alpha-value>)',
            foreground: 'rgb(var(--c-secondary-foreground) / <alpha-value>)',
          },
          accent: {
            DEFAULT: 'rgb(var(--c-accent) / <alpha-value>)',
            foreground: 'rgb(var(--c-accent-foreground) / <alpha-value>)',
          },
          destructive: {
            DEFAULT: 'rgb(var(--c-destructive) / <alpha-value>)',
            foreground: 'rgb(var(--c-destructive-foreground) / <alpha-value>)',
          },
          muted: {
            DEFAULT: 'rgb(var(--c-secondary) / <alpha-value>)',
            foreground: 'rgb(var(--c-muted-foreground) / <alpha-value>)',
          },
          popover: {
            DEFAULT: 'rgb(var(--c-card) / <alpha-value>)',
            foreground: 'rgb(var(--c-foreground) / <alpha-value>)',
          },
        },
        fontFamily: {
          display: ['"Fraunces"', 'ui-serif', 'serif'],
          sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
          mono: ['"IBM Plex Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
        },
      },
    },
  };
</script>
<style>
  :root {
    --c-background: 250 248 244;
    --c-foreground: 28 25 23;
    --c-card: 255 255 255;
    --c-border: 231 224 212;
    --c-ring: 6 95 70;
    --c-primary: 6 95 70;
    --c-primary-foreground: 255 255 255;
    --c-secondary: 243 239 231;
    --c-secondary-foreground: 68 62 56;
    --c-accent: 219 39 89;
    --c-accent-foreground: 157 23 77;
    --c-destructive: 194 65 12;
    --c-destructive-foreground: 255 255 255;
    --c-muted-foreground: 122 113 104;
  }
  body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
  .font-display { font-family: 'Fraunces', ui-serif, serif; font-optical-sizing: auto; }
  .font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  ::-webkit-scrollbar { height: 8px; width: 8px; }
  ::-webkit-scrollbar-thumb { background: rgb(var(--c-border)); border-radius: 9999px; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
  .chart-tooltip { pointer-events: none; transition: opacity .1s ease; }

.tag-card {
    position: relative;
    padding-left: 30px;
  }
  .tag-card::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 22px;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: rgb(var(--c-background));
    border: 1.5px solid rgb(var(--c-border));
    box-shadow: 0 0 0 2px rgb(var(--c-card));
  }
  .tag-card::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 14px;
    bottom: 14px;
    border-left: 1.5px dashed rgb(var(--c-border));
  }
  .barcode {
    display: inline-flex;
    align-items: stretch;
    gap: 1.5px;
    height: 14px;
  }
  .barcode span { display: block; width: 1.5px; background: rgb(var(--c-foreground) / 0.55); }
  .barcode span:nth-child(3n) { width: 2.5px; }
  .barcode span:nth-child(5n) { width: 1px; }
</style>
</head>
<body class="min-h-screen bg-background text-foreground antialiased">
  <div class="flex min-h-screen">
    <aside class="hidden w-64 shrink-0 flex-col border-r border-border/70 bg-card/40 lg:flex">
      <div class="flex h-16 items-center gap-2 border-b border-border/70 px-6">
        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
            <path d="M3 6h18"/>
            <path d="M16 10a4 4 0 0 1-8 0"/>
          </svg>
        </span>
        <span class="font-display text-lg font-semibold tracking-tight">Maren &amp; Co</span>
      </div>
      <nav class="flex-1 space-y-1 p-4">
        <p class="px-3 pb-2 pt-2 text-xs font-medium uppercase tracking-wider text-muted-foreground/70">Storefront</p>
        <div id="nav-items" class="space-y-1"></div>
        <p class="px-3 pb-2 pt-6 text-xs font-medium uppercase tracking-wider text-muted-foreground/70">Account</p>
        <button type="button" class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          Settings
        </button>
      </nav>

<div class="m-4 rounded-xl border border-border/70 bg-gradient-to-br from-primary to-primary/80 p-4 text-primary-foreground">
        <div class="mb-1 flex items-center gap-2">
          <span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-accent text-white">
            <svg viewBox="0 0 24 24" fill="currentColor" class="h-3.5 w-3.5"><path d="M12 2l2.6 6.4L21 9.3l-4.9 4.4L17.4 21 12 17.8 6.6 21l1.3-7.3L3 9.3l6.4-.9L12 2z" /></svg>
          </span>
          <p class="font-display text-sm font-semibold">Go Premium</p>
        </div>
        <p class="text-xs leading-relaxed text-primary-foreground/80">Unlock multi-channel forecasting and automated restock alerts.</p>
        <button class="mt-3 inline-flex h-8 w-full items-center justify-center rounded-md bg-background text-sm font-medium text-foreground hover:bg-background/90 transition-colors">See plans</button>
      </div>
    </aside>
    <div class="flex min-w-0 flex-1 flex-col">
      <header class="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-border/70 bg-background/80 px-4 backdrop-blur-xl sm:px-6 lg:px-8">
        <div class="relative flex-1 max-w-md">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input type="search" placeholder="Search orders, products, customers…" class="h-9 w-full rounded-lg border border-border/80 bg-card pl-9 pr-16 text-sm text-foreground placeholder:text-muted-foreground/70 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30" />
          <kbd class="pointer-events-none absolute right-2 top-1/2 hidden -translate-y-1/2 items-center gap-1 rounded border border-border bg-secondary px-1.5 py-0.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">⌘K</kbd>
        </div>

<div class="ml-auto flex items-center gap-2">
          <button aria-label="Notifications" class="relative inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-secondary transition-colors">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
            <span class="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-accent"></span>
          </button>
          <div class="h-6 w-px bg-border"></div>
          <div class="flex items-center gap-2 pr-1">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">RS</span>
            <div class="hidden text-left sm:block">
              <p class="text-sm font-medium leading-none">Rosa Serrano</p>
              <p class="mt-0.5 text-xs text-muted-foreground">Store Manager · Maren &amp; Co</p>
            </div>
          </div>
        </div>
      </header>

<main class="flex-1 px-4 py-6 sm:px-6 lg:px-8">
        <div class="mx-auto flex max-w-[1400px] flex-col gap-6">
          <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <p class="text-sm font-medium text-muted-foreground" id="page-date"></p>
              <h1 class="mt-1 font-display text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">Good morning, Rosa</h1>
              <p class="mt-1 text-sm text-muted-foreground">Here's how the shop is trading today.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
              <button class="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                Last 12 months
              </button>
              <button class="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export
              </button>
              <button class="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                New product
              </button>
            </div>
          </div>
          <div id="kpi-grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"></div>
          <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            <section class="xl:col-span-2 rounded-xl border border-border/70 bg-card p-5 sm:p-6">
              <header class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <h2 class="font-display text-base font-semibold tracking-tight text-foreground">Online store vs. marketplaces</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Gross sales across all channels, in USD.</p>
                </div>
                <div class="flex items-center gap-4 text-xs">
                  <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-primary))"></span>Online store</span>
                  <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-accent))"></span>Marketplaces</span>
                </div>
              </header>
              <div class="relative mt-6 h-72 w-full" id="area-chart-wrap"></div>
            </section>
            <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
              <header class="flex items-start justify-between">
                <div>
                  <h2 class="font-display text-base font-semibold tracking-tight text-foreground">Sales channels</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Revenue share, this month</p>
                </div>
                <span class="inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground">4 live</span>
              </header>
              <div class="mt-5">
                <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Total revenue</p>
                <p class="mt-1 font-mono text-3xl font-semibold tabular-nums tracking-tight text-foreground" id="channels-total"></p>
              </div>
              <ul class="mt-6 space-y-4" id="channels-list"></ul>
            </section>
          </div>
          <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            <section class="xl:col-span-2 rounded-xl border border-border/70 bg-card">
              <header class="flex flex-col gap-3 border-b border-border/70 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <div>
                  <h2 class="font-display text-base font-semibold tracking-tight text-foreground">Recent orders</h2>
                  <p class="mt-1 text-sm text-muted-foreground">Synced 4 minutes ago across 4 channels.</p>
                </div>
                <div class="flex items-center gap-2">
                  <button class="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-secondary transition-colors">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                    Filter
                  </button>
                  <button class="inline-flex h-8 items-center rounded-md px-3 text-sm font-medium hover:bg-secondary transition-colors">View all</button>
                </div>
              </header>
              <div class="overflow-x-auto">
                <table class="w-full text-sm">
                  <thead>
                    <tr class="border-b border-border/70 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">
                      <th class="px-6 py-3">Order</th>
                      <th class="px-6 py-3">Channel</th>
                      <th class="px-6 py-3">Status</th>
                      <th class="px-6 py-3">Date</th>
                      <th class="px-6 py-3 text-right">Total</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-border/60" id="tx-body"></tbody>
                </table>
              </div>
            </section>
            <div class="flex flex-col gap-6">
              <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
                <header class="flex items-start justify-between">
                  <div>
                    <h2 class="font-display text-base font-semibold tracking-tight text-foreground">Sales by category</h2>
                    <p class="mt-1 text-sm text-muted-foreground">Month to date · in units</p>
                  </div>
                  <span class="inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground">Jul</span>
                </header>
                <div class="relative mt-4 h-52 w-full" id="bar-chart-wrap"></div>
              </section>
              <section class="rounded-xl border border-border/70 bg-card p-5 sm:p-6">
                <header class="flex items-start justify-between">
                  <div>
                    <h2 class="font-display text-base font-semibold tracking-tight text-foreground">Store activity</h2>
                    <p class="mt-1 text-sm text-muted-foreground">Fulfillment and inventory updates</p>
                  </div>
                  <button class="inline-flex h-8 items-center rounded-md px-3 text-sm font-medium hover:bg-secondary transition-colors">View log</button>
                </header>
                <ul class="mt-4 space-y-4" id="activity-list"></ul>
              </section>
            </div>
          </div>

</div>
      </main>
    </div>
  </div>

const kpis = [
    { label: "Gross revenue", value: "$918,240", delta: "+16.2%", trend: "up", sub: "vs. last quarter" },
    { label: "Orders", value: "8,412", delta: "+9.8%", trend: "up", sub: "30-day rolling" },
    { label: "Average order value", value: "$109.16", delta: "+2.1%", trend: "up", sub: "vs. last quarter" },
    { label: "Conversion rate", value: "3.28%", delta: "-0.3%", trend: "down", sub: "storefront sessions" },
  ];

const categorySales = [
    { category: "Apparel", amount: 612 },
    { category: "Footwear", amount: 284 },
    { category: "Accessories", amount: 398 },
    { category: "Home", amount: 156 },
    { category: "Beauty", amount: 221 },
    { category: "Sale", amount: 342 },
  ];

const transactions = [
    { id: "#10482", name: "Elena Marsh", account: "Online store", amount: 214.5, type: "in", status: "Fulfilled", date: "Jul 08" },
    { id: "#10481", name: "Dara Okafor", account: "Instagram Shop", amount: 68.0, type: "in", status: "Processing", date: "Jul 08" },
    { id: "#10480", name: "Wholesale — Birchline", account: "Wholesale", amount: 4820.0, type: "in", status: "Fulfilled", date: "Jul 07" },
    { id: "#10479", name: "Return — Tomas Reyes", account: "Online store", amount: -89.2, type: "out", status: "Refunded", date: "Jul 07" },
    { id: "#10478", name: "Marketplace — Amazon", account: "Marketplace", amount: 156.75, type: "in", status: "Fulfilled", date: "Jul 06" },
    { id: "#10477", name: "Priya Nandan", account: "Online store", amount: 312.4, type: "in", status: "Processing", date: "Jul 06" },
  ];

const channels = [
    { name: "Online store", note: "maren-co.com", balance: 428600, share: 68 },
    { name: "Marketplaces", note: "Amazon · Etsy", balance: 196400, share: 44 },
    { name: "Instagram Shop", note: "Checkout", balance: 84200, share: 26 },
    { name: "Wholesale", note: "B2B accounts", balance: 209040, share: 51 },
  ];

const activity = [
    { who: "Rosa Serrano", what: "fulfilled order", target: "#10482 · $214.50", when: "12m ago", initials: "RS" },
    { who: "Automated", what: "flagged low stock", target: "Linen Wrap Dress · 4 left", when: "45m ago", initials: "!!" },
    { who: "Noah Kessler", what: "approved refund", target: "#10479 · $89.20", when: "2h ago", initials: "NK" },
    { who: "Ana Brandão", what: "added product", target: "Suede Ankle Boot", when: "Yesterday", initials: "AB" },
  ];

const currency = (n) => n.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
  const currencyPrecise = (n) => n.toLocaleString("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2 });

const ICONS = {
    home: '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
    bag: '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
    box: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="M3.3 7 12 12l8.7-5"/><path d="M12 22V12"/>',
    tag: '<path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l8.58-8.58a1 1 0 0 0 0-1.42L12 2Z"/><circle cx="7" cy="7" r="1.4"/>',
    users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
    linechart: '<path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>',
    arrowUp: '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
    arrowDown: '<line x1="7" y1="7" x2="17" y2="17"/><polyline points="17 7 17 17 7 17"/>',
  };

const navLabels = [
    { label: "Overview", icon: "home", active: true },
    { label: "Orders", icon: "tag", active: false },
    { label: "Products", icon: "bag", active: false },
    { label: "Inventory", icon: "box", active: false },
    { label: "Reports", icon: "linechart", active: false },
    { label: "Customers", icon: "users", active: false },
  ];

function iconSvg(name, cls) {
    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}">${ICONS[name]}</svg>`;
  }

function barcode(bars) {
    let out = "";
    for (let i = 0; i < bars; i++) out += "<span></span>";
    return `<span class="barcode">${out}</span>`;
  }

document.getElementById("page-date").textContent = new Date(2026, 6, 8).toLocaleDateString("en-US", {
    weekday: "long", year: "numeric", month: "long", day: "numeric",
  });

const totalRevenue = channels.reduce((s, a) => s + a.balance, 0);
  document.getElementById("channels-total").textContent = currency(totalRevenue);

const statusStyles = {
    Fulfilled: "bg-primary/10 text-primary",
    Processing: "bg-secondary text-secondary-foreground",
    Refunded: "bg-destructive/10 text-destructive",
  };

function renderAreaChart(container, data) {
    const W = 760, H = 288;
    const padL = 48, padR = 8, padT = 12, padB = 28;
    const innerW = W - padL - padR;
    const innerH = H - padT - padB;

const allVals = data.flatMap((d) => [d.online, d.marketplace]);
    const maxV = Math.max(...allVals);
    const niceMax = Math.ceil(maxV / 20000) * 20000;

const x = (i) => padL + (i / (data.length - 1)) * innerW;
    const y = (v) => padT + innerH - (v / niceMax) * innerH;

const linePath = (key) =>
      data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(d[key]).toFixed(1)}`).join(" ");

const xLabels = data.map((d, i) => `<text x="${x(i)}" y="${H - 8}" text-anchor="middle" font-size="11" fill="rgb(var(--c-muted-foreground))">${d.month}</text>`).join("");

const dots = data.map((d, i) => `
      <circle class="area-dot" data-idx="${i}" cx="${x(i)}" cy="${y(d.online)}" r="9" fill="transparent" />
    `).join("");

const svg = `
      <svg viewBox="0 0 ${W} ${H}" class="h-full w-full" preserveAspectRatio="none">
        <defs>
          <linearGradient id="gradOnline" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="rgb(var(--c-primary))" stop-opacity="0.28" />
            <stop offset="100%" stop-color="rgb(var(--c-primary))" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="gradMarketplace" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="rgb(var(--c-accent))" stop-opacity="0.28" />
            <stop offset="100%" stop-color="rgb(var(--c-accent))" stop-opacity="0" />
          </linearGradient>
        </defs>
        ${gridLines.join("")}
        <path d="${areaPath("online")}" fill="url(#gradOnline)" />
        <path d="${areaPath("marketplace")}" fill="url(#gradMarketplace)" />
        <path d="${linePath("online")}" fill="none" stroke="rgb(var(--c-primary))" stroke-width="2" />
        <path d="${linePath("marketplace")}" fill="none" stroke="rgb(var(--c-accent))" stroke-width="2" />
        ${xLabels}
        <g id="area-hover-line" style="opacity:0">
          <line x1="0" y1="${padT}" x2="0" y2="${padT + innerH}" stroke="rgb(var(--c-border))" />
        </g>
        ${dots}
      </svg>
      <div id="area-tooltip" class="chart-tooltip pointer-events-none absolute z-10 rounded-lg border border-border bg-popover/95 p-3 text-xs shadow-lg backdrop-blur opacity-0"></div>
    `;
    container.innerHTML = svg;

const svgEl = container.querySelector("svg");
    const tooltip = container.querySelector("#area-tooltip");
    const hoverLine = container.querySelector("#area-hover-line");

svgEl.querySelectorAll(".area-dot").forEach((dot) => {
      const idx = Number(dot.dataset.idx);
      dot.addEventListener("mouseenter", () => {
        const d = data[idx];
        tooltip.innerHTML = `
          <p class="mb-2 font-medium text-foreground">${d.month}</p>
          <div class="space-y-1">
            <div class="flex items-center justify-between gap-6">
              <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-primary))"></span>online</span>
              <span class="font-mono font-medium tabular-nums text-foreground">${currency(d.online)}</span>
            </div>
            <div class="flex items-center justify-between gap-6">
              <span class="inline-flex items-center gap-2 text-muted-foreground"><span class="h-2 w-2 rounded-full" style="background-color: rgb(var(--c-accent))"></span>marketplace</span>
              <span class="font-mono font-medium tabular-nums text-foreground">${currency(d.marketplace)}</span>
            </div>
          </div>
        `;
        const pctX = (x(idx) / W) * 100;
        tooltip.style.left = `clamp(0%, ${pctX}%, 78%)`;
        tooltip.style.top = "4px";
        tooltip.style.opacity = "1";
        hoverLine.setAttribute("transform", `translate(${x(idx)},0)`);
        hoverLine.style.opacity = "1";
      });
      dot.addEventListener("mouseleave", () => {
        tooltip.style.opacity = "0";
        hoverLine.style.opacity = "0";
      });
    });
  }

function renderBarChart(container, data) {
    const W = 340, H = 208;
    const padL = 34, padR = 6, padT = 6, padB = 24;
    const innerW = W - padL - padR;
    const innerH = H - padT - padB;

const maxV = Math.max(...data.map((d) => d.amount));
    const niceMax = Math.ceil(maxV / 100) * 100;

const bandW = innerW / data.length;
    const barW = Math.min(36, bandW * 0.55);

const y = (v) => padT + innerH - (v / niceMax) * innerH;

const svg = `
      <svg viewBox="0 0 ${W} ${H}" class="h-full w-full" preserveAspectRatio="none">
        ${gridLines.join("")}
        ${bars}
      </svg>
      <div id="bar-tooltip" class="chart-tooltip pointer-events-none absolute z-10 rounded-lg border border-border bg-popover/95 p-2.5 text-xs shadow-lg opacity-0"></div>
    `;
    container.innerHTML = svg;

const svgEl = container.querySelector("svg");
    const tooltip = container.querySelector("#bar-tooltip");

svgEl.querySelectorAll(".bar-hit").forEach((hit) => {
      const idx = Number(hit.dataset.idx);
      const rect = svgEl.querySelector(`.bar-rect[data-idx="${idx}"]`);
      hit.addEventListener("mouseenter", () => {
        const d = data[idx];
        rect.setAttribute("fill", "rgb(var(--c-accent))");
        tooltip.innerHTML = `
          <p class="mb-1 font-medium text-foreground">${d.category}</p>
          <p class="font-mono tabular-nums text-muted-foreground">${d.amount} units</p>
        `;
        const pctX = (parseFloat(hit.getAttribute("x")) / W) * 100;
        tooltip.style.left = `clamp(0%, ${pctX}%, 70%)`;
        tooltip.style.top = "0px";
        tooltip.style.opacity = "1";
      });
      hit.addEventListener("mouseleave", () => {
        rect.setAttribute("fill", "rgb(var(--c-primary))");
        tooltip.style.opacity = "0";
      });
    });
  }

renderAreaChart(document.getElementById("area-chart-wrap"), revenueSeries);
  renderBarChart(document.getElementById("bar-chart-wrap"), categorySales);

window.addEventListener("resize", () => {
    renderAreaChart(document.getElementById("area-chart-wrap"), revenueSeries);
    renderBarChart(document.getElementById("bar-chart-wrap"), categorySales);
  });
</script>
</body>
</html>

Related Examples