Несмотря на все удобство и простоту создания отчетов и дашбордов в 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 доступны по ссылке.