add option to download raw data to csv

README.md

@@ -41,6 +41,7 @@ You must set at least the `dataset` and `datasetConfig` values. Change the `id-o
 | `mailFilter`       | false      | Display emails with the specified domain name.                                            | No filter is applied. |
 | `twitter`          | false      | Display Twitter link.                                                                     | `true`                |
 | `facebook`         | false      | Display Facebook link.                                                                    | `true`                |
+| `download`         | false      | Display a link to download data as a CSV file.                                            | `true`                |
 
 ## Generated HTML
 
@@ -94,6 +95,9 @@ The following HTML is generated:
     <div id="parlementairesjs_mp_next_wrapper">
         <p id="parlementairesjs_mp_next">Député·e suivant·e &gt;</p>
     </div>
+    <div id="parlementairesjs_csv_wrapper">
+        <p id="parlementairesjs_csv">Télécharger les données au format CSV</p>
+    </div>
 </div>
 ```
 
@@ -115,6 +119,7 @@ If you set `writeHTML` to `false`, your HTML must have the following elements:
 - `parlementairesjs_mp_fb`
 - `parlementairesjs_mp_info`
 - `parlementairesjs_mp_next`
+- `parlementairesjs_csv` (if `download` is `true`)
 
 ## Datasets and their configuration
 

demo.html

@@ -49,13 +49,14 @@
             ParlementairesJS({
                 dataset: "/json/an.json",
                 datasetConfig: "/json/an-config.json",
-                //commissionFilter: "Lois" // Show only MPs in this commission (optional; default: no filter)
+                //commissionFilter: "Lois", // Show only MPs in this commission (optional; default: no filter)
                 //writeHTML: false, // Do not write HTML (optional; default: true)
                 //photoInImg: true, // Use a <img> instead of a <div>+background (optional; default: false)
                 //phoneFilter: "014063", // Show only phone numbers that start with this (optional; default: no filter)
                 //mailFilter: "assemblee-nationale.fr", // Show only email addresses with this domain name (optional; default: no filter)
                 //twitter: false, // Show Twitter links (optional; default: true)
                 //facebook: false, // Show Facebook links (optional; default: true)
+                //download: false, // Show link to download data (optional; default: false)
             }).display('parlementaires');
         </script>
     </body>

parlementaires.css

@@ -85,5 +85,10 @@
     margin-bottom: 2em;
     border: 2px solid black;
     font-weight: bold;
-    cursor: default;
-}
\ No newline at end of file
+    cursor: pointer;
+}
+
+#parlementairesjs_csv {
+    font-size: 10px;
+    cursor: pointer;
+}

parlementaires.js

@@ -49,7 +49,9 @@ function display(targetId) {
 		parlementairesjsMpInfo,
 		parlementairesjsMpPhotoInfoWrapper,
 		parlementairesjsMpNextWrapper,
-		parlementairesjsMpNext;
+		parlementairesjsMpNext,
+		parlementairesjsCSV,
+		parlementairesjsCSVWrapper;
 
 	if (!this.options.datasetConfig) throw new Error("Dataset config is missing");
 
@@ -100,6 +102,7 @@ function display(targetId) {
 		if (options.writeHTML == null || options.writeHTML == undefined) options.writeHTML = true;
 		if (options.twitter   == null || options.twitter   == undefined) options.twitter   = true;
 		if (options.facebook  == null || options.facebook  == undefined) options.facebook  = true;
+		if (options.download  == null || options.download  == undefined) options.download  = true;
 
 		var requester = new XMLHttpRequest();
 		requester.open("GET", options.dataset, true);
@@ -123,7 +126,7 @@ function display(targetId) {
 			if (options.commissionFilter) {
 				var filteredMps = [];
 				for (var i=0; i<mps.length; i++) {
-					if (validateCommissionFilter(mps[i].commissions, options.commissionFilter)) {
+					if (mps[i].commissions && validateCommissionFilter(mps[i].commissions, options.commissionFilter)) {
 						filteredMps.push(mps[i]);
 					}
 				}
@@ -194,6 +197,37 @@ function display(targetId) {
 			update();
 		}
 
+		function csv() {
+			var csvRawData = '"id","first_name","last_name","group","county","commissions","phone","email","twitter","facebook"' + "\r\n";
+
+			for (var i=0; i<mps.length; i++) {
+				var rowId = (mps[i].id) ? mps[i].id : '';
+				var rowFirstName = mps[i].first_name;
+				var rowLastName = mps[i].last_name;
+				var rowGroup = (mps[i].group) ? mps[i].group : '';
+				var rowCounty = (mps[i].county) ? mps[i].county : '';
+				var rowCommissions = (mps[i].commissions) ? mps[i].commissions.join(', ') : '';
+				var rowPhone = (mps[i].phone) ? mps[i].phone.join(', ') : '';
+				var rowEmail = (mps[i].email) ? mps[i].email.join(',') : '';
+				var rowTwitter = (mps[i].twitter) ? 'https://twitter.com/' + mps[i].twitter : '';
+				var rowFacebook = (mps[i].facebook) ? 'https://www.facebook.com/' + mps[i].facebook : '';
+
+				csvRawData += '"' + csvEscape(rowId) + '",' +
+							  '"' + csvEscape(rowFirstName) + '",' +
+							  '"' + csvEscape(rowLastName) + '",' +
+							  '"' + csvEscape(rowGroup) + '",' +
+							  '"' + csvEscape(rowCounty) + '",' +
+							  '"' + csvEscape(rowCommissions) + '",' +
+							  '"' + csvEscape(rowPhone) + '",' +
+							  '"' + csvEscape(rowEmail) + '",' +
+							  '"' + csvEscape(rowTwitter) + '",' +
+							  '"' + csvEscape(rowFacebook) + '"'
+				csvRawData += "\r\n";
+			}
+
+			download("data.csv", "text/csv", csvRawData);
+		}
+
 		// Update MP informations
 		function update()
 		{
@@ -406,8 +440,20 @@ function display(targetId) {
 				parlementairesjsMpNextWrapper = document.createElement("div");
 				parlementairesjsMpNextWrapper.id = "parlementairesjs_mp_next_wrapper";
 				parlementairesjsMpNextWrapper.appendChild(parlementairesjsMpNext);
-				
+
 				target.append(parlementairesjsIntrophoneWrapper, parlementairesjsMpPhotoInfoWrapper, parlementairesjsMpNextWrapper);
+
+				// parlementairesjs_csv
+				if (options.download) {
+					parlementairesjsCSV = document.createElement("p");
+					parlementairesjsCSV.id = "parlementairesjs_csv";
+					parlementairesjsCSV.append("Télécharger les données au format CSV");
+					parlementairesjsCSVWrapper = document.createElement("div");
+					parlementairesjsCSVWrapper.id = "parlementairesjs_csv_wrapper";
+					parlementairesjsCSVWrapper.appendChild(parlementairesjsCSV);
+					target.append(parlementairesjsCSVWrapper);
+					parlementairesjsCSV.onclick = csv;
+				}
 			} else {
 				parlementairesjsMpTotal = document.getElementById("parlementairesjs_mp_total");
 				parlementairesjsSelectGroup = document.getElementById("parlementairesjs_select_group");
@@ -452,3 +498,20 @@ function validateCommissionFilter(commissions, commissionFilter) {
 
 	return false;
 };
+
+function download(filename, mime, text) {
+	var element = document.createElement('a');
+	element.setAttribute('href', 'data:' + mime + ';charset=utf-8,' + encodeURIComponent(text));
+	element.setAttribute('download', filename);
+
+	element.style.display = 'none';
+	document.body.appendChild(element);
+
+	element.click();
+
+	document.body.removeChild(element);
+}
+
+function csvEscape(string) {
+	return new String(string).replace(/\"/g, "\\\"");
+}