Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

Причину написания статьи, основные правила использования Handlebars для Superset и подсказки описывает первая часть статьи, поэтому повторяться не буду и сразу рассмотрим другие шаблоны.

Размещаю готовый код Html + CSS, который можно сразу применить (т.к. есть чувствительность к любым лишним пробелам), а затем CSS с объяснением входящих в него элементов.

Третий шаблон

Карточка с основными метриками

Здесь я использовала размер иконок 80*80. При классической сетке в 12 колонок, этот график займет 3 колонки. При наведении иконки становятся полупрозрачными, а текст и цифры немного увеличиваются, чтобы привлечь внимание к показателям.

Готовый код HTML + jinja размещаемый в первом окне Handlebars Template:

<div class="card-container">     {{#each data}}     <div class="card-row">         <div class="card-column center">             <div class="text">Емкость</div>             <div class="text">объектов</div>         </div>         <div class="card-column center">             <img src="https://i.postimg.cc/6p0SwTB0/icons8-100.png"                   alt="Школа" class="icon">         </div>         <div class="card-column center">             <div class="metric">{{metric1}}</div>             <div class="label">Мест в ДОО</div>         </div>         <div class="card-column center">             <img src="https://i.postimg.cc/XJSZx1dp/icons8-80.png"                   alt="Детский сад" class="icon">         </div>         <div class="card-column center">             <div class="metric">{{metric2}}</div>             <div class="label">Мест в СОШ</div>         </div>     </div>     {{/each}} </div>

Готовый код CSS для второго окна:

.card-container {     display: flex;     flex-direction: column;     border-radius: 12px;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     transition: transform 0.3s ease, box-shadow 0.3s ease;     cursor: pointer;     justify-content: center; } .card-row {     display: flex;         justify-content: center;     align-items: center;     padding: 0.6em;     border: 1px solid #ddd;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-column {     text-align: center;     padding: 0% 1%;     transition: transform 0.3s ease; } .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; } .card-container:hover .card-column {     transform: scale(1.05); } .text {     font-size: 1.3em;     font-weight: bold; } .metric {   font-size: 2em;     font-weight: bolder;   color: #c90808;   margin-bottom: 2%;   position: relative;   display: inline-block; } .label {     font-size: 1em;      color: #777777;     transition: color 0.3s ease; } .card-container:hover .label {     color: #555555; } .icon {     transition: opacity 0.3s ease;     min-width: 50px;     min-height: 50px;     margin: 1% 0%;     opacity: 1; } .card-container:hover .icon {     opacity: 0.2; }

Подробное объяснение css для тех, кто web-вёрсткой обычно не занимается, но общее представление имеет

/*Контейнер карточек*/ .card-container {     /*flexbox для выравнивания дочерних элементов (карточек) внутри контейнера*/     display: flex;     /*вертикальное расположение дочерних элементов внутри карточки*/     flex-direction: column;     /*скругление углов карточки*/     border-radius: 12px;     /*тень*/     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     /*плавные переходы для свойства трансформации и тени при изменении*/     /*состояния (например, при наведении)*/     transition: transform 0.3s ease, box-shadow 0.3s ease;     /*изменение курсора при наведении на объекты внутри карточки*/     cursor: pointer;     /*выравнивание по центру по горизонтали*/     justify-content: center; }  /*Строки внутри карточки*/ .card-row {     display: flex;         justify-content: center;     /*центрирование по горизонтали*/     align-items: center;     /*внутренние поля*/     padding: 0.6em;     /*граница*/      border: 1px solid #ddd;     /*тень*/     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  /*Колонки внутри карточек*/ .card-column {     /*центрирование текста*/     text-align: center;     /*горизонтальные отступы*/     padding: 0% 1%;     /*плавное изменение свойства трансформации*/     /*(например, масштаб) в течение 0.3 секунд*/     transition: transform 0.3s ease; }  /*Класс для центральной колонки для расположения*/ /*содержимого по центру как вертикально, так и горизонтально*/ .card-column.center {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center; }  /*Эффекты при наведении*/ .card-container:hover .card-column {     /*увеличение размера элементов на 5% в течение 0,3 секунд*/     transform: scale(1.05);   }  /*Текст заголовка*/ .text {     /*размер шрифта, больше стандартного*/     font-size: 1.3em;     /*жирное начертание*/     font-weight: bold; }  /*Ключевые метрики*/ .metric {   font-size: 2em;     font-weight: bolder;   /*красный цвет*/   color: #c90808;   /*нижний внешний отступ*/   margin-bottom: 2%;   /*относительное позиционирование*/   position: relative;   /*делает элемент строчно-блочным*/   display: inline-block; }  /*Название метрик*/ .label {     font-size: 1em;     /*серый цвет*/     color: #777777;     /*при наведении изменяет цвет плавно в течение 0,3 секунд*/     transition: color 0.3s ease; }  /*Эффекты при наведении*/ .card-container:hover .label {     color: #555555; /*изменение цвета на темно-серый*/   }  /*Иконки*/ .icon {     /*плавность изменения изображения*/     transition: opacity 0.3s ease;     /*минимальная ширина*/     min-width: 50px;     /*минимальная высота*/     min-height: 50px;     /*вертикальные отступы*/     margin: 1% 0%;     /*исходная непрозрачность */     opacity: 1; }  /*Эффект при наведении на иконку*/ .card-container:hover .icon {     /*иконка становится полупрозрачной для привлечения внимания к цифрам*/     opacity: 0.2; }

Четвертый шаблон

Данный график отображает реальный показатель (metric1) + плановый показатель (plan1) с полосой прогресса в процентах.

Также нужно создать показатель с процентом (percentage1) по формуле: percentage = (metric / plan) * 100.

Сайтов с иконками огромное множество, можно использовать любые изображения: фото, логотипы, gif.

Я пользуюсь обычно этим сайтом с иконками и сервисом для формирования ссылок на картинку.

Готовый код HTML + jinja размещаемый в первом окне Handlebars Template:

<div class="card-container">     {{#each data}}     <div class="card">         <div class="text">ДИНАМИКА ЗАГРУЗКИ</div>         <div class="indicator">             <div class="label1">Первый процесс</div>             <img src="https://i.postimg.cc/Kzf4y6d9/icons8-80.png"                   alt="Иконка 1" class="icon">             <div class="metric">{{metric1}} / {{plan1}}</div>             <div class="progress-bar">                 <div class="progress1" style="width: {{percentage1}}%;"></div>             </div>             <div class="percentage1">{{percentage1}}%</div>         </div>         <div class="indicator">             <div class="label2">Второй процесс</div>             <img src="https://i.postimg.cc/rmfyHSr3/icons8-combo-chart-80-1.png"                   alt="Иконка 2" class="icon">             <div class="metric">{{metric2}} / {{plan2}}</div>             <div class="progress-bar">                 <div class="progress2" style="width: {{percentage2}}%;"></div>             </div>             <div class="percentage2">{{percentage2}}%</div>         </div>         <div class="indicator">             <div class="label3">Третий процесс</div>             <img src="https://i.postimg.cc/PrPJBFK4/icons8-combo-chart-80.png"                   alt="Иконка 3" class="icon">             <div class="metric">{{metric3}} / {{plan3}}</div>             <div class="progress-bar">                 <div class="progress3" style="width: {{percentage3}}%;"></div>             </div>             <div class="percentage3">{{percentage3}}%</div>         </div>     </div>     {{/each}} </div>

Готовый код CSS для второго окна:

.card-container {     display: flex;     flex-wrap: wrap;     justify-content: center;     width: 100%;     height: 100%;     padding: 1%;     box-sizing: border-box; } .card {     background-color: #fff;     padding: 5%;     margin-bottom: 1% 1% 7% 1%;     box-sizing: border-box;     flex: 1 0.7 calc(33.333% - 7%);     min-width: 160px;     display: flex;     flex-direction: column;     align-items: center; } .text {     color: #2b669e;     text-align: center;     font-size: 0.9em;     font-weight: bolder;     margin-bottom: 0.7em; } .indicator {     align-items: center;     margin-bottom: 1em;       display: flex;     flex-direction: column;       border: solid 1px lightgray;     border-radius: 12px;     padding: 1em 0.8em 0.4em 0.8em;     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); } .icon {     width: 5em;     height: 5em;     min-width: 60px;     min-height: 60px;     border-radius: 12px;     margin-bottom: 5%; } .metric {     font-size: 1.3em;     margin-top: 1%;     font-weight: bolder; } .label1 {     font-size: 1em;     color: #3ba272;     font-weight: bolder;     margin-bottom: 0.7em; } .label2 {     font-size: 1em;     color: #d9754a;     font-weight: bolder;     margin-bottom: 0.7em; } .label3 {     font-size: 1em;     color: #60a7bd;     font-weight: bolder;     margin-bottom: 0.7em; } .progress-bar {     width: 80%;     background-color: #e0e0de;     border-radius: 10px;     overflow: hidden;     height: 1.5em;     margin: 5% 0; } .progress1 {     background-color: #3ba272;     height: 100%; } .percentage1 {     font-size: 1.1em;     font-weight: bold;     color: #3ba272;     margin-bottom: 0.3em; } .progress2 {     background-color: #d9754a;     height: 100%; } .percentage2 {     font-size: 1.1em;     font-weight: bold;     color: #d9754a;     margin-bottom: 0.3em; } .progress3 {     background-color: #60a7bd;     height: 100%; } .percentage3 {     font-size: 1.1em;     font-weight: bold;     color: #0690ba;     margin-bottom: 0.3em; }

Подробное объяснение css для тех, кто web-вёрсткой обычно не занимается, но общее представление имеет

/* Контейнер карточек */ .card-container {     /*flexbox для выравнивания дочерних элементов внутри контейнера*/     display: flex;     /*разрешение переноса карточек на новую строку,*/     /*если не хватает места по горизонтали*/     flex-wrap: wrap;     /*выравнивание по центру по горизонтали*/     justify-content: center;     /*вся доступная ширина*/     width: 100%;     /*вся доступная высота*/     height: 100%;     /*внутренние отступы со всех сторон, обеспечивающие пространство*/     /*между контейнером и карточками*/     padding: 1%;     /*включение паддингов и бордеров в общую ширину и*/     /*высоту элемента, что упрощает расчет размеров*/     box-sizing: border-box; }  /* Индивидуальные карточки */ .card {     /*белый фон карточки*/     background-color: #fff;     /*внутренние отступы*/     padding: 5%;     /*внешние отступы*/     margin-bottom: 1% 1% 7% 1%;     box-sizing: border-box;     /*гибкость: расширение если есть дополнительное пространство + сжатие,*/     /*но до 0.7 + базовая ширина карточки: треть от контейнера минус отступы*/     flex: 1 0.7 calc(33.333% - 7%);     /*минимальная ширина*/     min-width: 160px;     display: flex;     /*вертикальное расположение дочерних элементов внутри карточки*/     flex-direction: column;     /*центрирование по горизонтали*/     align-items: center; }  /* Заголовок карточки */ .text {     /*темно-синий цвет текста */     color: #2b669e;     /*центрирование текста*/     text-align: center;     /*размер шрифта немного меньше стандартного*/     font-size: 0.9em;     /*жирное начертание*/     font-weight: bolder;     /*отступ снизу для отделения заголовка от следующих элементов*/     margin-bottom: 0.7em; }  /*Индикаторы загрузки*/ .indicator {     /*центрирование по горизонтали*/     align-items: center;     margin-bottom: 1em;       display: flex;     flex-direction: column;     /*светло-серая граница для карточки размером 1 пиксель*/     border: solid 1px lightgray;     /*скругление углов обводки*/     border-radius: 12px;     padding: 1em 0.8em 0.4em 0.8em;     /*тень*/     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); }  /*Иконки*/ .icon {     /*ширина с привязкой к шрифту родителя*/     width: 5em;     /*высота с привязкой к шрифту родителя*/     height: 5em;     /*минимальная ширина*/     min-width: 60px;     /*минимальная высота*/     min-height: 60px;     /*скругление углов иконки – пригодится если она другого цвета*/     border-radius: 12px;     margin-bottom: 5%; }  /*Метрики*/ .metric {     /*размер шрифта метки – больше чем стандартный*/     font-size: 1.3em;     /*внешний отступ сверху*/     margin-top: 1%;     font-weight: bolder; }  /*Метка к первой карточке*/ .label1 {     font-size: 1em;     color: #3ba272;     font-weight: bolder;     margin-bottom: 0.7em; }  /*Метка ко второй карточке*/ .label2 {     font-size: 1em;     color: #d9754a;     font-weight: bolder;     margin-bottom: 0.7em; }  /*Метка к третьей карточке*/ .label3 {     font-size: 1em;     color: #60a7bd;     font-weight: bolder;     margin-bottom: 0.7em; }  /*Полоски прогрессов с серой подложкой*/ .progress-bar {     /*ширина бара внутри карточки*/     width: 80%;     /*серый цвет цвета бара без значений*/     background-color: #e0e0de;     /*скругление бара*/     border-radius: 10px;     /*скрытие части содержимого, выходящую*/     /*за границы элемента (используется для анимации заполнения прогресса)*/     overflow: hidden;     /*высота полоски прогресса*/     height: 1.5em;     /*отступы сверху и снизу*/     margin: 5% 0; }  /*Окрашивание 1-го прогресс-бара*/ .progress1 {     background-color: #3ba272;     height: 100%; }  /*Цифра процента на первой карточке*/ .percentage1 {     font-size: 1.1em;     font-weight: bold;     color: #3ba272;     margin-bottom: 0.3em; }  /*Окрашивание 2-го прогресс-бара*/ .progress2 {     background-color: #d9754a;     height: 100%; }  /*Цифра процента на второй карточке*/ .percentage2 {     font-size: 1.1em;     font-weight: bold;     color: #d9754a;     margin-bottom: 0.3em; }  /*Окрашивание 3-го прогресс-бара*/ .progress3 {     background-color: #60a7bd;     height: 100%; }    /*Цифра процента на третьей карточке*/ .percentage3 {     font-size: 1.1em;     font-weight: bold;     color: #0690ba;     margin-bottom: 0.3em; }

Пару советов повторю:

• нужно аккуратно относиться к форматированию кода в окнах, он может не срабатывать и выдавать ошибки если есть подсказки или пробелы в строках;

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