Приладові панелі

Інформаційні панелі як візуальні робочі області

Інформаційні панелі діють як універсальні візуальні робочі області, де ви можете організовувати та керувати кількома візуалізаціями, пов’язаними з вашими проектами. Вони забезпечують динамічне та інтерактивне середовище для вивчення, аналізу та ефективного представлення даних.

Структура даних інформаційної панелі

Щоб представити інформаційну панель у вашій системі, ви можете використовувати такий інтерфейс DashboardData:

type Layout = {
    i: string;
    x: number;
    y: number;
    w: number;
    h: number;
    minW: number;
    minH: number;
};

type DashboardData = {
    userId?: string;
    name: string;
    projectName: string;
    description?: string;
    createdAt?: Date;
    updatedAt?: Date;
    visualizations?: {
        [name: string]: string;
    } | VisualizationTypes.VisualizationType[];
    layouts?: Layout[];
};

type DashboardType =
    DashboardData &
    with_id &
    with_optional_version;

Ключові атрибути

• name: Унікальний ідентифікатор панелі інструментів.
• projectName: Назва пов’язаного проекту для контекстного зв’язування.
• опис: необов’язкове поле, що містить додатковий контекст або деталі про інформаційну панель.
• createdAt: Позначка часу, що вказує, коли було створено інформаційну панель.
• updatedAt: Позначка часу, що відображає останню модифікацію інформаційної панелі.
• візуалізації: колекція візуалізацій, включена в інформаційну панель у вигляді пар ключ-значення або масиву типів візуалізацій.
• макети: список конфігурацій макета, які визначають положення та розмір візуалізацій на інформаційній панелі. Кожен макет містить:
  • i: Унікальний ідентифікатор для візуалізації.
  • x, y: Координати, що представляють позицію візуалізації на сітці.
  • w, h: Ширина та висота візуалізації.
  • minW, minH: Мінімальні обмеження ширини та висоти.

Функції інформаційної панелі

Інформаційні панелі дозволяють користувачам:

• Перетягніть візуалізації, щоб змінити їх порядок у робочій області.
• Змініть розмір візуалізації відповідно до конкретних потреб даних.
• Підтримуйте кілька макетів, щоб задовольнити різні варіанти використання або аудиторії.

Пропонуючи таку гнучкість, інформаційні панелі дають користувачам змогу налаштовувати свої візуальні робочі простори відповідно до вимог проекту.

Практичний приклад