Salary + Tax

by soulwire

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

CSS

html, body {
  margin: 0;
  height: 100%;
}

JavaScript

// Data

const PA = 11000;
const HIGHER_RATE_THRESHOLD = 43000;
const STANDARD_RATE = 0.2;
const HIGHER_RATE = 0.4;

const thousand = n => n * 1000;
const data = [];

for (
	let salary = thousand(30);
  salary < thousand(150);
  salary += thousand(2)
) {
	const taxable = salary - PA;
  const standard = Math.min(taxable, HIGHER_RATE_THRESHOLD);
  const higher = taxable - standard;
  const tax = standard * STANDARD_RATE + higher * HIGHER_RATE;
  const net = salary - tax;
  const ratio = tax / salary;
  data.push({ salary, taxable, standard, higher, tax, net, ratio });
}

console.table(data);

// Plot

const drawChart = () => {
	console.log('draw')
	const cols = ['Salary', 'Tax', 'Net'];
	const input = data.map(node =>
  	cols.map(name => node[name.toLowerCase()])
  );
  input.unshift(cols);
  const dataTable = google.visualization.arrayToDataTable(input);
  const options = {
	  title: 'Salary vs Tax',
    width: window.innerWidth,
    height: window.innerHeight,
    explorer: {}
  };
  const element = document.getElementById('chart');
  const graph = new google.visualization.LineChart(element);
  graph.draw(dataTable, options);
};

google.charts.load('current', { 'packages': [ 'corechart', 'line' ] });
google.charts.setOnLoadCallback(drawChart);