База знаний НГТУ НЭТИ

Технологии, которые работают

Инструменты пользователя

Инструменты сайта

superset:work_in_superset:css_templates

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
superset:work_in_superset:css_templates [2023/08/30 10:05] – Нестерова Елена Руслановнаsuperset:work_in_superset:css_templates [2023/09/08 16:25] (текущий) – Нестерова Елена Руслановна
Строка 3: Строка 3:
 <WRAP group> <WRAP group>
 <WRAP column 30%> <WRAP column 30%>
-Superset поддерживает использование CSS (Cascading Style Sheets, каскадные таблицы стилей) для оформления внешнего вида дашбордов. Элементы кода из примеров необходимо вставлять в окне CSS (в редактировании дашборда **EDIT DASHBOARD → три точки → Редактировать CSS**).+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 60%>+</WRAP> 
 + 
 +<WRAP column 50%>
 {{:superset:work_in_superset:css_1.png?nolink&200|}} {{:superset:work_in_superset:css_1.png?nolink&200|}}
 {{:superset:work_in_superset:css_2.png?nolink&350|}} {{:superset:work_in_superset:css_2.png?nolink&350|}}
Строка 54: Строка 58:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>body { <code>body {
 color: #4D4D4D; color: #4D4D4D;
Строка 61: Строка 65:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_8.png?nolink&400|}} {{:superset:work_in_superset:css_8.png?nolink&400|}}
 </WRAP> </WRAP>
Строка 68: Строка 72:
 <WRAP group> <WRAP group>
 <WRAP column 20%> <WRAP column 20%>
-  * Изменение цвета компонента дашборда+  * Изменение фона панели с названием дашборда
 </WRAP> </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 column 20%>
 +  * Изменение цвета компонента дашборда
 +</WRAP>
 +
 +<WRAP column 40%>
 <code>.dashboard-component{  <code>.dashboard-component{ 
 color: #e3101e; color: #e3101e;
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_9.png?nolink&400|}} {{:superset:work_in_superset:css_9.png?nolink&400|}}
 </WRAP> </WRAP>
Строка 86: Строка 108:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>.header-title {  <code>.header-title { 
 color: #4D4D4D; color: #4D4D4D;
Строка 94: Строка 116:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_10.png?nolink&400|}} {{:superset:work_in_superset:css_10.png?nolink&400|}}
 </WRAP> </WRAP>
 </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>
  
  
Строка 106: Строка 145:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>.editable-title { <code>.editable-title {
 display: none; display: none;
Строка 114: Строка 153:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_11.png?nolink&400|}} {{:superset:work_in_superset:css_11.png?nolink&400|}}
 </WRAP> </WRAP>
Строка 124: Строка 163:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>div[data-test-chart-id="383"] .header-title {  <code>div[data-test-chart-id="383"] .header-title { 
 visibility: hidden visibility: hidden
Строка 131: Строка 170:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_12.png?nolink&400|}} {{:superset:work_in_superset:css_12.png?nolink&400|}}
 </WRAP> </WRAP>
Строка 141: Строка 180:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>div[data-test-chart-id="383"] { <code>div[data-test-chart-id="383"] {
 border: thick double #32a1ce; border: thick double #32a1ce;
Строка 148: Строка 187:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_13.png?nolink&400|}} {{:superset:work_in_superset:css_13.png?nolink&400|}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +
 <WRAP group> <WRAP group>
 <WRAP column 20%> <WRAP column 20%>
Строка 157: Строка 197:
 </WRAP> </WRAP>
  
-<WRAP column 20%>+<WRAP column 40%>
 <code>.dashboard-chart-id-184 td:last-child{ <code>.dashboard-chart-id-184 td:last-child{
 color: #2d90c9; background-color: #f8ceb5; color: #2d90c9; background-color: #f8ceb5;
Строка 163: Строка 203:
 </code> </code>
 </WRAP> </WRAP>
-<WRAP column 50%>+<WRAP column 30%>
 {{:superset:work_in_superset:css_14.png?nolink&400|}} {{:superset:work_in_superset:css_14.png?nolink&400|}}
 </WRAP> </WRAP>
 </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>
superset/work_in_superset/css_templates.1693364708.txt.gz · Последнее изменение: 2023/08/30 10:05 — Нестерова Елена Руслановна

Инструменты страницы

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki