Required Data is Unavailable for this view.
+ `;
+ return;
+ }
+
+ // get start of the view
+ viewStart = getTimeBounds(calendarDeliverables, "start", startDateProp);
+ viewStart = (!(isValidDate(viewStart)) || viewStart <= 0) ? programLaunchDate : viewStart;
+ const viewStartYear = viewStart.getUTCFullYear();
+
+ const displayYear = period ? period.year : viewStartYear;
+ const displayQuarter = period ? period.quarter : 1;
+
+ const yearIndicator = block.querySelector('.inc-dec-wrapper .current-year');
+ yearIndicator.dataset.year = displayYear;
+ yearIndicator.textContent = displayYear;
+
+ // get end of the view
+ viewEnd = getTimeBounds(calendarDeliverables, "end", endDateProp);
+ if (!(isValidDate(viewEnd)) || viewEnd <= 0) {
+ viewEnd = new Date(viewStart);
+ viewEnd.setMonth(viewStart.getMonth() + 1);
+ }
+ const viewEndYear = viewEnd.getUTCFullYear();
+
+ // get array of all years to be included
+ let years = calendarYears(viewStartYear, viewEndYear);
+
+ // disable increment/decrement if only one year in view
+ if (years.length === 1) {
+ document.querySelector('.inc-dec-wrapper > .year-switch').classList.add('disabled');
+ }
+
+ // build the calendar background here as we already know the period and style
+ let calendarEl;
+ if (type === "year") {
+ calendarEl = buildYearCal(years);
+ } else {
+ // if the last item ends in December we need another year to catch the Q1 n+1 finish
+ if (viewEnd.getUTCMonth = 11) {
+ years.push(viewEndYear + 1);
+ }
+ calendarEl = buildQuarterCal(years);
+ }
+ // get unique deliverable types
+ const uniqueGroups = getUniqueItems(calendarDeliverables, "deliverableType");
+
+ // set up the content wrapper
+ const contentWrapper = document.createElement('div');
+ contentWrapper.classList.add('calendar-content-wrapper');
+ if (type === "quarter") {
+ contentWrapper.classList.add('quarter-view');
+ contentWrapper.dataset.view = "quarter";
+ } else {
+ contentWrapper.dataset.view = "year";
+ }
+
+ var groupIndex = 1;
+ for (const group of uniqueGroups) {
+ const groupType = await lookupType(group, 'deliverable-type');
+ // find all members of this group
+ const matchedItems = calendarDeliverables.filter(item => item.deliverableType === group);
+
+ // find the earliest date- this is how we set the position for the group against the calendar
+ let earliestStartDate = getTimeBounds(matchedItems, "start", startDateProp);
+ earliestStartDate = (!(isValidDate(earliestStartDate)) || earliestStartDate <= 0) ? new Date(viewStart) : earliestStartDate;
+ let latestEndDate = getTimeBounds(matchedItems, "end", endDateProp);
+ latestEndDate = (!(isValidDate(latestEndDate)) || latestEndDate <= 0) ? new Date(viewEnd) : latestEndDate;
+ const startMonth = (earliestStartDate.getUTCMonth()); // getMonth returns 0-11 but this is desirable
+ const startDay = (earliestStartDate.getUTCDate() - 1); // if at start of month, we don't want to add any more margin
+ const endMonth = (latestEndDate.getUTCMonth());
+ const endDay = (latestEndDate.getUTCDate() - 1);
+
+ const groupStartYear = earliestStartDate.getUTCFullYear();
+ const groupEndYear = latestEndDate.getUTCFullYear();
+
+ // accounting for different years in view
+ const startYearOffset = ((groupStartYear - viewStartYear) * 12);
+ const endYearOffset = ((groupEndYear - viewStartYear) * 12);
+ const totalDaysInMonth = new Date(Date.UTC(groupStartYear, startMonth, 0)).getUTCDate();
+ const totalDaysInEndMonth = new Date(Date.UTC(groupEndYear, endMonth, 0)).getUTCDate();
+
+ const percentOfStartMonth = (startDay / totalDaysInMonth);
+ const percentOfEndMonth = (endDay / totalDaysInEndMonth);
+ const dayMargin = (percentOfStartMonth * columnWidth);
+ const endDayMargin = (percentOfEndMonth * columnWidth);
+ let startPosition = (((startYearOffset + startMonth) * columnWidth) + dayMargin).toFixed(2);
+ let endPosition = (((endYearOffset + endMonth) * columnWidth) + endDayMargin).toFixed(2);
+
+ if (type === "quarter") {
+ startPosition = parseFloat(startPosition) + parseFloat(columnWidth);
+ endPosition = parseFloat(endPosition) + parseFloat(columnWidth);
+ }
+
+ if (endMonth > 9) endPosition = endPosition - 0.35;
+ const widthOfGroup = (endPosition - startPosition); // width of group = start position + (day duration)
+ // calculate the duration of the group as that helps set the width of its members
+ const groupDuration = Math.floor((latestEndDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24));
+
+ const itemWrapper = document.createElement('div');
+ itemWrapper.classList.add('group-content');
+
+ for (const item of matchedItems) {
+ const itemStartDate = (item[startDateProp]) ? new Date(item[startDateProp]) : viewStart;
+ const itemEndDate = (item[endDateProp]) ? new Date(item[endDateProp]) : viewEnd;
+
+ const itemEndDateStr = itemEndDate ? itemEndDate.toLocaleDateString().split(',')[0] : null;
+ const itemDuration = Math.floor((itemEndDate.getTime() - itemStartDate.getTime()) / (1000 * 60 * 60 * 24));
+ const itemDurationPct = ((itemDuration / groupDuration) * 100).toFixed(2);
+
+ let daysDifference = Math.floor((itemStartDate.getTime() - earliestStartDate.getTime()) / (1000 * 60 * 60 * 24));
+ const startPctDiff = ((daysDifference / groupDuration) * 100).toFixed(2);
+ let itemEl = document.createElement('div');
+ itemEl.classList.add('item');
+ itemEl.style.marginLeft = startPctDiff + '%';
+
+ // Find the corresponding color code from the taskStatusMappings array
+ const itemStatusMapping = await getTaskStatusMapping(item.taskStatus);
+ const { text: statusText = 'Unknown Status', 'color-code': colorCode = 'green' } = itemStatusMapping;
+
+ // Create a placeholder for the thumbnail
+ itemEl.innerHTML = `
+
+
+
+
+
${item.deliverableName}
+
+
+
+
+
+ ${itemEndDateStr ? '
End Date: ' + itemEndDateStr + '
' : ''}
+
+
+
${checkBlankString(programName)}
diff --git a/icons/folderOpenOutline.svg b/icons/folderOpenOutline.svg
new file mode 100644
index 00000000..ff67e983
--- /dev/null
+++ b/icons/folderOpenOutline.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/icons/launch.svg b/icons/launch.svg
new file mode 100644
index 00000000..e6209ba5
--- /dev/null
+++ b/icons/launch.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/scripts/graphql.js b/scripts/graphql.js
index f2e5ca5d..58012272 100644
--- a/scripts/graphql.js
+++ b/scripts/graphql.js
@@ -47,6 +47,8 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) {
const encodedCursor = encodeURIComponent(cursor);
const encodedFilter = encodeURIComponent(JSON.stringify(filter));
const graphqlEndpoint = `${baseApiUrl}/${projectId}/${queryName}${encodedSemiColon}first=${encodedFirst}${encodedSemiColon}cursor=${encodedCursor}${encodedSemiColon}filter=${encodedFilter}`;
+ //Performance logging
+ const startTime = performance.now();
const jwtToken = await getBearerToken();
try {
@@ -57,6 +59,11 @@ export async function graphqlAllCampaignsFilter(first,cursor,filter) {
},
};
const response = await fetch(`${graphqlEndpoint}`, options);
+ //Performance logging
+ const endTime = performance.now();
+ const executionTime = endTime - startTime;
+ console.debug(`getAllCampaigns Execution Time: ${executionTime} ms`);
+
// Handle response codes
if (response.status === 200) {
const responseBody = await response.json();
@@ -170,6 +177,8 @@ export async function executeQuery(queryString) {
const baseApiUrl = `${await getGraphqlEndpoint()}/graphql/execute.json`;
const projectId = 'gmo';
const queryEndpoint = `${baseApiUrl}/${projectId}/${queryString}`;
+ //Performance logging
+ const startTime = performance.now();
const jwtToken = await getBearerToken();
return fetch(queryEndpoint, {
@@ -181,6 +190,11 @@ export async function executeQuery(queryString) {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
+ //Performance logging
+ const endTime = performance.now();
+ const executionTime = endTime - startTime;
+ console.debug(`executeQuery for ${queryString} Execution Time: ${executionTime} ms`);
+
return response.json();
}).then(data => {
return data; // Make sure to return the data so that the promise resolves with it
+