Skip to content

Commit

Permalink
Showing 15 changed files with 386 additions and 72 deletions.
79 changes: 69 additions & 10 deletions bom-website/assets/js/database.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import Alpine from "alpinejs";
import collapse from '@alpinejs/collapse';

// initialize Alpine
window.Alpine = Alpine;
Alpine.plugin(collapse);

document.addEventListener("alpine:init", () => {
Alpine.data("billsData", () => ({
bills: [],
christenings: [],
causes: [],
all_causes: [],
all_christenings: [],
parishes: null,
sort: false,
modalOpen: false,
@@ -16,6 +25,8 @@ document.addEventListener("alpine:init", () => {
selectedCountType: "",
selectedStartYear: 1636,
selectedEndYear: 1754,
selectedCausesOfDeath: [],
selectedChristenings: [],
},
isMissing: false,
isIllegible: false,
@@ -37,7 +48,7 @@ document.addEventListener("alpine:init", () => {
total: null, // total number of records from /totalbills endpoint
},
init() {
// Fetch the initial date. We don't fetch server data here but wait for user interaction.
// Fetch the static data
this.fetchStaticData();

// Read URL parameters
@@ -49,8 +60,11 @@ document.addEventListener("alpine:init", () => {
if (params.has('count-type')) this.filters.selectedCountType = params.get('count-type');
if (params.has('parish')) this.filters.selectedParishes = params.get('parish').split(',');
if (params.has('page')) this.page = parseInt(params.get('page'));
// if (params.has('openTab')) this.openTab = parseInt(params.get('openTab'));

this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
},
async fetchStaticData() {
// Data used for populating UI elements in the app.
@@ -63,6 +77,25 @@ document.addEventListener("alpine:init", () => {
.catch((error) => {
console.error("There was an error fetching parish data:", error);
});

fetch("https://data.chnm.org/bom/list-deaths")
.then((response) => response.json())
.then((data) => {
this.all_causes = data;
this.all_causes.forEach((d, i) => (d.id = i));
})
.catch((error) => {
console.error("There was an error fetching causes of death data:", error);
});

fetch("https://data.chnm.org/bom/list-christenings")
.then((response) => response.json())
.then((data) => {
this.all_christenings = data;
})
.catch((error) => {
console.error("There was an error fetching christenings data:", error);
});
},
async fetchData(billType) {
if (this.meta.fetching) {
@@ -74,11 +107,21 @@ document.addEventListener("alpine:init", () => {
// billType defaults to filters.selectedBillType unless one is provided by the app
billType = billType || this.filters.selectedBillType;

// 1. Bills data.
// Bills data
let response = await fetch(
`https://data.chnm.org/bom/bills?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}&bill-type=${billType}&count-type=${this.filters.selectedCountType}&parish=${this.filters.selectedParishes}&limit=${this.server.limit}&offset=${this.server.offset}`,
);

if (!response.ok) {
console.error("There was an error fetching weekly bills data:", response);
this.meta.loading = false;
this.meta.fetching = false;
this.messages.loading = "No data available. Please try again with different filters.";
return;
}

let data = await response.json();

if (data.error) {
console.error("There was an error fetching weekly bills data:", data.error);
this.meta.loading = false;
@@ -87,10 +130,6 @@ document.addEventListener("alpine:init", () => {
}
data.forEach((d, i) => (d.id = i));

console.log('filtered data url: ',
`https://data.chnm.org/bom/bills?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}&bill-type=${billType}&count-type=${this.filters.selectedCountType}&parish=${this.filters.selectedParishes}&limit=${this.server.limit}&offset=${this.server.offset}`,
)

// After the data is ready, we set it to our bills object and the DOM updates
this.bills = data;
this.pagination.total = data[0].totalrecords;
@@ -102,11 +141,11 @@ document.addEventListener("alpine:init", () => {
async fetchChristenings() {
this.meta.loading = true;
let response = await fetch(
`https://data.chnm.org/bom/christenings?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}&limit=${this.server.limit}&offset=${this.server.offset}`,
`https://data.chnm.org/bom/christenings?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}&id=${this.filters.selectedChristenings}&limit=${this.server.limit}&offset=${this.server.offset}`,
);
let data = await response.json();
if (data.error) {
console.log(
console.error(
"There was an error fetching the christenings data:",
data.error,
);
@@ -123,11 +162,12 @@ document.addEventListener("alpine:init", () => {
async fetchDeaths() {
this.meta.loading = true;
let response = await fetch(
`https://data.chnm.org/bom/causes?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}`,
`https://data.chnm.org/bom/causes?start-year=${this.filters.selectedStartYear}&end-year=${this.filters.selectedEndYear}&id=${this.filters.selectedCausesOfDeath}&limit=${this.server.limit}&offset=${this.server.offset}`,
);
let data = await response.json();

if (data.error) {
console.log(
console.error(
"There was an error fetching the causes of death data:",
data.error,
);
@@ -159,6 +199,8 @@ document.addEventListener("alpine:init", () => {

// After the new limit/offset is ready, we'll fetch the data again.
this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
},
setStartYear() {
// store the start year in the filters object
@@ -187,6 +229,8 @@ document.addEventListener("alpine:init", () => {

// After the new offset is ready, we'll fetch the data again.
this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
},
sort(col) {
if (this.sortCol == col) this.sort = !this.sort;
@@ -206,11 +250,16 @@ document.addEventListener("alpine:init", () => {
this.filters.selectedEndYear = parseInt(this.filters.selectedEndYear);
this.filters.selectedCountType = this.filters.selectedCountType;

this.filters.selectedCausesOfDeath = this.filters.selectedCausesOfDeath;
this.filters.selectedChristenings = this.filters.selectedChristenings;

// we reset pagination to the first page
this.page = 1;
this.server.offset = 0;

this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
},
updateLimitVal() {
// If a user changes the dropdown to a new value, we need to update the limit value.
@@ -224,7 +273,12 @@ document.addEventListener("alpine:init", () => {
this.filters.selectedCountType = "";
this.selectedBillType = "Weekly";
this.filters.selectedParishes = [];
this.filters.selectedCausesOfDeath = [];
this.filters.selectedChristenings = [];

this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
};
},
getCurrentPage() {
@@ -249,6 +303,8 @@ document.addEventListener("alpine:init", () => {
goToLastPage() {
this.server.offset = this.getTotalPages() - this.server.limit;
this.fetchData();
this.fetchChristenings();
this.fetchDeaths();
},
getTotalRows: function () {
return parseInt(this.server.total);
@@ -291,9 +347,12 @@ document.addEventListener("alpine:init", () => {
params.set("count-type", this.filters.selectedCountType);
params.set("parish", this.filters.selectedParishes);
params.set("page", this.getCurrentPage());
// params.set("openTab", this.openTab);

// Use the history API to update the URL
history.pushState({}, "", `${location.pathname}?${params}`);
},
}));
});

Alpine.start();
4 changes: 4 additions & 0 deletions bom-website/hugo_stats.json
Original file line number Diff line number Diff line change
@@ -106,6 +106,7 @@
"divide-gray-200",
"divide-y",
"drop-shadow-md",
"dropdown-wrapper",
"duration-200",
"duration-300",
"ease-in",
@@ -131,6 +132,7 @@
"font-bold",
"font-light",
"font-medium",
"font-mono",
"font-sans",
"font-semibold",
"footnote-backref",
@@ -272,6 +274,7 @@
"pagination__item--next",
"pagination__item--previous",
"pb-10",
"pb-2",
"pb-20",
"pb-4",
"pb-5",
@@ -283,6 +286,7 @@
"prose-base",
"prose-lg",
"prose-sm",
"pt-2",
"pt-3",
"pt-4",
"pt-5",
54 changes: 54 additions & 0 deletions bom-website/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions bom-website/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"dependencies": {
"@alpinejs/collapse": "^3.13.3",
"@observablehq/plot": "^0.6.4",
"alpinejs": "^3.13.3",
"d3": "^7.8.3",
"d3-cloud": "^1.2.5"
}
52 changes: 28 additions & 24 deletions bom-website/themes/dbn/assets/style.css
Original file line number Diff line number Diff line change
@@ -2682,14 +2682,14 @@ a {
height: 10rem;
}

.h-5 {
height: 1.25rem;
}

.h-6 {
height: 1.5rem;
}

.h-5 {
height: 1.25rem;
}

.max-h-64 {
max-height: 16rem;
}
@@ -2739,20 +2739,20 @@ a {
width: 15rem;
}

.w-5 {
width: 1.25rem;
.w-6 {
width: 1.5rem;
}

.w-1\/2 {
width: 50%;
}

.w-40 {
width: 10rem;
.w-5 {
width: 1.25rem;
}

.w-6 {
width: 1.5rem;
.w-40 {
width: 10rem;
}

.min-w-full {
@@ -3066,11 +3066,6 @@ a {
background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}

.bg-dbn-yellow {
--tw-bg-opacity: 1;
background-color: rgb(177 165 105 / var(--tw-bg-opacity));
}

.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -3081,6 +3076,11 @@ a {
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.bg-dbn-yellow {
--tw-bg-opacity: 1;
background-color: rgb(177 165 105 / var(--tw-bg-opacity));
}

.bg-opacity-40 {
--tw-bg-opacity: 0.4;
}
@@ -3184,6 +3184,11 @@ a {
padding-right: 2rem;
}

.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}

.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
@@ -3194,11 +3199,6 @@ a {
padding-right: 0.25rem;
}

.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}

.pt-7 {
padding-top: 1.75rem;
}
@@ -3259,6 +3259,10 @@ a {
font-family: Inter, sans-serif;
}

.font-mono {
font-family: ui-monospace, monospace;
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@@ -3564,14 +3568,14 @@ a {
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.dark\:bg-gray-900 {
.dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.dark\:bg-gray-700 {
.dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.dark\:text-gray-400 {
4 changes: 2 additions & 2 deletions bom-website/themes/dbn/layouts/_default/database.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{ define "main" }}
<body x-data="billsData">
<div class="container mx-auto w-full h-full">
<body>
<div class="container mx-auto w-full h-full" x-data="billsData">
<h2 class="text-4xl font-medium pt-4">{{ .Title }}</h2>

{{/* begin: tab switcher */}}
2 changes: 0 additions & 2 deletions bom-website/themes/dbn/layouts/partials/head.html
Original file line number Diff line number Diff line change
@@ -36,6 +36,4 @@
</script>
<!-- End Matomo Code -->
{{ end }}
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
50 changes: 36 additions & 14 deletions bom-website/themes/dbn/layouts/partials/header.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,51 @@
<nav class="flex items-center justify-between flex-wrap bg-dbn-green px-4 mx-auto w-full lg:max-w-screen-lg sm:max-w-screen-sm md:max-w-screen-md">
<nav
class="flex items-center justify-between flex-wrap bg-dbn-green px-4 mx-auto w-full lg:max-w-screen-lg sm:max-w-screen-sm md:max-w-screen-md"
>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<img src="/img/death-by-numbers.jpg" alt="Death by Numbers" class="object-scale-down w-44 overflow-hidden" />
<a
id="site-title"
class="font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap text-white"
href="/">Death by <span class="text-dbn-blue">Numbers</span></a>

<img
src="/img/death-by-numbers.jpg"
alt="Death by Numbers"
class="object-scale-down w-44 overflow-hidden"
/>
<a
id="site-title"
class="font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap text-white"
href="/"
>Death by <span class="text-dbn-blue">Numbers</span></a
>
</div>
<div class="w-full block flex-grow-0 lg:items-center lg:w-auto">
<div class="w-full block flex-grow-0 lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="/blog/" class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2">
<a
href="/blog/"
class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2"
>
Blog
</a>
<a href="https://database.deathbynumbers.org" class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2">
<a
href="/database/"
class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2"
>
Database
</a>
<a href="/visualizations/" class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2">
<a
href="/visualizations/"
class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2"
>
Visualizations
</a>
<a href="/about/" class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2">
<a
href="/about/"
class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2"
>
About
</a>
<a href="/data/" class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2">
<a
href="/data/"
class="inline-block px-3 py-2 items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75 ml-2"
>
Data
</a>
</div>
</div>
</nav>
</nav>
2 changes: 1 addition & 1 deletion bom-website/themes/dbn/layouts/partials/hero.html
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ <h2 class="mb-4 text-1xl font-bold text-left lg:text-2xl text-white">
<div class="text-center lg:text-left">
<a
class="block visible py-4 px-8 mb-4 text-xs font-semibold tracking-wide leading-none text-black bg-dbn-blue rounded cursor-pointer sm:mr-3 sm:mb-0 sm:inline-block"
href="https://database.deathbynumbers.org"
href="/database/"
>Database</a
>

10 changes: 4 additions & 6 deletions bom-website/themes/dbn/layouts/partials/tables/christenings.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{/* This is the Christenings table. */}}

{{ partial "tables/filter.html" }}
{{ partial "tables/christenings_filter.html" }}

{{/* begin: christenings table */}}
<div>
@@ -55,7 +55,7 @@
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block w-full max-w-xl p-8 my-20 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl 2xl:max-w-2xl">
<div class="flex items-center justify-between space-x-4">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text="modalBill.name"></h3>
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text="modalBill.christening"></h3>
<button @click="modalOpen = false" class="text-gray-600 focus:outline-none hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
@@ -66,10 +66,8 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
</div>
<p class="mt-2 text-sm text-gray-500">Data for the week of <span x-text="modalBill.start_month"></span> <span
x-text="modalBill.start_day"></span> to <span x-text="modalBill.end_month"></span> <span
x-text="modalBill.end_day"></span>, <span x-text="modalBill.year"></span> (<span
x-text="modalBill.split_year"></span>)</p>
<p class="mt-2 text-sm text-gray-800"><strong>Count Type</strong>: <span x-text="modalBill.count_type"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Count</strong>: <span x-text="modalBill.count"></p>
x-text="modalBill.end_day"></span>, <span x-text="modalBill.year"></span></p>
<p class="mt-2 text-sm text-gray-800"><strong>Number of christenings</strong>: <span x-text="modalBill.count"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Week Number</strong>: <span x-text="modalBill.week_no"></span>
<div x-data="{ isMissing: false }">
<!-- if missing is True, display "record has missing values" -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{{/* begin: filter accordion */}}
<div id="accordion-flush" data-accordion="collapse"
data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
data-inactive-classes="text-gray-500 dark:text-gray-400">
<div x-data="{ expanded: false }" class="filter__header">
<h2 id="accordion-flush-heading-1">
<button type="button" @click="expanded = ! expanded"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-900 border-b border-t border-gray-200 dark:border-gray-700 dark:text-white"
data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>Filter</span>
<svg class="w-5 h-5 ml-2 transform" :class="{'rotate-180': expanded}" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd" d="M10.293 14.95a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L10
12.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4z" clip-rule="evenodd"></path>
</svg>
</h2>
<div id="accordion-flush-body-1" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<div x-show="expanded" x-collapse class="filter__header__content">
<div class="grid grid-cols-4 gap-4 pb-6">
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Parishes</h3>
<div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
<div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
<template x-for="christening_parish in all_christenings" :key="christening_parish.id">
<div>
<input type="checkbox" :id="christening_parish.canonical_name" :value="christening_parish.id"
x-model="filters.selectedChristenings">
<label :for="christening_parish.name" x-text="christening_parish.name"></label>
</div>
</template>
</div>
</div>
</div>
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div>
<label for="start-year">Start Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
type="number" id="start-year" name="start-year" min="1648" max="1754" value="1648"
@change="setStartYear()" x-model="filters.selectedStartYear">
</div>
<div>
<label for="end-year">End Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
type="number" id="end-year" name="end-year" min="1648" max="1754" value="1754"
@change="setEndYear()" x-model="filters.selectedEndYear">
</div>
</div>
<div>
<div class="w-1/2 inline-block relative">
<!-- spacer -->
</div>
</div>
<div>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
@click="resetFilters">
Reset Filters
</button>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
@click="applyFilters">
Apply Filters
</button>

<div
class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
@click="instructionsOpen = true"
>
How to use this table
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/* end: filter accordion */}}


85 changes: 85 additions & 0 deletions bom-website/themes/dbn/layouts/partials/tables/cod_filter.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{{/* begin: filter accordion */}}
<div id="accordion-flush" data-accordion="collapse"
data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
data-inactive-classes="text-gray-500 dark:text-gray-400">
<div x-data="{ expanded: false }" class="filter__header">
<h2 id="accordion-flush-heading-1">
<button type="button" @click="expanded = ! expanded"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-900 border-b border-t border-gray-200 dark:border-gray-700 dark:text-white"
data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>Filter</span>
<svg class="w-5 h-5 ml-2 transform" :class="{'rotate-180': expanded}" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd" d="M10.293 14.95a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L10
12.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4z" clip-rule="evenodd"></path>
</svg>
</h2>
<div id="accordion-flush-body-1" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<div x-show="expanded" x-collapse class="filter__header__content">
<div class="grid grid-cols-4 gap-4 pb-6">
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Causes of Death</h3>
<div class="py-4 px-5 max-h-64 overflow-scroll border border-slate-200">
<div class="filter__header__content__item" style="height: 200px; overflow-y: scroll;">
<template x-for="cause in all_causes" :key="cause.id">
<div>
<input type="checkbox" :id="cause.name" :value="cause.name"
x-model="filters.selectedCausesOfDeath">
<label :for="cause.name" x-text="cause.name"></label>
</div>
</template>
</div>
</div>
</div>
<div>
<h3 class="text-base font-medium leading-6 text-gray-900">Year Range</h3>
<div>
<label for="start-year">Start Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
type="number" id="start-year" name="start-year" min="1648" max="1754" value="1648"
@change="setStartYear()" x-model="filters.selectedStartYear">
</div>
<div>
<label for="end-year">End Year</label>
<input
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
type="number" id="end-year" name="end-year" min="1648" max="1754" value="1754"
@change="setEndYear()" x-model="filters.selectedEndYear">
</div>
</div>
<div>
<div class="w-1/2 inline-block relative">
<!-- spacer -->
</div>
</div>
<div>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
@click="resetFilters">
Reset Filters
</button>
<button
class="text-xs font-bold uppercase px-5 py-3 m-0.5 w-40 rounded block leading-normal border-solid border-2 border-dbn-yellow text-white bg-dbn-yellow hover:bg-dbn-yellowdark"
@click="applyFilters">
Apply Filters
</button>

<div
class="text-xs font-bold uppercase px-1 py-3 m-0.5 leading-normal text-black hover:underline"
@click="instructionsOpen = true"
>
How to use this table
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/* end: filter accordion */}}


10 changes: 5 additions & 5 deletions bom-website/themes/dbn/layouts/partials/tables/deaths.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{{/* This is the Total Deaths table. */}}

{{ partial "tables/filter.html" }}
{{ partial "tables/cod_filter.html" }}

{{/* begin: deaths table */}}
<div>
<div x-data="fetchDeaths()">
<table class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-700">
<thead class="bg-gray-100 dark:bg-gray-700">
<tr>
<th scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
width="30%" @click="sort('name')">Cause</th>
width="30%" @click="sort('death')">Cause</th>
<th scope="col"
class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
width="20%" @click="sort('count')">Count</th>
@@ -55,7 +55,7 @@
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block w-full max-w-xl p-8 my-20 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl 2xl:max-w-2xl">
<div class="flex items-center justify-between space-x-4">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text="modalBill.name"></h3>
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text="modalBill.death"></h3>
<button @click="modalOpen = false" class="text-gray-600 focus:outline-none hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
@@ -68,7 +68,7 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
x-text="modalBill.start_day"></span> to <span x-text="modalBill.end_month"></span> <span
x-text="modalBill.end_day"></span>, <span x-text="modalBill.year"></span> (<span
x-text="modalBill.split_year"></span>)</p>
<p class="mt-2 text-sm text-gray-800"><strong>Count Type</strong>: <span x-text="modalBill.count_type"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Description</strong>: <span x-text="modalBill.descriptive_text ? modalBill.descriptive_text : 'No description available.'"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Count</strong>: <span x-text="modalBill.count"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Week Number</strong>: <span x-text="modalBill.week_no"></span>
<div x-data="{ isMissing: false }">
6 changes: 3 additions & 3 deletions bom-website/themes/dbn/layouts/partials/tables/filter.html
Original file line number Diff line number Diff line change
@@ -56,9 +56,9 @@ <h3 class="text-base font-medium leading-6 text-gray-900">Count Type</h3>
class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
@change="setCountType()" x-model="filters.selectedCountType">
<option value="All">All</option>
<option value="Buried">Buried</option>
<option value="Plague">Plague</option>
<option value="Total">Total</option>
<option x-show="openTab === 1" value="Buried">Buried</option>
<option x-show="openTab === 1" value="Plague">Plague</option>
<option x-show="openTab === 2" value="Total">Total</option>
</select>
</div>
</div>
13 changes: 8 additions & 5 deletions bom-website/themes/dbn/layouts/partials/tables/weekly.html
Original file line number Diff line number Diff line change
@@ -34,13 +34,13 @@
x-text="bill.name"></td>
<td class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
x-text="bill.count_type"></td>
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white"
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white font-mono"
x-text="bill.count ? bill.count : '-'"></td>
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white"
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white font-mono"
x-text="bill.week_no"></td>
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white"
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white font-mono"
x-text="bill.year"></td>
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white"
<td class="py-4 px-6 text-sm font-medium text-center text-gray-900 whitespace-nowrap dark:text-white font-mono"
x-text="bill.split_year"></td>
</tr>
</template>
@@ -78,6 +78,10 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
x-text="modalBill.start_day"></span> to <span x-text="modalBill.end_month"></span> <span
x-text="modalBill.end_day"></span>, <span x-text="modalBill.year"></span> (<span
x-text="modalBill.split_year"></span>)</p>
<p class="mt-2 text-sm text-gray-800">There were <span x-text="modalBill.count ? modalBill.count : 'no' "></span> people <span x-text="modalBill.count_type === 'Buried' ? 'buried' : modalBill.count_type === 'Plague' ? 'with plague' : ''"></span> in <span x-text="modalBill.name"></span> during the week of <span x-text="modalBill.start_month"></span> <span x-text="modalBill.start_day"></span>&#8212;<span x-text="modalBill.end_month"></span> <span x-text="modalBill.end_day"></span>, <span x-text="modalBill.year"></span> (<span x-text="modalBill.split_year"></span>).</p>

<hr class="mt-2 mb-2"/>

<p class="mt-2 text-sm text-gray-800"><strong>Count Type</strong>: <span x-text="modalBill.count_type"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Count</strong>: <span x-text="modalBill.count ? modalBill.count : 'No count available.'"></p>
<p class="mt-2 text-sm text-gray-800"><strong>Week Number</strong>: <span x-text="modalBill.week_no"></span>
@@ -89,7 +93,6 @@ <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title" x-text=
<!-- if missing is True, display "record has missing values" -->
<p class="mt-2 text-sm text-gray-800" x-show="isIllegible"><strong>Record has illegible values</strong></p>
</div>

</p>
</div>
</div>

0 comments on commit 4ccefce

Please sign in to comment.