Необходимо реализовать Web страницу, представляющую из себя калькулятор TCO, состоящий из выбора значений (входные параметры) и зону презентации результатов (графики).
- Генерация страницы должны быть динамическая
- Все поля выбора являются списочными (2-5 значений).
- В Зависимости от входных значений по таблице определяется стоимость грузовика и оптимальная его конфигурация. Функция выбора – по таблицам, с дискретным заданием набора опций и результата.
- Для упрощения таблицы выбора могут быть встроены на Web UI в виде загружаемого текста или CSV-файлов с данными (интеграция с встроенной СУБД со структурой таблиц будет плюсом).
- Таблицы заполнить фейковыми данными.
- Упрощения: a. Country оставляем только UK с приведенными параметрами на экране в части стоимости топлива и субсидий. b. Charge Truck – только приведенный на скриншоте c. ICE аналог – только приведенный на скриншоте
Алгоритм такой:
- В зависимости от страны резолвятся Diesel Price, Electricity Price, One-Time subsidy, Annual Subsidy.
- На основании данных Daily Range и признака Zero Emission резолвится конфигурация грузовика (X, Y, Z), его стоимость, а также ежегодные затраты на ГСМ
- Из стоимости грузовика, а также Purchase Option рассчитывается TCO (= Оплата за грузовик + ГСМ) для каждого года из периода (Term).
- Если оплата разовая – то за 0 год – вся сумма грузовика + ГСМ, и далее только ГСМ. Если лизинг – то каждый год есть оплата лизинга + ГСМ.
- Делается сравнение с классическим грузовиком (ICE аналог) – для него ежегодные данные известны и берутся из константы.
- Результаты отображаются на графиках:?
Ширина верстки - по ширине макета. Статичная. Выравнивание по центру. Поля ввода, выпадающий список, чекбокс: Внешний вид при изменении их состояния (стейта) и их поведение при взаимодействии с ними пользователя остаются на откуп разработчика.
Графики:
-
Строятся с анимацией.
-
При первой загрузке страницы графики строятся с нулевой отметки.
-
При смене данных в полях ввода в левой части интерфейса, графики должны динамически перестраиваться.
-
Перестроение происходит изменением высоты столбца со старого значения на новое, не с нуля.
-
Анимация должна быть плавной, с использованием замедления и ускорения.
-
Дизайн данной страницы является техническим макетом
To use it, just install the npm dependencies, build static and start server:
$ npm install
$ npm run build
$ cd server
$ python server.py
$ open [index in browser](http://127.0.0.1:8080/) All scripts are run with npm run [script], for example: npm run build.
build- generate a minified build to dist folderdev- start development server, try it by openinghttp://localhost:8080/
See what each script does by looking at the scripts section in package.json.