2e:null 2f:["$","title",null,{"children":"COVID19 - Fallzahlen Kanton Zürich | Einreisequarantäne pro Kalenderwoche | Office for Statistics and Data of the Canton of Zurich | Observable"}] 34:T1209,/* function table(inputData, options = {}) { let { page, pageSize, date, title, debug } = { pageSize: 10, page: 0, date: "day", title: "", debug: false, ...options }; let first = true; let searching = false; let filters = {}; let searchQuery = ""; let adata = Array.from(inputData); // Normalize iterables to plain arrays. let detectedColumns = detectColumns(adata); let supercontainer = html`

`; function render() { let data; if (Object.keys(filters).length || searchQuery) { data = adata.filter(obj => { for (let [col, value] of Object.entries(filters)) { if (obj[col] !== value) return false; } if (searchQuery) { let strValue = ""; for (let key of Object.keys(obj)) { strValue += obj[key]; } if (!strValue.toLowerCase().includes(searchQuery.toLowerCase())) { return false; } } return true; }); } else { data = adata; } // If we're on page 5 and then filter and yield // fewer than 5 pages. if (page * pageSize > data.length) { page = Math.floor(data.length / pageSize); } let start = page * pageSize; let end = Math.min(data.length, (page + 1) * pageSize); let pageCount = pageSize ? Math.ceil(data.length / pageSize) : 0; let chunk = data.slice(start, end); let hasPrev = page > 0; let hasNext = end < data.length; let prevButton = html`

${leftIcon()}

`; let nextButton = html`

${rightIcon()}

`; prevButton.onclick = () => { page--; render(); }; nextButton.onclick = () => { page++; render(); }; let pageLinks = html`

`; if (pageCount < 5) { for (let i = 0; i < pageCount; i++) { let elem = html`

${i + 1}

`; elem.onclick = () => { page = i; render(); }; pageLinks.appendChild(elem); } } else { const select = html`

Page

`; select.querySelector("select").value = page; pageLinks.appendChild(select); select.onchange = e => { page = parseInt(e.target.value, 10); render(); }; } let searchToggle = html`

${searchIcon()}

`; searchToggle.querySelector(".button").onclick = () => { searching = !searching; render(); }; let navigation = html``; let tbody = html``; let table = html`${header(detectedColumns)}${tbody}

`; let searchUI = searching ? search(adata, detectedColumns, filters, searchQuery) : ""; let container = html`

${searchUI} ${ hasNext || hasPrev ? navigation : "" }

${table}

${style()}

`; for (let d of chunk) { tbody.appendChild(row(d, detectedColumns, { date })); } if (searchUI) { searchUI.addEventListener("setfilters", e => { ({ filters, searchQuery } = e.target.value); render(); }); searchUI.addEventListener("closefilters", e => { ({ filters, searchQuery } = e.target.value); searching = false; render(); }); } supercontainer.innerHTML = ""; supercontainer.appendChild(container); supercontainer.value = chunk; supercontainer.value.data = data; supercontainer.dispatchEvent(new CustomEvent("input")); if (first) { setTimeout(() => { // If the table wants to be wide, let it be wide and scrollable. if (supercontainer.querySelector("table").scrollWidth > 640) { supercontainer.classList.add("wide"); } if (recommendVerticalBorders(supercontainer)) { supercontainer.classList.add("narrow-columns"); } }, 0); first = false; } } render(); return supercontainer; } */35:T5c5,function search(data, pickedColumns, filters, searchQuery) { let dropdowns = getDropdowns(data, pickedColumns); let filterContainer = html`

`; let closeButton = html`

${xCircleIcon()}

`; let query = html`

`; let container = html`

${query} ${filterContainer}

${closeButton}

`; closeButton.onclick = () => { container.value = { filters: {}, searchQuery: "" }; container.dispatchEvent(new CustomEvent("closefilters")); }; let setSearchQuery = () => { searchQuery = query.querySelector("input").value; container.value = { filters, searchQuery }; container.dispatchEvent(new CustomEvent("setfilters")); }; query.querySelector("button").onclick = setSearchQuery; query.querySelector("input").onsearch = setSearchQuery; query.querySelector("input").value = searchQuery; [...dropdowns.entries()].map(([column, choices]) => { let d = dropdown(column, choices, filters); filterContainer.appendChild(d); d.addEventListener("setfilters", e => { e.stopPropagation(); filters[column] = e.target.value; if (filters[column] === undefined) delete filters[column]; container.value = { filters, searchQuery }; container.dispatchEvent(new CustomEvent("setfilters")); }); }); return container; }36:T687,style = () => html``37:[] 32:{"id":"b4539d1d4308ea09","slug":"covid19-fallzahlen-kanton-zurich-einreisequarantane-pro","title":"COVID19 - Fallzahlen Kanton Zürich | Einreisequarantäne pro Kalenderwoche","thumbnail":"b6f8403249f4d3862f7325838bfbbf47d48e9a3c35089467845f3f56265f7bee","access_level":"public","create_time":"$D2020-09-16T06:50:27.027Z","update_time":"$D2020-09-16T08:23:08.356Z","view_time":null,"first_public_time":"$D2020-09-16T06:53:36.668Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":274,"publish_version":274,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"COVID19 - Fallzahlen Kanton Zürich | Einreisequarantäne pro Kalenderwoche","cells":[{"id":0,"value":"md`# COVID19 - Fallzahlen Kanton Zürich | Einreisequarantäne pro Kalenderwoche`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"tabLastWeekQuarantine = table(sortedData, {\n sortable: true,\n style: 'normal',\n columns: {\n Kalenderwoche: {\n title: \"Kalenderwoche\",\n type: 'string',\n formatter(val, i) {\n return val.toLocaleString(\"de-CH\");\n }\n },\n Einreiseland: {\n title: \"Einreiseland\",\n type: 'string',\n formatter(val, i) {\n return val.toLocaleString('de-CH');\n }\n },\n Anzahl_Einreisende: {\n title: \"Anzahl Einreisende\",\n type: 'string',\n formatter(val, i) {\n return val.toLocaleString('de-CH');\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"table2 = table(sortedData, { title: \"Einreisequarantäne pro Kalenderwoche\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"table3 = html`\n\n\n\n\n\n\n${sortedData.map(\n ({ Kalenderwoche, Einreiseland, Anzahl_Einreisende }) =>\n html``\n)}

Kalenderwoche	Einreiseland	Anzahl Einreisende
${Kalenderwoche}	${Einreiseland}	${(\n Anzahl_Einreisende * 1\n ).toLocaleString()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"rohdaten = d3\n .csv(\n \"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_zh/COVID19_Einreisequarantaene_pro_KW.csv\"\n )\n .then(function(data) {\n data.forEach(function(d) {\n d.Kalenderwoche = d.Kalenderwoche;\n d.Einreiseland = d.Einreiseland;\n d.Anzahl_Einreisende = parseInt(d.Anzahl_Einreisende);\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"lastWeek = d3.max(rohdaten, function(d) {\n return +d.Kalenderwoche;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"// only current calendar week\nfilteredData = rohdaten.filter(function(d, i) {\n return d.Kalenderwoche == lastWeek;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"sortedData = filteredData\n .sort(function(a, b) {\n return +b.Anzahl_Einreisende - +a.Anzahl_Einreisende;\n }) // sort descending\n .filter(function(d, i) {\n return i < 10;\n }) // only keep top 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Functions & Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function row(data, detectedColumns, options) {\n return html`\n ${detectedColumns.map(column => td(data, column, options))}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function td(data, [key, { type, decimalsRequired }], options) {\n let rep = data[key];\n let title = \"\";\n if (rep === null) {\n rep = \"null\";\n } else if (rep === undefined) {\n rep = \"–\";\n } else {\n if (type === \"number\") {\n rep = new Intl.NumberFormat(\"de-CH\", {\n minimumFractionDigits: decimalsRequired\n }).format(data[key]);\n }\n if (type === \"date\") {\n title = data[key].toLocaleString(\"de-CH\");\n switch (options.date) {\n case \"day\":\n rep = basicDayFormat(data[key]);\n break;\n case \"year\":\n rep = basicYearFormat(data[key]);\n break;\n case \"full\":\n rep = data[key].toLocaleString(\"de-CH\").toLowerCase();\n break;\n }\n }\n }\n return html`${rep}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"tdStyles = ({\n number: \"text-align:right;font-variant-numeric:tabular-nums;\",\n date: \"font-variant-numeric:tabular-nums;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function header(detectedColumns) {\n return html`\n ${detectedColumns.map(th)}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function th([key, { type }]) {\n return html`${key}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"thStyles = ({\n number: \"text-align:right;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function recommendVerticalBorders(table) {\n let narrowCells = 0;\n for (let cell of table.querySelectorAll(\"tbody tr:first-child td\")) {\n if (cell.offsetWidth < 50) narrowCells++;\n if (narrowCells > 8) return true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function detectColumns(data) {\n let columns = new Map();\n for (let row of data) {\n for (let key in row) {\n if (columns.has(key)) continue;\n if (\n typeof row[key] === \"object\" &&\n row[key] !== null &&\n \"html\" in row[key]\n ) {\n columns.set(key, { type: \"html\" });\n } else {\n if (row[key] instanceof Date) {\n columns.set(key, { type: \"date\" });\n } else {\n columns.set(key, { type: typeof row[key] });\n }\n }\n }\n }\n for (let [key, { type }] of columns) {\n if (type === \"number\") {\n let decimalsRequired = 0;\n for (let row of data) {\n if (countDecimals(row[key]) > decimalsRequired) {\n decimalsRequired = countDecimals(row[key]);\n }\n if (decimalsRequired == 4) break;\n }\n columns.get(key).decimalsRequired = decimalsRequired;\n }\n }\n return [...columns.entries()];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"countDecimals = number =>\n number != null\n ? Math.min((number.toString().split(\".\")[1] || \"\").length, 4)\n : 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"basicDayFormat = d => {\n const month = (d.getMonth() + 1).toString().padStart(2, \"0\");\n const day = d\n .getDate()\n .toString()\n .padStart(2, \"0\");\n const year = d.getFullYear();\n return `${year}-${month}-${day}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"basicYearFormat = d => {\n return d.getFullYear().toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"idx = (() => {\n let i = 0;\n return () => ++i;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function getDropdowns(inputData, detectedColumns) {\n let dropdowns = new Map();\n // Find columns with under 25 distinct values and\n // avoiding columns with string values over 100.\n for (let [column] of detectedColumns) {\n let uniqueValues = new Set();\n for (let row of inputData) {\n uniqueValues.add(row[column]);\n if (uniqueValues.size > 25) break;\n if (typeof row[column] === \"string\" && row[column].length > 100) break;\n }\n if (uniqueValues.size !== 26) {\n dropdowns.set(column, uniqueValues);\n }\n }\n let ret = new Map();\n for (let [column, choices] of dropdowns) {\n ret.set(\n column,\n [...choices].sort((a, b) => (typeof a === \"string\" ? b > a : b - a))\n );\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Features`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function dropdown(column, choices, filters) {\n choices = [...choices];\n let id = idx();\n let elem = html``;\n if (filters[column] !== undefined) {\n elem.querySelector(\"select\").value = choices.indexOf(filters[column]);\n }\n elem.querySelector(\"select\").onchange = e => {\n elem.value = choices[e.target.value];\n elem.dispatchEvent(new CustomEvent(\"setfilters\"));\n };\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Icons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"searchIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"rightIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"leftIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"xCircleIcon = () =>\n svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"filterStyles = `\n.search {\n padding:5px 0;\n font-family: var(--sans-serif);\n font-size: 80%;\n border-bottom:1px solid #ccc;\n max-width: 640px;\n display: flex;\n justify-content: space-between;\n}\n.search .search-dropdown select {\n font-family: var(--sans-serif);\n}\n.search .search-dropdown {\n padding-right:10px;\n}\n.search .query {\n padding-bottom: 5px;\n}\n.search .filters {\n display: flex;\n flex-wrap: wrap;\n}\n.search .button {\n color: #aaa;\n}\n.search .button:hover {\n color: #000;\n cursor: pointer;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"import { table } from \"@khubert/tables@522\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"