implement moreinfo popup in d3 products with tables

public/js/annual_fisheries.js

@@ -6,16 +6,23 @@ function createPie(data, 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'}),
@@ -23,8 +30,25 @@ function createPie(data, year) {
           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;
+}

public/js/constants.js

@@ -69,3 +69,88 @@ const fisheriesMap = new Map([
   ['TAXON_M', 'taxon_m']
 ]);
 const EDITABLE = false;
+
+
+const fisheriesInfo = new Map([
+  ["Species_1", "Albacore"],
+  ["Species_2", "Anchovy"],
+  ["Species_3", "Anglerfish"],
+  ["Species_4", "Atlantic black sk"],
+  ["Species_5", "Axillary seabrea"],
+  ["Species_6", "Bass"],
+  ["Species_7", "Bay scallop"],
+  ["Species_8", "Black bream"],
+  ["Species_9", "Black sea bream"],
+  ["Species_10", "Black-mouthed godfish"],
+  ["Species_11", "Blotched pickerel"],
+  ["Species_12", "Bluefish"],
+  ["Species_13", "Bogue"],
+  ["Species_14", "Bonito"],
+  ["Species_15", "Brill"],
+  ["Species_16", "Club mackerel"],
+  ["Species_17", "Comber"],
+  ["Species_18", "Common grey mullet"],
+  ["Species_19", "Common prawn"],
+  ["Species_20", "Common sea bream"],
+  ["Species_21", "Common squid"],
+  ["Species_22", "Couch's sea bream"],
+  ["Species_23", "Couch's whiting"],
+  ["Species_24", "Crab"],
+  ["Species_25", "Crayfish"],
+  ["Species_26", "Croaker"],
+  ["Species_27", "Crustacean other"],
+  ["Species_28", "Cuttle fish"],
+  ["Species_29", "Daouki"],
+  ["Species_30", "Dog fish"],
+  ["Species_31", "Dog's teeth"],
+  ["Species_32", "Dusky sea perch"],
+  ["Species_33", "Eel"],
+  ["Species_34", "Flying squid"],
+  ["Species_35", "Garfish"],
+  ["Species_36", "Gilt sardine"],
+  ["Species_37", "Goatfish"],
+  ["Species_38", "Goldline"],
+  ["Species_39", "Greater weever"],
+  ["Species_40", "Grouper"],
+  ["Species_41", "Guitarfish"],
+  ["Species_42", "Gurnard"],
+  ["Species_43", "Hake"],
+  ["Species_44", "Horse mackerel"],
+  ["Species_45", "Jack mackerel"],
+  ["Species_46", "Jacks, crevalles"],
+  ["Species_47", "John dory"],
+  ["Species_48", "Large eyed dog's teeth"],
+  ["Species_49", "Lobster"],
+  ["Species_50", "Mackerel"],
+  ["Species_51", "Megrims"],
+  ["Species_52", "Mussel"],
+  ["Species_53", "Octapus"],
+  ["Species_54", "Others (Fish)"],
+  ["Species_55", "Others (Pelecipoda)"],
+  ["Species_56", "Oyster"],
+  ["Species_57", "Pickerel"],
+  ["Species_58", "Pilchard"],
+  ["Species_59", "Plain bonito"],
+  ["Species_60", "Poulp"],
+  ["Species_61", "Rassa"],
+  ["Species_62", "Red bream"],
+  ["Species_63", "Red mullet"],
+  ["Species_64", "Red sea bream"],
+  ["Species_65", "Red seabream"],
+  ["Species_66", "Sand steenbras"],
+  ["Species_67", "Scorpion fish"],
+  ["Species_68", "Shapper"],
+  ["Species_69", "Shrimp (common)"],
+  ["Species_70", "Silversides (Sands)"],
+  ["Species_71", "Skipjack"],
+  ["Species_72", "Sole"],
+  ["Species_73", "Sprat"],
+  ["Species_74", "Stone bass"],
+  ["Species_75", "Swordfish"],
+  ["Species_76", "Thornback ray"],
+  ["Species_77", "Tub fish"],
+  ["Species_78", "Tune fish"],
+  ["Species_79", "Warty venus"],
+  ["Species_80", "White bream"],
+  ["Species_81", "Yellowtail"]
+]);