semantic-ui-react#Statistic JavaScript Examples

export default function CounterDisplay() {
  const [count] = useContext(CounterContext);

  return (
    <Statistic>
      <Statistic.Value>{count}</Statistic.Value>
      <Statistic.Label>Counter</Statistic.Label>
    </Statistic>
  );
}

render() {
    const { currentLoans, loanRequests, documentRequests, anchors } =
      this.props;
    return (
      <Container className="spaced">
        <Statistic.Group widths="three" size="small">
          {this.renderStatistic(
            currentLoans,
            (isPlural) => `ongoing loan${isPlural ? 's' : ''}`,
            anchors.currentLoansRef
          )}
          {this.renderStatistic(
            loanRequests,
            (isPlural) => `loan request${isPlural ? 's' : ''}`,
            anchors.pendingLoansRef
          )}
          {this.renderStatistic(
            documentRequests,
            (isPlural) => `Request${isPlural ? 's' : ''} for new literature`,
            anchors.currentDoqRequestsRef
          )}
        </Statistic.Group>
      </Container>
    );
  }

renderStatistic(stat, quantifiableLabel, anchor) {
    const {
      isLoading,
      data: { total },
    } = stat;

    return (
      <Statistic onClick={() => this.scrollTo(anchor)} className="anchored">
        <Statistic.Value>
          {isLoading ? <Loader active inline /> : total}
        </Statistic.Value>
        <Statistic.Label>
          {isLoading ? <>&nbsp;</> : quantifiableLabel(total !== 1)}
        </Statistic.Label>
      </Statistic>
    );
  }

render() {
    const {
      brwReq: { status },
    } = this.props;
    const widths = status === 'CANCELLED' ? 'one' : 'two';
    return (
      <Statistic.Group widths={widths} className="detail-statistics">
        {this.renderStatus()}
        {status !== 'CANCELLED' && this.renderDueDate()}
      </Statistic.Group>
    );
  }

renderDueDate() {
    const {
      brwReq: { due_date: dueDate },
    } = this.props;
    return (
      <Statistic>
        <Statistic.Label>Due date</Statistic.Label>
        <Statistic.Value>{dueDate ? dueDate : '-'}</Statistic.Value>
      </Statistic>
    );
  }

renderStatusCancelled(status) {
    const {
      brwReq: { cancel_reason: cancelReason },
    } = this.props;
    return (
      <Statistic color="grey">
        <Statistic.Value>{status}</Statistic.Value>
        <Statistic.Label>Reason: {cancelReason || '-'}</Statistic.Label>
      </Statistic>
    );
  }

render() {
    const {
      order: { status },
    } = this.props;
    const widths = status === 'CANCELLED' ? 'one' : 'three';
    return (
      <Statistic.Group widths={widths} className="detail-statistics">
        {this.renderStatus()}
        {status !== 'CANCELLED' && this.renderItemCount()}
        {status !== 'CANCELLED' && this.renderGrandTotal()}
      </Statistic.Group>
    );
  }

renderGrandTotal() {
    const { order } = this.props;

    return (
      <Statistic>
        <Statistic.Label>Total</Statistic.Label>
        <>
          <Statistic.Value>
            {formatPrice(order.grand_total, false) || '-'}
          </Statistic.Value>
          {order.grand_total && (
            <Statistic.Label>{order.grand_total.currency}</Statistic.Label>
          )}
        </>
      </Statistic>
    );
  }

renderItemCount() {
    const { order } = this.props;
    let received = 0;
    let ordered = 0;
    for (const orderLine of order.order_lines) {
      received += orderLine.copies_received || 0;
      ordered += orderLine.copies_ordered || 0;
    }
    return (
      <Statistic>
        <Statistic.Label>Received</Statistic.Label>
        <Statistic.Value>
          {received}/{ordered}
        </Statistic.Value>
        <Statistic.Label>copies</Statistic.Label>
      </Statistic>
    );
  }

renderStatusOrdered() {
    const { order } = this.props;

    return (
      <Statistic color="yellow">
        <Statistic.Label>Expected delivery</Statistic.Label>
        <Statistic.Value>{order.expected_delivery_date || '-'}</Statistic.Value>
      </Statistic>
    );
  }

renderStatusReceived() {
    const { order } = this.props;

    return (
      <Statistic color="green">
        <Statistic.Label>Delivered</Statistic.Label>
        <Statistic.Value>{order.received_date || '-'}</Statistic.Value>
      </Statistic>
    );
  }

renderStatusCancelled(status) {
    const { order } = this.props;

    return (
      <Statistic color="grey">
        <Statistic.Value>{status}</Statistic.Value>
        <Statistic.Label>Reason: {order.cancel_reason || '-'}</Statistic.Label>
      </Statistic>
    );
  }

export default function CounterDisplay() {
  const [count] = useContext(CounterContext);

  return (
    <Statistic>
      <Statistic.Value>{count}</Statistic.Value>
      <Statistic.Label>Counter</Statistic.Label>
    </Statistic>
  );
}

renderStatusPending(status) {
    return (
      <Statistic>
        <Statistic.Label>Status</Statistic.Label>
        <Statistic.Value>{status}</Statistic.Value>
      </Statistic>
    );
  }

render() {
    const { document, anchors } = this.props;
    return (
      <Statistic.Group
        widths="five"
        size="tiny"
        className="bo-document-summary"
      >
        <Statistic
          onClick={() => this.scrollTo(anchors.attachedItemsRef)}
          className="anchored"
        >
          <Statistic.Value>
            {document.metadata.items.total || 0}
          </Statistic.Value>
          <Statistic.Label>
            <ItemIcon />
            Physical copies
          </Statistic.Label>
        </Statistic>
        <Statistic
          onClick={() => this.scrollTo(anchors.attachedEItemsRef)}
          className="anchored"
        >
          <Statistic.Value>
            {document.metadata.eitems.total || 0}
          </Statistic.Value>
          <Statistic.Label>
            <EItemIcon /> E-items
          </Statistic.Label>
        </Statistic>
        <Statistic
          onClick={() => this.scrollTo(anchors.attachedItemsRef)}
          className="anchored"
        >
          <Statistic.Value>
            {document.metadata.circulation.active_loans_count}
          </Statistic.Value>
          <Statistic.Label>
            <LoanIcon />
            Active loans
          </Statistic.Label>
        </Statistic>
        <Statistic
          onClick={() => this.scrollTo(anchors.loanRequestsRef)}
          className="anchored"
        >
          <Statistic.Value>
            {document.metadata.circulation.pending_loans_count}
          </Statistic.Value>
          <Statistic.Label>
            <Icon name="wait" />
            Loan requests
          </Statistic.Label>
        </Statistic>
        <Statistic
          className="anchored"
          onClick={() => this.scrollTo(anchors.attachedItemsRef)}
        >
          <Statistic.Value>
            {document.metadata.circulation.available_items_for_loan_count}
          </Statistic.Value>
          <Statistic.Label>Items available for loan</Statistic.Label>
        </Statistic>
      </Statistic.Group>
    );
  }

renderStatusOthers(status) {
    return (
      <Statistic>
        <Statistic.Label>Status</Statistic.Label>
        <Statistic.Value>{status}</Statistic.Value>
      </Statistic>
    );
  }

export default function BlockNumber (props) {
  const { api } = useSubstrate();
  const { finalized } = props;
  const [blockNumber, setBlockNumber] = useState(0);
  const [blockNumberTimer, setBlockNumberTimer] = useState(0);

  const bestNumber = finalized
    ? api.derive.chain.bestNumberFinalized
    : api.derive.chain.bestNumber;

  useEffect(() => {
    let unsubscribeAll = null;

    bestNumber(number => {
      setBlockNumber(number.toNumber());
      setBlockNumberTimer(0);
    }).then(unsub => {
      unsubscribeAll = unsub;
    }).catch(console.error);

    return () => unsubscribeAll && unsubscribeAll();
  }, [bestNumber]);

  const timer = () => {
    setBlockNumberTimer(time => time + 1);
  };

  useEffect(() => {
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <Grid.Column>
      <Card>
        <Card.Content textAlign='center'>
          <Statistic
            label={(finalized ? 'Finalized' : 'Current') + ' Block Number'}
            value={blockNumber}
          />
        </Card.Content>
        <Card.Content extra>
          <Icon name='time' /> {blockNumberTimer}
        </Card.Content>
      </Card>
    </Grid.Column>
  );
}

render() {
        const user = jwt_decode(Cache.getItem(AUTH_USER_ID_TOKEN_KEY));
        return (
            <div className='page-container'>
                <Grid centered>
                    <Grid.Row centered>
                        <Container text>
                            <Header as='h1' style={{ fontSize: '2em', paddingTop: '0.75em',}}>
                                {`Welcome back, ${this.props.auth.user.name ? this.props.auth.user.name : user.name}!`}
                            </Header>
                        </Container>
                    </Grid.Row>
                    <Grid.Row centered style={{ paddingBottom: '4em',}}>
                        <Button
                            color='blue'
                            size='huge'
                            onClick={this.handleClick}
                            icon
                            labelPosition='right'
                        >
                            <Icon name='arrow circle right'/> Book an MRI
                        </Button>
                    </Grid.Row>
                    <Grid.Row centered>
                        <StatisticGroup>
                            <Statistic>
                                <Statistic.Value>{this.props.info.daily}</Statistic.Value>
                                <Statistic.Label>Forms processed today</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>{this.props.info.weekly}</Statistic.Value>
                                <Statistic.Label>Forms processed this week</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>{this.props.info.monthly}</Statistic.Value>
                                <Statistic.Label>Forms processed this month</Statistic.Label>
                            </Statistic>
                        </StatisticGroup>
                    </Grid.Row>
                </Grid>
            </div>
        )
    }

Summary = ({ pageId, todaySummarys }) => {
  const {
    totalConfirmed,
    totalRecovered,
    totalDeath,
    newConfirmed,
    newRecovered,
    newDeath
  } = todaySummarys;

  const totalRemianNumber = totalConfirmed - totalRecovered - totalDeath;

  return (
    <Segment>
      {
        // eslint-disable-next-line
        <a id='summary' className='target'></a>
      }
      <div className='summary'>
        <p>
          <strong>Summary data: </strong>
        </p>
        <Grid columns='equal'>
          <Grid.Column>
            <Statistic color='blue' label='Active' value={totalRemianNumber} />
          </Grid.Column>
          <Grid.Column>
            <NewNumber newNumber={newConfirmed} showDonut={true} />
            <Statistic color='red' label='Total' value={totalConfirmed} />
          </Grid.Column>
          <Grid.Column>
            <NewNumber newNumber={newDeath} />
            <Statistic color='grey' label='Death' value={totalDeath} />
          </Grid.Column>
          <Grid.Column>
            <NewNumber newNumber={newRecovered} showZero={false} />
            <Statistic color='green' label='Recovered' value={totalRecovered} />
          </Grid.Column>
        </Grid>
      </div>
    </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>
  );
}