Made by me.
Created
May 18, 2014 00:09
-
-
Save packetinspector/1e9dcc36f8caed7b4bc4 to your computer and use it in GitHub Desktop.
A Pen by Joe.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="input_eps" > | |
<input type="number" name="eps" value="100" size="5" id="eps">Events per | |
<select name="type" id="box"><option value="second">Second</option> | |
<option value="day">Day</option> | |
</select> | |
</div> | |
<div id="output" style="float:left"> | |
<table id="results" class="tg" style="table-layout: fixed; width: 500px"> <colgroup> <col style="width: 128px"> <col style="width: 128px"> <col style="width: 64px"> <col style="width: 128px"> <col style="width: 128px"> </colgroup><tr> <th class="tg-zlxb1"></th> <th class="tg-zlxb1"></th> <th class="tg-zlxb1"></th> <th class="tg-zlxb" colspan="2">Storage</th> </tr> <tr> <th class="tg-zlxb1"></th> <th class="tg-yhmw">Events</th> <th class="tg-zlxb1"></th> <th class="tg-yhmw">Raw</th> <th class="tg-yhmw">Compressed</th> </tr> <tr> <td class="tg-6eq8">Second</td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> </tr></tr> <tr> <td class="tg-6eq8">Hour</td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> </tr> <tr> <td class="tg-6eq8">Day</td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> </tr> <tr> <td class="tg-6eq8">Month</td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> </tr> <tr> <td class="tg-6eq8">Year</td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> <td class="tg-5hgy"></td> <td class="tg-s6z2"></td> </tr> </table> | |
</div> | |
<div id="sliders" style="width:300px;height:250px;margin-left:700px;display: block"> | |
<div id="size" style="height: 230px;float: left;"></div> | |
<div id="compression" style="margin-left: 50px;height:230px;"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var hour = 3600; | |
var day = 86400; | |
//You can change these | |
var message_size = 800; //Size in bytes | |
/* # ls -al /tmp/size* Sample log size | |
165 /tmp/size-asa | |
486 /tmp/size-forti | |
376 /tmp/size-linux | |
1163/tmp/size-windows | |
*/ | |
var compression_ratio = 10; // X:1 | |
function calc2 () { | |
var e = parseFloat($("#eps").val()); | |
if ($( "#box option:selected" ).val() == 'day') { | |
e = e / day; | |
} | |
message_size = parseFloat($("#size").val()); | |
compression_ratio = parseFloat($("#compression").val()); | |
var time = [ 1 , 60 , 86400, 86400*30, 86400*365 ]; | |
var rows = $("#results tr:gt(1)"); | |
rows.each(function(row) { | |
$(this).children("td:gt(0)").each(function(col) { | |
//$(this).text(row + ' ' + col); | |
if (col === 0) { | |
r = time[row] * e; | |
$(this).text(numberWithCommas(r)); | |
} | |
if (col === 2) { | |
r = time[row] * e * message_size; | |
$(this).text(bytesToSize(r)); | |
} | |
if (col === 3) { | |
r = (time[row] * e * message_size) / compression_ratio; | |
$(this).text(bytesToSize(r)); | |
} | |
}); | |
}); | |
} | |
function numberWithCommas(n) { | |
n = parseFloat(n).toFixed(2); | |
var parts=n.toString().split("."); | |
return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); | |
} | |
function bytesToSize(bytes) { | |
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']; | |
if (bytes === 0) return 'n/a'; | |
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); | |
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; | |
} | |
$("#eps, #box, #size, #compression").bind("change paste keyup", function () { | |
calc2(); | |
}); | |
$( document ).ready(function() { | |
var customToolTip1 = $.Link({ | |
target: '-tooltip-<div class="tooltip"></div>', | |
method: function ( value ) { | |
// The tooltip HTML is 'this', so additional | |
// markup can be inserted here. | |
$(this).html( | |
'<strong>Message Size</strong>' + | |
'<span>' + value + '</span>' | |
); | |
} | |
}); | |
var customToolTip2 = $.Link({ | |
target: '-tooltip-<div class="tooltip2"></div>', | |
method: function ( value ) { | |
// The tooltip HTML is 'this', so additional | |
// markup can be inserted here. | |
$(this).html( | |
'<strong>Compression</strong>' + | |
'<span>' + value + ':1</span>' | |
); | |
} | |
}); | |
$("#size").noUiSlider({ | |
start: message_size, | |
orientation: "vertical", | |
handles: 1, | |
step: 10, | |
range: { 'min': 400, 'max': 4000 }, | |
serialization: { | |
lower: [ customToolTip1 ] | |
} | |
}); | |
$("#compression").noUiSlider({ | |
start: compression_ratio, | |
orientation: "vertical", | |
handles: 1, | |
step: 1, | |
range: { 'min': 1, 'max': 20 }, | |
serialization: { | |
lower: [ customToolTip2 ] | |
} | |
}); | |
calc2(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
input[type=number] { | |
border: 5px solid #0fadec; | |
padding: 10px; | |
background: rgba(100,100,100,0.5); | |
margin: 0 5px 5px 5px; | |
font-size:1.5em; | |
font-weight: bold; | |
width:130px; | |
} | |
body{color:#252525;font-family: "proxima-nova",Arial,Helvetica,sans-serif;font-size:16px} | |
.tg {border-collapse:collapse;border-spacing:0;border-color:#0fadec;} | |
.tg td{font-family:"proxima-nova",Arial,Helvetica,sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#0fadec;color:#FF;} | |
.tg th{font-family:"proxima-nova",Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:;color:#FF;background-color:#0fadec} | |
.tg-5hgy,.tg-s6z2 {text-align: center;} | |
.tg .tg-zlxb{color:#FF;background-color:#FFF;} | |
.tg .tg-zlxb1{border:none;color:#FF;background-color:#FFF;} | |
.tg .tg-q82y{color:#FF;background-color:#FFF;} | |
.tg .tg-6eq8{font-weight:bold;} | |
.tooltip { | |
display: block; | |
position: absolute; | |
border: 1px solid #D9D9D9; | |
font: 400 12px/12px Arial; | |
border-radius: 3px; | |
background: #fff; | |
top: -0px; | |
padding: 7px; | |
left: -100px; | |
text-align: center; | |
width: 90px; | |
} | |
.tooltip strong { | |
display: block; | |
padding: 2px; | |
} | |
.tooltip2 { | |
display: block; | |
position: absolute; | |
border: 1px solid #D9D9D9; | |
font: 400 12px/12px Arial; | |
border-radius: 3px; | |
background: #fff; | |
top: -0px; | |
padding: 7px; | |
left: 30px; | |
text-align: center; | |
width: 90px; | |
} | |
.tooltip2 strong { | |
display: block; | |
padding: 2px; | |
} | |
/* Functional styling; | |
* These styles are required for noUiSlider to function. | |
* You don't need to change these rules to apply your design. | |
*/ | |
.noUi-target, | |
.noUi-target * { | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-ms-touch-action: none; | |
-ms-user-select: none; | |
-moz-user-select: none; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.noUi-base { | |
width: 18px; | |
height: 230px; | |
position: relative; | |
} | |
.noUi-origin { | |
position: absolute; | |
right: 0; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
} | |
.noUi-handle { | |
position: relative; | |
z-index: 1; | |
} | |
.noUi-stacking .noUi-handle { | |
/* This class is applied to the lower origin when | |
its values is > 50%. */ | |
z-index: 10; | |
} | |
.noUi-stacking + .noUi-origin { | |
/* Fix stacking order in IE7, which incorrectly | |
creates a new context for the origins. */ | |
*z-index: -1; | |
} | |
.noUi-state-tap .noUi-origin { | |
-webkit-transition: left 0.3s, top 0.3s; | |
transition: left 0.3s, top 0.3s; | |
} | |
.noUi-state-drag * { | |
cursor: inherit !important; | |
} | |
/* Slider size and handle placement; | |
*/ | |
.noUi-horizontal { | |
height: 18px; | |
} | |
.noUi-horizontal .noUi-handle { | |
width: 34px; | |
height: 28px; | |
left: -17px; | |
top: -6px; | |
} | |
.noUi-horizontal.noUi-extended { | |
padding: 0 15px; | |
} | |
.noUi-horizontal.noUi-extended .noUi-origin { | |
right: -15px; | |
} | |
.noUi-vertical { | |
width: 18px; | |
height: 200px; | |
} | |
.noUi-vertical .noUi-handle { | |
width: 28px; | |
height: 34px; | |
left: -6px; | |
top: -17px; | |
} | |
.noUi-vertical.noUi-extended { | |
padding: 20px 0; | |
} | |
.noUi-vertical.noUi-extended .noUi-origin { | |
bottom: -15px; | |
} | |
/* Styling; | |
*/ | |
.noUi-background { | |
background: #FAFAFA; | |
box-shadow: inset 0 1px 1px #f0f0f0; | |
} | |
.noUi-connect { | |
background: #3FB8AF; | |
box-shadow: inset 0 0 3px rgba(51,51,51,0.45); | |
-webkit-transition: background 450ms; | |
transition: background 450ms; | |
} | |
.noUi-origin { | |
border-radius: 2px; | |
} | |
.noUi-target { | |
border-radius: 4px; | |
border: 1px solid #D3D3D3; | |
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; | |
} | |
.noUi-target.noUi-connect { | |
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB; | |
} | |
/* Handles and cursors; | |
*/ | |
.noUi-dragable { | |
cursor: w-resize; | |
} | |
.noUi-vertical .noUi-dragable { | |
cursor: n-resize; | |
} | |
.noUi-handle { | |
border: 1px solid #D9D9D9; | |
border-radius: 3px; | |
background: #FFF; | |
cursor: default; | |
box-shadow: inset 0 0 1px #FFF, | |
inset 0 1px 7px #EBEBEB, | |
0 3px 6px -3px #BBB; | |
} | |
.noUi-active { | |
box-shadow: inset 0 0 1px #FFF, | |
inset 0 1px 7px #DDD, | |
0 3px 6px -3px #BBB; | |
} | |
/* Handle stripes; | |
*/ | |
.noUi-handle:before, | |
.noUi-handle:after { | |
content: ""; | |
display: block; | |
position: absolute; | |
height: 14px; | |
width: 1px; | |
background: #0fadec; | |
left: 14px; | |
top: 6px; | |
} | |
.noUi-handle:after { | |
left: 17px; | |
} | |
.noUi-vertical .noUi-handle:before, | |
.noUi-vertical .noUi-handle:after { | |
width: 14px; | |
height: 1px; | |
left: 6px; | |
top: 14px; | |
} | |
.noUi-vertical .noUi-handle:after { | |
top: 17px; | |
} | |
/* Disabled state; | |
*/ | |
[disabled].noUi-connect, | |
[disabled] .noUi-connect { | |
background: #B8B8B8; | |
} | |
[disabled] .noUi-handle { | |
cursor: not-allowed; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment