JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.8/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.2.8/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/15.2.8/js/dx.all.js"></script>
<div id="sales"></div>
<div id="popover"></div>

JavaScript

var sales = [{
  "id": 1,
  "region": "North America",
  "country": "USA",
  "city": "New York",
  "amount": 1740,
  "date": "2013/01/06"
}, {
  "id": 2,
  "region": "North America",
  "country": "USA",
  "city": "Los Angeles",
  "amount": 850,
  "date": "2013/01/13"
}, {
  "id": 3,
  "region": "North America",
  "country": "USA",
  "city": "Denver",
  "amount": 2235,
  "date": "2013/01/07"
}, {
  "id": 4,
  "region": "North America",
  "country": "CAN",
  "city": "Vancouver",
  "amount": 1965,
  "date": "2013/01/03"
}, {
  "id": 5,
  "region": "North America",
  "country": "CAN",
  "city": "Edmonton",
  "amount": 880,
  "date": "2013/01/10"
}, {
  "id": 6,
  "region": "South America",
  "country": "BRA",
  "city": "Rio de Janeiro",
  "amount": 5260,
  "date": "2013/01/17"
}, {
  "id": 7,
  "region": "South America",
  "country": "ARG",
  "city": "Buenos Aires",
  "amount": 2790,
  "date": "2013/01/21"
}, {
  "id": 8,
  "region": "South America",
  "country": "PRY",
  "city": "Asuncion",
  "amount": 3140,
  "date": "2013/01/01"
}, {
  "id": 9,
  "region": "Europe",
  "country": "GBR",
  "city": "London",
  "amount": 6175,
  "date": "2013/01/24"
}, {
  "id": 10,
  "region": "Europe",
  "country": "DEU",
  "city": "Berlin",
  "amount": 4575,
  "date": "2013/01/11"
}, {
  "id": 11,
  "region": "Europe",
  "country": "ESP",
  "city": "Madrid",
  "amount": 3680,
  "date": "2013/01/12"
}, {
  "id": 12,
  "region": "Europe",
  "country": "RUS",
  "city": "Moscow",
  "amount": 2260,
  "date": "2013/01/01"
}, {
  "id": 13,
  "region": "Asia",
  "country": "CHN",
  "city": "Beijing",
  "amount": 2910,
  "date": "2013/01/26"
}, {
  "id": 14,
  "region": "Asia",
  "country": "JPN",
  "city": "Tokio",
  "amount": 8400,
  "date": "2013/01/05"
}, {
  "id": 15,
  "region": "Asia",
  "country": "KOR",
  "city": "Seoul",
  "amount": 1325,
  "date": "2013/01/14"
}, {
  "id": 16,
  "region": "Australia",
  "country": "AUS",
  "city": "Sydney",
  "amount": 3920,
  "date":...