Платформа 3V/Формы/Диаграммы: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
(Новая страница: «Дашборд - интерактивная диаграмма, необходимая для визуализации данных. == Создание дашб...»)
 
Метка: изменение цели перенаправления
 
(не показана 51 промежуточная версия 2 участников)
Строка 1: Строка 1:
Дашборд - интерактивная диаграмма, необходимая для визуализации данных.
+
#redirect [[Платформа_3V/Формы/Компоненты/Графики]]
 
 
== Создание дашборда ==
 
 
 
Для добавления на форму дашборда следует выполнить следующие шаги:
 
 
 
1. Создать [[Платформа_3V/Отчет|'''отчёт''']], в котором будут находиться данные, необходимые для визуализации.<br>
 
[[Файл:Создание пивота.gif|мини|слева]]
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
*В отчёт необходимо вывести данные справочника через конструктор
 
[[Файл:добавление справочника в пивот.gif|мини|слева]]
 
<br><br><br><br><br><br><br><br><br><br><br>
 
2. Создать серверную карточку
 
 
 
[[Файл:Создание серверной карточки.gif|мини|слева]]
 
 
 
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 
<div style="font-weight:bold;line-height:1.6;">Шаблон серверной карточки</div>
 
<div class="mw-collapsible-content mw-collapsed-content">
 
<syntaxhighlight lang="JSON" line>
 
{
 
  "id": 245,
 
  "name": "Bar graph",
 
  "description": "",
 
  "title": "",
 
  "entrySettings": null,
 
  "uiSources": [],
 
  "entryDataSources": [],
 
  "parameters": [],
 
  "binaryConditionsRules": [],
 
  "submitValidateRules": [],
 
  "expressions": [],
 
  "controlsValueCalculateRules": [],
 
  "actions": [],
 
  "conditionActionIdsOnOpen": [],
 
  "conditionalActions": [],
 
  "selectionSets": [],
 
  "reportTemplates": [],
 
  "useNewDependenciesBuilder": null
 
}
 
</syntaxhighlight>
 
 
 
 
 
3. Добавить источник данных
 
 
 
<div style="font-weight:bold;line-height:1.6;">Шаблон источника данных - отчёта</div>
 
<syntaxhighlight lang="JSON" line>
 
{
 
  ...
 
 
 
  "entryDataSources": [
 
    {
 
      "pivotId": 1,
 
      "parameters": [],
 
      "focusOnFirstCell": true,
 
      "id": 1,
 
      "name": "",
 
      "isReadOnly": true,
 
      "dataEditRuleIds": [],
 
      "beforeSaveDataActions": [],
 
      "afterSaveDataActions": [],
 
      "discriminator": "PivotDataSource"
 
    }
 
  ],
 
    ...
 
}
 
</syntaxhighlight>
 
 
 
4. Добавить элемент управления
 
<syntaxhighlight lang="JSON" line>
 
{
 
    ...
 
 
 
  "uiSources": [
 
    {
 
      "pivotSourceId": 1,
 
      "doActionOnChangeFocusedCell": true,
 
      "doActionOnChangeCellValue": false,
 
      "id": 1,
 
      "caption": "",
 
      "enable": false,
 
      "visible": true,
 
      "hint": null,
 
      "uiDataSource": null,
 
      "doActionOnChangeValue": false,
 
      "enableRuleIds": [],
 
      "visibleRuleIds": [],
 
      "access": {
 
        "read": {
 
          "roles": [],
 
          "inversion": false,
 
          "default": true
 
        },
 
        "edit": {
 
          "roles": [],
 
          "inversion": false,
 
          "default": true
 
        }
 
      },
 
      "isValueChanged": false,
 
      "expressionId": null,
 
      "discriminator": "PivotSourceEntry"
 
    }
 
  ] 
 
    ...
 
}
 
</syntaxhighlight>
 
 
 
5. Создать клиентскую карточку
 
 
 
 
 
6. Создать диаграмму
 
 
 
После настройки источника и элемента управления в серверной карточке, в клиентской можно добавить диаграмму:
 
<syntaxhighlight lang="JSON" line>
 
{
 
          "key": "1",
 
          "type": "trv-highcharts",
 
          "templateOptions": { 
 
          ...
 
          },
 
          "dataSourceId": 309
 
        }
 
</syntaxhighlight>
 
 
 
== Описание свойств дашборда ==
 
{| class="wikitable"
 
|-
 
! Свойство !! Описание
 
|-
 
| key || Идентификатор компонента карточки
 
|-
 
| type || trv-highcharts
 
|-
 
| templateOptions || Свойства настройки компонента (для каждого типа диаграммы свои).
 
|-
 
| dataSourceId || Идентификатор действия
 
|}
 

Текущая версия на 08:29, 16 сентября 2021