====== Шаблоны CSS ======

<WRAP group>
<WRAP column 30%>
Superset поддерживает использование CSS (Cascading Style Sheets, каскадные таблицы стилей) для оформления внешнего вида дашбордов. Элементы кода из примеров необходимо вставлять в окне CSS (в редактировании дашборда **EDIT DASHBOARD → три точки → Редактировать CSS**).\\
<WRAP center round important 100%>
Шаблоны CSS влияют не только на саму панель дашборда, а также и на глобальную навигацию в другие области страницы, на которых находится панель дашборда (независимо от того, находится ли она в режиме редактирования или нет). Если вы хотите ограничить область применения стилей самой информационной панелью, вы можете ограничить свои стили селектором, например, <code>.dashboard-content > .grid-container</code>
</WRAP>

</WRAP>

<WRAP column 50%>
{{:superset:work_in_superset:css_1.png?nolink&200|}}
{{:superset:work_in_superset:css_2.png?nolink&350|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 30%>
Также в **Настройки → Шаблоны CSS** можно заранее создать часто используемые шаблоны, для удобства применения. В открытом разделе будет отображаться:\\
  * {{:superset:work_in_superset:css_6.png?nolink&100|}} - добавление нового шаблона CSS;
  * Кнопка **Множественный выбор** позволяет выбрать несколько сохраненных шаблонов для удаления
  * **Фильтрация** по пользователю, который создал шаблон (:!: поле называется Дата создания) и окно **поиска**;
  * Информация о созданных шаблонах:
    * **Название** – название шаблона;
    * **Изменено** – когда последний раз был изменен шаблон;
    * **Дата создания** – дата создания шаблона;
    * **Дата создания** – <color #ed1c24>кем</color> был создан шаблон;
    * **Действия** – редактирование или удаление шаблона.

</WRAP>

<WRAP column 60%>
{{:superset:work_in_superset:css_3.png?nolink&170|}}
{{:superset:work_in_superset:css_5.png?nolink&600|}}
</WRAP>
</WRAP>

===== Создание собственного шаблона CSS =====
<WRAP group>
<WRAP column 30%>
Для создания собственного Шаблона CSS нажмите кнопку **+Шаблоны CSS**. В открывшемся окне введите название вашего шаблона и код CSS.\\
\\
Для использования созданных CSS-шаблонов необходимо в режиме в редактировании дашборда **EDIT DASHBOARD → три точки → Редактировать CSS**. Откроется поле для ввода кода, по кнопке **Загрузить шаблон стилей (CSS)** будет доступны сохраненные шаблоны.
</WRAP>

<WRAP column 60%>
{{:superset:work_in_superset:css_7.png?nolink&300|}}
{{:superset:work_in_superset:css_4.png?nolink&400|}}
</WRAP>
</WRAP>

===== Примеры форматирования графиков с использованием CSS =====
Ниже представлены несколько базовых шаблонов:\\
<WRAP group>
<WRAP column 20%>
  * Изменение фона дашборда
</WRAP>

<WRAP column 40%>
<code>body {
color: #4D4D4D;
background-color: #24bdbd
}
</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_8.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Изменение фона панели с названием дашборда
</WRAP>

<WRAP column 40%>
<code>.header-with-actions {
    background-color: DarkBlue;
    color: white;
  }
</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_17.png?nolink&400|}}
</WRAP>
</WRAP>


<WRAP group>
<WRAP column 20%>
  * Изменение цвета компонента дашборда
</WRAP>

<WRAP column 40%>
<code>.dashboard-component{ 
color: #e3101e;
</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_9.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Изменение цвета фона заголовка
</WRAP>

<WRAP column 40%>
<code>.header-title { 
color: #4D4D4D;
background-color: #24bdbd
}

</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_10.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Изменение цвета фона фильтра
</WRAP>

<WRAP column 40%>
<code>div[data-test=filter-bar] > div {
    background: Gainsboro;
  }


</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_18.png?nolink&400|}}
</WRAP>
</WRAP>


<WRAP group>
<WRAP column 20%>
  * Скрыть наименование всех графиков
</WRAP>

<WRAP column 40%>
<code>.editable-title {
display: none;
justify-content: flex-end;!important
}

</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_11.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Скрыть наименование конкретного графика
</WRAP>

<WRAP column 40%>
<code>div[data-test-chart-id="383"] .header-title { 
visibility: hidden
}

</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_12.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Добавить рамку для графика
</WRAP>

<WRAP column 40%>
<code>div[data-test-chart-id="383"] {
border: thick double #32a1ce;
}

</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_13.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Задаем цвет текста и фона для ячеек тела таблицы из последней колонки
</WRAP>

<WRAP column 40%>
<code>.dashboard-chart-id-184 td:last-child{
color: #2d90c9; background-color: #f8ceb5;
}
</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_14.png?nolink&400|}}
</WRAP>
</WRAP>


<WRAP group>
<WRAP column 20%>
  * Загрузка и применение шрифта
</WRAP>

<WRAP column 40%>
<code>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

#main-menu + div *{
      font-family: 'Roboto', sans-serif !important;
  }
</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_19.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Скрыть панель навигации и примененных фильтров на графиках
</WRAP>

<WRAP column 40%>
<code>.header-controls {
    display: none !important;
  }
</code>
Скрыть только панель навигации графика:\\
<code>
.header-controls > .ant-dropdown-trigger {
    display: none; /* no !important needed! */
  }
</code>
</WRAP>
<WRAP column 30%>
ДО: {{:superset:work_in_superset:css_20.png?nolink&400|}}\\
ПОСЛЕ: {{:superset:work_in_superset:css_21.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Удаление глобальной панели навигации
</WRAP>

<WRAP column 40%>
<code>#main-menu {
      display: none;
    }

</code>
</WRAP>
<WRAP column 30%>
ДО: {{:superset:work_in_superset:css_22.png?nolink&400|}}\\
ПОСЛЕ:{{:superset:work_in_superset:css_23.png?nolink&400|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 20%>
  * Стилизация графика BigNumber
</WRAP>

<WRAP column 40%>
<code>
div[data-test-viz-type=big_number_total]::after {
  position:absolute;
  height: 50px;
  width: 50px;
  bottom: 16px;
  right: 16px;
  border: 1px solid #666;
  border-radius:50px;
  content: '';
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.dashboard-chart-id-234 div[data-test-viz-type=big_number_total]::after {
  background-image: url("https://hsto.org/getpro/moikrug/uploads/company/218/645/913/logo/medium_a68ad9662fbc4b06311a7297c5321cdf.png");
}

.dashboard-chart-id-234 {
  background-image: url('https://aml.university/storage/uchastniki-aml/PSXRHHlEgZs9VfYkKl4AacJxDQIebeeGDCosFVTr.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
}

div[data-test-viz-type=big_number_total] .text-container {
  font-family: 'Rubik Mono One', sans-serif;
  text-shadow: 8px 8px 16px #000;
}


</code>
</WRAP>
<WRAP column 30%>
{{:superset:work_in_superset:css_24.png?nolink&600|}}
</WRAP>
</WRAP>

===== Как найти идентификатор графика =====
Для применения некоторых стилей потребуется указывать идентификатор графика.\\
<WRAP group>
<WRAP column 30%>

**Способ 1:**\\
Чтобы узнать идентификатор графика необходимо открыть код страницы через консоль браузера и рассмотреть часть, отвечающую за нужный график, она подсветится при наведении курсора на него.
</WRAP>

<WRAP column 60%>
{{:superset:work_in_superset:css_16.png?nolink|}}
</WRAP>
</WRAP>

<WRAP group>
<WRAP column 30%>
**Способ 2**:\\
Нажать на ваш график, в результате откроется окно редактирования графика. В конце адресной строки, будет указан идентификатор графика.\\ \\
<WRAP center round tip 70%>
Первый способ является более предпочтительным.
</WRAP>


</WRAP>

<WRAP column 60%>
{{:superset:work_in_superset:css_15.png?nolink|}}
</WRAP>
</WRAP>