Формирование отчетов на canvas с помощью fabric.js (библиотека для работы с canvas http://fabricjs.com/).
##Релизовать функцию diaryReport Результат diaryReport(jsonObject) - это fabric объект, построенный по входящим данным.
Уже другой компонент может вывести отчет на странице или сохранить его на сервере ввиде png. Примеры отчетов можно посмотреть в самом внизу ТЗ.
##Описание входящих данных
Функции diaryReport(jsonObject) на вход будут приходить JSON следующего формата.
{
"items": [
{
"type": "type_of_item",
"data": {"Данные":1}
},
{"..."}
]
}
items - Массив блоков, из которых будет строится отчет. Каждый следующий блок располагается под предыдущим. Растояние между блоками 10 px. Ширина блоков определяется шириной контента.
items.type - Тип блока. Список типов блоков может расширяться. Функционал каждой типа блока реализовать в отдельном js файле.
items.data - Данные необходимые для отрисоки данного блока. Это может быть объект, строка, массив, число и т.п.
Размеры отсупов, шрифтов и т.п. выносить в переменные с кратким комментарием. Чтобы можно было легко откорректировать. Padding всего отчета 10px.
Итоговая сборка должна создать один минифицированный файл (umd).
Цвет текста для всез блоков: #1c1c1c Все глобальные переменные стилей вынести в отдельный файл (commonStyle). ..................................................................
###Тип блока - macronutrients
Данный блок служит для отображения диаграммы макронутриентов. Входящие данные аналогичны ранее сделанному компоненту. Описание здесь uimzr/components/FoodDiaryMacronutrients/Spec/FoodDiaryMacronutrientsSpec.jsx
width - ширина блока.
{
"type": "macronutrients",
"data": {
"header": "ПОСТУПЛЕНИЕ МАКРОНУТРИЕНТОВ",
"width": 500,
"nutrients": [
/*см. uimzr/components/FoodDiaryMacronutrients/Spec/FoodDiaryMacronutrientsSpec.jsx*/
{
"label": "Белки",
"value": "80 г",
"percent": "80%",
"tags": [
{ "percent": 80, "value": "90"}
],
"barColor": "#FECE76",
"barPercent": 80
},
{...}
]
}
}
..................................................................
###Тип блока - header
Данный блок служит для отображения заголовка отчета.
{
"type": "header",
"data": "Женский комплекс упражнений 'три в одном'"
}
Цвет: #00aeb9 Толщина лини: 2px
..................................................................
###Тип блока - subHeader
Заголовок 2 уровня.
{
"type": "subHeader",
"data": "Первая тренировка 11:00 - 12:00"
}
..................................................................
###Тип блока - text
Абзац с текстом. Текст должен переноситься.
maxWidth - Максимальная ширина абазаца.
{
"type": "text",
"data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. ...",
"maxWidth": 400
}
..................................................................
###Тип блока - blockList
Список в блоке.
title - Заголовок блока. rows - Список строк для отображения.
Цвет линий: #E6E6E6
{
"type": "blockList",
"data":
{
"title": "Итоги за день",
"rows":[
"Энергозатраты: 80 ккал",
"Количество повто......"
]
}
}
..................................................................
###Тип блока - diaryExercise
Упражнение в дневнике тренировок.
data.name - Наименование упражнения.
data.count - Количество колонок.
data.groups - Группировка колонок. Не обязательный параметр. Если не передано, то колонки не группируются. Группировка используется объединения ячеек первой строки. См. рисунок.
data.outcomeSport - Энергозатраты. Если не передано или равно 0, то не выводится.
data.rows - Строки описывающие упражнение.
data.rows[].title - Наименование первой колонки. Ширина колонки равна 210px
data.rows[].values - Значения для заполнения ячеек. Может быть так, что не для всех ячеек будут переданы значения. Т.е. они просто остануться пустыми.
data.rows[].values[].cell - Номер ячейки
data.rows[].values[].value - Значение подставляемое в ячейку. Ширина ячейки 50px
Цвет рамки: #E6E6E6 Красный цвет: #e74c3c Серый цвет текста: #616161
{
"type": "diaryExercise",
"data": {
"name": "Разгибание рук в наклоне",
"count": 10,
"groups": [
{"start": 1, "end": 3},
{"start": 4, "end": 6},
{"start": 7, "end": 8}
],
"outcomeSport": 25,
"rows": [
{
"title": "Количество повторений",
"values": [{"cell": 1, "value": "10"}, {"cell": 4, "value": "9"}]
},
{
"title": "Вес снаряда",
"values": [{"cell": 1, "value": "30"}, {"cell": 4, "value": "30"}]
}
]
}
}
Как в живую выглядят эти блоки можно поссмотреть в приложении здесь http://health-diet.ru/people/diary/v5/sportDiary/
..................................................................
###Тип блока - diarySuperSet
Суперсет в дневнике тренировок. Это объединение нескольких упражнений (тип блока diaryExercise) в один блок.
Свойства count, groups, outcomeSport - указываются для суперсета вцелом. Свойство exercise - имеет формат аналогичный diaryExercise, но не учитываются свойства count, groups, outcomeSport, т.к. они указаны для суперсета.
{
"type": "diarySuperSet",
"data": {
"title": "Суперсет",
"count": 10,
"groups": [
{"start": 1, "end": 3},
{"start": 4, "end": 6},
{"start": 7, "end": 8}
],
"outcomeSport": 25,
"exercise": [
{
"см. описание типа строки diaryExercise":1
}
]
}
}
Еще пример с группировкой
..................................................................
###Тип блока - sportProgramDay
Представление дня программы тренировок.
data.name - Наименование дня программы тренировок.
data.rows - Строки описывающие день программы тренировок.
data.rows[].title - Наименование упражнения
data.rows[].value - План программы
data.rows[].number - Номер строки. Если пустой, то выводить не нужно!
{
"type": "sportProgramDay",
"data": {
"name": "2. Вторая тренировка (руки)",
"rows": [
{
"title": "Скручивание на полу (ноги вверху)",
"value": "4x12-20",
"number": "1"
},
{
"title": "Становая тяга классическая",
"value": "4x8-12",
"number": ""
},
"..."
]
}
}
..................................................................
###Тип блока - diaryFood
Прием пищи в дневнике питания.
Ширина первой колнки 210px. Остальные 50px.
{
"type": "diaryFood",
"data": {
"title": "Завтрак",
"rows":[
{
"title": "Яблоко", "values": [51, 54, 0, 23, 0]
},
{
"title": "Груша в собственном соку", "values": [4, 55, 0, 64, 0]
},
{
"isTotal": true, "values": [50, 50, 50, 50, 50]
},
]
}
}
Описание других блоков будет дано в следующем задании.
.................................................................. ..................................................................