Helix SwarmHelix Swarm

du.html

  • //
  • guest/
  • lester_cheung/
  • p4jsapi/
  • disk-usage/
  • du.html #1
  • View
  • Commits
  • Open Download .zip Download (3 KB) 
  1. <html>
  2.   <head>
  3.     <title>Disk Usage</title>
  4.     <script type="text/javascript">
  5.       if (typeof(P4JsApi) != 'undefined')
  6.       {
  7.       P4JsApi.setWebKitDeveloperExtrasEnabled(true);
  8.       }
  9.     </script>
  10.     <script src="js/Chart.min.js"></script>
  11.     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> -->
  12.   </head>
  13.   <body>
  14. <canvas id="myChart" width="400" height="400"></canvas>
  15.     <script>
  16.  
  17. function getColorPairs(n){
  18.     var color =  [
  19. 	{
  20.             color:"#F7464A",
  21.             highlight: "#FF5A5E",
  22.             label: "Red"
  23. 	},
  24. 	{
  25. 	    color: "#46BFBD",
  26. 	    highlight: "#5AD3D1",
  27. 	    label: "Green"
  28. 	},
  29. 	{
  30. 	    color: "#FDB45C",
  31. 	    highlight: "#FFC870",
  32. 	    label: "Yellow"
  33. 	}];
  34.     return color[n%(color.length)];
  35. }
  36.  
  37. function getDoughnutData(base)
  38. {
  39.     console.log('getDoughnutData('+base+')');
  40.     if (base[base.length-1] != '/') {
  41. 	base += '/';
  42.     }
  43.     base += '*';
  44.     
  45.     var data = [];
  46.     var dirs = P4JsApi.p4('dirs '+base);
  47.     for (var i=0; i<dirs.size; i++) {
  48. 	var dir = dirs.data[i].dir;
  49. 	var rv = P4JsApi.p4('sizes -hs '+dir+'/...');
  50. 	console.log(dir); 	console.log(rv);
  51. 	var cp = getColorPairs(i);
  52. 	console.log(cp.label);
  53. 	data.push({
  54. 	    value: rv.data[0].fileSize
  55. 	    ,label: dir   // rv.data[0].path
  56. 	    ,color: cp.color
  57.             ,highlight: cp.highlight
  58. 	});
  59.     }
  60.     return data;
  61. }
  62. function foo(base)
  63. {
  64.  
  65.     var ctx = document.getElementById('myChart').getContext('2d');
  66.     myChart = new Chart(ctx).Doughnut(getDoughnutData(base), {
  67.  
  68. 	//Boolean - Whether we should show a stroke on each segment
  69. 	segmentShowStroke : true,
  70.  
  71. 	//String - The colour of each segment stroke
  72. 	segmentStrokeColor : "#fff",
  73.  
  74. 	//Number - The width of each segment stroke
  75. 	segmentStrokeWidth : 2,
  76.  
  77. 	//Number - The percentage of the chart that we cut out of the middle
  78. 	percentageInnerCutout : 50, // This is 0 for Pie charts
  79.  
  80. 	//Number - Amount of animation steps
  81. 	animationSteps : 100,
  82.  
  83. 	//String - Animation easing effect
  84. 	animationEasing : "easeOutBounce",
  85.  
  86. 	//Boolean - Whether we animate the rotation of the Doughnut
  87. 	animateRotate : true,
  88.  
  89. 	//Boolean - Whether we animate scaling the Doughnut from the centre
  90. 	animateScale : false,
  91.  
  92. 	//String - A legend template
  93.     // 	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>"
  94.     });
  95.  
  96.     document.getElementById('myChart').onclick = function(evt){
  97. 	var activePoints = myChart.getSegmentsAtEvent(evt);
  98. 	console.log(activePoints[0]._saved.label);
  99. 	var j = myChart.segments.length
  100. 	for (var i=0; i<j; i++) {
  101. 	    console.log(myChart.segments[i]);
  102. 	    myChart.removeData();
  103. 	}
  104. 	data = getDoughnutData(activePoints[0]._saved.label);
  105. 	for (var i=0; i<data.length; i++) {
  106. 	    console.log(myChart.addData(data[i], i));
  107. 	}
  108. 	// myChart.update();
  109.     };
  110. }
  111.  
  112. var tgt = P4JsApi.getSelection();
  113. if (tgt == []) {
  114.     tgt = '//';
  115. } else {
  116.     tgt = tgt[0];
  117.     if (tgt.slice(0,12) === 'p4:///files/') {
  118. 	tgt = '//'+tgt.slice(12);
  119.     }
  120. }
  121. console.log(tgt);
  122. foo(tgt);
  123. </script>
  124.  
  125.     <h1>Instruction</h1>
  126.     <ol>
  127.     <li> select a directory in the depot view; </li>
  128.     <li>right click on the page and select refresh;</li>
  129.     <li>hover the doughnut chart and click on one of the segments to drill down.</li>
  130.  
  131.     </ol>
  132.     
  133.   </body>
  134. </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 s...izes" 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 :) «		 9 years ago