habit tracker in Obsidian

const startOfWeek = moment().startOf("isoWeek").format("YYYY-MM-DD");

const endOfWeek = moment().endOf("isoWeek").format("YYYY-MM-DD");

// Enhanced color palette with harmonious colors

const colorPalette = [

"#9C27B0", // Deep Purple for early wake-up and sleep

"#4CAF50", // Green for meals and smoothie

"#2196F3", // Blue for university and gym

"#FF5722", // Deep Orange for studying/coding

];

// Habit definitions remain the same, but with updated color indices

const habits = [

{

name: "Levantarme temprano",

colorIndex: 0, // Deep Purple

filter: (task) => task.text.includes("Levantarme temprano"),

},

{

name: "Bañarme",

colorIndex: 2, // Green

filter: (task) => task.text.includes("Bañarme"),

},

{

name: "Desayunar",

colorIndex: 1, // Green

filter: (task) => task.text.includes("Desayunar"),

},

{

name: "Ir a la u",

colorIndex: 2, // Blue

filter: (task) => task.text.includes("Ir a la u"),

},

{

name: "Almorzar",

colorIndex: 1, // Green

filter: (task) => task.text.includes("Almorzar"),

},

{

name: "Estudiar/codear/hacer tareas",

colorIndex: 3, // Deep Orange

filter: (task) =>

task.text.includes("Estudiar") ||

task.text.includes("codear") ||

task.text.includes("hacer tareas"),

},

{

name: "Ir al gym",

colorIndex: 2, // Blue

filter: (task) => task.text.includes("Ir al gym"),

},

{

name: "Batido",

colorIndex: 1, // Green

filter: (task) => task.text.includes("Batido"),

},

{

name: "Dormir",

colorIndex: 0, // Deep Purple

filter: (task) => task.text.includes("Dormir"),

},

];

// Initialize weekData if not already defined

if (!weekData) {

var weekData = {

habits: []

};

}

// Filter completed tasks

for (const habit of habits) {

const entries = [];

for (let page of dv.pages('"ZZZ Journal"')

.where((p) => p.file.name >= startOfWeek && p.file.name <= endOfWeek)) {

const tasks = page.file.tasks.filter((t) => habit.filter(t) && t.checked);

entries.push({

date: page.file.name,

value: tasks.length > 0 // Simplified entry creation

});

}

weekData.habits.push({

name: habit.name,

color: colorPalette[habit.colorIndex],

entries: entries,

});

}

// Enhanced Habit Tracker Rendering Function

function renderHabitTracker(container, weekData) {

// Create main container with modern styling

const trackerContainer = dv.el("div");

trackerContainer.style.cssText = `

font-family: 'Arial', sans-serif;

background-color: #f4f4f4;

border-radius: 12px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

padding: 20px;

max-width: 900px;

margin: 0 auto;

`;

const table = dv.el("table");

table.style.cssText = `

width: 100%;

border-collapse: separate;

border-spacing: 0;

overflow: hidden;

`;

// Create header

const header = table.createTHead();

const headerRow = header.insertRow();

headerRow.style.backgroundColor = "#3f51b5";

headerRow.style.color = "white";

// Habit header cell

const habitHeaderCell = headerRow.insertCell();

habitHeaderCell.textContent = "Hábitos";

habitHeaderCell.style.cssText = `

padding: 12px;

text-align: left;

font-weight: bold;

border-right: 1px solid rgba(255,255,255,0.2);

`;

// Days of week

const daysOfWeek = [

"Lunes", "Martes", "Miércoles", "Jueves",

"Viernes", "Sábado", "Domingo"

];

// Create day header cells

daysOfWeek.forEach(day => {

const headerCell = headerRow.insertCell();

headerCell.textContent = day;

headerCell.style.cssText = `

padding: 12px;

text-align: center;

font-weight: bold;

border-left: 1px solid rgba(255,255,255,0.2);

`;

});

// Create table body

const body = table.createTBody();

// Render habit rows

weekData.habits.forEach(habit => {

const row = body.insertRow();

row.style.backgroundColor = "#ffffff";

// Habit name cell

const habitCell = row.insertCell();

habitCell.textContent = habit.name;

habitCell.style.cssText = `

padding: 12px;

font-weight: bold;

background-color: #f0f0f0;

border-right: 1px solid #e0e0e0;

`;

// Create cells for each day

for (let i = 0; i < 7; i++) {

const dayDate = moment(startOfWeek).add(i, "days").format("YYYY-MM-DD");

const entry = habit.entries.find((e) => e.date === dayDate);

const cell = row.insertCell();

cell.style.cssText = `

text-align: center;

padding: 12px;

border: 1px solid #e0e0e0;

transition: background-color 0.3s ease;

`;

if (entry && entry.value) {

// Completed task

cell.style.backgroundColor = habit.color;

cell.style.opacity = "0.7";

cell.innerHTML = "✓";

cell.style.color = "white";

cell.style.fontWeight = "bold";

} else {

// Incomplete or no task

cell.style.backgroundColor = "white";

}

}

});

// Append table to container

trackerContainer.appendChild(table);

container.appendChild(trackerContainer);

}

// Render the Habit Tracker

renderHabitTracker(this.container, weekData);