chart

assets/js/constants.js

@@ -0,0 +1,66 @@
+const langColors = {
+    "C++": '#8DA9C4',
+    CSS: '#B39DDB',
+    TypeScript: '#90CAF9',
+    TSX: '#90CAF9',
+    JavaScript: '#FFF59D',
+    JSX: '#FFF59D',
+    Python: '#81A1C1',
+    Rust: '#EBC8A9',
+    HTML: '#F7A17A',
+    JSON: '#A8A8A8',
+    Java: '#F0B37E',
+    Kotlin: '#C8A2F0',
+    C: '#AAAAAA',
+    unknown: '#888888'
+};
+
+const editorColors = {
+    vscodium: '#6C9EFF',
+    neovim: '#A0C4FF',
+    intellijidea: '#C3AED6',
+    notepad: '#B7D7E8',
+    visualstudio: '#5C9BD1',
+    androidstudio: '#A5D6A7'
+};
+
+const osColors = {
+    windows: '#A0C4FF',
+    "windows-shitc": "#A0C4FF",
+    arch: '#89CFF0',
+    macos: '#C0C0C0',
+    linux: '#B0D8A6',
+    ubuntu: '#F4A261',
+    fedora: '#90CAF9',
+    debian: '#D8BFD8'
+};
+
+const projectColors = [
+    '#A8DADC',
+    '#FFD6A5',
+    '#FFAAA7',
+    '#CDB4DB',
+    '#B5EAEA',
+    '#FFE066',
+    '#6BCB77',
+    '#FF9F1C',
+    '#83C5BE',
+    '#EF476F',
+    '#F7CAC9',
+    '#FDEBD0',
+    '#D0F4DE',
+    '#E4C1F9',
+    '#FFF1B6',
+    '#A0CED9',
+    '#B8D8BA',
+    '#FFBCBC',
+    '#E2F0CB',
+    '#F5E6E8',
+    '#C9D6DF'
+];
+
+const categoryColors = {
+    coding: '#A8DADC',
+    building: '#F4A261',
+    debugging: '#E9C46A'
+}

assets/js/index.js

@@ -23,7 +23,6 @@ setInterval(() => {
 
 const ageElem = document.getElementById('age');
 let birthday = new Date('2008-12-13');
-let age = 0;
 
 function updateAge(elem, fix, text) {
     const now = new Date();
@@ -112,7 +111,7 @@ function lan() {
     });
 }
 
-window.onload = (event) => {
+window.onload = () => {
     lan();
 };
 
@@ -241,7 +240,7 @@ function fetchWeather(location) {
     });
 }
 
-wakatime.fetchWakatime("#wakapi", "zyqunix", "all_time");
+wakatime.fetchWakatime("#wakapi");
 
 const messages = [
     "Coding",

assets/js/wakatime.js

@@ -63,12 +63,69 @@ const categoryColors = {
     coding: '#A8DADC',
     building: '#F4A261',
     debugging: '#E9C46A'
+};
+
+export async function fetchWakaTimeStats(user, range) {
+	const response = await fetch(`https://wakapi.atums.world/api/v1/users/${user}/stats/${range}`);
+	if (!response.ok) throw new Error(`Error fetching WakaTime stats: ${response.statusText}`);
+	return await response.json();
 }
 
-export function fetchWakatime(targetId, user, range) {
+export async function prepareChartData() {
+  const languages = await fetchWakaTimeStats("zyqunix", "all_time");
+  const sortedLanguages = [...languages.data.languages].sort((a, b) => b.percent - a.percent);
+
+  const totalSeconds = sortedLanguages.reduce((total, lang) => total + lang.total_seconds, 0);
+  let totalTime = '';
+
+  if (totalSeconds > 3600) {
+    totalTime = `${Math.floor(totalSeconds / 3600)}h ${Math.floor((totalSeconds % 3600) / 60)}m`;
+  } else {
+    totalTime = `${Math.floor(totalSeconds / 60)}m`;
+  }
+
+  const limit = 10;
+  const topLanguages = sortedLanguages.slice(0, limit);
+
+  if (sortedLanguages.length > limit) {
+    const otherSeconds = sortedLanguages.slice(limit).reduce((total, lang) => total + lang.total_seconds, 0);
+    const otherPercent = sortedLanguages.slice(limit).reduce((total, lang) => total + lang.percent, 0);
+
+    let otherText = '';
+    if (otherSeconds > 3600) {
+      otherText = `${Math.floor(otherSeconds / 3600)}h ${Math.floor((otherSeconds % 3600) / 60)}m`;
+    } else {
+      otherText = `${Math.floor(otherSeconds / 60)}m`;
+    }
+
+    topLanguages.push({
+      name: 'Other',
+      total_seconds: otherSeconds,
+      percent: otherPercent,
+      text: otherText,
+      color: '#CCCCCC',
+      digital: '',
+      hours: Math.floor(otherSeconds / 3600),
+      minutes: Math.floor((otherSeconds % 3600) / 60),
+      seconds: otherSeconds % 60
+    });
+  }
+
+  const segmentsWithColors = topLanguages.map(lang => ({
+    ...lang,
+    color: lang.color || langColors[lang.name] || '#CCCCCC'
+  }));
+
+  return {
+    segments: segmentsWithColors,
+    totalTime
+  };
+}
+
+export async function fetchWakatime(targetId) {
+	const data = await fetchWakaTimeStats("zyqunix", "all_time");
     const target = document.querySelector(`${targetId}`);
     target.innerHTML = "";
-    fetch(`https://wakapi.atums.world/api/v1/users/${user}/stats/${range}`).then(response => response.json()).then(data => {
 
 	const langDetails = document.createElement("details");
 	const langSummary = document.createElement("summary");
@@ -181,7 +238,7 @@ export function fetchWakatime(targetId, user, range) {
 	const miscSummary = document.createElement("summary");
 	miscSummary.innerText = "Miscellaneous";
 	miscSummary.classList.add("tooltip");
-        miscSummary.setAttribute("data-tooltip", "Miscellaneous Coding Info");
+	miscSummary.setAttribute("data-tooltip", "Miscellaneous Wakatime Info");
 	miscDetails.appendChild(miscSummary);
 	miscDetails.style.marginTop = "15px";
 	target.appendChild(miscDetails);
@@ -197,7 +254,86 @@ export function fetchWakatime(targetId, user, range) {
 	miscDetails.appendChild(el);
 
 	document.getElementById("stats_since").innerText = `Registered on ${data.data.start}`;
-    }).catch(() => {
+
-        target.innerHTML = `<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=${user}&theme=transparent&hide_border=true&layout=compact">`;
+	const chartDetails = document.createElement("details");
+	const chartSummary = document.createElement("summary");
+	chartSummary.innerText = "Chart";
+	chartSummary.classList.add("tooltip");
+	chartSummary.setAttribute("data-tooltip", "Miscellaneous Coding Info");
+	chartDetails.appendChild(chartSummary);
+	chartDetails.style.marginTop = "15px";
+	target.appendChild(chartDetails);
+
+	const chartData = await prepareChartData();
+
+	
+	const svgNS = "http://www.w3.org/2000/svg";
+	const radius = 50;
+	const center = 60;
+	const strokeWidth = 20;
+	const circumference = 2 * Math.PI * radius;
+
+	const container = document.createElement("div");
+
+	const legend = document.createElement("div");
+	legend.style.display = 'flex';
+	legend.style.flexDirection = 'column';
+	legend.style.gap = '8px';
+	legend.id = 'legend';
+
+	chartData.segments.forEach(segment => {
+		const label = document.createElement('div');
+		label.style.display = 'flex';
+		label.style.alignItems = 'center';
+		label.style.gap = '8px';
+		
+		const colorBox = document.createElement('span');
+		colorBox.style.width = '10px';
+		colorBox.style.height = '10px';
+		colorBox.style.backgroundColor = segment.color;
+		colorBox.style.borderRadius = '3px';
+		
+		const text = document.createElement('span');
+		text.innerText = `${segment.name} (${segment.text})`;
+		
+		label.appendChild(colorBox);
+		label.appendChild(text);
+		legend.appendChild(label);
 	});
+
+	const chart = document.createElementNS(svgNS, "svg");
+	chart.setAttribute("viewBox", "0 0 120 120");
+	chart.style.width = "120px";
+	chart.style.height = "120px";
+
+	let cumulativePercent = 0;
+
+	chartData.segments.forEach(segment => {
+		const circle = document.createElementNS(svgNS, "circle");
+		circle.setAttribute("cx", center);
+		circle.setAttribute("cy", center);
+		circle.setAttribute("r", radius);
+		circle.setAttribute("fill", "none");
+		circle.setAttribute("stroke", segment.color);
+		circle.setAttribute("stroke-width", strokeWidth);
+		circle.setAttribute("transform", `rotate(-90 ${center} ${center})`);
+
+		const segmentLength = (segment.percent / 100) * circumference;
+		const emptyLength = circumference - segmentLength;
+
+		circle.setAttribute("stroke-dasharray", `${segmentLength} ${emptyLength}`);
+		circle.setAttribute("stroke-dashoffset", circumference * (1 - cumulativePercent / 100));
+
+		cumulativePercent += segment.percent;
+
+		chart.appendChild(circle);
+	});
+
+	container.appendChild(legend);
+	container.appendChild(chart);
+
+	chartDetails.appendChild(container);
+
 }
+
+console.log(await fetchWakaTimeStats("zyqunix", "all_time"));