Категории

← View All Tools

Генератор Календаря Heatmap

Генерировать календари heatmap в стиле GitHub для визуализации паттернов активности во времени, идеально подходит для отслеживания годовых вкладов, привычек или метрик

Данные активности для календаря heatmap. Формат: дата|значение|метка (формат ГГГГ-ММ-ДД)

Заголовок, который будет отображаться над heatmap

Год для календаря (оставить пустым для текущего года)

Начальный цвет для пользовательской цветовой схемы (требует выбора пользовательских цветов)

Конечный цвет для пользовательской цветовой схемы (требует выбора пользовательских цветов)

Цвет для дней без активности

Цвет границы для ячеек

Размер каждой ячейки дня в пикселях (8-20)

Расстояние между ячейками в пикселях (1-5)

Длительность анимации в миллисекундах

Цвет фона для контейнера диаграммы

Отображать значения внутри ячеек (лучше работает с большими ячейками)

Отображать легенду интенсивности цвета

Отображать названия месяцев над календарем

Отображать метки дней недели

Отображать статистику активности под диаграммой

Включить подсказки при наведении на ячейки

Ключевые факты

Категория
Data Visualization
Типы входных данных
textarea, text, select, number, color, checkbox
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор Календаря Heatmap позволяет создавать наглядные визуализации активности в стиле GitHub, преобразуя временные ряды данных в понятные годовые графики для отслеживания привычек, продуктивности или любых других метрик.

Когда использовать

  • •Для визуализации годовой статистики активности, такой как количество тренировок или выполненных задач.
  • •Для анализа паттернов поведения и выявления периодов высокой или низкой продуктивности.
  • •Для создания наглядных отчетов о прогрессе в достижении долгосрочных целей.

Как это работает

  • •Введите данные активности в формате JSON или текстовом виде (дата|значение|метка).
  • •Настройте внешний вид диаграммы, выбрав цветовую схему, размер ячеек и дополнительные элементы оформления.
  • •Нажмите кнопку генерации, чтобы получить интерактивный календарь heatmap в формате HTML.

Сценарии использования

Отслеживание ежедневных привычек: визуализация дней, когда вы придерживались плана питания или тренировок.
Мониторинг продуктивности: анализ количества выполненных задач или написанного кода по дням в течение года.
Анализ бизнес-метрик: отображение объема продаж или количества обращений клиентов для выявления сезонных трендов.

Примеры

1. Трекер привычек чтения

Студент
Контекст
Студент хочет отслеживать количество прочитанных страниц в день в течение года.
Проблема
Сложно оценить прогресс и регулярность чтения по обычному списку дат.
Как использовать
Вставить данные в формате '2024-01-01|20|Страниц', выбрать зеленую цветовую схему и включить отображение статистики.
Пример конфигурации
colorScheme: green, showStats: true, showTooltip: true
Результат
Получен наглядный календарь, где интенсивность зеленого цвета показывает, в какие дни студент читал больше всего.

2. Визуализация активности проекта

Менеджер проекта
Контекст
Менеджер хочет показать команде интенсивность работы над задачами в Jira.
Проблема
Необходимо быстро продемонстрировать периоды высокой нагрузки для отчета.
Как использовать
Экспортировать данные из системы, отформатировать их и загрузить в генератор, выбрав синюю цветовую схему.
Пример конфигурации
colorScheme: blue, showMonthLabels: true, showLegend: true
Результат
Создан профессиональный график вкладов, который наглядно демонстрирует пики активности команды в течение года.

Проверить на примерах

data-visualization
Примеры Расширенного Применения Grafana
Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
keywords time,series,data
sample
Примеры Коммуникации WebRTC в Реальном Времени
Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации
keywords time,data
sample
Примеры Chart.js Library
Комплексные примеры Chart.js, включая типы графиков, параметры настройки, анимации и адаптивный дизайн
keywords graph,data,visualization
sample
Примеры ClickHouse
Колоночная база данных ClickHouse с примерами высокопроизводительной аналитики, обработки временных рядов и дашбордов в реальном времени
keywords time,series,data
sample

Связанные хабы

Инструменты Json для Convert
Изучите 100 инструментов json для сценариев convert и быстро сравните близкие утилиты.
Инструменты Image для Convert
Изучите 100 инструментов image для сценариев convert и быстро сравните близкие утилиты.
Инструменты Audio для Convert
Изучите 100 инструментов audio для сценариев convert и быстро сравните близкие утилиты.
Инструменты Design для Convert
Изучите 98 инструментов design для сценариев convert и быстро сравните близкие утилиты.

FAQ

В каком формате нужно вводить данные?

Вы можете использовать JSON-массив объектов с полями date, value и label или простой текстовый формат: ГГГГ-ММ-ДД|значение|метка.

Можно ли настроить цвета под свой стиль?

Да, выберите опцию 'Пользовательские цвета' в настройках и укажите свои значения для начального и конечного цветов градиента.

Поддерживает ли инструмент отображение данных за прошлые годы?

Да, вы можете указать нужный год в поле 'Год', чтобы сгенерировать календарь для конкретного периода.

Можно ли увидеть точное значение при наведении?

Да, включите опцию 'Показать подсказки', чтобы при наведении курсора на ячейку отображалась детальная информация о дне.

В каком формате я получу результат?

Инструмент генерирует готовый к использованию HTML-код с визуализацией, который можно встроить в веб-страницу или сохранить как файл.

Документация API

Конечная точка запроса

POST /ru/api/tools/calendar-heatmap

Параметры запроса

Имя параметра Тип Обязательно Описание
chartData textarea Да Данные активности для календаря heatmap. Формат: дата|значение|метка (формат ГГГГ-ММ-ДД)
chartTitle text Нет Заголовок, который будет отображаться над heatmap
colorScheme select Нет -
year number Нет Год для календаря (оставить пустым для текущего года)
startColor color Нет Начальный цвет для пользовательской цветовой схемы (требует выбора пользовательских цветов)
endColor color Нет Конечный цвет для пользовательской цветовой схемы (требует выбора пользовательских цветов)
emptyColor color Нет Цвет для дней без активности
borderColor color Нет Цвет границы для ячеек
cellSize number Нет Размер каждой ячейки дня в пикселях (8-20)
cellSpacing number Нет Расстояние между ячейками в пикселях (1-5)
animationDuration number Нет Длительность анимации в миллисекундах
backgroundColor color Нет Цвет фона для контейнера диаграммы
showValues checkbox Нет Отображать значения внутри ячеек (лучше работает с большими ячейками)
showLegend checkbox Нет Отображать легенду интенсивности цвета
showMonthLabels checkbox Нет Отображать названия месяцев над календарем
showDayLabels checkbox Нет Отображать метки дней недели
showStats checkbox Нет Отображать статистику активности под диаграммой
showTooltip checkbox Нет Включить подсказки при наведении на ячейки

Формат ответа

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-calendar-heatmap": {
      "name": "calendar-heatmap",
      "description": "Генерировать календари heatmap в стиле GitHub для визуализации паттернов активности во времени, идеально подходит для отслеживания годовых вкладов, привычек или метрик",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=calendar-heatmap",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]