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

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

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

27.10.2024 09:05

oneSmilla 0 323 Источник

Готовые шаблоны Handlebars для Apache Superset

Причину написания статьи, основные правила использования 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 лучше для каждого графика называть индивидуально, т.к. они будут влиять на все графики на дашборде с одинаковыми именами классов, вы будете менять что-то в коде, а это не будет срабатывать или наоборот срабатывать не там.