Wie erstelle ich einen kontinuierlichen Github-ähnlichen Kalender mit Cal-Heatmap?

Question

Ich habe gerade angefangen, cal-heatmap zu verwenden, um einen Github-ähnlichen Kalender zu erstellen (z. B. eine Heatmap für jeden Tag des Jahres in Blöcken). Im Idealfall möchte ich es so etwas wie so aussehen:

Leider mit meinen Einstellungen halte ich etwas mehr wie immer:

Wo das aktuelle Problem zwischen den Leerzeichen sind Monate, z Dazwischen liegen weiße Blöcke. Ich denke, das Problem wird einige Einstellungen Kombination mit der domain, die subdomain und möglicherweise die range und rowLimit sein; aber ich bin mir nicht 100% sicher, was diese Kombination sein sollte. Ich habe versucht, ein paar- hier meine aktuellen Einstellungen:

(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); 

Ich bin mir ziemlich sicher, dass es möglich ist; Ich denke, die Frage ist, ob es mit der Domain Monat/Jahr möglich ist und welche Einstellungen ich verwenden muss, um das zu erreichen.

Bearbeiten 27. Januar 2014: Nun, ich bin so nah wie es scheint, ich werde bekommen, nach @kamisama. Hier sind meine aktuellen Einstellungen:

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

Was Sie so etwas wie diese bekommt:

Es sind keine Monat Etiketten, und kein Tag der Woche Etiketten.

Answer 1

Wenn Sie ohne Cal-Heatmap arbeiten können und nur D3 direkt verwenden, gibt es eine nice example of a custom heatmap calendar here, direkt vom Hersteller von D3.

Es ist eher eine manuelle Lösung, aber auf der anderen Seite gibt es Ihnen die Freiheit, es genau so aussehen, wie Sie wollen.

Answer 2

Die beste Lösung, die ich gefunden habe, um das Github-Commit-Diagramm in Cal-Heatmap anzunähern, ist die Verwendung der Woche-Domäne anstelle von Monat.

Da dies zeigt normalerweise ein Etikett für jede Woche, entweder eingestellt domainLabelFormat auf eine leere Zeichenfolge (keine Etikett angezeigt) oder auf eine Funktion eingestellt, dass nur zeigt (zum Beispiel) ein Etikett für die ersten Woche in jedem Monat.

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. Wenn die Labels von ihrem übergeordneten Container abgeschnitten werden, setzen Sie CSS overflow: visible auf .graph-domain und überschreiben Sie deren Breite auf einen größeren Wert.

Für die Mon/Mi/Fr-Beschriftungen der y-Achse fügen Sie diese selbst links oder rechts vom Diagramm mit einem geeigneten Abstand hinzu, um sie an die Größe Ihrer Zellen anzupassen.

#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> 

Ich weiß nicht, ob dies die eleganteste Lösung für das Problem ist, aber ich hoffe, dass es jemanden helfen kann.