puppetlabs/vmpooler
2
0
Fork 0
mirror of https://github.com/puppetlabs/vmpooler.git synced 2026-01-26 10:08:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add textured backgrounds to SVG area pathes

Browse source
This commit is contained in:
Scott Schneider 2014-03-11 12:49:42 -07:00
parent 3af680f860
commit 4b3b05ee37
4 changed files with 47 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/vmpooler/public/dashboard.css
View file

@ -140,5 +140,5 @@ body,
.tick {
fill: none;
stroke: #eee;
stroke: #ddd;
}

BIN
lib/vmpooler/public/img/bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

23
lib/vmpooler/public/lib/stats-vmpooler-pool.js
View file

@ -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 ]

27
lib/vmpooler/public/lib/stats-vmpooler-running.js
View file

@ -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' )