Различия

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

--- superset:work_in_superset:css_templates [2023/08/29 15:13] – Нестерова Елена Руслановна
+++ superset:work_in_superset:css_templates [2023/09/08 16:25] (текущий) – Нестерова Елена Руслановна
@@ Строка 3: / Строка 3: @@
 <WRAP group>
 <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 column 60%>
+</WRAP>
+<WRAP column 50%>
 {{:superset:work_in_superset:css_1.png?nolink&200|}}
 {{:superset:work_in_superset:css_2.png?nolink&350|}}
@@ Строка 47: / Строка 51: @@
 </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>

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

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

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

Различия

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