open-contracting / bi.dream.gov.ua

DREAM Analytics

https://bi.dream.gov.ua

Apache License 2.0

1 stars 0 forks source link

Інвестиційні проєкти: Графіки #199

Closed ndrhzn closed 2 weeks ago

ndrhzn commented 1 month ago

Слот перший

Dropdown menu під графіком дозволяє обрати розріз для відображення даних. Меню має дві опції - "Статус" та "Стадія". За замовчування обрано значення "Статус".

Якщо обрано "Статус", тоді ми показуємо donut chart "Кількість інвестиційних проєктів у розрізі статусів". Сегменти сортовані за числовим показником від найбільшого до найменшого.

Якщо обрано "Стадію", ми показуємо bar chart "Кількість інвестиційних проєктів у розрізі стадій". Стовпчики сортовані не за кількісним показником, а за ідентифікатором стадії, оскільки в такий спосіб ми відображаємо проходження проєктів по життєвому циклу інвестиційного проєкту.

Цей графік ніяк не залежить від обраної картки, і завжди відображає лише показник "кількість інвестиційних проєктів" у обраному розрізі.

Слот другий

Dropdown menu під графіком дозволяє обрати розріз для відображення даних. Меню має дві опції - "Сектор" та "Категорія джерела фінансування". За замовчування обрано значення "Сектор".

Якщо на картці обрано показники "Кількість інвестиційних проєктів", "Бюджет", "Кількість розпорядників коштів", тоді ми показуємо treemap, що презентує обраний на картці показник у обраному розрізі.

Якщо на картці обрано показник "Фінансове покриття", тоді ми показуємо bar chart, де по осі Y - сектор, а по осі Y - фінансове покриття.

Слот третій

Dropdown menu під графіком дозволяє обрати розріз для відображення даних. Меню має дві опції - "Пріоритет уряду" та "Головний розпорядник коштів". За замовчування обрано значення "Пріоритет уряду".

Якщо на картці обрано показники "Кількість інвестиційних проєктів", "Бюджет", "Фінансове покриття", тоді ми показуємо стовпчиковий графік із обраним показником у обраному розрізі.

Якщо обрано показник "Кількість розпорядників коштів", ми показуємо стовпчиковий графік, де по осі Y є пріоритет уряду, а по осі Х - кількість розпорядників коштів.

a-radik commented 1 month ago

Вітаю Зробили тестову версію мешапа, присутні деякі баги і деякі об'єкти не зроблені, працюємо над цим, але хотів звернути вашу увагу на деякі моменти https://bi.qnalytics.com/dream/#/investmentProjects

на малих екранах це все виглядає не дуже гарно, інформативно, таблиця практично не юзабельна
оскільки тут всі візуалізації (крім таблиці) в контейнері матимемо проблему з екпортом в excel, для впровадження функцыъ треба долучати R&D, а поки прибрати цю можливысть тут

Можливо слід відмовитись від випадаючих списків.. Ще як варіант зробити сторынку з прокруткою, щоб KPI і графіки займали 80-90% висоти сторінки. а далі йшла таблиця фіксованої висоти . Сама сторінка буде з проктруткою, кому потрібні будуть деталі в табличному вигляді матиме змогу передивитись @ndrhzn

andrzejbeletsky commented 1 month ago

take a look

ndrhzn commented 1 month ago

Дякую!

Поки маємо такі коментарі

Щодо експорту даних: Так, давайте поки приберемо цей функціонал з графіків, а вже після основного релізу допрацюємо
Щодо розташування та розміру елементів: Так, давайте зробимо сторінку з прокруткою, дамо більше місця для графіків та зробимо таблицю фіксованої висоти

ndrhzn commented 1 month ago

Тут вирішили зробити наступне:

Розташування елементів

Слот перший

Прибрати розріз "Статус"
Прибрати dropdown menu

Слот другий

Перемістити сюди з третього слоту розріз "Пріоритет уряду", додати його в dropdown menu після "Сектору"

Слот третій

Прибрати dropdown menu

Поведінка елементів

	Кількість інвестиційних проєктів	Бюджет	Наявне фінансування	Фінансове покриття
Слот перший (розріз - Стадія)	Bar chart: Кількість інвестпроєктів у розрізі стадій	Bar chart: Кількість інвестпроєктів у розрізі стадій	Bar chart: Кількість інвестпроєктів у розрізі стадій	Bar chart: Кількість інвестпроєктів у розрізі стадій
Слот другий (розрізи - Сектор, Пріоритет уряду, Категорія джерела фінансування)	Кількість інвестпроєктів у обраному розрізі [Сектор, Пріоритет уряду, Категорія джерела фінансування]	Treemap: Бюджет інвестпроєктів у обраному розрізі [Сектор, Пріоритет уряду]	Treemap: Наявність фінансування інвестпроєктів у обраному розрізі [Сектор, Пріоритет уряду, Категорія джерела фінансування]	Bar chart: Фінансове покриття у обраному розрізі [Сектор, Пріоритет уряду]
Слот третій (розріз - Головний розпорядник коштів)	Bar chart: Кількість інвестпроєктів у розрізі головних розпорядників коштів	Bar chart: Бюджет у розрізі головних розпорядників коштів	Bar chart: Наявне фінансування у розрізі головних розпорядників коштів	Grouped bar chart: Порівняння бюджету та фінансування у розрізі головних розпорядників коштів

Тут важливо звернути увагу на такі речі:

Розріз "Категорія джерела фінансування" не для всіх показників має сенс (наприклад, "Бюджет у розрізі категорії джерела фінансування" видається не дуже корисним / осмисленим показником). Тому, якщо на картках обрано або "Бюджет" або "Фінансове покриття", то ми пропонуємо не показувати в dropdown menu опцію "Категорія джерела фінансування"
Ми додаємо новий графік - порівняння бюджету та фінансування у розрізі головних розпорядників коштів. Тут для кожного ГРК ми малюємо два стовпчики - бюджет та наявне фінансування. ГРК мають бути відсортовані за бюджетом від найбільшого до найменшого.

ndrhzn commented 1 month ago

[Кольорова шкала для treemap]

Хочемо трохи змінити підхід до створення кольорової шкали для treemap. Наразі у нас є окремий колір для кожної категорії. Через те виходить, що на графіку може бути велика кількість різних кольорів. Маємо відгуки користувачів щодо того, що їм це сприймається не дуже добре.

Тому пропонуємо змінити підхід і визначати колір на підставі числового значення. Таким чином у нас буде не категоріальна кольорова шкала, де кожній категорії відповідає окремий колір, а радше лінійна кольорова шкала, де кожному числу відповідає певний відтінок кольору.

За основу можна взяти, наприклад, наш блакитний колір (той, що використовується на картках та на графіках на сторінці "Бюджетування")

a-radik commented 1 month ago

Вітаю! Взяв не себе сміливість запропонувати трохи інший вигляд, а саме:

випадаючи списки прибрати зовсім
перемикання вимірів реалізувати альтернативними вимірами самих діаграм (на вузьких екранах цей перемикач може не відображатись, але на десктопах все має бути ок)
замість treemap помыстити pie chart, оскыльки він надає модливість перемикання вимірів за допомогою альтернативнох вимірів в самій діаграмі. (Кольори поки не перелаштовували, якщо концепція ок, доробимо). Якщо всеж pie не сподобається і вирішите показувати treemap, ми розглядаємо варіант помістити перемикання розрізу в діаграмі (помістити випадаючий список десь у заголовку діаграми). Справа в тому, що випадаючий список займатиме цілий рядок в мешапі і лишатиметься доволі багато порошнього місця на сторінці. Зараз виглядає отак

бюджет vs покриття зробили через bullet chart з відображенням обох значеннь на графіку

Гадаю що краще один раз самому побачити, тому ось посилання на нативний додаток https://qsdemo.rbcgrp.com/sense/app/b0f13ce0-e592-48bc-9432-6da4de1f8cfb/sheet/fb67dfc9-965f-4697-b62f-2a837ac73708/state/analysis @ndrhzn

ndrhzn commented 1 month ago

Дякую!

Щодо pie chart - розумію інтенцію, але це не дуже нам підходить. Зокрема через те, що тут можливі ось такі ситуації, коли для частини сегментів ми не бачимо ані назв, ані власне самих сегментів. Для такої задачі значно краще зробити простий bar chart (мені, звісно, прикро, що у нас засилля стовпчикових графіків, але що зробиш). Або ж можна розглянути варіант із treemap, де сегменти пофарбовані залежно від числового значення, а вибір виміру реалізований через випадаючий список у заголовку діаграми)

Може бути також якась логіка, за котрою для виміру "Пріоритет уряду" ми показуємо стовпчиковий графік (просто через кількість категорій тут treemap матиме приблизно ті ж проблеми, що і pie chart), а для вимірів "Сектор" та "Категорія джерела фінансування" - treemap. Але ця логіка вимагатиме від нас використання контейнера, а ми наче прагнемо від цього відмовитись задля економії місця.

Щодо bullet chart - перевірив це на користувачах / замовниках, і наразі маємо побажання змінити це на grouped bar chart (може виявитись, що і він не працюватиме так, як нам треба, але маємо відтестувати це).

Також маємо наступні коментарі і побажання

Додати назву розрізу у заголовок графіку. Користувачам не завжди зрозуміло, у якому саме розрізі представлені дані. Скажімо, у першому слоті, невтаємниченим буде важко зрозуміти, що кількість представлена у розрізі стадій. У третьому слоті - важко зрозуміти, що кількість представлена у розрізі головних розпорядників коштів. Чи ми можемо додати назву розрізу у заголовок графіку? В такому разі у нас буде щось на зразок "Кількість інвестиційних проєктів / стадія", "Кількість інвестиційних проєктів / головний розпорядник коштів"?

Деталізувати дані щодо фінансового покриття до десятих. За аналогією із тим, як ми нещодавно зробили для проєктів, є сенс показувати дані щодо фінансового покриття з деталізацією до десятих - умовно, не 18%, а 17.6%. Це стосується карток та графіків.
Розрізнити стовпчикові графіки за кольором. Наразі у нас можлива ситуація, коли ми бачимо перед собою три стовпчикових графіки однакового кольору. Тут є побажання зробити центральний стовпчиковий графік блакитного кольору - аби було простіше фокусуватися на окремих слотах і все не зливалося в суцільну жовту пляму.

a-radik commented 1 month ago

Стосовно pie/treemap, ще хочу запропонувати варіант з категорією "Інші" показуємо топ 10 (наприклад) значень розрізу за мірою, а решта потрапляє в категорію "Інші". Якщо користувачеві треба - робить клік і йому розгоратються наступні 10. Доволі усталена в BI практика відобрадення значень розрізу на яких припадає дуже мала частка.

Назва розрізу - на центральній діаграмі, там, де присутні альтернативні виміри, зображено зліва від вісі де виводиться перелік вимірів. Це стандартний функціонал, пропоную так і робити на решті візуалізацій. Справа в тому, що дізнатись який вимір вибраний з переліку альтернативних немодливо, а бажано мати єдині правила відображення для всіх графіків.

@ndrhzn , що думаєте з цього приводу?

Решту треба щоб @andrzejbeletsky спрбував, тоді побачимо як воно буде

andrzejbeletsky commented 1 month ago

take a look pie із "Іншими" Назва розрізу у 1-му і 3-му слоті є і в назві і в діаграмі. В діаграмі на малих розмірах екрану клік назву розміру не відображає. Як залишимо?

ndrhzn commented 1 month ago

Щодо використання категорії "Інші" - давайте потестуємо на користувачах. Тільки давайте зробимо не pie, а treemap, і "Топ 5" + "Інші".

Щодо назви розрізу - ось тут дилема. З одного боку, хотілось би, аби назви розрізів відображалися для всіх графіків консистентно (і в такому разі було б добре мати їх в самій діаграмі), з іншого боку - справді, на певних розмірах екранів вони перестають відображатися зовсім. Втім, у нас на першому місці розмір екрану 1920 х 1080, і тут все відображається добре. Водночас, скажімо, у частини людей з Проєктного офісу, котрі будуть робити демонстрацію модулю для стейкхолдерів, роздільна здатність екрану менша, а отже частина функціоналу їм доступна не буде.

Також варто звернути увагу, що на деяких розмірах екрану зникає легенда для графіку порівняння бюджету і фінансування. Через це неможливо без додаткових зусиль зрозуміти, який колір що позначає. Тут варто спробувати зробити легенду доступною завжди, але, наприклад, в один рядок, а не у два.

І поки ми обговорюємо цей графік - чи можливо у тултіп додати інформацію щодо фінансового покриття у відсотках? Так, аби при наведенні на назву розпорядника коштів ми бачили власне назву, бюджет, фінансування, та фінансове покриття.

a-radik commented 1 month ago

Легенду forcibly відображати завжди не вдасться оскільки Qlik сам вирішує, що її треба прибрати при зменшені розміру візуалізації, ми на це не зможемо впливати. Тут хотів би вас ще раз повернути до способу відображення, оскільки в разі bullet chart це буде інтуітивно зрозуміло.

ndrhzn commented 1 month ago

[Тултіп у графіку порівнняня бюджету і фінансування]

У графіку порівняння бюджету і фінансування просять додати один показник та змінити порядок показників.

Має бути так:

Назва ГРК
Кількість проєктів
Бюджет
Наявне фінансування
Фінансове покриття

ndrhzn commented 1 month ago

[Графік у другому слоті]

Тут після тестування вирішили не мудрувати і завжди показувати bar chart - незалежно від того, яка картка обрана

andrzejbeletsky commented 1 month ago

take a look

ndrhzn commented 1 month ago

[Назви розрізів]

Вирішили робити назви розрізів над графіками - через те, що назви розрізів на діаграмах зникають автоматично на певних розмірах екранів.

Але тут так само хотілось би зробити ці підписи більш зручними для читання / коротшими. Чи ми можемо це реалізувати?

Наприклад,

"Кількість інвестпроєктів / Стадія" "Кількість інвестпроєктів / Сектор" "Кількість інвестпроєктів / Пріоритет уряду" "Кількість інвестпроєктів / ГРК"

Тут питання в тому, чи це можливо зробити таким чином, аби у нас, наприклад, в таблиці та у фільтрах відображались повні назви змінних (умовно "Головний розпорядник коштів", а не "ГРК")?

Також на певних розмірах екранів у другому слоті користувачі не бачать можливості обирати вимір для відображення. Ймовірно треба перемістити це наверх (і, наприклад, спробувати відображати це в заголовку графіку)

andrzejbeletsky commented 1 month ago

@a-radik Альтернативні розрізи на завжди видимі. Якщо робити окремим дроп-дауном, то тут або знову окремим елементом поза графіком, або переходити на новий лейаут-контейнер і у нас можливе питання експорту в мешапі. Що робимо?

a-radik commented 1 month ago

Гадаю, що питання радше до @ndrhzn ніж до мене оскільки в залежності від рішення що буде прийнято воно тягне за собою певні додаткові роботи:

якщо ми вирішуємо робити вибір розрізу "на самій діаграмі", тобто застосовувати layout контейнер це з практично 100% імовірністю тягне за собою те, що користувач не може експортувати дані з цього об'єкту, а для увімкнення цієї функції (при наймні спробувати знайти шлях до цього) треба залучити R&D і inevitably щось допрацювати (обсяг визначити не можу, це може бути година а може день і треба планувати заздалегідь, сьогодні на завтра ми вам це наврядче зробимо)
На інших аркушах в нас вже є випадаючий список вибору і на мій погляд буде якось незрозуміло, якщо на одному аркуші воно знаходиться окремо під діаграмою і займати весь рядок. На мою думку користувацький інтефейс з точки дору елементів управління при наймні точно має бути універсальним across the entire solution. Тобо якщо ви погоджуєтесь з цією логікою, то треба буде переробити інші візуалізації і аркуші. Якщо вважаєте що це буде окремий випадок для цієї сторінки або готові до певних робіт для універсалізації інших сторінок, давайте спробуємо зробити так.

P.S. Вибачаюсь за велику кількість англ. слів, не зміг швидко вигадати коротку і ємну заміну для них.

ndrhzn commented 1 month ago

Щодо уніфікації - вона безумовно потрібна, але зараз у нас її, строго кажучи, немає на рівні всіх сторінок в будь-якому разі, тому навряд цей випадок щось суттєво змінить

Референс щодо вжитку термінології у поясненні нижче, аби ми точно говорили про одне й те саме

Ось це я називатиму dropdown menu

Ось це я називатиму "стандартний / нативний випадаючий список"

Яким є фактичне використання цих елементів наразі?

Сторінка “Показники”

Dropdown menu під стовпчиковим графіком
Dropdown menu під treemap
Стандартний / нативний випадаючий список під графіком “За датами” для вибору часової розмірності

Сторінка “Проєкти”

Стандартний / нативний випадаючий список під графіком “За датами” для вибору часової розмірності

Сторінка “Наповнення”

Dropdown menu під першим графіком

Фактично dropdown menu використовується поки частіше, ніж стандартний / нативний спосіб вибору виміру, але різниця в частоті використання не є аж настільки великою, аби ми могли сказати, що у нас домінує певний підхід. Радше ми поки використовуємо те, що краще працює у певному випадку.

Так само на прикладі сторінки "Наповнення" ми бачимо, що можлива ситуація, коли з трьох графіків у ряду dropdown menu є лише в одного з них. Тобто, якщо ми зробимо подібним чином і для сторінки "Інвестиційні проєкти", це не буде щось нове для нас.

І за прикладом вже згаданих сторінок, ми бачимо, що вивантаження даних з графіків, які використовують dropdown menu не є принципово надскладною задачею. На всіх зазначених графіках, де використовується dropdown menu, можливо завантажити дані. Втім, як як зазначав раніше, питання експорту даних з графіків для нас не є критичним у першій ітерації цієї сторінки.

Bottom line - нам не принципово, який саме елемент буде використовуватись для вибору виміру / розрізу, але важливо, аби цей елемент був помітним для користувачів, і не зникав на певних розмірах екранів.

Ми можемо використати Стандартний / нативний випадаючий список, але лише за тих умов, що ми можемо задати, наприклад, на рівні CSS правил, що він завжди буде помітним користувачам, незалежно від розміру контейнера.

Якщо ж ми не можемо в цьому впевнитися, тоді ми можемо використовувати dropdown menu під графіком, так само, як ми робимо це, наприклад, на сторінці "Наповнення".

Тут, до речі, використовується цікавий трюк - розмір графіку по висоті не такий самий, як у двох інших графіків, а трохи менше, аби dropdown menu нормально вписувалось сюди. Чому б нам не запозичити цей же підхід і для сторінки "Інвестиційні проєкти"?

a-radik commented 1 month ago

З екпортом є проблема у контейнерах, а не в зв'язку з вибором розрізу. Якщо поміщатимемо вибір розрізу в заголовку діаграми може перестати працювати експорт.

Тут, до речі, використовується цікавий трюк - розмір графіку по висоті не такий самий, як у двох інших графіків, а трохи менше, аби dropdown menu нормально вписувалось сюди. Чому б нам не запозичити цей же підхід і для сторінки "Інвестиційні проєкти"?

Ви дивитесь на це в нативному клієнті, в мешапі так не працюватиме by default. Щоб пошукати варіант треба долучити R&D. Наразі цей випадаючий список займатиме весь рядок

ndrhzn commented 1 month ago

Ви дивитесь на це в нативному клієнті

Наведений скріншот - з проду, а не нативного клієнту. Я виходжу з настанови, що рішення для цього вже було знайдено під час розробки сторінки "Наповнення"

Якщо поміщатимемо вибір розрізу в заголовку діаграми може перестати працювати експорт.

То давайте не робити вибір розрізу у заголовку діаграми, а зробимо під діаграмою - за аналогією з тим, як це зроблено на сторінці "Наповнення"

a-radik commented 1 month ago

ок, @andrzejbeletsky давай зробимо і передамо на фінальний тест цей варіант

andrzejbeletsky commented 1 month ago

take a look

ndrhzn commented 1 month ago

Ми майже всюди пишемо "ГРК" у заголовках графіків, але також в одному місці все ще пишемо "Головний розпорядник коштів". Варто тут теж скоротити

andrzejbeletsky commented 1 month ago

done