Компонент «Дашборды»

Для более наглядной визуализации и представления данных в системе существует возможность настройки дашбордов (информационных панелей). На каждом из них может быть представлено неограниченное количество графиков и отчетов.

Для перехода к списку дашбордов нужно выбрать в главном меню пункт «Дашборды», далее в выпадающем меню «Все дашборды».

_images/dash_01.png

Откроется страница со списком дашбордов. По клику на название откроется страница выбранного дашборда в режиме просмотра.

О произвольном доступе к дашборду («расшаривании дашборда») написано здесь : Публичный пользователь

Создание дашборда

Для создания нового дашборда необходимо в выпадающем меню выбрать «Новый дашборд».

_images/dash_22.png

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

_images/dash_02.png

Рабочая область страницы разлинована в клетку для удобства задания границ контейнеров для отображения графиков, реестров, отчетов.

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

_images/dash_03.png

В выделенной области появится контейнер. При наведении курсора мыши на контейнер, в нем появляются 4 кнопки и желтая рамка по контуру.

_images/dash_04.png

Для изменения размеров контейнера нужно зажать левую кнопку мыши на его границе (на желтой рамочке) и потянуть в нужную сторону.

_images/dash_05.png

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

Для удаления контейнера нужно нажать на самую правую кнопку с мусорным ведром. Будьте внимательны, это действие не требует подтверждения вне зависимости от того, пуст этот контейнер или в нем есть график или отчет. При этом сам отчет, реестр или график не удалится.

_images/dash_06.png

Настройка контейнера дашборда

Для каждого контейнера дашборда можно задать какой отчет, график или параметр должен быть размещен в этом контейнере. В одном контейнере может располагаться только один отчет или график или параметр.

Для этого необходимо нажать на кнопку настройки контейнера (с изображением шестеренки).

_images/dash_07.png

На верхней панели контейнера появятся кнопки: «Выбрать отчет», «Выбрать реестр», «Выбрать график», «Выбрать параметр», «HTML-блок, «чек-бокс «Отображать заголовок», текстовое поле для ввода названия контейнера и кнопка «Закрыть настройки». Под ними — список всех созданных в системе отчетов, графиков или параметров - в зависимости от того, что выбрано для отображения.

_images/dash_23.png

Ввести название контейнера можно в соответствующем поле. По умолчанию, если в текстовое поле ничего не было введено и активен чек-бокс «Отображать заголовок», в качестве заголовка контейнера будет подставлено название отображаемого в нем графика или отчета.

Если отображать название контейнера не нужно, можно снять галочку из чек-бокса «Отображать заголовок».

После ввода названия, нужно выбрать содержание контейнера - отчет, реестр, график, параметр или HTML-блок, который будет в нем выводиться.

Для переключения между списками отчетов, реестров или графиков нужно нажать на кнопки «Выбрать отчет», «Выбрать реестр» или «Выбрать график» соответственно.

_images/dash_08.png

Чтобы выбранный отчет, реестр или график отобразился в контейнере, нужно кликнуть по его названию в списке. Список свернется, отчет, реестр или график начнут грузиться (это может занять некоторое время — такое же, как построение такого отчета или графика в конструкторе).

_images/dash_09.png

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

Для того, чтобы выбор параметра влиял на содержимое отчета или графика, у отчета должен быть соответствующий фильтр, помеченный галочкой «Параметр». Настройки отчета задаются в конструкторе отчетов.

_images/dash_25.png

Для настройки параметра, необходимо кликнуть на иконку «Выбрать параметр» и выбрать один из показателей.

_images/dash_26.png

После этого откроется перечень возможных значений этого параметра — из них нужно выбрать значения параметра по умолчанию.

_images/dash_27.png

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

_images/dash_28.png

Чекбокс «Всегда показывать виджет выбора» влияет на то, как будет выглядеть контейнер с параметром. По умолчанию галочка проставлена.

_images/dash_29.png

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

_images/dash_30.png

Чекбокс «Авто-добавление новых», с ним пользователю не нужно будет проставлять галочки для выбора новых значений, они автоматически проставятся. Например, есть справочник «Организационная структура» со списком организаций.

_images/dash_31.PNG

На дашборде у всех организаций проставлены галочки.

_images/dash_32.PNG

Добавим новое значние «Организация 5» в справочник «Организационная структура». На дашборде отобразится данное значение с проставленной галочкой.

_images/dash_33.PNG

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

Контейнер может содержать HTML-блок. В редактировании такого блока можно задавать ссылки, списки, части размеченного текста.

_images/html_dash1.PNG

Например, код для реализация кнопки на дашборде:

<style>

  .btns {

    width: 100%;
    height: 100%;

  }
  a.dash-link {
    text-decoration: none;
    float: right;
    background-color: #d8cb97;
    border-radius: 2px;
    margin: 4px;
    padding: 14px 11px 4px;
    box-shadow: inset 3px -4px 9px 4px #90824f, inset 0px 5px 8px 2px white, 1px 1px 2px 0px black;
    cursor: pointer;
  }
  a.dash-link i {
  color: rgba(255, 255, 255, 0.80);
 }
  .dash-link:hover::after {
    content: attr(data-title);
    position: absolute;
    z-index: 1;
    background: rgba(220, 220, 206, 0.95);
    font-size: 14px;
    font-weight: 700;
    color: #654c1e;
    padding: 5px 9px;
    top: 36px;
    border: 2px solid #f5f5f5;
   }
  .i-right {
      background: url(http://dc.dev.oaosu.ru/media/20171019T210940/r-arrow.png) 75% 50% no-repeat;
    width: 30px;
    height: 28px;
  }

</style>
<div class="btns">
    <a class="dash-link i-right" data-title="Предпосылки невыполнения" href="/dashboard/1176910/"></a>
</div>

Отображение кнопки на дашборде:

_images/button_3.PNG

Например, код для заголовка с фоном на дашборде:

<style>
 h1.db-header {
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   text-align: center;
   font-weight: bold;
   font-size: 26px;
   background: #cbe9ff;
   color: #013963;
   position: absolute;
   margin: 0;
   padding-top: 20px;
 }
</style>
<h1 class="db-header">КАМЧАТСКИЙ КРАЙ</h1>

Отображение заголовка на дашборде:

_images/caption.PNG

Например, необходимо изменить названия показателя на дашборде: «Показатель с» на «Отчетный период, с» «Показатель по» на «по»:

<script>
$('.db-param-name-value span:contains("Показатель С")').text("Отчетный период, с");
$('.db-param-name-value span:contains("Показатель По")').text("по");
</script>

Результат работы скрипта представлен на рисунке:

_images/dash_34.PNG

Например, код для оформления фона заголовка с рамкой:

<div class="Title">
  <center><br><br>Устраненные нарушения</center>
    </div>
<style>
   .Title {
    position: absolute; /* Установка позиции относительно блока, значения позиции: absolute,fixed, relative, static, inherit */
    width: 100%; /* Ширина области */
    height: 100%; /* Высота области */
    background: rgba(60, 63, 74, 0.1); /* Цвет фона */
    border: 2px dashed; /* Толщина рамки */
    margin-top: -15px; /* Изменение положения по вертикали относительно блока */
    margin-left: -10px; /* Изменение положения по горизонтали относительно блока */
    font-size: 22px; /* Высота текста */
    font-weight: 500; /* Толщина текста */
    color: rgba(0, 0, 0, 0.98); /* Цвет и яркость текста */
    border-top-left-radius: 6px; /* Радиус закругления верхнего левого края */
    border-bottom-left-radius: 6px; /* Радиус закругления нижнего левого края */
    border-top-right-radius: 6px; /* Радиус закругления верхнего правого края */
    border-bottom-right-radius: 6px; /* Радиус закругления нижнего правого края */
}
</style>

Результат работы скрипта:

_images/dash_35.PNG

Например, код для перехода по ссылке на Реестр/Дашборд/Показатель и дополнительные функции:

<a class=Button_top href="/registry/16318/">
<center><br>Реестр о местах массового пребывания людей и потенциальные объекты террористических посягательств
</center></a>
<style>
.Button_top {
position: absolute;
width: 100%;
height: 100%;
background: rgba(33, 151, 158, 0.7);
margin-top: 0px;
margin-left: -10px;
color: rgba(255, 255, 255, 1);
border-radius: 6px/6px;
font: 120%/1.4 sans-serif;
transition: text-shadow .3s;} /* Код для фона блока */
.Button_top :hover {
position: relative;
width: 100%;
height: 100%;
background: rgba(33, 151, 158, 0.2);
margin-top: 0px;
margin-left: 0px;
font: inherit;
font-weight: inherit;
color: rgba(255, 255, 255, 1);
border-radius: 6px/6px;
box-shadow: 0 0 35px rgba(255,255,255, 0);
cursor: pointer;
text-shadow: 0 0 .65px #5bd1d8, 0 0 .65px #5bd1d8;} /* Код задает стиль для блоков класса "Button_top" при наведении на них курсором мыши */
.ul_1 {padding: 0;} /* Код устанавливает значение полей вокруг текста */
.li_1 {list-style-type: none; display: inline-block;}
.db-body .db-block {background-color: transparent; border: 0px; solid #a0a0a0;} /* Код отключает подложку на всех элементах дашборда */
.db-block-fullscreen{display: none; background: rgba(200, 217, 226, 0);} /* Код отключает кнопку "Развернуть на весь экран" при наведении на все элементы дашборда */
.icon-fullscreen{display: none;} /* Код отключает кнопку "Развернуть на весь экран" при наведении на все элементы дашборда */
</style>

Например, есть код для класса Title, то на следующем блоке можно ссылаться только на название класса.

<div class="Title"></div>

Настройка справки для блока дашборда

Есть возможность добавить справку к блоку , нажав кнопку «Настройка подсказки».

_images/hint_b.PNG

В «Настройка подсказки» есть поле Заголовок и текст справки.

_images/hint.PNG

Справку можно оформлять в HTML кодировке, тогда необходимо вписывать картинки, стили, таблицы. Если текст оформляется без HTML кодировки, то выводится сплошным текстом. Например, HTML кодировка:

<p><span style="font-family: &quot;Trebuchet MS&quot;, sans-serif; font-size: 15.2px; text-align: justify; text-indent: 38px;">&nbsp; &nbsp;</span>Модель Альтмана, показывающая вероятность&nbsp;банкротства, построена на выборе из 66 компаний &ndash; 33 успешных и 33 банкрота. Модель предсказывает точно в 95% случаев.</p>
<p>&nbsp; &nbsp;Модель Альтмана рассчитывается по формуле:</p>
<p><b>Z = 0,717Х1 + 0,847Х2 + 3,107Х3 + 0,42Х4 + 0,995Х5</b></p>
<p><i>X1 - оборотный капитал к сумме активов предприятия. Показатель оценивает сумму чистых ликвидных активов компании по отношению к совокупным активам.</i></p>
<p><i>X2 - чистая прибыль к сумме активов предприятия, отражает уровень финансового рычага компании</i></p>
<p><i>X3 - прибыль до налогообложения к общей стоимости активов. Показатель отражает эффективность операционной деятельности компании</i></p>
<p><i>Х4 - балансовая стоимость собственного капитала /обязательства </i></p>
<p><i>Х5 - объем продаж к общей величине активов предприятия, характеризует рентабельность активов предприятия. &nbsp;&nbsp; </i></p>
<p>Если Z &lt;= 0,7 &ndash; организация находится в зоне финансового риска;</p>
<p>Если 0,7 &lt; Z &lt;= 1,3 &ndash; организация находится в зоне неопределенности;</p>
<p>Если Z &gt; 1,3 &ndash; организация находится в зоне финансовой устойчивости.</p>
<p>&nbsp;</p>

Справка к блоку в HTML кодировке:

_images/reference_1.PNG

Справка к блоку без HTML кодировки:

_images/reference_2.PNG

Для вставки картинки в справку необходимо создать реестр с показателем типа «Файл» и загрузить через него картинку:

_images/help_pic_dash1.png

Далее необходимо открыть файл и узнать ссылку на него (можно скопировать в адресной строке).

Затем необходимо вставить в справку html-код для вставки картинки:

<img src="ссылка_на_файл">

Результат можно увидеть в режиме просмотра дашборда:

_images/help_pic_dash2.png

Сохранение и создание новых, открытие уже существующих дашбордов

После настройки структуры дашборда и всех его компонентов, необходимо его сохранить. Для этого нужно ввести название дашборда в текстовом поле в верхнем меню страницы и нажать кнопку «Сохранить» справа от этого поля.

_images/dash_10.png

Если нужно сохранить копию уже существующего дашборда, необходимо ввести в текстовое поле название нового дашборда, а затем в выпадающем меню по стрелочке справа от кнопки «Сохранить» выбрать пункт «Сохранить как новый».

_images/dash_11.png

Для открытия уже существующих в системе дашбордов, нужно нажать на иконку «Загрузить дашборд» в верхнем меню страницы. Появится выпадающий список со всеми существующими в системе дашбордами.

_images/dash_12.png

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

Для создания в системе нового дашборда, нужно нажать иконку «сбросить дашборд» в верхнем меню страницы.

_images/dash_13.png

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

Изменение дашборда

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

Если необходимо сменить название уже существующего контейнера, нужно в настройках контейнера ввести новое название в текстовом поле, после чего или повторно выбрать необходимый для отображения элемент системы (график или отчет), или нажать на кнопку «Закрыть настройки».

Изменения необходимо сохранить, нажав кнопку «Сохранить» в верхнем меню страницы работы с дашбордами.

Если изменять настройки контейнера не нужно, можно закрыть окно настроек, нажав на кнопку «Закрыть настройки» в левом верхнем углу окна (при этом в контейнере отобразится его текущее содержимое).

_images/dash_14.png

Если необходимо изменение структуры или отображения отчета или графика, используемых в дашборде, вы можете быстро перейти к конструктору с выбранным отчетом (или к конструктору с отчетом, по которому был построен выбранный график). Для этого нужно нажать на кнопку перехода к конструктору в правом нижнем углу контейнера с графиком/отчетом.

_images/dash_15.png

Далее, в конструкторе нужно произвести все необходимые вам изменения, сохранить график или отчет и вернуться к дашборду (главное меню - «Дашборды»). Дашборд откроется в режиме просмотра (см. далее).

Режим просмотра дашборда

Для перехода от редактирования дашборда к его просмотру (и обратно) нужно нажать иконку с глазом в верхнем меню страницы. Когда иконка нажата (темно-серая), открыт режим просмотра. Когда отжата (светло-серая), открыт режим редактирования.

_images/dash_16.png

В режиме просмотра исчезает клетчатая разметка страницы дашборда и пропадает возможность настройки и изменения отдельных контейнеров дашборда.

_images/dash_17.png

Из режима просмотра, так же, как и из режима редактирования, можно перейти к просмотру выбранного отчета или графика в конструкторе (кнопка в правом нижнем углу контейнера с отчетом/графиком).

_images/dash_18.png

Также в режиме просмотра можно открыть график или отчет на весь экран для удобства просмотра данных в них. Для этого нужно нажать на кнопку с расходящимися стрелочками в правом нижнем углу выбранного контейнера.

_images/dash_19.png

Для сворачивания графика или отчета обратно в контейнер нужно нажать аналогичную кнопку уже со сходящимися стрелочками в правом нижнем углу экрана.

_images/dash_20.png

Удаление дашборда

Для удаления дашборда нужно нажать иконку с мусорным ведром в правом верхнем углу страницы.

_images/dash_21.png

Для этого действия необходимо подтверждение во всплывающем окне. Если удаление действительно необходимо, нужно нажать кнопку «Да, удалить дашборд». В противном случае - кнопку «Нет, продолжить работу с дашбордом».