2018 Winter Olympics Medal Count

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

CSS

.flag img {
  border: 1px solid #dddddd;
  width: 29px;
  position: relative;
  top: -3px;
  left: -2px;
}

.flag .fancy-grid-cell {
  border-right-width: 0px;
}

.fancy-panel {
  border-top-right-radius: 11px !important;
  border-top-left-radius: 11px !important;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  Fancy.COLORS = ['#FFDF00', '#A8A8A8', '#965A38'];

  new FancyGrid({
    renderTo: 'container',
    theme: 'gray',
    title: 'Medal counts for the 2018 Winter Olympics in South Korea',
    footer: {
      source: {
        text: 'pyeongchang2018',
        link: 'https://www.pyeongchang2018.com/en/game-time/results/OWG2018/en/general/medal-standings.htm'
      }
    },
    width: 'fit',
    height: 'fit',
    data: data,
    trackOver: true,
    selModel: 'row',
    defaults: {
      width: 100,
      resizable: true
    },
    columns: [{
      type: 'order',
      width: 50,
      title: 'Rank'
    }, {
      index: 'flag',
      width: 40,
      type: 'image',
      cls: 'flag'
    }, {
      index: 'country',
      type: 'string',
      width: 80,
      cellAlign: 'left',
      title: 'Noc'
    }, {
      index: ['gold', 'silver', 'bronze'],
      type: 'hbar',
      width: 400,
      sortable: false,
      title: '',
      sparkConfig: {
        tipTpl: '{value}',
        stacked: true,
        tipFormat: function(o) {
          var data = o.data;

          return [
            'Overall medals: ' + (data.gold + data.silver + data.bronze) + '<br>',
            'Gold medals: ' + data.gold + '<br>',
            'Silver medals: ' + data.silver + '<br>',
            'Bronze medals: ' + data.bronze
          ].join("");
        }
      }
    }, {
      index: '(gold + silver + bronze)',
      type: 'number',
      width: 70,
      title: 'Total'
    }]
  });

});

var data = [{
  country: 'Norway',
  flag: 'https://www.pyeongchang2018.com/en/game-time/results/OWG2018/resCOMMON/img/flags/NOR.png',
  gold: 13,
  silver: 12,
  bronze: 10
}, {
  country: 'Germany',
  flag: 'https://www.pyeongchang2018.com/en/game-time/results/OWG2018/resCOMMON/img/flags/GER.png',
  gold: 13,
  silver: 7,
  bronze: 5
}, {
  country: 'Canada',
  flag:...