Требуется разработать элемент интерфейса, согласно дизайн макету https://www.figma.com/file/xUzP6KzKpe2RwiTOqcw2K8/%D0%98%D0%BD%D0%B4%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80?node-id=0%3A1

Требуется pixel perfect верстка и реализация скрипта на javascript динамического элемента интерфейса, который будет отображать рассчитываемые значения. При изменении входных параметров элемент интерфейса должен изменять отображаемые значения индикатора по нажатию на кнопку «Построить».

Основная функция построения индикатора должна принимать на вход массив значений:

• Значение 1-ого участка
• Значение 2-ого участка
• ….
• Значение N-ого участка

Всего может быть не более 10 участков.

Исходный пример, приведенный на иллюстрации, подразумевает 4 участка, значения которых рассчитываются исходя из общей цифры в неких относительных единицах измерения. В поле «Всего» вводится суммарное значение, далее на шкале соотношений значение разбивается на части согласно значениям в процентах, далее полученные значения в относительных единицах измерения должны подаваться на вход в основную функцию, на основе которых необходимо отобразить индикатор.

При желании вы можете убрать кнопку «Построить».

Пример (согласно макету):

Всего: 6500

X1 = 40% = 2600
X2 = 40% = 2600
X3 = 15% = 975
X4 = 5% = 325

Формируем массив данных data = [X1, X2, X3, X4]
Передаем в функцию function draw_indicator (data)
Т.е. в функцию необходимо передавать рассчитанные значения (не проценты).

За решение на native js без использования библиотек предполагается премия в размере 8000 руб.
Откликаясь прошу хорошо оценить задачу. Основная сложность нам видится в построении pixel perfect внешности самого индикатора (обратите внимание на скругленные края каждого из участков индикатора).

Можно использовать библиотеки с нативным кодом javascript. Крайний случай jQuery.