בניית שלד לדשבורד KPI חי
בניית שלד לדשבורד KPI חי
כל דשבורד נתונים מעולה מתחיל מאותו שלד: רשת נקייה של כרטיסי KPI שמציפה במבט אחד את המספרים שחשובים באמת. בשיעור הזה תבנו את השלד הזה — בדיוק סוג הפריסה ש-API מזרים אליה מדדים בזמן אמת.
תפרסו רשת רספונסיבית של כרטיסים, שכל אחד מהם מציג תווית מדד, ערך גדול ומחוון מגמה. נעצב את הדף כאילו מקור נתונים חי דוחף אליו מספרים טריים כל כמה שניות.
חשבו כמו אנליסטים: המטרה היא קריאוּת מיידית. מקבלי החלטות צריכים להבין את מצב העסק בתוך שתי שניות. בואו נבנה את המסגרת שמאפשרת את זה.
הוראות
הוסיפו header עם h1 בשם "מדדים בזמן אמת" כדי שהמשתמשים יידעו שהדשבורד מוזן מ-API.
רמז: השתמשו ב: `<h1 class="text-3xl font-bold">מדדים בזמן אמת</h1>` בתוך `<header>`.
איפה כותבים את זה?
<!-- בנו כאן את שלד דשבורד ה-KPI שלכם -->כתבו את זה בשורה 11 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.
צרו מכולת grid רספונסיבית לכרטיסי ה-KPI באמצעות המחלקה grid.
הוסיפו כרטיסי KPI כקופסאות מעוצבות, כולל כרטיס "סך ההכנסות".
תנו לכל כרטיס רקע של כרטיס באמצעות המחלקה bg-gray-800.
הקוד שלכם
אני אבנה עבורכם את השלב. אין צורך לכתוב או להבין קוד — אפשר להשתמש בכפתור המודרך או לתאר במילים מה תרצו. השלב הזה: הוסיפו header עם h1 בשם "מדדים בזמן אמת" כדי שהמשתמשים יידעו שהדשבורד מוזן מ-API.