A couple of custom Handlebars templates for Apache Superset - 2

Ready-made Handlebars templates for Apache Superset

The reason for writing the article, the basic rules for using Handlebars for Superset and tips are described in the first part of the article, so I will not repeat myself and will immediately look at other templates.

I am posting ready-made Html + CSS code, which can be applied immediately (since it is sensitive to any extra spaces), and then CSS with an explanation of the elements it contains.

Third pattern

Card with key metrics

Here I used the icon size 80*80. With a classic 12-column grid, this chart will take up 3 columns. On hover, the icons become translucent and the text and numbers are slightly larger to draw attention to the metrics.

Ready-made HTML + jinja code placed in the first Handlebars Template window:

<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>

Completed CSS code for the second window:

.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;
}

A detailed explanation of css for those who are not usually involved in web coding, but have a general idea

/*Контейнер карточек*/
.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;
}

Fourth pattern

This graph shows the real indicator (metric1) + target indicator (plan1) with a progress bar in percentage.

You also need to create a percentage indicator (percentage1) according to the formula: percentage = (metric / plan) * 100.

There are a huge number of sites with icons; you can use any images: photos, logos, gifs.

I usually use this site with icons And service to generate links to the image.

Ready-made HTML + jinja code placed in the first Handlebars Template window:

<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>

Completed CSS code for the second window:

.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;
}

A detailed explanation of css for those who are not usually involved in web coding, but have a general idea

/* Контейнер карточек */
.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;
}

I’ll repeat a couple of tips:

you need to be careful when formatting the code in windows, it may not work and produce errors if there are hints or spaces in the lines;
It is better to name elements of classes and css elements individually for each graph, because they will affect all graphs on the dashboard with the same class names, you will change something in the code, but it will not work or, conversely, will work in the wrong place.