working commit graph, needs tooltips

src/calendar.tsx

@@ -6,31 +6,35 @@ interface HeatmapProps {
     data: any[];
 }
 
+const MAX_COLORS = 5;
+const COLOR_FREQ = 6;
+
 class Heatmap extends React.Component<HeatmapProps> {
     render() {
         const customTooltipDataAttrs = (value: any) => ({
             'data-tip': value.date === null ? '' : value.status + ' on ' + value.date
         });
 
-        return <><ReactCalendarHeatmap
-            startDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
-            endDate={new Date()}
-            values={this.props.data}
-            horizontal={false}
-            showMonthLabels={false}
-            classForValue={(value) => {
-                if (!value) {
-                    return 'color-empty';
-                }
-                return `color-github-${value.count}`;
-            }}
-            tooltipDataAttrs={customTooltipDataAttrs}
-        />
+        return <div style={{ padding: "10px 10px 0px 10px", maxWidth: "300px", marginLeft: "auto", marginRight: "auto" }}>
+            <ReactCalendarHeatmap
+                startDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
+                endDate={new Date()}
+                values={this.props.data}
+                horizontal={false}
+                showMonthLabels={false}
+                classForValue={(value) => {
+                    if (!value || value.count == 0) {
+                        return 'color-empty';
+                    }
+                    return `color-github-${Math.min(MAX_COLORS, Math.floor(Math.log(value.count) / Math.log(COLOR_FREQ)))}`;
+                }}
+                tooltipDataAttrs={customTooltipDataAttrs}
+            />
             <ReactTooltip
                 type='warning'
                 effect='solid'
             />
-        </>
+        </div>
     }
 }
 

src/view.ts

@@ -11,6 +11,16 @@ export default class StatsTrackerView extends ItemView {
     constructor(leaf: WorkspaceLeaf, dayCounts: Record<string, number>) {
         super(leaf);
         this.dayCounts = dayCounts;
+
+        this.registerInterval(
+            window.setInterval(() => {
+                ReactDOM.render(React.createElement(Calendar, {
+                    data: Object.keys(this.dayCounts).map(day => {
+                        return { "date": new Date(new Date(day).setMonth(new Date(day).getMonth() + 1)), "count": this.dayCounts[day] }
+                    }),
+                }), (this as any).contentEl);
+            }, 1000)
+        );
     }
 
     getDisplayText() {
@@ -28,7 +38,7 @@ export default class StatsTrackerView extends ItemView {
     async onOpen() {
         ReactDOM.render(React.createElement(Calendar, {
             data: Object.keys(this.dayCounts).map(day => {
-                return { "date": day, "count": this.dayCounts[day] }
+                return { "date": new Date(new Date(day).setMonth(new Date(day).getMonth() + 1)), "count": this.dayCounts[day] }
             }),
         }), (this as any).contentEl);
     }

styles.css

@@ -8,7 +8,7 @@ react-calendar-heatmap-small-text {
 
 rect:hover {
     stroke: #555;
-    stroke-width: 1px;
+    stroke-width: 0.5px;
 }
 
 /*
@@ -24,7 +24,7 @@ rect:hover {
 }
 
 /*
-* Github color scale
+* Github color scale   
 */
 
 .color-github-0 {