Платформа 3V/Формы/Компоненты/Графики/Датчик Активити

Материал из 3v-wiki
Перейти к навигации Перейти к поиску

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

Описание свойств templateOptions


Пример JSON датчика активности
  1 {
  2   "key": "key1628579599055",
  3   "type": "trv-highcharts-speed",
  4   "dataSourceId": 1,
  5   "templateOptions": {
  6     "enable": true,
  7     "visible": true,
  8     "titleAlign": "center",
  9     "titleMargin": 100,
 10     "chartWidth": 900,
 11     "chartHeight": 900,
 12     "type": "activity",
 13     "solidSize": 100,
 14     "tooltipEnabled": true,
 15     "tooltipFormat": "<span style='color: {point.color}; font-size: large'>{series.name}</span><br><div style='text-align:center'><span style='color: {point.color}; font-weight: bold; font-size: large;'>{point.y}%</span></div>",
 16     "yLabelEnabled": false,
 17     "yTickEnabled": false,
 18     "seriesData": [
 19       {
 20         "type": "gauge",
 21         "label": {
 22           "textAlign": "center"
 23         },
 24         "col": 3,
 25         "seriesInnerRadius": 92,
 26         "seriesRadius": 100,
 27         "color": "#a07eff",
 28         "paneOpacityColor": 0.5,
 29         "paneInnerRadius": 92,
 30         "paneRadius": 100,
 31         "paneColor": "#cebdff",
 32         "name": "Рестораны и кафе"
 33       },
 34       {
 35         "type": "gauge",
 36         "label": {
 37           "textAlign": "center"
 38         },
 39         "col": 4,
 40         "name": "Супермаркеты",
 41         "seriesRadius": 90,
 42         "seriesInnerRadius": 82,
 43         "color": "#ff7eaf",
 44         "paneOpacityColor": 0.5,
 45         "paneInnerRadius": 82,
 46         "paneRadius": 90,
 47         "paneColor": "#ffc2d9"
 48       },
 49       {
 50         "type": "gauge",
 51         "label": {
 52           "textAlign": "center"
 53         },
 54         "col": 5,
 55         "name": "Транспорт",
 56         "seriesInnerRadius": 72,
 57         "seriesRadius": 80,
 58         "color": "#7ecbff",
 59         "paneOpacityColor": 0.9,
 60         "paneInnerRadius": 72,
 61         "paneRadius": 80,
 62         "paneColor": "#d6efff"
 63       },
 64       {
 65         "type": "gauge",
 66         "label": {
 67           "textAlign": "center"
 68         },
 69         "col": 6,
 70         "name": "Образование",
 71         "seriesInnerRadius": 62,
 72         "seriesRadius": 70,
 73         "color": "#ff8c7e",
 74         "paneOpacityColor": 0.5,
 75         "paneInnerRadius": 62,
 76         "paneRadius": 70,
 77         "paneColor": "#ffc4bd"
 78       },
 79       {
 80         "type": "gauge",
 81         "label": {
 82           "textAlign": "center"
 83         },
 84         "col": 7,
 85         "name": "Коммунальные платежи",
 86         "seriesRadius": 60,
 87         "seriesInnerRadius": 52,
 88         "color": "#ffba7e",
 89         "paneOpacityColor": 0.5,
 90         "paneColor": "#ffe6d1",
 91         "paneRadius": 60,
 92         "paneInnerRadius": 52
 93       }
 94     ],
 95     "title": "Расходы",
 96     "rowSolidData": 1,
 97     "colMin": 1,
 98     "colMax": 2,
 99     "titleColor": "#ad75ad",
100     "fontSizeTitle": 30,
101     "bgColor": "#fcfaff",
102     "bdWidth": 3,
103     "bdColor": "#fcd7d6",
104     "chartOptions": ""  
105   }
106 }

Пример использования

Кейс: Вывести датчик, показывающий процент расходов по категориям

расходы.gif
Создать отчёт с данными, на которых будет строиться датчик

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

отчёт активности.png









Создать форму

В форму следует добавить источник данных и элемент.

Добавить источник данных - отчет

В форму добавить источник данных - отчет, где pivotId - это идентификатор отчета в навигаторе.

Пример JSON источника - отчета
 1 {
 2       "pivotId": 100,
 3       "parameters": null,
 4       "focusOnFirstCell": true,
 5       "id": 1,
 6       "name": "Отчет",
 7       "isReadOnly": true,
 8       "dataEditRuleIds": [],
 9       "beforeSaveDataActions": [],
10       "afterSaveDataActions": [],
11       "discriminator": "PivotDataSource"
12     }
Добавить элемент - датчик

Добавить элемент "Датчик" и задать у него источник данных - ранее добавленный отчет

источник данных датчик.png




Пример JSON
1 {      
2       ...   
3 
4       "dataSourceId": 309
5      
6       ...
7 }
Настроить тип датчика

В поле "Тип датчика(type)" выбрать значение "Activity(activity)".


Дополнительные настройки chartOptions

Иногда требуются дополнительные настройки диаграммы для этого используется поле "Редактирование конфигурации(chartOptions)".

ред конфиг спидометр.png













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

Пример JSON расположения диаграммы 
 1 {
 2     "pane": [{
 3         "startAngle": -90,
 4     "endAngle": 90,
 5     "center": ["50%", "70%"]
 6     },
 7     {
 8         "startAngle": -90,
 9     "endAngle": 90,
10     "center": ["50%", "70%"]
11     }]
12 }

Дополнительную информацию по chartOptions можно узнать по ссылке.

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Графики/Датчик_Активити&oldid=3649