",2024-05-15 08:55:40.400000,Compares current fulfilled month to date revenue against last year,MTD Chart,,10,3,mtd-chart,1
2,_binary ,"const today = new Date();
var canvas = document.querySelector('canvas');
function createYearQuery(subtractYear) {
let mm = (today.getMonth() + 1).toString().padStart(2, '0'); // January is 0!
let timestamp = (today.getFullYear() - subtractYear) + '-' + mm + '-01 00:00:00';
return ""SELECT DAY(PostSo.postDate) AS PostedDate, SUM(PostSoItem.totalPrice) AS TotalPrice ""
+ ""FROM PostSoItem ""
+ ""JOIN PostSo ON PostSo.id = PostSoItem.postSoId ""
+ ""JOIN SoItem ON PostSoItem.soItemId = SoItem.id AND SoItem.typeId <> 40 AND SoItem.statusID = 50 ""
+ ""WHERE postDate >= '"" + timestamp + ""' ""
+ ""AND postDate < DATE_ADD('"" + timestamp + ""', INTERVAL 1 MONTH) ""
+ ""GROUP BY CAST(PostSo.postDate AS DATE)"";
}
function createData(query) {
const result = runQuery(query);
return JSON.parse(result);
}
function createDataset(label, data, backgroundColor, borderColor) {
return {
label: label,
fill: true,
data: data,
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: 2,
pointRadius: 3,
pointHoverRadius: 5,
pointHitRadius: 7,
lineTension: 0
};
}
const data = [];
data.push(createData(createYearQuery(1)));
data.push(createData(createYearQuery(0)));
console.log(data);
let runningTotal = 0;
const monthData = [];
const labels = [];
for (let year = 0; year < data.length; year++) {
if(data[year].length != 0){
data[year] = data[year].reduce(
(obj, day) => {
obj[day.posteddate] = day.totalprice;
return obj;
}, {});
runningTotal = 0;
let mData = [];
let yearOffset = 1
if (year == 1) {yearOffset = 0}
for (let day = 1; day <= new Date((today.getFullYear() - yearOffset), today.getMonth() + 1, 0).getDate(); day++) {
if (labels.length < moment().daysInMonth()) {
labels.push(day);
}
if (year === data.length - 1 && day > today.getDate()) {
continue;
}
runningTotal += data[year][day] || 0;
mData.push(runningTotal);
}
monthData.push(mData);
}
}
const chartData = [];
const currentYearColor = '$COLOR{Current_Year|#33D566}';
const previousYearColor = '$COLOR{Previous_Year|#4682b4}';
if (monthData.length == 1) {
chartData.push(createDataset(today.getFullYear(), monthData[0], UTIL.convertHex(currentYearColor, 50), currentYearColor));
chartData.push(createDataset(today.getFullYear() - 1, monthData[1], UTIL.convertHex(previousYearColor, 50), previousYearColor));
} else {
chartData.push(createDataset(today.getFullYear(), monthData[1], UTIL.convertHex(currentYearColor, 50), currentYearColor));
chartData.push(createDataset(today.getFullYear() - 1, monthData[0], UTIL.convertHex(previousYearColor, 50), previousYearColor));
}
const options = {
legend: {
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, values) {
return UTIL.dollarify(value, 0);
}
}
}],
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return UTIL.dollarify(tooltipItem.yLabel);
},
title: (tooltipItem) => {
return moment().format('MMMM') + ' ' + tooltipItem[0].xLabel;
}
}
},
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
display: false
}
}
};
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: chartData
},
options: options
});
document.getElementById(""title"").innerHTML = 'Revenue ' + moment().format('MMMM') + ' ' + today.getFullYear();
document.getElementById(""subTitle"").innerHTML = 'MTD - ' + UTIL.dollarify(runningTotal);
document.getElementById(""description"").innerHTML = '';
",2024-05-15 08:55:40.430000,Query and logic for the MTD Chart page,MTD Chart,,20,3,mtd-chart,0
3,_binary ,"
",2023-01-05 17:28:06.927000,Default header that includes common library dependencies,Default Header,,40,2,fb-gadget-header,0
4,_binary ,"const UTIL = {
""convertHex"": function(hex,opacity) {
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
const result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
},
""dollarify"": function (amount, decimalCount = 2, decimal = ""."", thousands = "","") {
decimalCount = Math.abs(decimalCount);
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
const negativeSign = amount < 0 ? ""-"" : """";
let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
let j = (i.length > 3) ? i.length % 3 : 0;
return '$' + negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, ""$1"" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : """");
},
""uomify"" : function(qty, uom){
return qty.toString() + "" "" + uom;
},
""convertDate"": function(date, isFromDate) {
const parsed = new Date(Date.parse(date));
if (isFromDate) {
return moment(parsed.setDate(parsed.getDate() + 1)).format('MM/DD/YYYY');
}
return moment(parsed.setDate(parsed.getDate())).format('MM/DD/YYYY');
},
""makeTable"": function (query, headersArray, dontShow = []) {
var tr = ""
"";
// SET COLUMN HEADERS
for (var h = 0; h < headersArray.length; h++) {
tr += ""
"" + headersArray[h] + ""
"";
}
//ADD ROW DATA FROM QUERY
for (var i = 0; i < query.length; i++) {
// ADD NEW ROW
tr += ""
"";
// PRINT COLUMN DATA FOR THIS ROW
for (var j in query[i]) {
// CHECK TO SEE IF IT IS IN DONT SHOW LIST
if (dontShow.includes(j)) {
continue;
}
else {
if (query[i].hasOwnProperty(j)) {
tr += ""
"" + query[i][j] + ""
"";
}
}
}
tr += ""
""
}
return tr;
},
""unflatten"" : function(data) {
""use strict"";
if (Object(data) !== data || Array.isArray(data)) {
return data;
}
var result = {}, cur, prop, idx, last, temp;
for(var p in data) {
cur = result, prop = """", last = 0;
do {
idx = p.indexOf(""."", last);
temp = p.substring(last, idx !== -1 ? idx : undefined);
cur = cur[prop] || (cur[prop] = (!isNaN(parseInt(temp)) ? [] : {}));
prop = temp;
last = idx + 1;
} while(idx >= 0);
cur[prop] = data[p];
}
return result[""""];
},
""flatten"" : function(data) {
var result = {};
function recurse (cur, prop) {
if (Object(cur) !== cur) {
result[prop] = cur;
} else if (Array.isArray(cur)) {
for(var i=0, l=cur.length; i=g.left&&c<=g.right&&k>=g.top&&k<=g.bottom)return!1}d=[[g.left,g.top],[g.left,g.bottom],[g.right,g.top],[g.right,g.bottom]];for(e=0;e=a&&c<=b&&k>=p&&k<=l)return!1}h.push({left:a,right:b,top:p,bottom:l});return!0},c.prototype.measureText=function(a){return""object""===
typeof a?{width:a.width,height:a.height}:this.ctx.measureText(a)},c.prototype.fillText=function(a,b,p){var c=this.ctx;""object""===typeof a?c.drawImage(a,b.x-a.width/2,b.y-a.height/2,a.width,a.height):(c.fillStyle=p,c.textBaseline=""top"",c.textAlign=""center"",c.fillText(a,b.x,b.y-this.fontSize/2))},c.prototype.loadImage=function(a){var b=new Image;b.src=a.src;b.width=a.width;b.height=a.height;return b},c.prototype.drawArcText=function(a,b,c,l){var h=this.ctx,f=c.x,g=c.y,d=c.startAngle;c=c.endAngle;h.save();
h.translate(f,g);g=c-d;d+=Math.PI/2;c+=Math.PI/2;var e=d;f=this.measureText(a);d+=(c-(f.width/b+d))/2;if(l||!(c-d>g))if(""string""===typeof a)for(h.rotate(d),l=0;l
{% Template Default_Header %}