wearegeronimo / ya1

Здравствуйте! История разработки находится на битбакет, т.к. не могу оплатить платный репозиторий на гитхаб из-за санкций, поэтому загружу все в последний момент.

Моей целью было попрактиковаться в нативном js, поэтому кроме сборщика gulp, scss и expressjs я ничего из библиотек не использовал. От резиновой верстки я отказался в угоду адапативной. В стилях я использовал переменные css, чтобы менять тему слайдов по добавлению классов.

a. Leaders. Из входящих данных я сортировал по valueText участников, затем добавлял в объект элемент columnNumber, который присваивается по шаблону, чтобы разместить участников согласно дизайну. Так же я старался создавать минимум уникальных классов на повторяющихся элементах. Есть различие по шаблонам Vote и Vote Result, учитываю этот фактор по строке selectedUserId.

b. Vote. Единственная сложность заключалась в порядке элементов, поэтому я посчитал, что самый удачный вариант будет использование гридов с переназначением положения элемента в сетке.

c. Chart. Высота столбцов пересчитывается относительно входящих данных, масштаб так же выбирается относительно вх данных. за максимум высоты столбца в верстке, я взял высоту активного столбца в дизайне (из разрешения под iPhone 8). 67.5% высоты столбца от род. элемента я взял за 100% относительной шкалы, этот расчет самый интересный в данном шаблоне. Посчитанные данные я передаю в style в процентах от высоты родительского элемента.

d. Activity. Тут у меня возникли сложности с алгоритмом вывода интервалов, я неверно понял задание и пытался реализовать шаблон - "три интервала с равными по длине диапазонами или 2 одинаковых + максимальное значение", пока до меня не дошло, что эти две ситуации не описывают все возможные ситуации. Перечитав задание, до меня дошло, что либо 3 одинаковых, либо 2 одинаковых + 1 любой длинны Из алгоритма - 1.нахожу мин значение и макс из входных данных 2. складываю по два соседних элемента, чтобы сгенерировать данные для 24-ти часовой карты (где столбик - 2 часа). 3. Считаю интервалы с помощью функции интервалов, получаю на выходе объект с данными интервалов, отдельно для вертикальной ориентации, отдельно для гор. 4. объявляю функцию - настройку, с помощью которой я получаю нужную высоту столбца относительно вх. данных и интервалов. Так же тут хранятся данные с корректировкой марджинов и размеров столбцов (их я считал вручную). 5. склеиваю две карты значений, для 2х часовой ячейки и 1но часовой ячейки, и генерирую сразу две карты, и показываю нужную, в зависимоти от ориентации экрана. у меня был выбор, либо отслеживать eventListener"ом и генерировать каждый раз при изменении ориентации, но я решил, что так будет лучше, ведь у нас всего 4 вариации столбца, может, если бы было хотя бы 20, тогда имело бы смысл использовать постоянную регенерацию. Это моя мысль. Так же я не понял, что 4 интервала должно быть, у меня первый - всегда 0, остальные три - динамические. Масштаб карты так же выбирается относительно самого большого значения.

Я не реализовывал ситуации, когда все значения одинаковы, или если всего 2-3 значения, ввиду ограниченности во времени.

e. Diagram. Этот шаблон изрядно меня утомил, во-первых: было принципиально важно реализовать все на svg, чтобы значения диаграммы были динамическими, во-вторых, с svg я познакомился 2 дня назад от написания этого файла, а пишу я его, когда уже все сделал. касательно алгоритма - он тоже попил у меня много крови, опять же из-за svg, мой мозг отказывался понимать принцип расположения элементов на кругу из-за свойства dashArrayoffset, которое разворачивает движение против часовой стрелки. Сейчас уже кажется, что там такого сложного-то, а тогда я просидел около 15 часов над этим, до этого я разбирался, как же прикрутить дизайн на мой круг svg, так как в path я вообще не хочу ввязываться (пока что). У меня не получилось скруглить в 6 рх части диаграммы, потому что я использовал обводку круга, а там нельзя выбрать нужное сглаживание, оно там только одно (или я так нехотя искал после изучения всех дизайновых штучек внутри svg). Так же, я видел, что в макете отступ между частями диаграммы 1*, я поставил 2, так, имхо, выглядит красивее. (чтобы это исправить, нужно удалить "2" в строке 482 и 505, в файле stories.js). Сглаживание не вышло сделать лучше, как только я убираю из верстки код свг в файл, все хорошо, красиво, в макете, к сожалению - нет. Но мне нужен код свг, а не файл, чтобы я мог динамически вносить данные в элементы. Можно было бы использовать , в теории, но разметка еще не сгенерирована. Тут надо посидеть и подумать, как это реализовать в пределах одного файла js, который же и является шаблонизатором. из алгоритма -

1. считаю длину круга диаграммы SVG, относительно заданого радиуса, у меня он 102.1.
2. получаю значение длины одноградусного сектора - делю длинну круга на 360
3. считаю новую длину круга без 4-х одноградусных секторов (2*хградусные в данный момент), чтобы получить длину всех элементов диаграмы, без учета отступов.
4. получаю общее кол-во элементов путем регулярного выражения к "totalText"
5. записываю в виде цифры в новый массив, приплюсовывая к скопированному значению из вх. данных, так-же я заранее позаботился и о других значениях, сразу вычеслив их с помощью рег. выражения, таких как "differenceText" и "valueText"
6. считаю начальное положение первого элемента, делю общую длинну круга (не скорректированную) на 4, чтобы получить значение dasharrayoffset (начинается на 12-ти часах и идет влево)
7. расcчитываю относительно значений "valueText" процентное значение скорректированной длинны круга
8. считаю длину каждого элемента (все записываю в новый массив)
9. первому элементу присваиваю значение начального положение из п.6, прибавляю к этому значению длину этого сегмента, получаю готовый сегмент. Это условие выполняется только один первый раз и критически важно.
10. расcчитываю начальное значение след. сегмента, относительно предыдущего, сохраняю в массив и зануляю.
11. выставляю расcчитанные данные в svg.

[email protected].