import React from 'react'; import { AgGridReact } from 'ag-grid-react'; import { Header, Responsive } from 'semantic-ui-react'; export const TestsAndCasesByLocation = ({ id, totalTestedReport, suburbMapping }) => { const records = totalTestedReport.testsAndCasesByPostcode; let columnDefsDesktop = [ { headerName: 'Postcode', flex: 1, field: 'postcode', sortable: true, minWidth: 80 }, { headerName: 'Suburb', flex: 2, valueGetter: ({ data }) => suburbMapping[data.postcode].join(', ').toLowerCase(), tooltipValueGetter: ({ value }) => value, tooltipShowDelay: 500, minWidth: 120 }, { headerName: 'Tested', flex: 1, field: 'total', sort: 'desc', filter: 'agNumberColumnFilter', floatingFilterComponentParams: { suppressFilterButton: false }, minWidth: 80 }, { headerName: 'Confirmed', flex: 1, field: 'confirmed', filter: 'agNumberColumnFilter', floatingFilterComponentParams: { suppressFilterButton: false }, minWidth: 80 }, { headerName: 'Unknown', flex: 1, field: 'unknown', filter: 'agNumberColumnFilter', floatingFilterComponentParams: { suppressFilterButton: false }, minWidth: 80 }, { headerName: 'Positive %', flex: 1, valueGetter: "(data.confirmed/data.total * 100).toFixed(2) + '%'", minWidth: 80 }, { headerName: 'Council', flex: 1.5, field: 'council', minWidth: 120 } ]; let columnDefsMobile = [ { headerName: 'Postcode', flex: 1.1, field: 'postcode', sortable: true }, { headerName: 'Confirmed', flex: 1.1, field: 'confirmed' }, { headerName: 'Unknown', flex: 1, field: 'unknown' }, { headerName: 'Pos%', flex: 1, valueGetter: "(data.confirmed/data.total * 100).toFixed(2) + '%'", filter: false, floatingFilterComponentParams: { suppressFilterButton: false } } ]; const gridOptionsDesktop = { columnDefs: columnDefsDesktop, defaultColDef: { suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true }, flex: 1, minWidth: 50, sortable: true, resizable: true, filter: 'agTextColumnFilter' }, floatingFilter: true }; const gridOptionsMobile = { columnDefs: columnDefsMobile, defaultColDef: { suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true }, flex: 1, minWidth: 50, sortable: true, resizable: true, filter: 'agTextColumnFilter' }, floatingFilter: true }; return ( <> <Header as='h4'>Summary data by location</Header> <p> Number of tests/confirmed/source unknown(community transmission) cases by location. NSW has done{' '} <strong>{totalTestedReport.count.toLocaleString()}</strong> tests. </p> <small> * Filter by columns separately or combined, sort by click the column header. </small> <Responsive minWidth={Responsive.onlyTablet.minWidth}> <div className='ag-theme-balham' style={{ height: '400px', width: '100%' }} > <AgGridReact gridOptions={gridOptionsDesktop} rowData={records} /> </div> </Responsive> <Responsive maxWidth={Responsive.onlyTablet.minWidth - 1}> <strong> <small> Please use desktop to see more columns and better filter functionality. </small> </strong> <div className='ag-theme-balham' style={{ height: '300px', width: '100%' }} > <AgGridReact gridOptions={gridOptionsMobile} rowData={records} /> </div> </Responsive> {id === 'NSW' && ( <small> * Data source: always up to date from{' '} <a href='https://data.nsw.gov.au/nsw-covid-19-data/'> NSW Health open data </a> , data in table excluded{' '} {totalTestedReport.countNonNswCases.toLocaleString()} tests postcode doesn't have a valid nsw postcode, and{' '} {totalTestedReport.countNoLocationNswCases.toLocaleString()} tests has no location information. </small> )} </> ); };