Bugfix to get rid of unneccessary empty dates at start of range

manifest.json

@@ -1,11 +1,11 @@
 {
 	"id": "contribution-graph",
 	"name": "Contribution Graph",
-	"version": "0.10.0",
-	"minAppVersion": "1.3.0",
+	"version": "0.10.1",
+	"minAppVersion": "1.3.1",
 	"description": "Generate a interactive heatmap graph to visualize and track your productivity",
 	"author": "vran",
 	"authorUrl": "https://github.com/vran-dev",
 	"isDesktopOnly": false,
 	"fundingUrl": "https://www.buymeacoffee.com/vran"
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-contribution-graph",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "generate gitxxx style contribution graph for obsidian, use it to track your goals, habits, or anything else you want to track.",
 	"main": "main.ts",
 	"scripts": {
@@ -26,6 +26,7 @@
 		"typescript": "4.7.4"
 	},
 	"dependencies": {
+		"@babel/runtime": "^7.26.10",
 		"@floating-ui/react": "^0.26.4",
 		"@uiw/react-color": "^2.0.6",
 		"luxon": "^3.4.4",

src/render/gitStyleTrackGraphRender.ts

@@ -17,10 +17,10 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 	}
 
 	render(root: HTMLElement, graphConfig: ContributionGraphConfig): void {
-		const graphEl = this.createGraphEl(root)
+		const graphEl = this.createGraphEl(root);
 
 		// main
-		const main = this.createMainEl(graphEl, graphConfig)
+		const main = this.createMainEl(graphEl, graphConfig);
 
 		// title
 		if (graphConfig.title && graphConfig.title.trim() != "") {
@@ -34,8 +34,8 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 		});
 
 		this.renderCellRuleIndicator(graphConfig, main);
-		const activityContainer= this.renderActivityContainer(graphConfig, main);
-		
+		const activityContainer = this.renderActivityContainer(graphConfig, main);
+
 		// main ->  week day indicator(text cell)
 		const weekTextColumns = createDiv({
 			cls: "column",
@@ -48,11 +48,11 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 
 		// fill HOLE cell at the left most column if start date is not ${startOfWeek}
 		if (contributionData.length > 0) {
-			const from = new Date(contributionData[0].date);
-			const weekDayOfFromDate = from.getDay();
+			const from = contributionData[0];
+			const weekDayOfFromDate = from.weekDay;
 			const firstHoleCount = distanceBeforeTheStartOfWeek(
 				graphConfig.startOfWeek || 0,
-				weekDayOfFromDate
+				weekDayOfFromDate,
 			);
 			for (let i = 0; i < firstHoleCount; i++) {
 				contributionData.unshift({
@@ -70,7 +70,7 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 			contributionData,
 			(item) => `${item.year}-${item.month + 1}`,
 			(item) => item.value,
-			(a, b) => a + b
+			(a, b) => a + b,
 		);
 
 		// main -> charts contributionData
@@ -93,13 +93,11 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 					parent: columnEl,
 					text: "",
 				});
-				monthCell.innerText = localizedMonthMapping(
-					contributionItem.month
-				);
+				monthCell.innerText = localizedMonthMapping(contributionItem.month);
 				this.bindMonthTips(
 					monthCell,
 					contributionItem,
-					contributionMapByYearMonth
+					contributionMapByYearMonth,
 				);
 			}
 
@@ -115,20 +113,36 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 					this.bindCellAttribute(cellEl, contributionItem);
 				} else {
 					cellEl.className = "cell";
-					this.applyCellGlobalStylePartial(cellEl, graphConfig, ['minWidth', 'minHeight']);
+					this.applyCellGlobalStylePartial(cellEl, graphConfig, [
+						"minWidth",
+						"minHeight",
+					]);
 				}
 			} else {
 				cellEl.className = "cell";
 				this.applyCellGlobalStyle(cellEl, graphConfig);
-				this.applyCellStyleRule(cellEl, contributionItem, cellRules, () => cellRules[0]);
+				this.applyCellStyleRule(
+					cellEl,
+					contributionItem,
+					cellRules,
+					() => cellRules[0],
+				);
 				this.bindCellAttribute(cellEl, contributionItem);
-				this.bindCellClickEvent(cellEl, contributionItem, graphConfig, activityContainer);
+				this.bindCellClickEvent(
+					cellEl,
+					contributionItem,
+					graphConfig,
+					activityContainer,
+				);
 				this.bindCellTips(cellEl, contributionItem);
 			}
 		}
 	}
 
-	renderWeekIndicator(weekdayContainer: HTMLDivElement,graphConfig: ContributionGraphConfig) {
+	renderWeekIndicator(
+		weekdayContainer: HTMLDivElement,
+		graphConfig: ContributionGraphConfig,
+	) {
 		const startOfWeek = graphConfig.startOfWeek || 0;
 		for (let i = 0; i < 7; i++) {
 			const weekdayCell = document.createElement("div");
@@ -139,7 +153,7 @@ export class GitStyleTrackGraphRender extends BaseGraphRender {
 				case 3:
 				case 5:
 					weekdayCell.innerText = localizedWeekDayMapping(
-						(i + startOfWeek || 0) % 7
+						(i + startOfWeek || 0) % 7,
 					);
 					break;
 				default:

src/render/graphRender.ts

@@ -21,7 +21,7 @@ export interface GraphRender {
 }
 
 export abstract class BaseGraphRender implements GraphRender {
-	constructor() { }
+	constructor() {}
 
 	render(container: HTMLElement, graphConfig: ContributionGraphConfig): void {
 		throw new Error("Method not implemented.");
@@ -38,7 +38,7 @@ export abstract class BaseGraphRender implements GraphRender {
 
 	createMainEl(
 		parent: HTMLElement,
-		graphConfig: ContributionGraphConfig
+		graphConfig: ContributionGraphConfig,
 	): HTMLDivElement {
 		let cls = "main";
 		if (graphConfig.fillTheScreen && this.graphType() != "calendar") {
@@ -61,7 +61,7 @@ export abstract class BaseGraphRender implements GraphRender {
 
 	renderTitle(
 		graphConfig: ContributionGraphConfig,
-		parent: HTMLElement
+		parent: HTMLElement,
 	): HTMLElement {
 		const titleEl = document.createElement("div");
 		titleEl.className = "title";
@@ -77,7 +77,7 @@ export abstract class BaseGraphRender implements GraphRender {
 
 	renderCellRuleIndicator(
 		graphConfig: ContributionGraphConfig,
-		parent: HTMLElement
+		parent: HTMLElement,
 	) {
 		if (graphConfig.showCellRuleIndicators === false) {
 			return;
@@ -117,7 +117,7 @@ export abstract class BaseGraphRender implements GraphRender {
 
 	renderActivityContainer(
 		graphConfig: ContributionGraphConfig,
-		parent: HTMLElement
+		parent: HTMLElement,
 	): HTMLElement {
 		const activityContainer = createDiv({
 			cls: "activity-container",
@@ -129,7 +129,7 @@ export abstract class BaseGraphRender implements GraphRender {
 	renderActivity(
 		graphConfig: ContributionGraphConfig,
 		cellData: ContributionCellData,
-		contaienr: HTMLElement
+		contaienr: HTMLElement,
 	) {
 		contaienr.empty();
 
@@ -194,10 +194,7 @@ export abstract class BaseGraphRender implements GraphRender {
 			loadMore.onclick = (event) => {
 				event.preventDefault();
 				page++;
-				renderActivityItem(
-					items.slice((page - 1) * size, page * size),
-					list
-				);
+				renderActivityItem(items.slice((page - 1) * size, page * size), list);
 				if (page * size >= items.length) {
 					loadMore.remove();
 				}
@@ -218,27 +215,25 @@ export abstract class BaseGraphRender implements GraphRender {
 	}
 
 	getCellRules(graphConfig: ContributionGraphConfig) {
-		return graphConfig.cellStyleRules &&
-			graphConfig.cellStyleRules.length > 0
+		return graphConfig.cellStyleRules && graphConfig.cellStyleRules.length > 0
 			? graphConfig.cellStyleRules
 			: DEFAULT_RULES;
 	}
 
 	bindMonthTips(
 		monthCell: HTMLElement,
 		contributionItem: ContributionCellData,
-		contributionMapByYearMonth: Map<string, number>
+		contributionMapByYearMonth: Map<string, number>,
 	) {
-		const yearMonth = `${contributionItem.year}-${contributionItem.month + 1
-			}`;
+		const yearMonth = `${contributionItem.year}-${contributionItem.month + 1}`;
 		const yearMonthValue = contributionMapByYearMonth.get(yearMonth) || 0;
 		// tips event
 		monthCell.ariaLabel = `${yearMonthValue} contributions on ${yearMonth}.`;
 	}
 
 	applyCellGlobalStyle(
 		cellEl: HTMLElement,
-		graphConfig: ContributionGraphConfig
+		graphConfig: ContributionGraphConfig,
 	) {
 		if (graphConfig.cellStyle) {
 			Object.assign(cellEl.style, graphConfig.cellStyle);
@@ -248,7 +243,7 @@ export abstract class BaseGraphRender implements GraphRender {
 	applyCellGlobalStylePartial(
 		cellEl: HTMLElement,
 		graphConfig: ContributionGraphConfig,
-		props: string[]
+		props: string[],
 	) {
 		if (graphConfig.cellStyle) {
 			const partialStyle = props.reduce((acc, cur) => {
@@ -264,12 +259,9 @@ export abstract class BaseGraphRender implements GraphRender {
 		cellEl: HTMLElement,
 		contributionItem: ContributionCellData,
 		cellRules: CellStyleRule[],
-		defaultCellStyleRule?: () => CellStyleRule
+		defaultCellStyleRule?: () => CellStyleRule,
 	) {
-		const cellStyleRule = matchCellStyleRule(
-			contributionItem.value,
-			cellRules
-		);
+		const cellStyleRule = matchCellStyleRule(contributionItem.value, cellRules);
 		if (cellStyleRule != null) {
 			cellEl.style.backgroundColor = cellStyleRule.color;
 			cellEl.innerText = cellStyleRule.text || "";
@@ -285,7 +277,7 @@ export abstract class BaseGraphRender implements GraphRender {
 
 	bindCellAttribute(
 		cellEl: HTMLElement,
-		contributionItem: ContributionCellData
+		contributionItem: ContributionCellData,
 	) {
 		cellEl.setAttribute("data-year", contributionItem.year.toString());
 		cellEl.setAttribute("data-month", contributionItem.month.toString());
@@ -296,19 +288,15 @@ export abstract class BaseGraphRender implements GraphRender {
 		cellEl: HTMLElement,
 		contributionItem: ContributionCellData,
 		graphConfig: ContributionGraphConfig,
-		activityContainer?: HTMLElement
+		activityContainer?: HTMLElement,
 	) {
 		cellEl.onclick = (event: MouseEvent) => {
 			if (graphConfig.onCellClick) {
 				graphConfig.onCellClick(contributionItem, event);
 			}
 
 			if (activityContainer) {
-				this.renderActivity(
-					graphConfig,
-					contributionItem,
-					activityContainer
-				);
+				this.renderActivity(graphConfig, contributionItem, activityContainer);
 			}
 		};
 	}