Ttykuu

I am extracting a list of data from a SharePoint library with CSOM, then manipulating the data to give some sort of visible statistic through Google Charts. The data is a list of each parent department in our company and how many pages they printed in the previous week. Some additional information kept is the ISO Week, the current fiscal Quarter based on the ISO Week and wither or not the entry is in the Current, Previous, or Outdated quarter (where Outdated) is just any date outside the current or previous Quarter.

Everything currently gives the expected output, however it feels very messy and there's repeated code in a few places. Right now we have two Google Charts that give the following statistics:

1. Number of pages printed in the current Quarter (A sum of all entries for each department under "Current Quarter")


2. Percentage if pages printed relative to the previous quarter: essentially ((per-day average this quarter) / (per-day average last quarter) - 1)*100
   

Here's an image of what the graphs currently look like: Pages printed per SBU. Please note, SBU is our term for "parent department" and the image is relatively large, so I've opted to just post the URL.

First there are 4 'helper' functions I've added to either Date or Array types. These are:

Date.prototype.getWeek, Date.prototype.getWeeksInYear, Date.prototype.getWeekQuarter, and Array.prototype.customSort and are outlined at the bottom of the script:

var listTitle = "Printing Stats"
var viewTitle = "Current Stats"
// var dictStats = ; // For testing

/*
 * Get the list's view via CAML request.
 * Prepares the body with a new DOM object to put charts in
 * Takes no arguments
 */
function retrieveViewQuery() 
 var clientContext = new SP.ClientContext.get_current();
 var oList = clientContext.get_web().get_lists().getByTitle(listTitle);
 this.oView = oList.get_views().getByTitle(viewTitle);

 var elem = document.createElement("div");
 elem.id = "container";
 document.querySelector(".ms-rte-layoutszone-inner").prepend(elem);

 clientContext.load(oView);
 clientContext.executeQueryAsync(
 this.retrieveViewQuerySucceeded.bind(this),
 this.onQueryFailed.bind(this)
 );


function onQueryFailed(sender, args) 
 alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());


/*
 * Get the items from the list via second CAML request.
 */
function retrieveViewQuerySucceeded(sender, args) 
 var clientContext = new SP.ClientContext.get_current();
 var oList = clientContext.get_web().get_lists().getByTitle(listTitle);

 var query = new SP.CamlQuery();
 query.set_viewXml(this.oView.get_viewQuery());
 this.items = oList.getItems(query);

 clientContext.load(this.items);
 clientContext.executeQueryAsync(
 this.retrieveItemListSucceeded.bind(this),
 this.onQueryFailed.bind(this)
 );


/*
 * Extract the the following parameters from the list:
 * - Which quarter is it: "Previous Quarter" or "Current Quarter"
 * - Which SBUs are present in the data
 * - Extract the cumulative number of pages per quarter
 * - Extract the week number of the quarter
 */
function retrieveItemListSucceeded(sender, args) 
 var dictStats = ;
 var listItemEnumerator = items.getEnumerator();
 var oListItem;

 while (listItemEnumerator.moveNext()) 
 oListItem = listItemEnumerator.get_current().get_fieldValues();
 var quarter = oListItem.PreviousOrCurrentQuarter;
 var itemTitle = oListItem.Title.replace(/s*-s*ZvL/i, "");

 // Prepare datastructure
 if (!dictStats[quarter]) 
 dictStats[quarter] = 
 
 if (!dictStats[quarter][itemTitle]) 
 dictStats[quarter][itemTitle] = [[0, 0]];
 

 var tempItem = dictStats[quarter][itemTitle];
 dictStats[quarter][itemTitle].push([
 parseInt(tempItem[tempItem.length - 1]) + oListItem.TotalPrintedPages,
 oListItem.RelevantDate
 ]);
 

 chartStatSpecifications(dictStats);


/*
 * Prepare the data for the chart views.
 * Takes in an object with the following data structure:
 * Object >
 * Previous Quarter || Current Quarter >
 * SBU >
 * [ cumulativePageCountInQuarter, WeekOfQuarter]
 */
function chartStatSpecifications(allStats) 
 var itemStats = [[], []];
 var totalPageCount = 0,
 totalDeptAvgLQ = 0;

 for (var dept in allStats["Current Quarter"]) 
 var deptStats = allStats["Current Quarter"][dept.toString()];
 var name = dept.toString().replace("&", "&rn");
 var deptAvgLQ, deptAvgCQ;

 // Calculate average pages printed so far this Quarter
 // and overall last quarter based on ISO Weeks
 if (allStats["Previous Quarter"] && allStats["Previous Quarter"][dept.toString()]) 
 var tmp = allStats["Previous Quarter"][dept.toString()];
 tmp = tmp[tmp.length - 1]

 var weeks = (new Date(tmp[1])).getWeeksInYear() == 53 ? 14 : 13
 deptAvgLQ = Math.ceil(parseInt(tmp[0]) / (weeks * 7));
 console.log(weeks * 7); // For testing

 weeks = (new Date(tmp[1])).getWeek() - ((new Date(tmp[1])).getWeekQuarter() - 1) * 13
 deptAvgCQ = Math.ceil(parseInt(tmp[0]) / (weeks * 7));
 

 // Total number of pages this quarter
 itemStats[0].push([
 name,
 deptStats[deptStats.length - 1][0]
 ]);

 // Percentage above last quarter's average
 itemStats[1].push([
 name,
 Math.floor((deptAvgCQ / deptAvgLQ - 1) * 5000) / 50
 ]);

 totalPageCount += deptStats[deptStats.length - 1][0];
 totalDeptAvgLQ += deptAvgCQ;
 
 totalPageCount = totalPageCount.toString().replace(/B(?=(d3)+(?!d))/g, " ");

 totalDeptAvgLQ = Math.floor(totalDeptAvgLQ / itemStats[1].length * 50) / 50
 totalDeptAvgLQ = totalDeptAvgLQ.toString().replace(/B(?=(d3)+(?!d))/g, " ");

 itemStats[0].customSort(['SBU', 'Pages'], function (a, b) 
 return (a[1] - b[1])
 );
 google.charts.setOnLoadCallback(function () 
 drawChart('Total Pages this Quarter: ' + totalPageCount, itemStats[0])
 );

 itemStats[1].customSort(['SBU', '% Above'], function (a, b) 
 return a[1] - b[1]
 );
 google.charts.setOnLoadCallback(function () 
 drawChart('Percentage over last quarter's average: ', itemStats[1])
 // drawChart('Percentage over last quarter's average: ' + totalDeptAvgLQ, itemStats[1])
 );


/*
 * Draw the Google Chart.
 * Inputs:
 * chartTitle :: Title for the chart
 * stats :: Prepared data with 2 or more columns
 */
function drawChart(chartTitle, stats) 
 var data = google.visualization.arrayToDataTable(stats);
 var options = 
 title: chartTitle,
 legend: 'none',
 height: 400
 ;

 // Instantiate and draw the chart.
 var elem = document.createElement("div");
 document.getElementById('container').appendChild(elem);
 var chart = new google.visualization.ColumnChart(elem);
 chart.draw(data, options);


SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveViewQuery);

/*
 * * * * * * Additional Scripting tools * * * * * *
 *
 * This script is released to the public domain and may be used, modified and
 * distributed without restrictions. Attribution not necessary but appreciated.
 * Source: https://weeknumber.net/how-to/javascript
 *
 * Returns the ISO week of the date.
 */
Date.prototype.getWeek = function () 
 var date = new Date(this.getTime());
 date.setHours(0, 0, 0, 0);
 // Thursday in current week decides the year.
 date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
 // January 4 is always in week 1.
 var week1 = new Date(date.getFullYear(), 0, 4);
 // Adjust to Thursday in week 1 and count number of weeks from date to week1.
 return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 -
 3 + (week1.getDay() + 6) % 7) / 7);


// Returns the four-digit year corresponding to the ISO week of the date.
Date.prototype.getWeeksInYear = function () 

// Returns how many weeks are in a date's specified quarter
Date.prototype.getWeekQuarter = function () 
 var date = new Date(this.getTime());
 weekNum = date.getWeek();
 return weekNum == 53 ? 4 : Math.ceil(weekNum / 13);


// Takes an array and directly manipulates the object with a specified sort
// prepends a smaller object to the array
Array.prototype.customSort = function (prependItem, customSort) 
 this.sort(customSort);
 if (prependItem)
 this.unshift(prependItem);
 return this;

And below is added to the SharePoint page so Google Charts can be loaded:

<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript">
 google.charts.load('current', packages: ['corechart']); 
</script>