Countries.js

// Copyright (C) 2018 Shamroy Pellew
//
// This file is part of MusicBrainz, the open internet music database,
// and is licensed under the GPL version 2, or (at your option) any
// later version: http://www.gnu.org/licenses/gpl-2.0.txt

const React = require('react');
const manifest = require('../static/manifest');
const {l} = require('../static/scripts/common/i18n');
const Layout = require('./Layout');
const EntityLink = require('../static/scripts/common/components/EntityLink');

const formatCount = (n) => {
  return n.toLocaleString($c.stash.current_language);
}

const Countries = () => {
  const stats = $c.stash.stats;
  return (
    <Layout title={l('Countries')} fullWidth={true} page='countries'>
    {/* [%- PROCESS "statistics/macros-header.tt" -%] */}
      <div>
        <p>{l('Last updated: {date}', 
          { __react: true, date: $c.stash.date_collected })}</p>
        <table className='tbl'>
          <thead>
            <tr>
              <th className='pos'>{l('Rank')}</th>
              <th>{l('Country')}<div className="arrow"></div></th>
              <th>{l('Artists')}<div className="arrow"></div></th>
              <th>{l('Releases')}<div className="arrow"></div></th>
              <th>{l('Labels')}<div className="arrow"></div></th>
              <th>{l('Total')}<div className="arrow"></div></th>
            </tr>
          </thead>
          <tbody>
            {stats.map((country, i) => (
              <tr className={(i + 1) % 2 === 0 ? 'even' : 'odd'}> 
                <td className='t'>{i + 1}</td>
                <td>
                  {country.entity.code ? 
                    <EntityLink entity={country.entity} />
                  : l('Unknown Country')}
                </td>
                <td className="t"><EntityLink entity={country.entity} subPath={'artists'} content={formatCount(country.artist_count)} /></td>
                <td className="t"><EntityLink entity={country.entity} subPath={'releases'} content={formatCount(country.release_count)} /></td>
                <td className="t"><EntityLink entity={country.entity} subPath={'labels'} content={formatCount(country.label_count) }/></td>
                <td className="t">{formatCount(country.artist_count + country.release_count + country.label_count)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {/* [%- PROCESS "statistics/macros-footer.tt" -%] */}
        {manifest.js('statistics')}
      </div>
    </Layout>
  );
};

module.exports = Countries;

statistics.js

const tablesorter = require('tablesorter');

tablesorter.addWidget({
    id: "indexFirstColumn",
    format: function (table) {
        $('tbody tr', table).each(function (index) {
            $(this).find('td:first').html((index + 1));
        });
    }
});

tablesorter.addWidget({
    id: "evenRowClasses",
    format: function (table) {
        $('tbody tr', table).each(function (index) {
            if ((index + 1) % 2 == 0) {
                $(this).addClass("even");
            } else {
                $(this).removeClass("even");
            }
        });
    }
});

tablesorter.addParser({
    id: "fancyNumber",
    is: function (s) {
        return /^[0-9]?[0-9,\.]*$/.test(s);
    },
    format: function (s) {
        return tablesorter.formatFloat( s.replace(/,/g,'') );
    },
    type: "numeric"
});

$('table.tbl').tablesorter({
    widgets: [ 'indexFirstColumn', 'evenRowClasses' ],
    headers: { 0: {sorter: false}, 2: { sorter: 'fancyNumber' }, 3: { sorter: 'fancyNumber' }, 4: { sorter: 'fancyNumber' }, 5: { sorter: 'fancyNumber' } },
    sortList: [ [5,1], [1,0] ] // order by descending number of entities, then name
});