web-version (#6): improved visuals; #meta fields not displayed on web…

… version
fititnt · Sep 6, 2022 · b29b585 · b29b585
1 parent 7f743f8
commit b29b585
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 14 deletions.
diff --git a/datapackage.json b/datapackage.json
@@ -331,8 +331,59 @@
       },
       "sources": [
         {
-          "title": "Old Classification of Diseases Notifiable to the OIE – List A (manual compilation)",
-          "path": "https://www.woah.org/en/what-we-do/animal-health-and-welfare/animal-diseases/old-classification-of-diseases-notifiable-to-the-oie-list-a/"
+          "title": "Ancienne classification des maladies notifiables à l’OIE – Liste A (manual compilation)",
+          "path": "https://www.woah.org/fr/ce-que-nous-faisons/sante-et-bien-etre-animale/maladies-animales/ancienne-classification-des-maladies-notifiables-a-loie-liste-a/"
+        }
+      ]
+    },
+    {
+      "path": "data/woah-cmn-b.tm.hxl.csv",
+      "name": "woah-cmn-b",
+      "profile": "tabular-data-resource",
+      "scheme": "file",
+      "format": "csv",
+      "encoding": "utf-8",
+      "id": "woah_cmn_b",
+      "schema": {
+        "fields": [
+          {
+            "type": "string",
+            "name": "#item+conceptum+codicem"
+          },
+          {
+            "type": "string",
+            "name": "#item+rem+i_qcc+is_zxxx+ix_wikiq"
+          },
+          {
+            "type": "string",
+            "name": "#item+rem+i_eng+is_latn+ix_xywdatap2308"
+          },
+          {
+            "type": "string",
+            "name": "#item+rem+i_fra+is_latn+ix_xywdatap2308"
+          },
+          {
+            "type": "string",
+            "name": "#item+rem+i_spa+is_latn+ix_xywdatap2308"
+          },
+          {
+            "type": "string",
+            "name": "#meta+rem+i_eng+is_latn+ix_xywdatap1448"
+          },
+          {
+            "type": "string",
+            "name": "#item+rem+i_fra+is_latn+ix_xywdatap1448"
+          },
+          {
+            "type": "string",
+            "name": "#meta+rem+i_spa+is_latn+ix_xywdatap1448"
+          }
+        ]
+      },
+      "sources": [
+        {
+          "title": "Ancienne classification des maladies notifiables à l’OIE – Liste B (manual compilation)",
+          "path": "https://www.woah.org/fr/ce-que-nous-faisons/sante-et-bien-etre-animale/maladies-animales/ancienne-classification-des-maladies-notifiables-a-loie-liste-b/"
         }
       ]
     },

diff --git a/i18n/mul.yml b/i18n/mul.yml
@@ -31,5 +31,8 @@ featured_compilations:
         autoload: true
       - name: woah-cmn-a
         id: woah_cmn_a
+        autoload: true
+      - name: woah-cmn-b
+        id: woah_cmn_b
       # - name: "{{ 'section_data_title' | t }}"
       #   id: woah_cmn_a
diff --git a/index.template.html b/index.template.html
@@ -191,8 +191,12 @@ <h3>{{ item.name | t }}</h3>
     integrity="sha256-s4TPC67sA6qeFEP9ZwzUHJ7JhN75p7Tb/XrS8ZfVtXM=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-dsv.min.js"
     integrity="sha256-IrzYc2a3nTkfvgAyowm/WKmIGdVCMCcccPtz+Y2y6VI=" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.tablesorter.combined.min.js"
-    integrity="sha256-ounC3wWwZ9iBUyF8x1+X+REppGjK+p6/+w+ky1MGoMM=" crossorigin="anonymous"></script>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.tablesorter.combined.min.js"
+    integrity="sha256-ounC3wWwZ9iBUyF8x1+X+REppGjK+p6/+w+ky1MGoMM=" crossorigin="anonymous"></script> -->
+  <script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
+  <script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
+  <script src="https://mottie.github.io/tablesorter/js/widgets/widget-pager.js"></script>
+  <script src="https://mottie.github.io/tablesorter/js/widgets/widget-chart.js"></script>
   <script src="scripts/html/base.js"></script>
 </body>
 

diff --git a/scripts/html/base.css b/scripts/html/base.css
@@ -10,4 +10,197 @@
 
 thead th {
   vertical-align: top;
+}
+
+/* https://mottie.github.io/tablesorter/docs/example-widget-filter.html */
+.tablesorter .filtered {
+  display: none;
+}
+/**
+ * Bootstrap theme v4.x
+ */
+ .tablesorter-bootstrap {
+	width: 100%;
+}
+.tablesorter-bootstrap thead th,
+.tablesorter-bootstrap thead td,
+.tablesorter-bootstrap tfoot th,
+.tablesorter-bootstrap tfoot td {
+	font: 14px/20px Arial, Sans-serif;
+	font-weight: bold;
+	padding: 4px;
+	margin: 0 0 18px;
+}
+
+.tablesorter-bootstrap thead .tablesorter-header {
+	background-position: right 5px center;
+	background-repeat: no-repeat;
+	cursor: pointer;
+	white-space: normal;
+}
+.tablesorter-bootstrap:not(.table-dark) thead:not(.thead-dark) .tablesorter-header,
+.tablesorter-bootstrap:not(.table-dark) tfoot th,
+.tablesorter-bootstrap:not(.table-dark) tfoot td {
+	background-color: #eee;
+}
+
+.tablesorter-bootstrap thead .sorter-false {
+	cursor: default;
+	background-image: none;
+}
+
+.tablesorter-bootstrap .tablesorter-header-inner {
+	position: relative;
+	padding: 4px 18px 4px 4px;
+}
+.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
+	padding: 4px;
+}
+
+/* black icons */
+.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
+}
+.tablesorter-bootstrap thead .tablesorter-headerAsc {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
+}
+.tablesorter-bootstrap thead .tablesorter-headerDesc {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
+}
+
+/* white icons */
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerUnSorted:not(.sorter-false),
+.tablesorter-bootstrap.table-dark thead .tablesorter-headerUnSorted:not(.sorter-false) {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
+}
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerAsc,
+.tablesorter-bootstrap.table-dark thead .tablesorter-headerAsc {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
+}
+.tablesorter-bootstrap thead.thead-dark .tablesorter-headerDesc,
+.tablesorter-bootstrap.table-dark thead .tablesorter-headerDesc {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
+}
+
+/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
+	background-color: #f9f9f9;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.hover > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd:hover > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even:hover > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
+	background-color: #f5f5f5;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even > td,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
+	background-color: #fff;
+}
+
+/* processing icon */
+.tablesorter-bootstrap .tablesorter-processing {
+	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
+	background-position: center center !important;
+	background-repeat: no-repeat !important;
+}
+
+/* Column Widget - column sort colors */
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.primary {
+	background-color: #bfbfbf;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.primary,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.primary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.secondary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.secondary,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.secondary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd td.tertiary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr td.tertiary,
+.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even td.tertiary {
+	background-color: #f2f2f2;
+}
+
+/* caption */
+.tablesorter-bootstrap:not(.table-dark) > .caption {
+	background-color: #fff;
+}
+
+/* filter widget */
+.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
+.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter {
+	width: 98%;
+	margin: 0;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-transition: height 0.1s ease;
+	-moz-transition: height 0.1s ease;
+	-o-transition: height 0.1s ease;
+	transition: height 0.1s ease;
+}
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row {
+	background-color: #efefef;
+}
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row input.tablesorter-filter,
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row select.tablesorter-filter {
+	color: #333;
+}
+
+.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
+	cursor: not-allowed;
+	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
+	box-sizing: border-box;
+	transition: height 0.1s ease;
+}
+
+.tablesorter-bootstrap:not(.table-dark) .tablesorter-filter-row td {
+	line-height: normal;
+	text-align: center;
+	padding: 4px 6px;
+	vertical-align: middle;
+	-webkit-transition: line-height 0.1s ease;
+	-moz-transition: line-height 0.1s ease;
+	-o-transition: line-height 0.1s ease;
+	transition: line-height 0.1s ease;
+}
+/* hidden filter row */
+.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
+	padding: 2px; /* change this to modify the thickness of the closed border row */
+	margin: 0;
+	line-height: 0;
+}
+.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
+	height: 1px;
+	min-height: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	/* don't use visibility: hidden because it disables tabbing */
+	opacity: 0;
+	filter: alpha(opacity=0);
+}
+/* rows hidden by filtering */
+.tablesorter .filtered {
+	display: none;
+}
+
+/* pager plugin */
+.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
+	border: 0;
+}
+
+/* ajax error row */
+.tablesorter:not(.table-dark) .tablesorter-errorRow td {
+	text-align: center;
+	cursor: pointer;
+	background-color: #e6bf99;
 }
diff --git a/scripts/html/base.js b/scripts/html/base.js
@@ -60,16 +60,35 @@ function autoload_tables() {
     }).catch(function (e) {
       console.log(e); // "Ah, não!"
     }).then(function () {
-      header_csv = Object.keys(data_csv[0])
+      header_csv = Object.keys(data_csv[0]).filter(function(item) {
+        return !(item.startsWith('#meta'))
+      })
       tabulate(data_csv, header_csv, el)
 
+      let table_widgets = []
+      if (data_csv.length > 30) {
+        table_widgets.push('filter')
+        // table_widgets.push('chart')
+        // table_widgets.push('pager')
+        // table_widgets.push('columnSelector')
+        // table_widgets.push('cssStickyHeaders')
+        // table_widgets.push('pager')
+      }
+
+      // Examples
+      // - https://mottie.github.io/tablesorter/docs/example-widget-chart.html
+      // - https://jsfiddle.net/Mottie/rc9b4pkm/
       jQuery(function () {
         jQuery(el.querySelector('table')).tablesorter({
+          // widgets: ['zebra', 'filter', 'pager'],
+          widgets: table_widgets,
           // Show debugging info only for the filter and columnSelector widgets
           // include "core" to only show the core debugging info
           // debug : "filter columnSelector"
-          // debug : true
-          debug: false
+          theme: 'bootstrap',
+          debug : true
+          // debug: false
+
         });
       });
     })