Альманах визуализации, выпуск №1/3: Календарь собственного производства с персональным дизайном в QlikView

Почти во всех документах QlikView есть размерности с датами, а значит, есть необходимость их выбирать. Для дизайнерских решений стандартный серый календарик не всегда подходит.

Поэтому сегодня расскажу о создании собственного календаря, в котором при желании можно управлять всем. Например, по-своему раскрашивать фон квадрариков с датами, по-своему раскрашивать сами числа, можно даже привязать цветовые решения к каким-то показателям в этих датах. Разместить в приложении целый год (12 календариков) или показывать календарь не неделями, а декадами! В общем, очень много идей можно реализовать по данной технологии. Итак приступим.

1. Для создания нашего календарика возьмём объект Сводные таблицы (Pivot Table). При построении матрицы внутренних дат одного месяца для сводной таблицы нам помимо самой размерности даты (пусть она называется «ДАТА»), понадобится в скрипте обогатить её ещё тремя сопутствующими, вычисляемыми размерностями:

• Year(ДАТА)&’/’&IF(Week(ДАТА)=1 and Month(ДАТА)=12,53,Num(Week(ДАТА),00)) as ДАТА_НЕДЕЛЯ’,’RGB(57,130,172)’
• WeekDay(ДАТА) as ДАТА_ДЕНЬ_НЕДЕЛИ’,
• MonthStart(ДАТА) as ДАТА_МЕСЯЦ’,

НА ЗАМЕТКУ! Обращаю внимание, чтобы в Декабре не «исчезла» часть дней из-за того, что обычно в первую неделю попадают последние дни Декабря и первые дни Января, мы перенесём последние числа декабря из 1 недели в 53.

2. Начинаем создание календарика с обычной сводной таблицы (Pivot Table) с двумя измерениями:
   ДАТА_НЕДЕЛЯ, ДАТА_ДЕНЬ_НЕДЕЛИ и в выражении прописываем: Day(ДАТА).

Обязательно сразу на странице «Представление» поставим галочку у опции: «Всегда полное представление».

Получаем следующее (Пример А):

 

3. Переносим мышкой размерность ДАТА_ДЕНЬ_НЕДЕЛИ на горизонтальное размещение. Отключаем заголовок.

a) На вкладке Представление (Presentation)

• Убираем все галочки в «Разрешить сводные таблицы» (Allow Pivoting), «Индикаторы выбора» (Selection Indicators), «Всегда полностью развернуто» (Always Fully Expanded) и «Скрыть нулевые значения» (Suppress Zero-Values).
• Удаляем символ «-» в «Null Symbol” и «Missing Symbol».
• Выберем третий в списке Измерения (Expression) «Day(ДАТА)»‘ и отцентруем его «Метку» (Label) и «Данные (Числовые)» (Data Numeric) по горизонтали.
• В измерении «ДАТА_ДЕНЬ_НЕДЕЛИ» отцентруем только «Даные (Числовые)» (Data Numeric).

 

b) На вкладке Стиль (Style)

Чтобы сделать одновременно все вертикальные и горизонтальные линии нашего календарика более контрастными:

• Выберем текущий стиль «Текущий стиль» (Current Style) как «Базовый» (Basic), но прозрачность сетки передвинем ползунком «Прозрачность» (Cell Borders Transparency) на 70%.
• Отключим галочку: «Вертикальные границы ячеек измерений» (Vertical Dimension Cell Borders).

Получаем Пример (Б):

4. Теперь переключимся через меню: Вид/Сетка (View/Design Grid) в расширенный режим дизайнера. У нас появится фоновая сетка, как признак, что режим дизайнера активирован.

a) Правой кнопкой мыши нажимаем по правой левой серой ячейке нашей таблицы, где написано ДАТА_НЕДЕЛЯ. В выпавшем меню выберем меню: «Ячейка с настраиваемым форматом» (Custom Format Cell):

b) Попадаем на форму дополнительных настроек ячейки таблицы. Делаем цвет «Цвет фона» (Background Color) прозрачным и копируем его в «Цвет текста» (Text Color).

c) Верхние и нижние границы убираем. То же самое проделываем и для ячейки, где отображается сам год и неделя (первый столбец таблицы). После чего ширину первых двух колонок можно уменьшить до минимума. Пример (В):

5. Теперь, чтобы наш календарик показывал только один месяц, можно сделать рядом обычный «List Box» с размерностью ДАТА_МЕСЯЦ, которую мы уже создали на шаге 1 – Пример Г:

Однако этот вариант имеет минус – нам надо как-то обеспечить возможность выбора только одного месяца. Поэтому мы организуем выбор месяца по-другому.

6. Итак, заведем переменную:

или можно прописать начальное присвоение последнего месяца в скрипте:

7. Теперь доработаем наши измерения (вкладка Dimensions):

Вместо первого ДАТА_НЕДЕЛЯ — напишем такое условие:

Вместо второго ДАТА_ДЕНЬ_НЕДЕЛИ — напишем такое условие:

Тут, как можно заметить, мы сделали все наши надписи дней недели маленькими буквами, но чтобы сортировка не сбилась — обернули функцией DUAL.

На этом же шаге сделаем небольшие поправки стиля:

• Отключим бордюр: закладка «Макет» (Layuot) в свойствах объекта, убираем галочку «Использовать границы» (Use Borders)
• Сменим шрифт текста, например на Calibri: закладка «Шрифт» (Font)

Получаем Пример Д:

8. Для того чтобы видеть какой месяц сейчас выбран и обозначить границы нашего календарика:

• Cоздадим дополнительный объект «Текст» (Text).
• Определим нужные размеры, выберем цвет рамки и поместим объект за календариком.
• В качестве заголовка у элемента пропишем показ текущего значения переменной vMonthSelected: =Date(vMonthSelected, MMMM YYYY)
• Заголовок отцентрируем:

В итоге, получим такой вид:

9. Осталось только придумать элементы, которые будут управлять выбором нужного нам месяца, и которые будут менять значение нашей переменной vMonthSelected. Опять же, самый простой способ сделать такой элемент управления — из объекта «Текст» (Text), так как в нём есть возможность прописать команды действия (вкладка «Actions») и использовать при отображении не только буквы и цифры, но и специальные символы.

НА ЗАМЕТКУ! Спецсимволы я обычно использую с этих сайтов: http://miraduga.com/Temp/TablSpec.html и http://veseloff.net/17.html. Здесь любой спецсимвол просто копируется и вставляется в нужное место.

Итак, для выбора предыдущего месяца:

• Скопируем с указанного сайта в новый объект Text «стрелку влево».
• Отключим заголовок и рамку объекта.
• Фон сделаем прозрачным.
• В качестве действия (на вкладке «Действия», Actions) добавим всего одну команду: раздел команд «Внешний» (External) выберем команду «Установить переменную» (Set Variable):

• Переменную, которой будем управлять, укажем нашу: vMonthSelected, а саму команду, которая будет выполняться, пропишем следующую:

 

• Аналогично сделаем текстовый объект для выбора следующего месяца, вставим в него «Стрелку вправо», а в качестве команды управляющей переменной пропишем:

• Усилить визуализацию можно, скрывая стрелку влево («предыдущий месяц»), когда мы дошли до самого минимального месяца, имеющегося в документе для выбора. Для этого просто надо на вкладке «Макет» (Layout) в опции «Показать – По условию» (Show – Conditional ) прописать условие показа объекта:

• Для стрелки вправо («Следующий месяц») условие показа объекта:

10. Ну, а теперь попробуем выбрать какую-либо дату в нашем календарике. Сюрприз? При выборе любой ячейки таблицы, вся таблица ужимается до одной этой ячейки.

Чтобы, не смотря на текущий выбор, всё равно отрисовывались все даты в календаре необходимо доработать наше текущее выражение на вкладке «Выражения» (Expressions).
Вместо уже существующей формулы «=Day(ДАТА)» напишем такое выражение: =Day(Only({1}ДАТА))’,

Теперь из-за примененного сет-анализа (set-analysis) {1} — мы получаем день даты, игнорируя все фильтры:

11. Последний штрих: «подсвечиваем» выбранную дату ярким фоном. Для этого:

• Назовем наше выражение — «Число» (Метка/ Label)
• Раскроем плюсик
• В «Цвет фона» (Background Color) пропишем такую формулу:

Также рекомендую выделить субботы и воскресенья, прописав тут же в «Цвет шрифта» (Font Color) следующее условие:

Ну вот и всё. Наш кастомизированный календарик готов. Пишите свои комментарии и мысли по созданию нестандартных календарей QlikView в комментариях. До скорых встреч!