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

Question

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

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

Если текущая проблема является пробел между месяцев, например между ними есть белые блоки. Я думаю, что проблема будет связана с настройкой комбинации с 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); 

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

Редактировать 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 
    }); 

Что получает вас что-то вроде этого:

Там нет месяца этикетки, и не дня недели этикеток.

Answer 1

Если вы можете работать без кала-тепловой карты и просто использовать D3 непосредственно, есть nice example of a custom heatmap calendar here, справа от создателя D3.

Это больше ручного решения, но с другой стороны, это дает вам свободу, чтобы она выглядела именно так, как вы хотите.

Answer 2

Лучшее решение, которое я нашел, чтобы приблизиться к графу фиксации Github в 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 и переопределите его ширину до большего значения.

Для ярлыков с понедельника понедельника/ср/пт по оси 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> 

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