Есть набор из трех компонентов, которые выводят табличные данные:
- с группировкой по месяцам за текущий год,
- с группировкой по годам
- с сортировкой по убыванию.
К сожалению, эти компоненты работают только с подготовленными данными, а API сервера статистики возвращает нам «сырые» данные (неотсортированные и несгруппированные).
Данные запрашиваются один раз (https://api.myjson.com/bins/l2s9l) – после загрузки страницы.
{
"list": [
{"date": "2018-01-13", "amount": 10},
{"date": "2018-02-13", "amount": 9},
{"date": "2018-01-09", "amount": 5},
{"date": "2017-12-14", "amount": 14},
{"date": "2018-03-01", "amount": 13},
//...
]
}
Обернуть компоненты таблиц в HOC, который бы производил над данными операции, приводящие их к нужному виду. Так же данные, которые группируются по дате, должны быть отсортированы по ней.
Компонент MonthTable
ожидает данные в свойство list
в следующем формате
[{month: "Jan", amount: 100}, ...]
Компонент YearTable
ожидает данные в свойство list
в следующем формате
[{year: 2018, amount: 100}, ...]
Компонент SortTable
ожидает данные в свойство list
в следующем формате
[{date: "2017-12-14", amount: 14}, ...]
Компоненты таблиц ./js/MonthTable.js
, ./js/YearTable.js
и ./js/SimpleColumnChart.js
Созданные компоненты нужно использовать в компоненте ./js/App.js
.
Создайте компонент во вкладке JS(Babel). Перед началом работы сделайте форк этого пена: