generateTable = (filter) => { let table let sortIndex = 'latest' let sortBy = 'confirmed' let orderBy = 'desc' let selectedCountry = '' let perPage = 25 let page = 1 const makeTable = (data) => { const headRow = html`` const headCells = [ {label: '#', width: 70}, {label: `Country`, sortkey: ['country'], width: 120}, {label: `Total`, sortkey: ['confirmed'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedConfirmed', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedConfirmed', 'stats'], align: 'right', width: 130, td: true}, {label: `Total`, sortkey: ['deaths'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedDeaths', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedDeaths', 'stats'], align: 'right', width: 130, td: true}, {label: `Total`, sortkey: ['recovered'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedRecovered', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedRecovered', 'stats'], align: 'right', width: 130, td: true}, ] const thead = html`` const table = html`` const hrow1 = html`` const hrow2 = html`` headCells.map(({label, align, width, sortkey, td}) => { const th = html`<${td ? 'td' : 'th'} align='${align}' width=${width} style="text-align: ${align};">${label}` if (sortkey) { const sortIndicator = sortkey[0] === sortBy ? (orderBy === 'desc' ? Icon('SortAscending', 12) : Icon('SortDescending', 12) ) : Icon('Sort', 12, '#CCC') th.onclick = e => { setSortBy(...sortkey)(e) } th.append(html`${sortIndicator}`) } return th }) .map(e => hrow2.append(e)) const overset = [ {label: 'General', colspan: 2}, {label: 'Confirmed', colspan: 3}, {label: 'Deaths', colspan: 3}, {label: 'Recovered', colspan: 3}, ] overset.map(({label, colspan}) => hrow1.append(html``)) thead.append(hrow1) thead.append(hrow2) table.append(thead) const tbody = html`` const filterRegExp = filter && new RegExp(filter.toLowerCase()) const rows = data.filter((e, i) => i < (page * perPage) && i >= ((page - 1) * perPage) ) .filter((e, i) => { console.log('checking filter', {filter}) const filterRegExp = new RegExp(filter.toLowerCase(), 'ig') const code = e.country const { name } = (worldData[e.country]) || {name: code} const isCode = filterRegExp.exec(code) const isName = filterRegExp.exec(name) console.log('matching:', {isCode, isName, name}) return !filter || isName || isCode }) if (rows && rows.length) { rows.map((e, index) => [e, makeRow({...e, index: index + ((page - 1) * perPage)}, selectedCountry)]) .map(([e, row]) => { row.onclick = () => selectCountry(e.country) tbody.append(row) }) } table.append(tbody) const tfoot = html`` const pages = Math.ceil(data.length / perPage) const actions = html`

` const pagesEl = html`

Total countries on record: ${data.length}Page:${actions}

` const pagesCont = html`

${pagesCont}`) table.append(tfoot) table.append(tableStyle) return table } const container = html`

` const reloadTable = () => { const data = prepareData(dataset, sortIndex, sortBy, orderBy) const table = makeTable(data) if (container.lastChild) container.removeChild(container.lastChild) container.append(table) container.value = [selectedCountry, page] container.dispatchEvent(new CustomEvent("input")); } const setSortBy = (what, index = 'latest') => e => { if (sortBy === what) { orderBy = orderBy === 'desc' ? 'asc' : 'desc' } else { sortBy = what orderBy = 'desc' } index = index === 'stats' ? index : 'latest' sortIndex = index reloadTable() } const selectCountry = country => { selectedCountry = country reloadTable() } const updatePage = newPage => { page = newPage reloadTable() } reloadTable() container.value = [''] return container }

${label}
` pagesCont.append(pagesEl) const paginators = Array(pages).fill(0).map((_, index) => { const cl = html`${index + 1}` cl.onclick = () => { updatePage(index + 1) } return cl }) paginators.map(e => actions.append(e)) tfoot.append(html`