> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flova.ir/llms.txt
> Use this file to discover all available pages before exploring further.

# ساخت dashboard

> چیدن widgetها، اتصال داده و طراحی تجربه‌ای که در وب و موبایل کار کند.

Dashboard را با یک سؤال شروع کنید: کاربر برای تصمیم‌گیری یا کنترل دستگاه چه
چیزی لازم دارد؟ یک صفحهٔ خوب همهٔ داده‌های ممکن را نشان نمی‌دهد؛ اطلاعاتی را
نزدیک action مربوط به آن قرار می‌دهد.

## widgetهای رایج

| widget           | مناسب برای                    |
| ---------------- | ----------------------------- |
| status card      | یک مقدار مهم و وضعیت اتصال    |
| toggle           | state بولی خواندنی و نوشتنی   |
| button           | action یا فرمان مشخص          |
| gauge            | مقدار عددی با بازه و واحد     |
| line chart       | تغییرات یک یا چند سری در زمان |
| text و input     | توضیح، label یا ورودی کاربر   |
| alarm/event list | رخدادها و هشدارهای ثبت‌شده    |

## binding چیست؟

Binding پیوند بین property یک widget و منبع داده است. منبع می‌تواند datastream
یک Device Type، مقدار دستگاه انتخاب‌شده یا saved query از FlovaQL باشد. برای
widget خواندنی، datastream باید readable باشد. برای toggle، مقدار باید boolean
و مقصد writable باشد. برای chart، query باید ستون زمان و سری‌های سازگار برگرداند.

## responsive بودن

هر صفحه را در سه وضعیت ببینید: موبایل، tablet و دسکتاپ. صفحه‌ای که در canvas
خوب به نظر می‌رسد ممکن است در موبایل دکمهٔ اصلی را پایین صفحه پنهان کند یا chart
را بیش از حد فشرده نشان دهد. گروه‌بندی صفحه، فاصلهٔ بین بخش‌ها و ترتیب actionها
را طوری انتخاب کنید که کاربر بدون زوم‌کردن مسیر را بفهمد.

## یک الگوی ساده

بالای صفحه وضعیت اتصال و نام دستگاه را بگذارید. بعد مقدار اصلی را با gauge یا
status card نشان دهید. actionهای کنترلی مثل toggle را نزدیک همان مقدار قرار
دهید. chart تاریخچه را پایین‌تر بگذارید و برای نبودن داده، متن مشخصی نمایش
دهید. اگر چند دستگاه دارید، device switcher را در سطح host نگه دارید تا صفحهٔ
اصلی شلوغ نشود.