diaryReport

Формирование отчетов на 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]
          },

        ]
      }

    }

Описание других блоков будет дано в следующем задании.

.................................................................. ..................................................................

Примеры отчетов, которые можно будет сделать