rowanhogan/leaderboard.html

## leaderboard.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Charity Leaderboard</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numbro/2.0.5/numbro.min.js"></script>
    <style type='text/css'>
      body {
        padding: 1.5rem;
        margin: auto;
        max-width: 50em;
        font-size: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        -webkit-font-smoothing: antialiased;
        text-align: center;
      }

      h1 {
        text-align: left;
        font-size: 1.5em;
        margin-bottom: 1.5em;
      }

      h1 div + div {
        margin-top: 0.5em;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        opacity: 0.5;
        font-size: 85%;
        text-transform: uppercase;
        letter-spacing: 0.01em;
      }

      th, td {
        padding: 1em;
        text-align: left;
        font-weight: normal;
      }

      td:last-child {
        font-weight: bold;
      }

      tr:nth-child(even) td {
        background: aliceblue;
      }

    </style>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      (async () => {
        const params = new URLSearchParams(location.search.slice(1))
        const campaignId = params.get('campaign_id') || 'au-21629'

        const appEl = document.getElementById('app')
        appEl.innerHTML = 'Loading...'

        const { data: { campaigns } } = await axios.get(`https://everydayhero.com/api/v2/campaigns?ids=${campaignId}`)
        const { data: { results } } = await axios.get(`https://everydayhero.com/api/v2/search/pages_totals?campaign_id=${campaignId}&limit=1000`)

        const charities = _.groupBy(results, 'page.charity_name')

        const mappedCharities = _.keys(charities).map((charity) => {
          const value = charities[charity]

          return {
            name: charity,
            raised: _.sumBy(value, 'page.amount.cents') || 0
          }
        })

        const sortedCharities = _.orderBy(mappedCharities, ['raised', 'name'], ['desc', 'asc'])

        // Render DOM
        appEl.innerHTML = ''

        // Title
        const heading = document.createElement('h1')

        campaigns.forEach((campaign) => {
          const title = document.createElement('div')
          title.innerHTML = campaign.name
          heading.appendChild(title)
        })

        appEl.appendChild(heading)

        // Table
        const table = document.createElement('table')
        const header = document.createElement('tr')
        const name = document.createElement('th')
        const raised = document.createElement('th')
        name.innerHTML = 'Charity'
        raised.innerHTML = 'Amount Raised'
        header.appendChild(name)
        header.appendChild(raised)
        table.appendChild(header)

        sortedCharities.forEach((charity) => {
          const row = document.createElement('tr')
          const name = document.createElement('td')
          const raised = document.createElement('td')

          name.innerHTML = charity.name
          raised.innerHTML = numbro(charity.raised / 100).format('$0,0.00')

          row.appendChild(name)
          row.appendChild(raised)
          table.appendChild(row)
        })

        return appEl.appendChild(table)
      })();

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Charity Leaderboard</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/numbro/2.0.5/numbro.min.js"></script>
	<style type='text/css'>
	body {
	padding: 1.5rem;
	margin: auto;
	max-width: 50em;
	font-size: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	-webkit-font-smoothing: antialiased;
	text-align: center;
	}

	h1 {
	text-align: left;
	font-size: 1.5em;
	margin-bottom: 1.5em;
	}

	h1 div + div {
	margin-top: 0.5em;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	th {
	opacity: 0.5;
	font-size: 85%;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	}

	th, td {
	padding: 1em;
	text-align: left;
	font-weight: normal;
	}

	td:last-child {
	font-weight: bold;
	}

	tr:nth-child(even) td {
	background: aliceblue;
	}

	</style>
	</head>
	<body>
	<div id="app"></div>

	<script type="text/javascript">
	(async () => {
	const params = new URLSearchParams(location.search.slice(1))
	const campaignId = params.get('campaign_id') \|\| 'au-21629'

	const appEl = document.getElementById('app')
	appEl.innerHTML = 'Loading...'

	const { data: { campaigns } } = await axios.get(`https://everydayhero.com/api/v2/campaigns?ids=${campaignId}`)
	const { data: { results } } = await axios.get(`https://everydayhero.com/api/v2/search/pages_totals?campaign_id=${campaignId}&limit=1000`)

	const charities = _.groupBy(results, 'page.charity_name')

	const mappedCharities = _.keys(charities).map((charity) => {
	const value = charities[charity]

	return {
	name: charity,
	raised: _.sumBy(value, 'page.amount.cents') \|\| 0
	}
	})

	const sortedCharities = _.orderBy(mappedCharities, ['raised', 'name'], ['desc', 'asc'])

	// Render DOM
	appEl.innerHTML = ''

	// Title
	const heading = document.createElement('h1')

	campaigns.forEach((campaign) => {
	const title = document.createElement('div')
	title.innerHTML = campaign.name
	heading.appendChild(title)
	})

	appEl.appendChild(heading)

	// Table
	const table = document.createElement('table')
	const header = document.createElement('tr')
	const name = document.createElement('th')
	const raised = document.createElement('th')
	name.innerHTML = 'Charity'
	raised.innerHTML = 'Amount Raised'
	header.appendChild(name)
	header.appendChild(raised)
	table.appendChild(header)

	sortedCharities.forEach((charity) => {
	const row = document.createElement('tr')
	const name = document.createElement('td')
	const raised = document.createElement('td')

	name.innerHTML = charity.name
	raised.innerHTML = numbro(charity.raised / 100).format('$0,0.00')

	row.appendChild(name)
	row.appendChild(raised)
	table.appendChild(row)
	})

	return appEl.appendChild(table)
	})();

	</script>
	</body>
	</html>