From b29b5857e1dbdbc722393bbbd8a23a18ca474d8b Mon Sep 17 00:00:00 2001 From: Emerson Rocha Date: Tue, 6 Sep 2022 14:58:13 -0300 Subject: [PATCH] web-version (#6): improved visuals; #meta fields not displayed on web version --- datapackage.json | 55 ++++- i18n/mul.yml | 3 + index.template.html | 8 +- scripts/html/base.css | 193 ++++++++++++++++++ scripts/html/base.js | 25 ++- ...-epidemiology-and-health-surveillance.html | 50 ++++- 6 files changed, 320 insertions(+), 14 deletions(-) diff --git a/datapackage.json b/datapackage.json index c52e31c..d2adf32 100644 --- 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 index c796b1b..a739505 100644 --- 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 index eabd865..cb575cd 100644 --- a/index.template.html +++ b/index.template.html @@ -191,8 +191,12 @@

{{ item.name | t }}

integrity="sha256-s4TPC67sA6qeFEP9ZwzUHJ7JhN75p7Tb/XrS8ZfVtXM=" crossorigin="anonymous"> - + + + + + diff --git a/scripts/html/base.css b/scripts/html/base.css index 1701245..7095f48 100644 --- 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; } \ No newline at end of file diff --git a/scripts/html/base.js b/scripts/html/base.js index 6c22f84..4f23fcb 100644 --- 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 + }); }); }) diff --git a/spatial-epidemiology-and-health-surveillance.html b/spatial-epidemiology-and-health-surveillance.html index 4bdd049..26ef29b 100644 --- a/spatial-epidemiology-and-health-surveillance.html +++ b/spatial-epidemiology-and-health-surveillance.html @@ -218,7 +218,7 @@

woah-cmn-a

Sources: @@ -227,15 +227,46 @@

woah-cmn-a

-
+
+ +
+
+ + + @@ -254,7 +285,8 @@

woah-cmn-a

- + + @@ -271,8 +303,12 @@

woah-cmn-a

integrity="sha256-s4TPC67sA6qeFEP9ZwzUHJ7JhN75p7Tb/XrS8ZfVtXM=" crossorigin="anonymous"> - + + + + +