Кастомизация внешнего вида отчетов Datazen

Back

Несмотря на все удобство и простоту создания отчетов и дашбордов в Datazen, при разработке кастомизированного дизайна или брендирования внешнего вида отчетов возникают сложности. Так как информации по этой теме в Интернете не так много, делимся своим опытом решения этой задачи.


Дизайн приложения в Datazen задается темой.

  • Тема представляет собой архив zip с коллекцией файлов с неизменными именами. В случае изменения имени файла, файл распозноваться не будет. Все добавленные вручную файлы разпознаваться не будут.
  • Файл заливается на Datazen сервере в панели "Control panel" на вкладке "Branding".
  • Тема автоматически применяется к: десктопному приложению, если оно подключено к серверу у которого стоит тема; html-виду главной страницы в браузере;
  • Тема применяется вручную к Datazen отчетам.
  • Тема для Datazen отчетов применяется в десктопном приложении. При открытии отчета в десктопном приложении можно задать ему тему в панели выбора тем - справа сверху (там будет показана иконка, которая хранится в zip-архиве "Windows8-Style").

Описание состава файлов архива-темы и их свойства:

  • Activity-42x42.png - Иконка активности (Десктоп)
  • Activity-42x42@2x.png - Иконка активности (Десктоп)
  • Android-AddNewServerIcon-30x30.png - Иконка добавление нового сервера (Десктоп)
  • Android-Background-768x1280.png - Фон приложения (Андроид)
  • Android-Background-1200x1900.png - Фон приложения (Андроид)
  • Android-Logo-320x64.png - Лого приложения (Андроид)
  • BlankAvatarImage-80x80.png - Иконка юзера (Десктоп)
  • Html-Logo-225x45.png - Лого приложения (Веб)
  • Html-Logo-225x45@2x.png - Лого приложения (Веб)
  • Html-Spinner-42x42.png - Иконка загрузки приложения (Веб)
  • Html-Style.css - Файл кастомизации интерфейса (Веб)
    • body - цвет фона и основной цвет шрифта
    • .group .heading h2 - Имя группы отчетов
    • .group .heading h4 - Имя хаба
    • header, ul.dropdown - фон хедера и навигации
    • header nav a, header nav li.active a:hover - текст навигации
    • header nav a:hover - текст навигации при наведении
    • header nav li.active a span - нижняя граница кнопок навигации
  • Hub-Connected-32x32.png - Иконка "Подключено к серверу" (Десктоп, Веб, Мобилки)
  • Hub-Connected-32x32@2x.png - Иконка "Подключено к серверу" (Десктоп, Веб, Мобилки)
  • Hub-Disconnected-32x32.png - Иконка "Не подключено к серверу" (Десктоп, Веб, Мобилки)
  • Hub-Disconnected-32x32@2x.png - Иконка "Не подключено к серверу" (Десктоп, Веб, Мобилки)
  • iOS7-AddNewServerIcon-42x42.png - Иконка добавление нового сервера (iOS)
  • iOS7-AddNewServerIcon-42x42@2x.png - Иконка добавление нового сервера (iOS)
  • iOS7-Background-320x568.png - Фон приложения (iOS)
  • iOS7-Background-320x568@2x.png - Фон приложения (iOS)
  • iOS7-Background-568x320.png - Фон приложения (iOS)
  • iOS7-Background-568x320@2x.png - Фон приложения (iOS)
  • iOS7-Background-768x1024.png - Фон приложения (iOS)
  • iOS7-Background-768x1024@2x.png - Фон приложения (iOS)
  • iOS7-Background-1024x768.png - Фон приложения (iOS)
  • iOS7-Background-1024x768@2x.png - Фон приложения (iOS)
  • iOS7-BackIcon-42x42.png - Фон приложения (iOS)
  • iOS7-BackIcon-42x42@2x.png - Иконка "Вернуться назад" (iOS)
  • iOS7-BackIcon-42x42@3x.png - Иконка "Вернуться назад" (iOS)
  • iOS7-Logo-225x45.png - Фон приложения (iOS)
  • iOS7-Logo-225x45@2x.png - Иконка приложения (iOS)
  • iOS7-Logo-225x45@3x.png - Иконка приложения (iOS)
  • iOS7-Menu-32x32.png - Иконка меню (iOS)
  • iOS7-Menu-32x32@2x.png - Иконка меню (iOS)
  • iOS7-Search-32x32.png - Иконка поиска (iOS)
  • iOS7-Search-32x32@2x.png - Иконка поиска (iOS)
  • iOS7-Settings-42x42.png - Иконка настроек (iOS)
  • iOS7-Settings-42x42@2x.png - Иконка настроек (iOS)
  • Server-Connected-64x64.png - Иконка "Подключено к серверу" (Десктоп)
  • Server-Connected-64x64@2x.png - Иконка "Подключено к серверу" (Десктоп)
  • Server-Default-64x64.png - Иконка "Нет подключения к серверу" (Десктоп)
  • Server-Default-64x64@2x.png - Иконка "Нет подключения к серверу " (Десктоп)
  • Server-Disconnected-64x64.png - Иконка "Не подключено к серверу" (Десктоп)
  • Server-Disconnected-64x64@2x.png - Иконка "Не подключено к серверу " (Десктоп)
  • theme.json - Файл кастомизации интерфейса (Десктоп, Веб, Мобилки)
    • Background - цвет фона
    • Highlight - цвет выделенных элементов
    • PrimaryText - цвет основного текста
    • SecondaryText - цвет вторичного текста
    • HighlightText - цвет выделенного текста
    • ViewHubActivityText - цвет текста у хаба
    • Dividers - цвет разделителей
    • CommentBackground - цвет фона комментария
    • CommentFieldBackground - цвет поля комментария
    • CommentFieldBorder - цвет границы комментария
    • DialogAccents - цвет хедера диалогового окна
    • DialogHeaderText - цвет текста хедера диалогового окна
    • ButtonStandard - цвет стандартной кнопки
    • DeltaGood - цвет положительной дельты
    • DeltaNeutral - цвет тнейтральной дельты
    • DeltaBad - цвет негативной дельты
    • DeltaNone - цвет поля при отсутствии дельты
    • HubLocal - цвет локального сервера
    • HubConnected - цвет подключенного сервера
    • HubDisconnected - цвет отключенного сервера
    • SearchFieldBackground - цвет поля поиска
    • SearchFieldBorder - цвет границы поля поиска
    • SearchHintText - цвет подсказки поля поиска
    • SearchActiveText - цвет активного текста
    • SelectedPrimaryBorder - цвет границы у основной информации
    • SelectedSecondaryBorder - цвет границы у вторичной информации
  • Windows8-Background-1366x768.100.png - Фон приложения (Десктоп)
  • Windows8-Background-1366x768.140.png - Фон приложения (Десктоп)
  • Windows8-Background-1366x768.180.png - Фон приложения (Десктоп)
  • Windows8-Footer-220x22.100.png - Футер приложения (Десктоп)
  • Windows8-Footer-220x22.140.png - Футер приложения (Десктоп)
  • Windows8-Footer-220x22.180.png - Футер приложения (Десктоп)
  • Windows8-Logo-450x90.100.png - Лого приложения (Десктоп)
  • Windows8-Logo-450x90.140.png - Лого приложения (Десктоп)
  • Windows8-Logo-450x90.180.png - Лого приложения (Десктоп)
  • Windows8-SmallLogo-150x30.100.png - Лого приложения (Десктоп)
  • Windows8-SmallLogo-150x30.140.png - Лого приложения (Десктоп)
  • Windows8-SmallLogo-150x30.180.png - Лого приложения (Десктоп)
  • Windows8-Style.xaml - Файл кастомизации интерфейса (Вид отчетов во всех платформах)
    • TileBrush - цвет фона нейтральной панели
    • PositiveValueBrush - цвет фона положительной панели
    • NegativeValueBrush - цвет фона отрицательной панели
    • Неакцентированная панель
      • Background - цвет фона отчета
      • TitleBrush - цвет заголовкаотчета
      • SubTitleBrush - цвет подзаголовка дашборда и цвет иконки назад
      • PanelVariant - свойство "Accent" делает шрифт светлым, "Standard" - делает шрифт темным
      • PanelBackground - цвет фона блока
      • SelectedForeground - цвет выпадающего списка
      • SelectedBackground - цвет фона выпадающего списка
    • Акцентированная панель
      • AccentBackground - цвет фона отчета
      • AccentTitleBrush - цвет заголовкаотчета
      • AccentSubTitleBrush - цвет подзаголовка дашборда и цвет иконки назад
      • AccentPanelVariant - свойство "Accent" делает шрифт светлым, "Standard" - делает шрифт темным
      • AccentPanelBackground - цвет фона блока
      • AccentSelectedForeground - цвет выпадающего списка
      • AccentSelectedBackground - цвет фона выпадающего списка
    • Palette - меняет цвета у графиков и гистограмм
    • DashboardStyle.PanelHeaderTemplate - свойства и состав неакцентированной панели (лучше код не трогать, только свойства ниже)
      • <TextBlock Foreground="#111111" Text="{Binding Title}"> - свойство Foreground меняет цвет заголовка у панели в отчете
      • <TextBlock Foreground="#111111" Text="{Binding SubTitle}"> - свойство Foreground меняет цвет подзаголовка у панели в отчете
    • DashboardStyle.AccentPanelHeaderTemplate - свойства и состав акцентированной панели (лучше код не трогать, только свойства ниже)
      • <TextBlock Foreground="#111111" Text="{Binding Title}"> - свойство Foreground меняет цвет заголовка у панели в отчете
      • <TextBlock Foreground="#111111" Text="{Binding SubTitle}"> - свойство Foreground меняет цвет подзаголовка у панели в отчете
  • Windows8-Style-120x110.100.png - Иконка темы (Десктоп)
  • Windows8-Style-120x110.140.png - Иконка темы (Десктоп)
  • Windows8-Style-120x110.180.png - Иконка темы (Десктоп)
  • WP-Background-480x853.150.png - Фон приложения (Windows Phone)
  • WP-Background-480x853.png - Фон приложения (Windows Phone)
  • WP-Logo-280x40.150.png - Лого приложения (Windows Phone)
  • WP-Logo-280x40.png - Лого приложения (Windows Phone)

Примеры тем для Datazen доступны по ссылке.

Спасибо за проявленный интерес! Интересующие материалы придут вам на указанную почту в течение одного рабочего дня.

Поздравляем, ваша регистрация успешно пройдена!