Подтвердить что ты не робот

Как создать непрерывный календарь, подобный Github, с помощью Cal-Heatmap?

Я только начал использовать cal-heatmap для создания Github-подобного календаря (например, карты тепла за каждый день года в блоки). В идеале мне хотелось бы выглядеть примерно так:

Goal Heatmap

К сожалению, с моими настройками я получаю нечто большее:

Current Ugliness

Если текущая проблема представляет собой пробел между месяцами, например. между ними есть белые блоки. Я думаю, что проблема будет заключаться в комбинации настроек с domain, subdomain и, возможно, range и rowLimit; но я не уверен на 100%, какова должна быть эта комбинация. Я пробовал несколько - вот мои текущие настройки:

    (function($) {
        $(document).ready(function() {

            var cal = new CalHeatMap();
            cal.init({
                start: new Date(2013, 0), // January 1, 2013
                maxDate: new Date(),
                range: 12,
                rowLimit: 7,
                domain: "month",
                subDomain: "day",
                data: "/api/users/1/annotations/",
                cellSize: 12
            });

        });
    })(jQuery);

Я уверен, что это возможно; Я думаю, вопрос в том, возможно ли это с доменом month/year и какие настройки мне нужно использовать для его достижения.

Редактировать 27 января 2014 года: Ну, я подошел так близко, как кажется, я собираюсь получить, согласно @kamisama. Вот мои текущие настройки:

    cal.init({
        start: oneYearAgo(),
        maxDate: new Date(),
        range: 1,
        rowLimit: 7,
        domain: "year",
        subDomain: "day",
        data: "/api/users/1/annotations/",
        cellSize: 10.5
    });

Который получает вам что-то вроде этого:

Not great, but good enough I guess

Нет ярлыков месяца и ни одного ярлыка недели недели.

4b9b3361

Ответ 2

Лучшим решением, которое я нашел, чтобы приблизиться к графу Github commit в cal-heatmap, является использование домена Week вместо месяца.

введите описание изображения здесь

Так как это обычно показывает метку на каждую неделю, либо установите domainLabelFormat на пустую строку (без ярлыков), либо установите это функция, которая показывает только (например) метку для первой недели в каждом месяце.

var currentMonth = settings.start;
settings.domainLabelFormat = function (date) { //x-axis labels
            var md = moment(date);
            //only show the label for the first domain of the month
            if (md.month() == currentMonth)
                return "";

            //reset the current month
            currentMonth = md.month();
            //return the label
            return md.format("MMM");
        };

Nb. если метки обрезаются их родительским контейнером, установите CSS overflow: visible на .graph-domain и переопределите его ширину на большее значение.

Для ярлыков Mon/Wed/Fri оси y просто добавьте их непосредственно влево или вправо от графика с соответствующим интервалом, чтобы выровнять его с размером ваших ячеек.

#cal-heatmap-yaxislabels {
    float: left;
}
#cal-heatmap-yaxislabels > * {
    margin-top: 16px;
    display: block;
}

<div id="cal-heatmap-yaxislabels">
     <div class="graph-label">Mon</div>
     <div class="graph-label">Wed</div>
     <div class="graph-label">Fri</div>
</div>

Я не знаю, является ли это самым элегантным решением проблемы, но я надеюсь, что это может помочь кому-то.