feat: first-day-of-week

mariohamann · Mar 3, 2024 · 79ba47a · 79ba47a
1 parent 5472f1f
commit 79ba47a
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 48 deletions.
diff --git a/dist/activity-graph-wasm.js b/dist/activity-graph-wasm.js
diff --git a/index.html b/index.html
@@ -1,23 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Activity Graph (Web Component)</title>
-		<link rel="stylesheet" href="/style.css" />
-	</head>
-	<body class="activity-graph-auto">
-		<h1><code>&lt;activity-graph&gt;</code></h1>
-		<h2>Server Side Rendered</h2>
-		<activity-graph
-			range-start="2024-01-01"
-			range-end="2024-12-31"
-			activity-data="2024-01-01,2024-01-01,2024-01-04,2024-01-05"
-			activity-levels="0,1,2,4"
-			i18n='{"activities":"Aktivitäten","less":"Weniger","more":"Mehr"}'
-			lang="de"
-		></activity-graph>
-		<!-- client
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Activity Graph (Web Component)</title>
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body class="activity-graph-auto">
+  <h1><code>&lt;activity-graph&gt;</code></h1>
+  <h2>Server Side Rendered</h2>
+  <h3>First Day of Week</h3>
+  <activity-graph range-start="2024-01-01" range-end="2024-12-31"
+    activity-data="2024-01-01,2024-01-01,2024-01-04,2024-01-05" activity-levels="0,1,2,4" first-day-of-week="1">
+  </activity-graph>
+  <pre><code>&lt;activity-graph first-day-of-week="1"&gt;&lt;/activity-graph&gt;</code></pre>
+
+  <h3>i18n</h3>
+  <activity-graph range-start="2024-01-01" range-end="2024-12-31"
+    activity-data="2024-01-01,2024-01-01,2024-01-04,2024-01-05" activity-levels="0,1,2,4"
+    i18n='{"activities":"Aktivitäten","less":"Weniger","more":"Mehr"}' lang="de"></activity-graph>
+  <!-- client
 		<h2>Client Side Rendered</h2>
 		<activity-graph
 			range-start="2024-01-01"
@@ -28,25 +30,23 @@ <h2>Client Side Rendered</h2>
 			lang="de"
 		></activity-graph>
 		/client -->
-		<pre>
-      <code>
-&lt;activity-graph
-  range-start="2024-01-01"
-  range-end="2024-12-29"
-  activity-data="2024-01-01,2024-01-01,2024-01-04,2024-01-05"
-  activity-levels="0,1,2,4"
-  i18n='{"activities":"Aktivitäten","less":"Weniger","more":"Mehr"}'
-  lang="de"
-&gt;&lt;/activity-graph&gt;
-      </code>
-    </pre>
-		<div>
-			<a href="https://github.com/mariohamann/activity-graph"
-				>github.com</a
-			>
-			<span>•</span>
-			<a href="https://mariohamann.com">mariohamann.com</a>
-		</div>
-		<script type="module" src="/src/activity-graph.mjs"></script>
-	</body>
+  <pre>
+    <code>
+      &lt;activity-graph
+      range-start="2024-01-01"
+      range-end="2024-12-29"
+      activity-data="2024-01-01,2024-01-01,2024-01-04,2024-01-05"
+      activity-levels="0,1,2,4"
+      i18n='{"activities":"Aktivitäten","less":"Weniger","more":"Mehr"}'
+      lang="de"
+      &gt;&lt;/activity-graph&gt;
+    </code>
+  </pre>
+  <div>
+    <a href="https://github.com/mariohamann/activity-graph">github.com</a>
+    <span>•</span>
+    <a href="https://mariohamann.com">mariohamann.com</a>
+  </div>
+  <script type="module" src="/src/activity-graph.mjs"></script>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mariohamann/activity-graph",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "scripts": {
     "dev": "vite",
     "build": "node scripts/build.mjs",

diff --git a/src/activity-graph-element.mjs b/src/activity-graph-element.mjs
@@ -35,6 +35,7 @@ export default function ActivityGraphElement({
 	const rangeEnd = parseDateAttribute(attrs["range-end"]);
 	const activityData = parseActivityData(attrs["activity-data"]);
 	const activityLevels = parseActivityLevels(attrs["activity-levels"]);
+	const firstDayOfWeek = parseInt(attrs["first-day-of-week"] || "0", 10);
 	const lang = attrs.lang || "default";
 	const i18n = {
 		activities: "Activities",
@@ -73,21 +74,30 @@ export default function ActivityGraphElement({
 		const startDate = toUTCDate(rangeStart);
 		const endDate = toUTCDate(rangeEnd);
 
-		const adjustedStartDate = addDays(startDate, -startDate.getUTCDay());
-		const adjustedEndDate = addDays(endDate, 6 - endDate.getUTCDay());
+		// Calculate the day offset, considering the first day of the week
+		let dayOffset = startDate.getUTCDay() - firstDayOfWeek;
+		if (dayOffset < 0) dayOffset += 7; // Ensure positive offset
+
+		// Adjust the start date to align with the first day of the week
+		const adjustedStartDate = addDays(startDate, -dayOffset);
+
+		// Ensure the end date covers the last week where the end date falls
+		let endDayOffset = endDate.getUTCDay() - firstDayOfWeek;
+		if (endDayOffset < 0) endDayOffset += 7;
+		const adjustedEndDate = addDays(endDate, 6 - endDayOffset);
 
 		// Generate headers for weekdays
 		const weekDayHeaders = Array.from({ length: 7 }, (_, day) => {
-			const normalizedDay = Date.UTC(2021, 0, day + 3);
+			const normalizedDay = Date.UTC(2021, 0, day + 3 + firstDayOfWeek);
 			const longWeekDay = new Date(normalizedDay).toLocaleString(lang, {
 				weekday: "long",
 			});
 			const shortWeekDay = new Date(normalizedDay).toLocaleString(lang, {
 				weekday: "short",
 			});
 			return html`<th class="weekday">
-				<span class="sr-only">${longWeekDay}</span
-				><span aria-hidden="true">${shortWeekDay}</span>
+				<span class="sr-only">${longWeekDay}</span>
+				<span aria-hidden="true">${shortWeekDay}</span>
 			</th>`;
 		});
 

diff --git a/src/activity-graph-wasm.mjs b/src/activity-graph-wasm.mjs
@@ -150,7 +150,7 @@ dayjs.extend(localizedFormat);
 
 export default function ActivityGraphWasm({ ...rest }) {
 	const toLocaleStringPolyfill = (date, lang, options) => {
-		dayjs.locale(lang); // Set the locale for dayjs
+		dayjs.locale(lang === "default" ? "en" : lang); // Set the locale for dayjs
 
 		// Map the options to dayjs format tokens
 		const formatMap = {

diff --git a/src/activity-graph.mjs b/src/activity-graph.mjs
@@ -17,6 +17,7 @@ class ActivityGraph extends HTMLElement {
 			"activity-levels",
 			"lang",
 			"i18n",
+			"first-day-of-week",
 		].forEach((attr) => (attributes[attr] = this.getAttribute(attr)));
 
 		this.innerHTML = ActivityGraphElement({