//
const monthNamesFull = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const monthsAbbrev = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const today = new Date();
globalThis.currentMonthNumber = Number(today.getMonth());
globalThis.currentMonthName = monthNamesFull[currentMonthNumber];
globalThis.dropdownList1 = document.getElementById("month_select");
globalThis.dropDownListSelector1 = document.getElementById("select2-month_select-container")
function changeSelectedMonth(monthNumber) {
globalThis.selectedMonthNumber = monthNumber;
globalThis.selectedMonthName = monthNamesFull[monthNumber];
}
function menuChange(monthNumber) {
changeSelectedMonth(monthNumber);
globalThis.dropdownList1.selectedIndex = monthNumber;
globalThis.dropDownListSelector1.title = globalThis.selectedMonthName;
globalThis.dropDownListSelector1.textContent = globalThis.selectedMonthName;
changeData(globalThis.sheetData);
}
function successFunc1(data) {
globalThis.sheetData = data;
}
function successFunc2(data) {
globalThis.giversData = Object.assign(
...Object.keys(data[0]).map((key) => ({ [key]: data.map((o) => o[key]) }))
);
}
function zoomChart(chartObject, selectedMonth) {
var dates = chartObject.chart_args.data.labels;
var startDateEndDate = dates.filter((s) =>
s.includes(selectedMonth.slice(0, 3))
);
minmaxarray = [startDateEndDate.at(0), startDateEndDate.at(-1)];
chartObject.chart_args.options.scales.x.min = minmaxarray[0];
chartObject.chart_args.options.scales.x.max = minmaxarray[1];
window["chart_" + chartObject.post_id + "_minmax"] = minmaxarray;
chartObject.chart.update();
}
function changeData(data) {
var dataAtSelectedMonth = data.at(selectedMonthNumber);
document.getElementById("data1").innerHTML =
dataAtSelectedMonth["Average Attendance for Month"];
document.getElementById("data1label").innerHTML =
"Average Attendance for " + selectedMonthName;
document.getElementById("data2").innerHTML =
dataAtSelectedMonth["Average Attendance for Year"];
document.getElementById("data2label").innerHTML =
"Average Attendance for Year";
document.getElementById("data3").innerHTML =
dataAtSelectedMonth["Average Small Group Attendance for Month"];
document.getElementById("data3label").innerHTML =
"Average Small Group Attendance for " + selectedMonthName;
document.getElementById("data4").innerHTML =
dataAtSelectedMonth["Average BB Attendance for Month (boys)"];
document.getElementById("data4label").innerHTML =
"Average BB Attendance for " + selectedMonthName + " (boys)";
document.getElementById("data5").innerHTML =
dataAtSelectedMonth["Giving in Month"];
document.getElementById("data5label").innerHTML =
"Giving in " + selectedMonthName;
document.getElementById("data6").innerHTML =
dataAtSelectedMonth["Givers in Month"];
document.getElementById("data6label").innerHTML =
"Givers in " + selectedMonthName;
document.getElementById("data7").innerHTML =
dataAtSelectedMonth["Average Giving Per Giver in Month"];
document.getElementById("data7label").innerHTML =
"Average Giving Per Giver in " + selectedMonthName;
document.getElementById("data8").innerHTML =
dataAtSelectedMonth["Current Surplus for Year"];
document.getElementById("data8label").innerHTML = "Surplus/Deficit for Year";
document.getElementById("attendanceLabel").innerHTML =
"Attendance in " + selectedMonthName;
document.getElementById("givingLabel").innerHTML =
"Giving in " + selectedMonthName;
zoomChart(m_chart_chartjs_2585_3, selectedMonthName);
zoomChart(m_chart_chartjs_2595_2, selectedMonthName);
zoomChart(m_chart_chartjs_2562_1, selectedMonthName);
zoomChart(m_chart_chartjs_2556_5, selectedMonthName);
toggleSwitch.checked = false;
var giversDataforMonth = globalThis.giversData[selectedMonthName].map(function (item) {
return parseFloat(item, 10);
});
m_chart_chartjs_2570_4.chart_args.data.datasets[0].data = giversDataforMonth;
m_chart_chartjs_2570_4.chart_args.data.labels = [
"#1",
"#2",
"#3",
"#4",
"#5",
"#6",
"#7",
"#8",
"#9",
"#10",
"#11",
"#12",
"#13",
"#14",
"#15",
"#16",
"#17",
"#18",
"#19"
];
m_chart_chartjs_2570_4.chart_args.options.plugins.title.text =
"Givers (" + selectedMonthName + ")";
m_chart_chartjs_2570_4.chart.update();
}
//not sure if this function is actually in use
function toggleDateRange(chartObject) {
toggleEachChart(m_chart_chartjs_2562_1);
toggleEachChart(m_chart_chartjs_2595_2);
toggleEachChart(m_chart_chartjs_2585_3);
}
function toggleEachChart(chartObject) {
// The following function takes the chart object as the argument and modifies its x axes depending on whether the toggle button is pressed. It toggles between the month view and the entire view (when the min and max values are set to "null").
if(document.getElementById("toggleSwitch").checked === true){
chartObject.chart_args.options.scales.x.min = null;
chartObject.chart_args.options.scales.x.max = null;
chartObject.chart.update()
} else {
chartObject.chart_args.options.scales.x.min = window['chart_' + chartObject.post_id + '_minmax'][0];
chartObject.chart_args.options.scales.x.max = window['chart_' + chartObject.post_id + '_minmax'][1];
chartObject.chart.update()
}
}
// this creates an array of 12 numbers, 0-11, and then cuts it down. So if the current month is July, the month number is 6, and the array is [6, 7, 8, 9, 10, 11] (to disable).
monthNumbersToDisable = [...Array(12).keys()].slice(currentMonthNumber+1,12);
//this grabs all the month buttons by their unique element class name - could break at some point
var monthButtons = document.getElementsByClassName("vc_col-sm-1 wpb_column column_container vc_column_container col boxed centered-text no-extra-padding inherit_tablet inherit_phone ")
//this sets the function "hoverOverDateButtons" as the action for the onmouseover attribute.
for (var i = 0; i < monthsAbbrev.length; ++i) {
var text = "hoverOverDateButtons(" + i + ")"
monthButtons[i].setAttribute("id", monthsAbbrev[i] + "Button1");
monthButtons[i+12].setAttribute("id", monthsAbbrev[i] + "Button2");
monthButtons[i].setAttribute("onmouseover", text);
monthButtons[i+12].setAttribute("onmouseover", text);
}
//this iterates through the array created earlier "month numbers to disable" and disables the buttons by setting the "onmouseover" attribute to nothing, and by setting the text colour to grey.
for (var i = 0; i < monthNumbersToDisable.length; ++i) {
j = monthNumbersToDisable[i];
monthButtons[j].style.color = "rgb(221, 221, 221)";
monthButtons[j].setAttribute("onmouseover", "");
monthButtons[j+12].style.color = "rgb(221, 221, 221)";
monthButtons[j+12].setAttribute("onmouseover", "");
}
function hoverOverDateButtons(monthIndex) {
//MonthName = document.getElementById("month_select")[monthIndex].innerText;
//MonthNumber = document.getElementById("month_select").value;
changeSelectedMonth(monthIndex);
changeData(globalThis.sheetData, globalThis.giversData);
}
//SheetDB.read('https://sheetdb.io/api/v1/75upt6s1zwqi4', {}).then(successFunc1(result){
// console.log(result);
//}, function(error){
// console.log(error);
//});
//SheetDB.read('https://sheetdb.io/api/v1/75upt6s1zwqi4?sheet=Givers_DB', {}).then(successFunc2(result){
// console.log(result);
//}, function(error){
// console.log(error);
//});
// Sheetsu.read("https://sheetdb.io/api/v1/75upt6s1zwqi4", {}, successFunc1);
//Sheetsu.read(
// "https://sheetdb.io/api/v1/75upt6s1zwqi4?sheet=Givers_DB",
// (transposed = false),
// successFunc2
//);
// This initiates the sheet on first load, with the current month's data
changeSelectedMonth(globalThis.currentMonthNumber);
changeData(globalThis.sheetData, globalThis.giversData);
// globalThis.dropdownList1 = document.getElementById("month_select");
// globalThis.dropDownListSelector1 = document.getElementById("select2-month_select-container")
// changeSelectedMonth(dropdownList1[0].innerText);
// changeData(globalThis.sheetData);
//this changes the selected month based on the selection in the dropdown list. Currently not working.
dropdownList1.onchange = (ev) => {
monthNumber = dropdownList1.selectedIndex;
changeSelectedMonth(monthNumber);
menuChange(monthNumber);
//changeData(globalThis.sheetData);
};
Skip to main content
