Простой индикатор
Простой индикатор
Позволяет визуализировать ключевые показатели
Индикатор является одним из самых востребованных виджетов на информационной панели. Встроенный HTML-редактор в Polymatica Dashboards позволяет создавать нестандартные визуализации и использовать их неограниченное количество раз.
Как работает HTML-редактор в Polymatica Dashboards можно посмотреть в коротком видео
Пример HTML-кода индикатора
<div class=“box”>
<span class=”label” style = ”color: #8E97A7″align=”center”>Потенциал догазификации</span>
<div class=”value”> <span style = ”color: #F8F8F8”>{{ numberWithSpaces(data.rows[0][‘1’]) }}</span>
</div>
<style>body {
height: 70%;
box-sizing: border-box;
padding: 0;
}
.box {
display: flex;
padding-top: 10px;
box-sizing: border-box;
height: 100%;
overflow: hidden;
cursor: pointer;
flex-direction: column;
align-items: center;
}
.header{
height: 100%
}
.label {
display: block;
color: rgb(17, 24, 39);
font-size: 14px;
font-weight: bold;
}
.desc {
display: block;
align-items: center;
color: rgb(111, 111, 120);
font-size: 14px;
}
.value {
display: flex;
align-items: flex-end;
flex: 1;
font-size: 22px;
font-weight: bold;
}
</style>
В случае вопросов пишите на support@polymatica.com
