Skip to content

Latest commit

 

History

History

table-aggregation

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Агрегация данных для таблиц

Есть набор из трех компонентов, которые выводят табличные данные:

  • с группировкой по месяцам за текущий год,
  • с группировкой по годам
  • с сортировкой по убыванию.

К сожалению, эти компоненты работают только с подготовленными данными, а 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}, ...]

Локально с использованием git

Компоненты таблиц ./js/MonthTable.js, ./js/YearTable.js и ./js/SimpleColumnChart.js Созданные компоненты нужно использовать в компоненте ./js/App.js.

В песочнице CodePen

Создайте компонент во вкладке JS(Babel). Перед началом работы сделайте форк этого пена:

https://codepen.io/Netology/pen/RQzNdY