du.html #1

<html>
  <head>
    <title>Disk Usage</title>
    <script type="text/javascript">
      if (typeof(P4JsApi) != 'undefined')
      {
      P4JsApi.setWebKitDeveloperExtrasEnabled(true);
      }
    </script>
    <script src="js/Chart.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> -->
  </head>
  <body>
<canvas id="myChart" width="400" height="400"></canvas>
    <script>

function getColorPairs(n){
    var color =  [
	{
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
	},
	{
	    color: "#46BFBD",
	    highlight: "#5AD3D1",
	    label: "Green"
	},
	{
	    color: "#FDB45C",
	    highlight: "#FFC870",
	    label: "Yellow"
	}];
    return color[n%(color.length)];
}

function getDoughnutData(base)
{
    console.log('getDoughnutData('+base+')');
    if (base[base.length-1] != '/') {
	base += '/';
    }
    base += '*';
    
    var data = [];
    var dirs = P4JsApi.p4('dirs '+base);
    for (var i=0; i<dirs.size; i++) {
	var dir = dirs.data[i].dir;
	var rv = P4JsApi.p4('sizes -hs '+dir+'/...');
	console.log(dir); 	console.log(rv);
	var cp = getColorPairs(i);
	console.log(cp.label);
	data.push({
	    value: rv.data[0].fileSize
	    ,label: dir   // rv.data[0].path
	    ,color: cp.color
            ,highlight: cp.highlight
	});
    }
    return data;
}
function foo(base)
{
 
    var ctx = document.getElementById('myChart').getContext('2d');
    myChart = new Chart(ctx).Doughnut(getDoughnutData(base), {

	//Boolean - Whether we should show a stroke on each segment
	segmentShowStroke : true,

	//String - The colour of each segment stroke
	segmentStrokeColor : "#fff",

	//Number - The width of each segment stroke
	segmentStrokeWidth : 2,

	//Number - The percentage of the chart that we cut out of the middle
	percentageInnerCutout : 50, // This is 0 for Pie charts

	//Number - Amount of animation steps
	animationSteps : 100,

	//String - Animation easing effect
	animationEasing : "easeOutBounce",

	//Boolean - Whether we animate the rotation of the Doughnut
	animateRotate : true,

	//Boolean - Whether we animate scaling the Doughnut from the centre
	animateScale : false,

	//String - A legend template
    // 	legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    });

    document.getElementById('myChart').onclick = function(evt){
	var activePoints = myChart.getSegmentsAtEvent(evt);
	console.log(activePoints[0]._saved.label);
	var j = myChart.segments.length
	for (var i=0; i<j; i++) {
	    console.log(myChart.segments[i]);
	    myChart.removeData();
	}
	data = getDoughnutData(activePoints[0]._saved.label);
	for (var i=0; i<data.length; i++) {
	    console.log(myChart.addData(data[i], i));
	}
	// myChart.update();
    };
}

var tgt = P4JsApi.getSelection();
if (tgt == []) {
    tgt = '//';
} else {
    tgt = tgt[0];
    if (tgt.slice(0,12) === 'p4:///files/') {
	tgt = '//'+tgt.slice(12);
    }
}
console.log(tgt);
foo(tgt);
</script>

    <h1>Instruction</h1>
    <ol>
    <li> select a directory in the depot view; </li>
    <li>right click on the page and select refresh;</li>
    <li>hover the doughnut chart and click on one of the segments to drill down.</li>

    </ol>
    
  </body>
</html>
#	Change	User	Description	Committed
#1	16686	Lester Cheung	A simple P4V applet to show how much disk space is used at #head. Add '-a' to the "p4 sizes" call to get disk usage for ALL revs. Only wrote it because I can't find one available - please improve it or show me a better one to use :)