diff --git a/lib/vmpooler/public/dashboard.css b/lib/vmpooler/public/dashboard.css index 3134e8d..86680a9 100644 --- a/lib/vmpooler/public/dashboard.css +++ b/lib/vmpooler/public/dashboard.css @@ -140,5 +140,5 @@ body, .tick { fill: none; - stroke: #eee; + stroke: #ddd; } diff --git a/lib/vmpooler/public/img/bg.png b/lib/vmpooler/public/img/bg.png new file mode 100644 index 0000000..f07c531 Binary files /dev/null and b/lib/vmpooler/public/img/bg.png differ diff --git a/lib/vmpooler/public/lib/stats-vmpooler-pool.js b/lib/vmpooler/public/lib/stats-vmpooler-pool.js index 83d343f..689f144 100644 --- a/lib/vmpooler/public/lib/stats-vmpooler-pool.js +++ b/lib/vmpooler/public/lib/stats-vmpooler-pool.js @@ -74,6 +74,27 @@ d3.json( pool_url+'?history=1', .attr( 'width', pool_width ) .attr( 'height', pool_height ); + defs = stats_vmpooler_pool__svg[ pool ].append( 'svg:defs' ); + + defs.append( 'svg:pattern' ) + .attr( 'id', 'background' ) + .attr( 'patternUnits', 'userSpaceOnUse' ) + .attr( 'width', '600px' ) + .attr( 'height', '100px' ) + .append( 'svg:image' ) + .attr( 'xlink:href', '/img/bg.png' ) + .attr( 'x', 0 ) + .attr( 'y', 0 ) + .attr( 'width', '600px' ) + .attr( 'height', '100px' ); + + stats_vmpooler_pool__svg[ pool ] + .append( 'path' ) + .attr( 'class', 'area' ) + .attr( 'fill', 'url( #background )' ) + .attr( 'opacity', '0.50' ) + .attr( 'd', area( stats_vmpooler_pool__data[ pool ][ 'r' ] ) ); + stats_vmpooler_pool__svg[ pool ] .append( 'g' ) .attr( 'class', 'x tick' ) @@ -140,7 +161,7 @@ d3.json( pool_url+'?history=1', .append( 'path' ) .attr( 'class', 'area' ) .attr( 'fill', statuscolor ) - .attr( 'opacity', '0.25' ) + .attr( 'opacity', '0.35' ) .attr( 'd', area( stats_vmpooler_pool__data[ pool ][ 'r' ] ) ); stats_vmpooler_pool__svg[ pool ] diff --git a/lib/vmpooler/public/lib/stats-vmpooler-running.js b/lib/vmpooler/public/lib/stats-vmpooler-running.js index 2e0bced..146a566 100644 --- a/lib/vmpooler/public/lib/stats-vmpooler-running.js +++ b/lib/vmpooler/public/lib/stats-vmpooler-running.js @@ -118,9 +118,9 @@ d3.json( running_url+'?history=1', var svg = d3.select( '#stats-vmpooler-running' ) .append( 'svg' ) .attr( 'height', running_height ) - .attr( 'width', '100%' ) - .style( 'margin-top', '15px' ) - .style( 'margin-bottom', '10px' ) + .attr( 'width', ( document.getElementById( 'stats-vmpooler-running' ).offsetWidth - 35 ) ) + .style( 'margin', '15px 0px 0px 0px' ) + .style( 'padding', '0px 10px 10px 10px' ) .append( 'g' ); var mysvg = svg.selectAll( '#stats-vmpooler-running' ) @@ -128,6 +128,27 @@ d3.json( running_url+'?history=1', .enter() .append( 'g' ); + defs = mysvg.append( 'svg:defs' ); + + defs.append( 'svg:pattern' ) + .attr( 'id', 'background' ) + .attr( 'patternUnits', 'userSpaceOnUse' ) + .attr( 'width', '600px' ) + .attr( 'height', '100px' ) + .append( 'svg:image' ) + .attr( 'xlink:href', '/img/bg.png' ) + .attr( 'x', 0 ) + .attr( 'y', 0 ) + .attr( 'width', '600px' ) + .attr( 'height', '100px' ); + + mysvg + .append( 'path' ) + .attr( 'class', 'area' ) + .attr( 'fill', 'url( #background )' ) + .attr( 'opacity', '0.50' ) + .attr( 'd', function( d ) { return area( d.values ); } ); + mysvg.append( 'path' ) .attr( 'd', function( d ) { return area( d.values ); } ) .attr( 'clas', 'area' )