semantic-ui-react#Responsive JavaScript Examples

function Mobile() {
  return (
    <Responsive {...Responsive.onlyMobile}>
      <Nav>
        <Menu.Menu position="right">
          <Dropdown item icon={null} trigger={<Icon name="bars" />}>
            <Dropdown.Menu items={items}>
              {items.map((item, idx) => (
                <Dropdown.Item key={idx} {...item} />
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Menu.Menu>
      </Nav>
    </Responsive>
  );
}

function Desktop() {
  return (
    <Responsive minWidth={Responsive.onlyTablet.minWidth}>
      <Nav>
        <Menu.Menu position="right">
          {items.map((item, idx) => (
            <Menu.Item key={idx} {...item} />
          ))}
        </Menu.Menu>
      </Nav>
    </Responsive>
  );
}

ResponsiveDiv = ({ children }) => (
  <>
    <Responsive as='div' maxWidth={Responsive.onlyTablet.minWidth - 1}>
      {children}
    </Responsive>
    <Responsive as='span' minWidth={Responsive.onlyTablet.minWidth}>
      {children}
    </Responsive>
  </>
)

ShareButton = () => {
  const url = `https://covid-19.wileam.com/`;
  return (
    <Responsive {...Responsive.onlyComputer}>
      <div style={{ textAlign: 'right' }}>
        Share the page:
        <Facebook link={url} />
        <Twitter link={url} />
      </div>
    </Responsive>
  );
}

DetailTable = ({ pageId }) => (
  <Segment>
    {// eslint-disable-next-line
    pageId === 'NT' ? (
      <a id='detail' className='target'></a>
    ) : (
      <a id='death' className='target'></a>
    )}
    <div className='title' style={{ marginBottom: '10px' }}>
      {pageId === 'AUS' ? (
        <>
          <Label as='a' color='red' ribbon>
            New
          </Label>
          <span className='ui small header'>
            Death cases details
            <Responsive as='span' {...Responsive.onlyMobile}>
              (best view on desktop)
            </Responsive>
            :
          </span>
        </>
      ) : (
        <h2 className='ui small header'>
          Confirmed cases details
          <Responsive as='span' {...Responsive.onlyMobile}>
            (best view on desktop)
          </Responsive>
          :
        </h2>
      )}
    </div>
    <Iframe
      className='airtable-embed'
      url={`https://airtable.com/embed/${STATE_KEY_MAP[pageId]}?backgroundColor=teal`}
      frameborder='0'
      onmousewheel=''
      width='100%'
      height='500'
    />
  </Segment>
)

AusSummary = ({ pageId, data, setActive }) => {
  let OFFSET = {};
  let offsetText = '';
  try {
    OFFSET = JSON.parse(data.offset[1].config);
    for (const key in OFFSET) {
      if (OFFSET.hasOwnProperty(key)) {
        const stateOffset = OFFSET[key];
        if (
          stateOffset.totalConfirmed &&
          stateOffset.totalConfirmed !== 0 &&
          key !== 'AUS'
        ) {
          if (offsetText) {
            offsetText += ', ';
          }
          offsetText += `${key} State ${
            data[key].dailyHistorys[data[key].dailyHistorys.length - 1]
              .totalConfirmed
          }`;
        }
      }
    }
    if (offsetText) {
      offsetText += '.';
    }
  } catch (error) {
    OFFSET = {};
    console.error(error);
  }
  const dailyHistorys = data[pageId].dailyHistorys;
  const todaySummary = dailyHistorys[dailyHistorys.length - 1];
  const totalRemianNumber =
    todaySummary.totalConfirmed -
    todaySummary.totalDeath -
    todaySummary.totalRecovered;
  const totalConfirmed = getActualNumber(
    OFFSET,
    pageId,
    'totalConfirmed',
    todaySummary
  );
  const totalRecovered = getActualNumber(
    OFFSET,
    pageId,
    'totalRecovered',
    todaySummary
  );
  const totalDeath = getActualNumber(
    OFFSET,
    pageId,
    'totalDeath',
    todaySummary
  );
  let totalTested = 0;
  states.forEach(state => {
    totalTested += data[state].statistics[0]['total tested'];
  });
  return (
    <div className='summary'>
      {
        // eslint-disable-next-line
        <a id='summary' className='target'></a>
      }
      <h2 className='ui small header'>Summary data:</h2>
      <Grid columns='equal'>
        <Grid.Column>
          <Statistic color='blue' label='Active' value={totalRemianNumber} />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newConfirmed} showDonut={true} />
          <Statistic color='red' label='Total' value={totalConfirmed} />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newDeath} />
          <Statistic
            color='grey'
            label='Death'
            value={getActualNumber(OFFSET, pageId, 'totalDeath', todaySummary)}
          />
        </Grid.Column>
        <Grid.Column>
          <NewNumber newNumber={todaySummary.newRecovered} showZero={false} />
          <Statistic color='green' label='Recovered' value={totalRecovered} />
        </Grid.Column>
      </Grid>
      <Table unstackable compact>
        <Table.Header>
          <Table.Row textAlign='center'>
            <Table.HeaderCell>State</Table.HeaderCell>
            <Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
              Active
            </Responsive>
            <Table.HeaderCell>Total</Table.HeaderCell>
            <Table.HeaderCell>Death</Table.HeaderCell>
            <Table.HeaderCell>
              Recovered
              <ResponsiveDiv>
                <small>(%)</small>
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              Tested
              <ResponsiveDiv>
                <small>(positive %)</small>
              </ResponsiveDiv>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {states.map(state => {
            const dailyHistorys = data[state].dailyHistorys;
            const todaySummary = dailyHistorys[dailyHistorys.length - 1];
            const statistic = data[state].statistics[0];
            const totalTested = statistic
              ? statistic['total tested']
              : 'pending';
            const totalTestedReport = data[state].totalTestedReport;
            const totalConfirmed = getActualNumber(
              OFFSET,
              state,
              'totalConfirmed',
              todaySummary
            );
            const totalRecovered = getActualNumber(
              OFFSET,
              state,
              'totalRecovered',
              todaySummary
            );
            const totalDeath = getActualNumber(
              OFFSET,
              state,
              'totalDeath',
              todaySummary
            );

            return (
              <Table.Row textAlign='center' key={state}>
                <Table.Cell>
                  <NavLink
                    exact
                    activeClassName='active'
                    to={state}
                    onClick={() => setActive(state)}
                  >
                    {state}
                  </NavLink>
                </Table.Cell>
                <Responsive as='td' minWidth={Responsive.onlyTablet.minWidth}>
                  {todaySummary.totalConfirmed -
                    todaySummary.totalRecovered -
                    todaySummary.totalDeath}
                </Responsive>
                <Table.Cell>
                  <strong>{totalConfirmed}</strong>
                  {OFFSET[state] &&
                    typeof OFFSET[state].totalConfirmed === 'number' &&
                    OFFSET[state].totalConfirmed !== 0 && <span>*</span>}
                  <ResponsiveDiv>
                    <NewNumber
                      newNumber={todaySummary.newConfirmed}
                      showDonut={true}
                      className='new-number'
                    />
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalDeath}{' '}
                  <ResponsiveDiv>
                    <NewNumber
                      newNumber={todaySummary.newDeath}
                      className='new-number'
                    />
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalRecovered}
                  <ResponsiveDiv>
                    <small className='new-number'>
                      {((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
                    </small>
                  </ResponsiveDiv>
                </Table.Cell>
                <Table.Cell>
                  {totalTestedReport && totalTestedReport.count
                    ? Math.max(
                        totalTestedReport.count,
                        totalTested
                      ).toLocaleString()
                    : totalTested.toLocaleString()}
                  <ResponsiveDiv>
                    <small>
                      ({((totalConfirmed / totalTested) * 100).toFixed(1)}
                      %)
                    </small>
                  </ResponsiveDiv>
                </Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
        <Table.Footer>
          <Table.Row textAlign='center'>
            <Table.HeaderCell>Total</Table.HeaderCell>
            <Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
              {totalRemianNumber.toLocaleString()}
            </Responsive>
            <Table.HeaderCell>
              <strong>{totalConfirmed.toLocaleString()}</strong>
              <ResponsiveDiv>
                <NewNumber
                  newNumber={todaySummary.newConfirmed}
                  showDonut={true}
                  className='new-number'
                />
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalDeath.toLocaleString()}
              <ResponsiveDiv>
                <NewNumber
                  newNumber={todaySummary.newDeath}
                  className='new-number'
                />
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalRecovered.toLocaleString()}
              <ResponsiveDiv>
                <small className='new-number'>
                  {((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
                </small>
              </ResponsiveDiv>
            </Table.HeaderCell>
            <Table.HeaderCell>
              {totalTested.toLocaleString()}
              <ResponsiveDiv>
                <small>
                  ({((totalConfirmed / totalTested) * 100).toFixed(1)}%)
                </small>
              </ResponsiveDiv>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
      {offsetText && (
        <p style={{ marginTop: '10px' }}>
          <small>
            * Numbers in this national summary page reconciles with{' '}
            <a href='https://www.health.gov.au/resources/publications/coronavirus-covid-19-at-a-glance'>
              Feds number
            </a>
            , states with different number: {offsetText}
          </small>
          <br />
          <small>
            * Reason for that is the federal government reports cases according
            to residency while states generally report cases diagnosed in the
            state.
          </small>
          <br />
          <small>
            * On 3 July, 189 historic cases reported in crew members on board a
            ship were classified as Australian cases and included in national
            NSW totals, dated 15 April.
          </small>
        </p>
      )}
    </div>
  );
}

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>
      )}
    </>
  );
}