Николай Ланец
17 мар. 2019 г., 20:03

Как я таймлайн под реакт писал

Всем привет!

Два дня провоевал с задачей, которая изначально мне казалась значительно проще... Вот делюсь опытом.

Как вы наверняка помните, есть у нас раздел с задачами. Любой может создавать проекты, задачи, фиксировать сроки выполнения. Весь функционал пишется с нуля, постепенно обрастая плюшками, призванными повысить эффективность и пользу. И вот, хотя фильтры различные и есть, захотелось немного визуализации, чтобы было проще воспринимать загруженность по срокам и задачам, потому как много задач набивается по мере выявления их, но не ко всем задачам приступаешь сразу (есть приоритеты, зависимость от других задач и т.п.). Придумал я такой сценарий: в задачах указывать Планируемое время начала и Планируемое время завершения, и когда делаем выборку задач, формируется суммарная временная шкала, на которую накладываются все полученные задачи, и в каждой строчке задачи видно какую часть этой шкалы занимает задача. Сейчас это выглядит вот так: http://joxi.ru/nAyYL6ZSYOxG5A (оставляю, потому что наверняка будет сильно изменено). Живой пример задачи, отмеченные мной на выполнение.

И вот с какими квестами я в процессе столкнулся:

1. Редактирование перетаскиванием краев (чтобы редактировать начало и окончание задачи). Так как на линии может быть несколько отрезков и у каждого из них по две редактируемых переменных, пришлось попотеть. В целом я задачу эту решил, но в текущей версии в разделе проектов пока редактирование отключено этим способом просто в силу неоптимальности вложенности компонентов в списке задач (надо строку целиком делать одним компонентом, а у меня там колонки отдельными методами формируются.). Чуть позже поправлю, если возникнет острая необходимость, а пока что просто там же через редактирование задачи даты менять можно.

2. Наложение отрезков. Уже после того, как накатил и начал разбрасывать задачи, понял, что есть наложение отрезков (когда пересекаются даты начала и конца нескольких задач). Сейчас не видно этих наложений. В следующем релизе простейший ках сделаю: фон полупрозрачный сделаю. К примеру, если сейчас задать background: rgba(0, 255,0 ,0.2), полоса выглядит вот так: http://joxi.ru/LmGyqplHeyxYOA. Уже хоть как-то видно, что есть наложения.

3. Информация по клику и/или наведению. Сейчас вот видно, что на шкале присутствуют какие-то задачи, а что это за задачи, сразу и не поймешь. Как минимум надо сделать при наведении показывать титл типа "Задача такая-то, Сроки такие-то", а по клику скролить к задаче и подсвечивать ее.

Ну и еще куча всякой мелочи...

Тем не менее, лично для меня уже наглядности прибавилось и буду стараться планировать свою загруженность. Надеюсь и вам будет полезно.
Может быть пересечения красным отмечать: все-таки пересечение задач в рамках одного проекта и одного исполнителя не слишком позитивная ситуация?
Идея же с планированием времени нужная: именно с планированием проектов обычно серьезная проблема:))
Чтобы отметить пересечения красным, их надо высчитать :) А это тоже не самая тривиальная задача. К тому же не факт, что это задачи на одном исполнителе (ведь можно выбрать все задачи по нескольким проектам без учета конкретного исполнителя). И это еще один нетривиальный момент, который на этапе проектирования БД под одним углом рассматривается, а на этапе проектирования UI совсем под другим. В общем дзен UI я еще только постигаю.

Добавить комментарий