A Pen by Joe.

index.html

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

script.js

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 = 7; // 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();
});

SIEM-EPS-Calculator.markdown

SIEM EPS Calculator

Made by me.

A Pen by Joe on CodePen.

License.

style.css

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;
}