countries.html

---
layout: default
---

<div class="banner">
  <h1 class="banner-head">I have had beers from {{ site.data.countries | size }} different countries</h1>
</div>

<!-- Resources -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>

<!-- HTML -->
<div id="chartdiv"></div>

<div class="l-content information">
  <div class="pure-u-1" id="countries">
    <input class="search" placeholder="Filter">
    <table class="pure-table pure-table-striped" style="width: 100%;">
      <thead>
	      <tr>
	        <th class="sort" data-sort="name">Country</th>
	        <th class="sort" data-sort="checkins">Checkins</th>
	        <th class="sort" data-sort="breweries">Breweries</th>
	      </tr>
      </thead>
      <tbody class="list">
        {% for country in site.data.countries %}
        <tr>
          <td class="name">
            <span class="fi fi-{{ country.id | downcase }}"></span>
            {{ country.name }}
          </td>
          <td valign="top" class="checkins">{{ country.checkins }}</td>
          <td valign="top" class="breweries">{{ country.breweries }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <h3>Countries left to taste</h3>
  <p>{{ site.data.missing_countries | map: "name" | join: ", " }}</p>
</div>

<!-- Chart code -->
<script>
  let options = {
    valueNames: [ "name", "checkins", "breweries" ],
  };

  countryData = {{ site.data.countries | jsonify }};
  countryList = new List("countries", options);

  function zoomOut() {
    countryList.clear();
    countryList.add(countryData);
  }

  am5.ready(function() {
    var root = am5.Root.new("chartdiv");

    root.setThemes([
      am5themes_Animated.new(root)
    ]);

    var chart = root.container.children.push(am5map.MapChart.new(root, {
      panX: "translateX",
      panY: "translateY",
      projection: am5map.geoMercator()
    }));


    // Create main polygon series for countries
    // https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
    var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
      geoJSON: am5geodata_worldLow,
      exclude: ["AQ"]
    }));

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: "{name}",
      templateField: "settings"
    });

    var previousPolygon;
    polygonSeries.mapPolygons.template.on("active", function (active, target) {
      if (previousPolygon && previousPolygon != target) {
        previousPolygon.set("active", false);
      }
      if (target.get("active")) {
        polygonSeries.zoomToDataItem(target.dataItem );
        // TODO: Show beer had in each country
        // also need to change the table, probably easier to have two tables
        //countryList.clear();
        //countryList.add({name: "Beer", checkins: 3, brewery: "Brewery"});
      }
      else {
        zoomOut();
        chart.goHome();
      }
      previousPolygon = target;
    });
    
    polygonSeries.data.setAll(countryData);

    chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
    chart.chartContainer.get("background").events.on("click", function () {
      zoomOut();
      chart.goHome();
    })
    chart.appear(1000, 100);
  }); // end am5.ready()
</script>