msfd_portal_hcmr/public/js/annual_fisheries.js

function createPie(data, year) {
  var charts = L.featureGroup();
  let features = data.features.filter(f => {
    return f.properties.YR == year;
  });

  let newData = {};
  let moreInfo = {};

  features.forEach(f => {
    let latlng = f.geometry.coordinates;

    for (property in f.properties) {
      const mapKey = fisheriesMap.get(property);
      const infoKey = fisheriesInfo.get(property);
      if (mapKey) {
        newData[mapKey] = f.properties[property];
      }
      if (infoKey) {
        moreInfo[infoKey] = f.properties[property];
      }
    }


    var pieData = {values: Object.values(newData), labels: Object.keys(newData)};
    let chart = new PieChartMarker([latlng[1], latlng[0]], pieData, {
          icon: L.divIcon({className: 'leaflet-pie-chart-marker'}),
          width: 60,
          height: 60,
          colors: ['#ff0000', '#00ff00', '#0000ff', '#ff00ff']
      });

    if (Object.keys(moreInfo).length !== 0) {
      const popupContent = objectToTable(moreInfo);
      console.debug('more info fisheries: ', moreInfo);
      chart.bindPopup(popupContent, {maxHeight: 400}).openPopup();
    }
    charts.addLayer(chart);
  });

  return charts;
}


function objectToTable(obj) {
  let table = '<table><thead><tr><th>Species</th><th>Value</th></tr></thead><tbody>';
  for (let key in obj) {
    table += '<tr><td>' + key + '</td><td>' + obj[key] + '</td></tr>';
  }
  table += '</tbody></table>';

  return table;
}