Templatev1.0.0HTML / CSS / JS + React

PrismAnalytics Dashboard

Name: Prism — Analytics Dashboard
Brand: Tiệm Công Nghệ
SKU: analytics-dashboard
Price: 9000 VND
Availability: InStock

Dashboard phân tích kính mờ, ưu tiên nền tối, với biểu đồ SVG tự vẽ, bộ đếm khách trực tuyến và bảng khách hàng dùng được thật

9.000đ$4.90

Chưa mở bán

Sản phẩm này sắp mua được. Để lại email, tiệm báo bạn ngay khi mở bán.

Trả một lần, dùng trọn đời
Cập nhật miễn phí trọn đời
Đủ mã nguồn: HTML / CSS / JS + React

Đang chạy trực tiếp

Hình ảnh

Giới thiệu

Một dashboard phân tích trông như ảnh sản phẩm của một SaaS mà bạn sẵn lòng trả tiền. Prism là lớp kính phủ trên nền cực quang trôi chậm, ưu tiên nền tối nhưng nền sáng cũng chăm chút không kém: các con số đếm lên, đường doanh thu tự vẽ ra, các cột mọc lên, vòng thiết bị quét một vòng, còn số khách đang truy cập cứ thế nhảy trong khi đơn hàng mới trượt vào luồng hoạt động.

Ba màn hình hoàn chỉnh — Tổng quan, Khách hàng, Cài đặt — trong khung ứng dụng có sidebar gập thành biểu tượng, ô tìm kiếm ⌘K và khoảng 7 / 30 / 90 ngày
Mọi biểu đồ đều vẽ tay bằng SVG qua các module nhỏ có test: không có thư viện biểu đồ nào phải học, phải chỉnh giao diện hay phải tải kèm
Bảng khách hàng dùng được thật: tìm kiếm, lọc, sắp xếp, phân trang, chọn nhiều dòng, xuất CSV và lưu trữ có hoàn tác
Dữ liệu mẫu sinh theo seed và nhất quán — doanh thu bằng số đơn × giá trị đơn, mỗi KPI là tổng các ngày của nó — nên ảnh chụp màn hình kể một câu chuyện đáng tin
Giữa các màn hình và con số chỉ có một DashboardSource có kiểu với bốn phương thức: trỏ nó về API của bạn là cả dashboard thành của bạn

Có hai bản. Bản HTML là một trang mở và sửa được bằng trình soạn thảo bất kỳ, đưa lên hosting nào cũng chạy. Bản React là dự án Vite + TypeScript hoàn chỉnh: mọi chữ nằm trong một file content.ts, chạy bằng npm install && npm run dev.

Tính năng · 16

Ba màn hình điều hướng bằng hash: Tổng quan, Khách hàng và Cài đặt, trong một khung ứng dụng có sidebar thu gọn được, thanh trên cùng và menu tài khoản
Hai bản: HTML/CSS/JS tĩnh sửa trực tiếp, và một dự án Vite + React + TypeScript chạy được ngay
Tổng quan: bốn thẻ KPI đếm lên tới con số thật, kèm sparkline và nhãn tăng/giảm so với kỳ trước
Biểu đồ vùng doanh thu có kỳ trước nét đứt phía sau, đường dóng và tooltip kính; biểu đồ cột theo kênh mọc lên từ trục; biểu đồ vòng theo thiết bị kèm chú giải
Biểu đồ vẽ bằng SVG qua các module nhỏ có test — thang tuyến tính và thang dải, vạch trục "đẹp", đường cong đơn điệu, cột bo góc, cung tròn — không dùng thư viện biểu đồ nào
Khách đang truy cập cập nhật vài giây một lần trên dải các lần đo gần nhất, cùng luồng hoạt động nơi đơn hàng, lượt đăng ký, nâng cấp mới trượt vào
Trang xem nhiều nhất: lượt xem, mức thay đổi và một thanh nhỏ thể hiện tỉ trọng của từng trang
Bảng khách hàng: tìm kiếm (không phân biệt dấu), chip lọc trạng thái có số đếm, cột sắp xếp được, phân trang, chọn nhiều dòng với thanh thao tác hàng loạt — xuất CSV hoặc lưu trữ kèm hoàn tác — và trạng thái trống
Cài đặt: form hồ sơ có kiểm tra dữ liệu, công tắc thông báo và thẻ gói dịch vụ có đồng hồ mức dùng; tên vừa lưu hiện ngay trên menu tài khoản
⌘K / Ctrl+K đưa con trỏ vào ô tìm kiếm từ bất kỳ đâu; nhấn Enter là mở bảng khách hàng đã lọc theo đúng từ khoá
Bộ chọn khoảng 7d / 30d / 90d tạo lại dữ liệu mẫu theo seed, cố định: tải lại bao nhiêu lần cũng ra cùng số, và các số khớp nhau
Mọi dữ liệu đi qua một interface có kiểu với bốn phương thức: thay nguồn mẫu bằng lời gọi tới API của bạn là mọi màn hình chạy theo
Giao diện sáng và tối: theo hệ thống, nhớ lựa chọn của người xem
Không ảnh, không web font, không gọi ra ngoài; mọi màu, bo góc, kích thước và thời gian chuyển động đều là CSS custom property
Responsive từ điện thoại 320 px (sidebar thành ngăn kéo trượt) tới màn hình rộng
Script và stylesheet cộng lại dưới 30 KB sau gzip, không phụ thuộc thư viện nào ngoài React ở bản React

Cách dùng

Mở index.html bằng trình soạn thảo: mọi chữ của trang đều viết trực tiếp ở đây. File này gắn hai file nằm cạnh nó:

HTML

<link rel="stylesheet" href="analytics-dashboard.css" />
<script src="analytics-dashboard.js" defer></script>

Màn hình: mỗi <section data-view-panel="ten"> là một màn hình, hiện ở #/ten; liên kết sidebar có data-nav="ten" được đánh dấu là trang hiện tại khi màn hình đó mở. Thêm màn hình mới bằng cách thêm cả hai.
KPI: mỗi chỉ số một <article data-kpi="revenue"> (revenue, visitors, conversion, order); script tự điền giá trị, nhãn thay đổi và sparkline.
Biểu đồ: các thẻ [data-chart="revenue" | "channels" | "devices"]. Tiêu đề (data-chart-title) cũng là tên mà trình đọc màn hình đọc cho biểu đồ.
Chữ do script viết ra (trạng thái, dòng trạng thái của bảng, câu đọc biểu đồ) nằm trong src/core/texts.ts; ngôn ngữ định dạng số và đơn vị tiền nằm trong src/core/format.ts.

Script tự gắn mọi hành vi theo data attribute khi trang tải xong. Với phần HTML thêm vào sau, gọi AnalyticsDashboard.init(container, { source }); hàm này trả về một hàm để gỡ ra. Mã nguồn dễ đọc nằm trong src/ (src/core/ gồm mỗi hành vi, mỗi biểu đồ một module nhỏ).

Bản demo tự sinh số liệu (src/core/demo-source.ts). Mọi thứ dashboard hiển thị đều đi qua một interface duy nhất, DashboardSource trong src/core/data.ts — file này cũng định nghĩa mọi kiểu dữ liệu:

Phương thức	Trả về
`overview(range)`	`Promise<Overview>` — KPI, doanh thu theo ngày, kênh, thiết bị và trang xem nhiều cho 7, 30 hoặc 90 ngày gần nhất
`activity()`	`Promise<Activity[]>` — các sự kiện mới nhất, mới trước
`live()`	`Promise<LiveReading>` — số khách lúc này, kèm một sự kiện nếu vừa có; được gọi mỗi 3 giây
`customers()`	`Promise<Customer[]>` — toàn bộ khách trong bảng

Ở bản HTML, khai báo nguồn dữ liệu trước khi script chạy:

HTML

<script>
  window.analyticsDashboardSource = {
    overview: (range) => fetch(`/api/analytics/overview?days=${range}`).then((response) => response.json()),
    activity: () => fetch("/api/analytics/activity").then((response) => response.json()),
    live: () => fetch("/api/analytics/live").then((response) => response.json()),
    customers: () => fetch("/api/customers").then((response) => response.json()),
  };
</script>
<script src="analytics-dashboard.js" defer></script>

Câu trả lời đến muộn đã được xử lý: đổi khoảng ngày khi yêu cầu cũ chưa về thì kết quả cũ bị bỏ qua. Câu trả lời của live() có thể kèm recent (các lần đo trước đó) để dải biểu đồ đầy ngay từ đầu. Lưu Cài đặt chỉ cập nhật trên trang; truyền onSave cho createSettingsForm để lưu thật.

Bản tải về là một dự án Vite + React 19 + TypeScript hoàn chỉnh:

Terminal

npm install
npm run dev      # http://localhost:5173
npm run build    # file tĩnh trong dist/

src/app/content.ts — mọi chữ của trang, có kiểu. Sửa ở đây là dashboard đổi theo.
src/app/shell/ — sidebar và thanh trên cùng; src/app/views/ — mỗi màn hình một component; src/app/ui/ — các atom và molecule dùng chung.
src/core/ — hành vi và biểu đồ, đúng đoạn mã bản HTML chạy, gắn vào qua hook useBehaviour.
src/analytics-dashboard.css — stylesheet duy nhất, dùng chung cho cả hai bản.

Hiển thị dữ liệu của bạn bằng cách truyền một nguồn, tạo một lần:

TSX

const source: DashboardSource = { overview: …, activity: …, live: …, customers: … };

<App source={source} />

Chạy được với React 18 và 19.

App.tsx mở đầu bằng "use client", nên App Router render được ngay. Chép src/app, src/core và src/analytics-dashboard.css vào dự án (ví dụ trong components/prism/, giữ ba thứ nằm cạnh nhau), rồi:

TSX

// app/dashboard/page.tsx
import { App } from "@/components/prism/app/App";

export default function Page() {
  return <App />;
}

Khai báo nguồn dữ liệu trong một module phía client (bên ngoài component, để chỉ tạo một lần) rồi truyền vào source. Muốn áp giao diện đã lưu trước lần vẽ đầu tiên, chép đoạn script nhỏ trong index.html vào <head> của layout và thêm suppressHydrationWarning cho <html>.

Mọi thứ là custom property trên :root, ở đầu file analytics-dashboard.css. Màu viết dạng light-dark(sáng, tối), nên một dòng là đủ cho cả hai giao diện.

Thuộc tính	Thay đổi gì
`--ad-bg`, `--ad-surface`, `--ad-sunken`, `--ad-text`, `--ad-muted`	Nền trang, bề mặt đặc, vùng lõm và màu chữ
`--ad-glass`, `--ad-glass-strong`, `--ad-glass-edge`, `--ad-line`, `--ad-line-strong`, `--ad-shadow`	Thẻ kính mờ, menu, đường kẻ mảnh và bóng
`--ad-violet`, `--ad-cyan`, `--ad-pink`, `--ad-amber`, `--ad-green`, `--ad-red`	Màu nhấn: biểu đồ, trạng thái, tăng và giảm
`--ad-gradient`, `--ad-cta`, `--ad-on-cta`, `--ad-glow`, `--ad-focus`	Dải màu thương hiệu, nút chính, chữ và quầng sáng của nút, viền focus
`--ad-aurora-strength`	Độ đậm của nền cực quang phía sau (đặt riêng cho từng giao diện)
`--ad-series`, `--ad-series-end`, `--ad-previous`, `--ad-slice-1` … `--ad-slice-3`	Màu biểu đồ (mỗi thẻ KPI tự đặt màu riêng)
`--ad-area-height`, `--ad-bars-height`, `--ad-donut-size`	Kích thước biểu đồ
`--ad-font`, `--ad-font-mono`	Font chữ
`--ad-radius-lg`, `--ad-radius`, `--ad-radius-sm`, `--ad-sidebar-width`, `--ad-sidebar-collapsed`, `--ad-gutter`, `--ad-max`	Hình khối và bố cục
`--ad-ease`, `--ad-draw-duration`, `--ad-grow-duration`, `--ad-aurora-duration`	Chuyển động

Giao diện: data-theme="light" hoặc "dark" trên <html> cố định giao diện ban đầu; không có thì theo hệ thống của người xem. Nút chuyển nhớ lựa chọn trong localStorage (analytics-dashboard-theme), sidebar nhớ trạng thái gập (analytics-dashboard-sidebar).

Cả hai bản đều là file tĩnh: tải thư mục HTML, hoặc thư mục dist/ của dự án React sau khi chạy npm run build, lên Netlify, Vercel, Cloudflare Pages, GitHub Pages hoặc bất kỳ hosting nào.

Hỏi về sản phẩm này

Chưa chắc có hợp dự án của bạn? Cứ hỏi — câu trả lời lấy từ chính trang này.

Lịch sử phiên bản

1.0.0First release15 thg 10, 2026Mới nhất
Glass analytics dashboard in two builds: static HTML/CSS/JS and a Vite + React + TypeScript project. Overview with count-up KPIs, hand-built SVG area, bar and donut charts, live visitors and activity feed; a customers table with search, sorting, filters, pages and bulk actions; a validated settings form; collapsible sidebar, ⌘K search, 7/30/90-day ranges over seeded data, light and dark themes.
Bản sửa lỗi và tính năng mới đều có ngay ở nút tải này — file tải về luôn là bản mới nhất.