simplifying folder management & analytics

src/api/static/js/dashboard.js

@@ -365,91 +365,86 @@ monitor.folders.render = {}
 monitor.folders.render.init = function (data) {
 	monitor.folders.render.summary(data)
 }
-monitor.folders.render.details = function (data) {
-        //
-        // We need to normalize the data at this point so as to be able to show it all in the same chart
-        // jx.math.scale
-        //
-        var m = jx.utils.vector(['x','y'],data.age)
-        var x_max_age = jx.math.max(m[0])
-        var y_max_age = jx.math.max(m[1])
-        m = jx.math.scale(m)
-        data.age = jx.utils.patterns.visitor(m,function(row){
-
-            return {x:parseFloat(row[0].toFixed(3)),y:parseFloat(row[1].toFixed(3))}
-        })
-        
-        var m = jx.utils.vector(['x','y'],data.size)
-        var x_max_size = jx.math.max(m[0])
-        var y_max_size = jx.math.max(m[1])
-        
-        m = jx.math.scale(m)
-        data.size = jx.utils.patterns.visitor(m,function(row){
-            return {x:parseFloat(row[0].toFixed(3)),y:parseFloat(row[1].toFixed(3))}
-        })
+monitor.folders.show = {}
+monitor.folders.show.plan = function () {
+		$('#folder_summary').slideUp(function () {
+		$('#folder_plan').slideDown()
+	})
 
-        //
-        // The datasets need to be sorted by x ...
-        //
-        var Fn = function(a,b){
-            return a.x - b.x
-        }
-        data.age = data.age.sort(Fn)
-        data.size= data.size.sort(Fn)
-        
-//         data.size = data.size.splice(0,data.age.length)
-    
-	var context = jx.dom.get.instance('CANVAS')
-	var frame = $('#chartfolder')
-	jx.dom.set.value('chartfolder', '')
-	context.width = $(frame).width()
-	context.height= $(frame).height()
+}
+monitor.folders.show.grid = function () {
+		$('#folder_plan').slideUp(function () {
+			$('#folder_summary').slideDown()
+		})
+	
+}
+/***
+ * This function is designed to establish a folder clean up strategy i.e  :
+ * 	- We will look for anomalies given age,file size
+ * 	- We will also look for where most of the data is distributed (mode)
+ */
+monitor.folders.render.details = function (folder,data) {
+	//
+	// We need to normalize the data at this point so as to be able to show it all in the same chart
+	// jx.math.scale x: counts, y: measure ment
+	//
+	var r = [data.age, data.size]
+	var plans = []
+	for (var i in r) {
+		var xy = r[i]
+		var mode = jx.math.mode(jx.utils.vector('x', xy))
+		var yvalues = jx.utils.patterns.visitor(xy, function (row) {
+			if (row.x == mode) { 
+				return row.y
+			}
+		})
+		var sd = jx.math.sd(yvalues)
+		if (i == 0) {
+			prefix = 'age'
+			var mean = jx.math.mean(yvalues)
+			var max = (mean + (1.5 * sd))
+			if (mean > 30 && mean < 365) {
+				divide_by = 30
+				units = 'MONTHS'
+			} else if (mean > 365) {
+				divide_by=365
+				units = 'YEARS'
+			} else {
+				divide_by = 1
+				units = 'DAYS'
+			}
+		} else {
+			prefix = 'size'
+			var mean = jx.math.sum(yvalues)
+			var max = 0// (mean + (1.5 * sd))
+			if (mean > 1000) { 
+				divide_by = 1000
+				units = 'GB'
+			} else {
+				divide_by = 1
+				units = 'MB'
+			}
 
-	var conf = { type: 'line',responsive:true }
-	conf.data = {}
-	conf.options = { legend: { position: 'bottom' } }
-	conf.options.scales = {}
-	conf.options.scales.yAxes = [  
-		{id:'0',scaleLabel:{display:true,labelString:'% DAYS/MB'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}
+		}
 		
-	]
-	conf.options.scales.xAxes = [{ ticks:{min:0,max:1},gridLines: {display:false}}]
-	conf.options.tooltips = {}
-	conf.options.tooltips.callbacks = {}
-	conf.options.tooltips.callbacks.label = function(item,rec){
-            
-//              var r = data.datasets[item.datasetIndex].data[item.index]
-            if(item.datasetIndex == 0){
-                
-                r = data.age[item.index]
-                xmax = x_max_age
-                ymax = y_max_age
-                units = "DAYS"
-            }else{
-                r = data.size[item.index]
-                xmax = x_max_size
-                ymax = y_max_size
-                units = "MB"
-            }
-            console.log(r)
-            
-            return 'WTF'
-        }
-	
-	var age = {yAxisID:'0', label: 'File Age (Days)', data:data.age ,borderColor:COLORS[187],fill:true,borderWidth:1}
-	var size = {yAxisID:'0',label : 'File Size (MB)',data:data.size,borderColor:COLORS[32],fill:true,borderWidth:1}
-// 	// age.data = [{ x: 10, y: 30 }, {x:20,y:60}]
-	// size.data= data.size
-	age.data = data.age
-	x_ = jx.utils.vector('x', age.data)
-	z_ = jx.utils.vector('x',size.data)
-	conf.data.labels = jx.utils.unique(jx.math.sets.union(x_,z_)).sort()
-	conf.data.datasets = [age,size]//,age]
-	
+		//
+		// We need to assess the outliars i.e too old, too large
+		//
+		y = jx.utils.vector('y', xy)
+		var _mean = jx.math.mean(y)
+		var _sd = jx.math.sd(y)
+		var outlier = _mean < mean || max > (_mean + (1.5 * _sd))
+
+		plans.push({ 'label': prefix, 'max': max, 'sd': sd, 'mean': mean, 'count': yvalues.length, 'outlier': outlier })
+		jx.dom.set.value(prefix + '_count', yvalues.length)
+		jx.dom.set.value(prefix + '_value', (mean/divide_by).toFixed(2))
+		jx.dom.set.value(prefix+'_units',units)
+		monitor.folders.show.plan()
+
+	}
 	
+	jx.dom.set.value('folder_name', folder)
 	
-	jx.dom.append('chartfolder',context)
-	var chart = new Chart(context,conf)
 	
 	
 	
@@ -482,14 +477,14 @@ monitor.folders.render.summary = function (data) {
 			return {y:row[0],x:row[1]}
 		})
 
-		monitor.folders.render.details({age:age,size:size})
+		monitor.folders.render.details(item.label,{age:age,size:size})
 	}
 	//
 	// @TODO Add the units in days just in case
 	options.autoload  = true
 	options.fields = [
 		{ name: 'label', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
-		{ name: "summary.age", type: "number", title: "Age (DAYS)", headercss: "small bold" , width:'64px'},
+		
 		{ name: "summary.size", type: "number", title: "Size (MB)", type: "number", headercss: "small bold" },
 		{ name: "summary.count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
 	]

src/api/templates/dashboard.html

@@ -20,12 +20,12 @@
 <script>
 	$(document).ready(function(){
 		monitor.folders.init()
-// 		monitor.processes.fetch()
+		monitor.processes.fetch()
 		
 	})
 </script>
 <body>
-	<div class="left small border" style="width:12%; height:90%">
+	<div class="left small border-right" style="width:12%; height:60%">
 		<div id="menu" class="menu"></div>
 	</div>
 	
@@ -80,14 +80,55 @@
 				<div id="sandbox_pager"></div>
 			</div>
 			<div style="margin-top:10px">
-				<div class="small">
-					<div class="bold">Smart Folder Analysis/Monitoring</div>
-					<div>Powered By Machine Learning</div>
+				<div id="folder_summary">
+					<div class="small">
+						<div class="bold">Smart Folder Analysis/Monitoring</div>
+						<div>Powered By Machine Learning</div>
 
+					</div>
+					<div style="margin-top:10px; height:150px">
+						<div id="gridfolders"></div>
+						<div id="folderspager"></div>
+					</div>
 				</div>
-				<div style="margin-top:10px; height:150px">
-					<div id="gridfolders"></div>
-					<div id="folderspager"></div>
+
+				<div id="folder_plan" style="display:none">
+					<div class="border-bottom small" style="height:32px">
+						<div class="bold">Deletion/Archiving Plan <i class="fa fa-quote-left"></i> <span id="folder_name"></span> <i class="fa fa-quote-right"></i>
+						<i class="fa fa-angle-up action right bold" style="font-size:16px; margin:4px;" onclick="monitor.folders.show.grid()"></i>
+						</div>
+						<div class="left">Powered By Machine Learning</div>
+						
+					</div>
+
+					<div id="delete_age" class="left width-half border-right" style="margin:2px; padding:2px;">
+						<div class="small" align="left">By Age</div>
+						<div class="number" style="height:42px">
+							
+							<div id="age_count"  align="right" class="left width-75" style="margin-right:4px">00</div>
+							<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
+								
+							
+						</div>
+						<div class="small border-top" align="center" style="padding-top:4px">
+							Approximately <span id="age_value">00</span> <span id="age_units"></span>
+						</div>
+						
+					</div>
+					<div id="delete_size" class="right width-half" class="number" style="margin:2px; padding:2px">
+						<div class="small" align="left">By Size</div>
+						
+						<div  class=" number" style="height:42px">
+							
+							<div id="size_count" align="right" class="left width-75" style="margin-right:4px">00</div>	
+							<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>						
+						</div>
+						<div class="small border-top"align="center" style="padding-top:4px">
+							Approximately <span id="size_value">00</span> <span id="size_units"></span>
+						</div>
+						
+						
+					</div>
 				</div>
 				<div id="chartfolder" ></div>
 			</div>