calculator.html

<!--calculator start-->
<style>
.noUi-tooltip,
.noUi-value {
	text-align: center;
	white-space: nowrap
}

.noUi-target,
.noUi-target * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.noUi-base,
.noUi-connects {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1
}

.noUi-connects {
	overflow: hidden;
	z-index: 0;
	border-radius: 3px
}

.noUi-connect,
.noUi-origin {
	will-change: transform;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
	left: auto;
	right: 0
}

.noUi-horizontal .noUi-origin {
	height: 0
}

.noUi-touch-area {
	height: 100%;
	width: 100%
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
	-webkit-transition: transform .3s;
	transition: transform .3s
}

.noUi-state-drag * {
	cursor: inherit!important
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
	right: -17px;
	left: auto
}

.noUi-draggable {
	cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
	cursor: ns-resize
}

.noUi-active {
	box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB
}

.noUi-handle:after {
	left: 17px
}

.noUi-pips,
.noUi-pips * {
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.noUi-pips {
	position: absolute;
	color: #999
}

.noUi-value {
	position: absolute
}

.noUi-value-sub {
	color: #ccc;
	font-size: 10px
}

.noUi-pips-horizontal {
	padding: 10px 0;
	height: 80px;
	top: 100%;
	left: 0;
	width: 100%
}

.noUi-value-horizontal {
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%)
}

.noUi-rtl .noUi-value-horizontal {
	-webkit-transform: translate(50%, 50%);
	transform: translate(50%, 50%)
}

.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px
}

.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
	height: 15px
}

.scality_calculator * {
	font-family: Roboto;
}

.scality_calculator input::-webkit-outer-spin-button,
.scality_calculator input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.scality_calculator input[type=number] {
	-moz-appearance: textfield;
}

.noUi-connect {
	background: rgba(240, 80, 43, 1);
}

.noUi-horizontal {
	height: 10px;
	width: 80%;
}

.noUi-target {
	position: relative;
	direction: ltr;
	background: rgba(230, 231, 232, 1);
	border-radius: 4px;
	border: 0px solid #fff;
	box-shadow: none;
}

.noUi-horizontal .noUi-tooltip {
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	left: 50%;
	bottom: -160%;
}

.noUi-tooltip {
	display: block;
	position: absolute;
	border: 0px solid #fff;
	border-radius: 3px;
	background: #fff;
	color: #000;
	padding: 0px;
	font-size: 12px;
	font-weight: 400;
}

.noUi-handle {
	position: absolute;
	background: #ffffff;
	box-shadow: none;
	background-color: #ffffff;
	border-radius: 12px;
	border: 3px solid rgba(240, 80, 43, 1);
	z-index: 10;
	outline: none;
	cursor: pointer;
}

.noUi-horizontal .noUi-handle {
	top: -6px;
	height: 22px;
	width: 22px;
}

.noUi-horizontal .noUi-handle:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 4px;
	left: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 5px;
	background: rgba(240, 80, 43, 1);
}

.scality_calculator_row {
	margin-bottom: 75px;
}

.scality_calculator_name {
	color: #000;
	font-weight: 500;
	line-height: 25px;
	font-size: 16px;
	padding-bottom: 10px;
}

.scality_calculator_name span,
.scality_calculator_val span {
	color: rgba(147, 149, 151, 1);
	font-weight: 400;
	font-size: 12px;
}

.scality_calculator input[type=number] {
	width: 80%;
	margin-bottom: 0px;
	padding: 10px;
	padding-bottom: 3px;
	color: rgba(240, 80, 43, 1);
	border: 0px;
	border-style: solid;
	border-radius: 0;
	border-color: inherit;
	outline: medium none;
	font-weight: 500;
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	border-image: none;
	background-clip: padding-box;
	-moz-border-left-colors: none;
	border-bottom: 1px solid rgba(147, 149, 151, 1);
}

.scality_result_txt {
	font-size: 17px;
	text-align: center;
	font-weight: 400;
	color: rgba(147, 149, 151, 1);
	line-height: normal;
	margin-bottom: 20px;
}

g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(2) {
	color: rgba(240, 80, 43, 1)!important;
	font-size: 16px;
	fill: rgba(240, 80, 43, 1)!important;
}

g.highcharts-axis-labels.highcharts-xaxis-labels text:nth-child(1) {
	color: rgba(147, 149, 151, 1)!important;
	font-size: 16px;
	fill: rgba(147, 149, 151, 1)!important;
}

.sc_chart_value {
	font-size: 25px;
	color: rgba(240, 80, 43, 1);
	fill: rgba(240, 80, 43, 1);
	font-weight: 500;
}

span#sc_reduction_capacity {
	color: rgba(243, 117, 51, 1);
	font-size: 30px;
	font-weight: bold;
	display: block;
}

#scalitychart .highcharts-label:nth-child(1) .sc_chart_value {
	color: rgba(147, 149, 151, 1);
	fill: rgba(147, 149, 151, 1);
}

.scality_calculator_column {
	float: left;
	width: 60%;
	padding: 20px;
}

.scality_calculator_column:nth-child(1) {
	padding-top: 70px;
	width: 40%;
}

@media all and (max-width:600px) {
	.scality_calculator_column,
	.scality_calculator_column:nth-child(1) {
		float: none;
		width: 100%;
	}
	.noUi-horizontal {
		width: 90%;
	}
	.scality_calculator input[type=number] {
		width: 90%;
	}
}
 </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.1/nouislider.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="scality_calculator">
   <div class="scality_calculator_row">
      <div class="scality_calculator_column">
         <div class="scality_calculator_row">
            <div class="scality_calculator_name">
               The amount of capacity on the NAS  
            </div>
            <div class="scality_calculator_val">
               <div id="sc_amount_capacity" class="scality_calculator_slider"></div>
            </div>
         </div>
         <div class="scality_calculator_row">
            <div class="scality_calculator_name">
               Percentage of inactive data <span>(%)</span>
            </div>
            <div class="scality_calculator_val">
               <div id="inactive_data" class="scality_calculator_slider"></div>
            </div>
         </div>
         <div class="scality_calculator_row">
            <div class="scality_calculator_name">
               The backup retention policy <span>(Months)</span> 
            </div>
            <div class="scality_calculator_val">
               <div id="backup_policy" class="scality_calculator_slider"></div>
            </div>
         </div>
      </div>
      <div class="scality_calculator_column">
         <div class="scality_calculator_row">
            <div class="scality_result_txt">
               <span id="sc_reduction_capacity">53%</span> Reduction in required backup footprint with Scality NAS Archiver<br />
               Reclaim <span id="sc_result_reclaim">1.6</span> PB of premium capacity on your Tier-1 NAS 
            </div>
            <div id="scalitychart" style="min-width: 310px; height: 350px; margin: 0 auto"></div>
         </div>
      </div>
      <div style="clear:left;"></div>
   </div>
</div>
<script>
Number.prototype.formatMoney = function (c, d, t) {
	var n = this,
		c = isNaN(c = Math.abs(c)) ? 2 : c,
		d = d == undefined ? "." : d,
		t = t == undefined ? "," : t,
		s = n < 0 ? "-" : "",
		i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
		j = (j = i.length) > 3 ? j % 3 : 0;
	return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d +
		Math.abs(n - i).toFixed(c).slice(2) : "");
};

var sc_amount_capacity = document.getElementById("sc_amount_capacity");
noUiSlider.create(sc_amount_capacity, {
	start: [1000],
	step: 100,
	connect: [true, false],
	tooltips: [true],
	format: {
		from: Number,
		to: function (value) {	
		     return ((parseInt(value) / 1000).formatMoney(1, '.', ',') + " PB");
		}
	},
	range: {
		min: [200],
		max: [20000]
	}

});

var inactive_data = document.getElementById("inactive_data");
noUiSlider.create(inactive_data, {
	start: [60],
	step: 1,
	connect: [true, false],
	tooltips: [true],
	format: {
		from: Number,
		to: function (value) {
			return (parseInt(value) + " %");
		}
	},
	range: {
		min: [0],
		max: [100]
	}

});

var backup_policy = document.getElementById("backup_policy");
noUiSlider.create(backup_policy, {
	start: [12],
	step: 1,
	connect: [true, false],
	tooltips: [true],
	format: {
		from: Number,
		to: function (value) {
			return (parseInt(value) + " Months");
		}
	},
	range: {
		min: [1],
		max: [36]
	}

});

sc_amount_capacity.noUiSlider.on('update', function (values, handle) {
	calculateScality();
});

inactive_data.noUiSlider.on('update', function (values, handle) {
	calculateScality();
});

backup_policy.noUiSlider.on('update', function (values, handle) {
	calculateScality();
});

function calculateScality() {
	var cs = {
		idp: parseFloat(inactive_data.noUiSlider.get()) / 100,
		bp: parseFloat(backup_policy.noUiSlider.get()),
		ratio: 50,
		trad: {},
		nas: {}
	};
	var in_v = parseFloat(sc_amount_capacity.noUiSlider.get());

	if (in_v > 200 && in_v <= 900) {
		cs.ac = in_v;

	} else {
		cs.ac = in_v * 1000;

	}

	cs.trad.weekly = 4 * cs.ac;
	cs.trad.monthly = cs.bp * cs.ac;
	cs.trad.yearly = cs.ac;
	cs.trad.total_c = (cs.trad.weekly + cs.trad.monthly + cs.trad.yearly) * (cs.ratio / 100);

	cs.nas.arch = cs.ac * cs.idp;
	cs.nas.active = cs.ac - cs.nas.arch;
	cs.nas.weekly = 4 * cs.nas.active;
	cs.nas.monthly = cs.bp * cs.nas.active;
	cs.nas.yearly = cs.nas.active;
	cs.nas.total_c = cs.nas.arch + (cs.nas.weekly + cs.nas.monthly + cs.nas.yearly) * (cs.ratio / 100);
	cs.ps = ((cs.trad.total_c - cs.nas.total_c) / cs.trad.total_c) * 100;
	cs.sc_result_reclaim = (cs.ac / 1000) * (cs.ps / 100);


	drawChartSc(cs.trad.total_c, cs.nas.total_c);
	document.getElementById('sc_result_reclaim').innerHTML = (cs.sc_result_reclaim).formatMoney(1, '.', ',');
	document.getElementById('sc_reduction_capacity').innerHTML = (cs.ps).formatMoney(1, '.', '.') + '%';

}

function drawChartSc(t, n) {


	Highcharts.chart('scalitychart', {
		chart: {
			type: 'column',
			backgroundColor: 'rgba(255, 255, 255, 0.0)',
			spacingTop: 30

		},
		title: {
			text: null
		},
		subtitle: {
			text: null
		},
		xAxis: {
			categories: [
				'Traditional',
				'Scality RING'
			],
			crosshair: true,
			title: {
				text: null
			},
			minorGridLineWidth: 0,
			lineColor: 'rgba(230, 231, 232, 1)',
			minorTickLength: 0,
			tickLength: 0,
			labels: {
				style: {

					fontSize: 18,
					fontWeight: 'bold',
					formatter: function () {

					}
				}
			}

		},
		yAxis: {
			min: 0,
			title: {
				text: null
			},
			lineWidth: 0,
			minorGridLineWidth: 0,
			lineColor: 'transparent',
			minorTickLength: 0,
			tickLength: 0,
			gridLineColor: 'transparent',
			labels: {
				enabled: false
			}
		},
		tooltip: {
			enabled: false

		},
		plotOptions: {
			allowPointSelect: false,
			column: {

				borderWidth: 0,
				colorByPoint: true
			},
			series: {
				enableMouseTracking: false,
				animation: false,
				states: {
					hover: {
						enabled: false
					}
				},
				dataLabels: {
					enabled: true,

					crop: false,
					overflow: 'none',
					style: {

						textOutline: false,


					},
					y: 10,

formatter: function () {
var v = this.y / 1000;
						return ' <div class="sc_chart_value">' + v.formatMoney(1, '.', ',') + ' PB</div>';
					}

				},
				borderWidth: 0
			}

		},
		colors: [
			'rgba(230, 231, 232, 1)',
			'rgba(240, 80, 43, 1)'

		],
		credits: {
			enabled: false
		},
		exporting: false,
		legend: {
			enabled: false
		},
		series: [{

			data: [t, n]

		}]
	});
}
</script>
<!--calculator end-->