// Dictionary to store Cal-HeatMap instances indexed by word const calHeatMapInstances = {}; function initializeDailyCalendar(selector, options) { var cal2 = new CalHeatMap(); var datethen = new Date(); datethen.setDate(datethen.getDate() - (7 * 23)); // These two following calls are identicals // cal2.paint({ itemSelector: '#habit-cal' }); cal2.init({ itemSelector: selector, //data: "http://localhost:8080/index.php?action=main_cal", data: mainurl, id: "graph", dataType: "json", //afterLoadData: parser, start: datethen, domain : "week", // Group data by month subDomain : "day", // Split each month by days cellSize: 15, cellPadding: 2, cellRadius: 3, domainGutter:2, subDomainTitleFormat: { empty: "{date}", filled: "{date}" }, //itemSelector: "#cal-heatmap", range : 24, // Just display 10 months //legend: [2,3,4,5,6,7,8,9], // Custom threshold for the scale tooltip: false, displayLegend: false, weekStartOnMonday: true, considerMissingDataAsZero: true, legendHorizontalPosition: "center", subDomainTextFormat: '', // %d = day no in box text ...options, // Merge custom options }); return cal2; } function initializeWeeklyCalendar(selector, options) { var cal2 = new CalHeatMap(); var datethen = new Date(); datethen.setMonth(datethen.getMonth() - 23); // These two following calls are identicals // cal2.paint({ itemSelector: '#habit-cal' }); cal2.init({ itemSelector: selector, //data: "http://localhost:8080/index.php?action=main_cal", data: mainurl, dataType: "json", //afterLoadData: parser, start: datethen, id : "graph", domain : "month", // Group data by month subDomain : "x_week", // Split each month by days cellSize: 15, cellPadding: 2, cellRadius: 3, domainGutter:2, subDomainTitleFormat: { empty: "{date}", filled: "{count} - {date}" }, //itemSelector: "#cal-heatmap", range : 24, // Just display 10 months legend: [1,2], // Custom threshold for the scale tooltip: false, displayLegend: false, weekStartOnMonday: true, considerMissingDataAsZero: true, legendHorizontalPosition: "center", legendColors: { min: "#6b6de5", max: "#46e260", }, subDomainTextFormat: '', domainLabelFormat: "%m-%Y", ...options, // Merge custom options }); } function update_weekly_cal(word, multiplier) { // Construct the URL const url = `/index.php?action=habit_cal_weekly&habit=${word}`; // Fetch data from the URL fetch(url) .then(response => response.json()) .then(data => { // Iterate through key-value pairs in the received JSON for (const [key, value] of Object.entries(data)) { // Get the corresponding div element by ID within the habit-cal container const containerElement = document.getElementById(`habit-cal-${word}`); const divElement = containerElement.querySelector(`[id="${key}"]`); // Check if the value is greater than or equal to the multiplier if (value >= multiplier) { // Set the class to "green" for the div element divElement.classList.add("green"); } else { // Set the class to "neut" for the div element divElement.classList.add("neut"); divElement.textContent = value; } } }) .catch(error => console.error('Error fetching data:', error)); } function updateHabit(word) { // Fetch data from the server fetch('/index.php?action=habit_update&habit=' + encodeURIComponent(word)) .then(response => response.json()) .then(data => { // Update HTML content based on fetched data updateHTML(word, data); }) .catch(error => { console.error('Error fetching habit data:', error); }); } function updateHTML(word, data) { // Update HTML content based on fetched data var habitContainer = document.getElementById(word); if (habitContainer) { // Update button class and text const logButton = habitContainer.querySelector('.habit-log-button'); if (logButton) { logButton.className = 'habit-log-button ' + data.buttonClass; logButton.innerText = data.buttonText; } // Update align class const habitTitle = habitContainer.querySelector('.habit-title'); if (habitTitle) { habitTitle.className = data.align + ' habit-title'; } // Update other content as needed const scoreValue1 = habitContainer.querySelector('.habit-score .result1'); if (scoreValue1) { scoreValue1.innerText = data.result1; } const scoreValue2 = habitContainer.querySelector('.habit-score .result2'); if (scoreValue2) { scoreValue2.innerText = data.result2; } const scoreValue3 = habitContainer.querySelector('.habit-score .result3'); if (scoreValue3) { scoreValue3.innerText = data.result3; } if(data.freq == "d"){ // Destroy existing Cal-HeatMap instance destroyCalHeatMap(word); // Reinitialize Cal-HeatMap with updated data calHeatMapInstances[word] = initializeDailyCalendar('#habit-cal-'+word, { data: "/index.php?action=habit_cal_daily&habit="+word, id: word, legendColors: { min: data.calCol, max: data.calCol, }, }); } if(data.freq == "w"){ // Get the current date const currentDate = new Date(); // Calculate year, month, and week number for today const year = currentDate.getFullYear(); const month = currentDate.getMonth() + 1; // Months are zero-indexed const weekNo = getWeekNumber(currentDate); // Build the "year-month-weekno" string const yearMonthWeekNoString = `${year}-${padNumber(month)}-${padNumber(weekNo)}`; // Construct the ID of the parent div const parentDivId = "habit-cal-" + word; // Replace "your_word_here" with the actual word // Get the parent div element const parentDiv = document.getElementById(parentDivId); // Check if the parent div exists if (parentDiv) { //console.log('Parent div found:', parentDiv); // Find the "year-month-weekno" element within the parent div const element = parentDiv.querySelector(`[id='${yearMonthWeekNoString}']`); // Check if the element exists if (element && parentDiv.contains(element)) { //console.log('Element found:', element); // Remove the classes "neut" and "green" element.classList.remove("neut", "green"); // Set the text content to the value of data.buttonText element.textContent = data.buttonText; if( data.weekSoFar > 0 ){ if (data.weekSoFar < data.weekGoal) { element.classList.add("neut"); element.textContent = data.weekSoFar; } if (data.weekSoFar >= data.weekGoal) { element.classList.add("green"); } } } } } // Add code to update other elements as needed } else { console.error('Habit container not found for word:', word); } } function destroyCalHeatMap(word) { // Destroy existing Cal-HeatMap instance const calInstance = calHeatMapInstances[word]; if (calInstance) { calInstance.destroy(); console.log('Cal-HeatMap destroyed successfully for word:', word); } } // Function to pad a number with leading zeros (if needed) function padNumber(number) { return number.toString().padStart(2, "0"); } // Function to get the ISO week number of a date function getWeekNumber(date) { const d = new Date(date); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() + 4 - (d.getDay() || 7)); const yearStart = new Date(d.getFullYear(), 0, 1); const weekNo = Math.ceil(((d - yearStart) / 86400000 + 1) / 7); return weekNo; }