Дашборд

Q-Dashboard позволяет создавать кастомизируемые дашборды для встраивания виджетов и не только

С чего начать

Установите библиотеку

npm install @diasoft/qpalette-dashboard

Подключите модуль

import { QDashboardModule } from '@diasoft/qpalette-dashboard';

Встройте компонент с помощью тэга q-dashboard.

<q-dashboard></q-dashboard>

Использование

Для создания собственного дашборда необходимо внутрь него ваши виджеты, каждый их них будет отдельной ячейкой дашборда

Также вы можете использовать собственные компоненты или даже просто любые блоки

P.S. При использовании компонента q-widget не забывайте про detectChanges() после его загрузки!

import { ChangeDetectorRef } from '@angular/core';
 
constructor(private cd: ChangeDetectorRef) {}
 
widgetLoaded(): void {
  this.cd.detectChanges();
}

Самый простой

Попробуйте, подвигайте их!

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard>
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

cols

В случае простого использования количество столбцов, на которые делится дашборд равно количеству переданных виджетов, Свойство cols позволяет изменить это значение, если вам необходимо больше или меньше колонок

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

rowHeight

Регулирует высоту строк в дашборде, по умолчанию 100 пикселей, высота же виджетов по умолчанию - 3 строки. Зададим высоту одной строки 20 пикселей

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8" [rowHeight]="20">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

debug

От простого к сложному, мы добрались до свойства debug, самой полезной функции для настройки вашего дашборда! Во время включенного режима дебага вы можете передвинуть ваши виджеты на те места, которые нравятся вам, задать нужные ширину и высоту, а после зажать клавишупробелна вашей клавиатуре. Попробуйте, зажмите ее.

У вас должен появиться оверлей на весь экран, а также текст (массив объектов) по центру экрана, кликните мышкой по тексту и он будет скопирован в ваш буфер обмена. А вот зачем этот массив нужен - читайте описание следующего свойства.

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8" [rowHeight]="20" debug="true">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

layout

Свойство layout принимает в себя как раз тот массив объектов, что вы получили в буфер обмена при использовании дебаг режима, по клавишепробел. Теперь вы можете передать этот массив дашборду и он воспроизведет это положение виджетов.

Обратите внимание, после передачи layout в дашборд перемещение и изменение размеров виджетов отключается, если необходимо сохранить возможность перемещения блоков для каждого пользователя - можно воспользоваться флагом edit (описан ниже)

Также с помощью этого массива объектов у вас есть возможность задавать максимальные / минимальные параметры для каждого блока, дописав необходимые значения в объекты. Вам доступныminW(минимальная ширина),maxW(максимальная ширина),minH(минимальная высота),maxH(максимальная высота). Добавим эти параметры к одному из наших виджетов.

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8" [rowHeight]="20" [layout]="layoutDesktop">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

layoutDesktop:

layoutDesktop = [
  { id: '0', x: 0, y: 0, w: 5, h: 3 },
  { id: '1', x: 5, y: 0, w: 3, h: 3 },
  { id: '2', x: 6, y: 3, w: 1, h: 3 },
  { id: '3', x: 7, y: 3, w: 1, h: 3, minW: 2, maxW: 3, minH: 2, maxH: 5 }
];

layoutTablet и layoutPhone

Если вы уменьшите размер браузера, вы увидите, что дашборд хоть и подстраивается под ширину окна, но блоки в нем остаются на своих местах.

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8" [rowHeight]="20" [layout]="layoutDesktop" [layoutTablet]="layoutTable" [layoutPhone]="layoutPhone">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

layoutDesktop:

layoutDesktop = [
  { id: '0', x: 0, y: 0, w: 2, h: 9 },
  { id: '1', x: 2, y: 5, w: 2, h: 2 },
  { id: '2', x: 3, y: 7, w: 1, h: 3 },
  { id: '3', x: 3, y: 0, w: 2, h: 5 }
];

layoutTable:

layoutTable = [
  { id: '0', x: 0, y: 0, w: 1, h: 3 },
  { id: '1', x: 1, y: 0, w: 2, h: 3 },
  { id: '2', x: 2, y: 3, w: 1, h: 3 },
  { id: '3', x: 0, y: 3, w: 2, h: 3 }
];

layoutPhone:

layoutPhone = [
  { id: '0', x: 0, y: 3, w: 8, h: 1 },
  { id: '1', x: 0, y: 2, w: 8, h: 1 },
  { id: '2', x: 0, y: 1, w: 8, h: 1 },
  { id: '3', x: 0, y: 0, w: 8, h: 1 }
];

tabletWidth и phoneWidth

По умолчанию переход из десктопной версии на планшетную происходит при ширине окна в 992 пикселя, а из планшетной в мобильную - в 576. Если по какой-то причине вас не устраивают эти размеры - вы можете отрегулировать их, передав свое значение для каждого типа устройств.

<q-dashboard [cols]="8" [rowHeight]="20" [layout]="layoutDesktop" [layoutTablet]="layoutTable" [layoutPhone]="layoutPhone" tabletWidth="800" phoneWidth="500">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

edit

При первой загрузке, если не переданыlayout,layoutTableиlayoutPhone, вы будете иметь возможность редактировать дашборд, но после первого же изменения - он запомнится браузером.

Если вы зажмете клавишу Shift - вы получите возможность изменить вид вашего дашборда и дальше. И после обновления страницы его вид не изменится, он останется в памяти браузера.

Виджет 1Виджет 2Виджет 3Виджет 4

<q-dashboard [cols]="8" [rowHeight]="20" edit="true">
  <div>Виджет 1</div>
  <div>Виджет 2</div>
  <div>Виджет 3</div>
  <div>Виджет 4</div>
</q-dashboard>

Свойство может комбинироваться с описанными вышеlayout,layoutTableиlayoutPhone, предлагая пользователю размещение блоков по умолчанию

Form Flow File Viewer