render() { const { color } = this.props; const { data, loadingState } = this.state; return ( <> {!loadingState ? <Statistic inverted size='huge' color={color} style={{ height: '100%', marginTop: '5em' }}> <Statistic.Value>{data.value}</Statistic.Value> <Statistic.Label>{data.label}</Statistic.Label> </Statistic> : <Dimmer active> <Loader>Loading</Loader> </Dimmer> } </> ) }
const ExampleStatistics = () => <Grid> <Grid.Column computer={4} mobile={8}> <Segment textAlign='center' color='green'> <Statistic size='small'> <Statistic.Value>5,550</Statistic.Value> <Statistic.Label>Books</Statistic.Label> </Statistic> </Segment> </Grid.Column> <Grid.Column computer={4} mobile={8}> <Segment textAlign='center' color='orange'> <Statistic size='small'> <Statistic.Value>1680</Statistic.Value> <Statistic.Label>Tapes</Statistic.Label> </Statistic> </Segment> </Grid.Column> <Grid.Column computer={4} mobile={8}> <Segment textAlign='center'> <Statistic size='small'> <Statistic.Value>56734</Statistic.Value> <Statistic.Label>Images</Statistic.Label> </Statistic> </Segment> </Grid.Column> </Grid>
<Statistic size='small' inverted style={{ zIndex: 1, position: 'absolute', textShadow: '5px 5px 5px #1c1c1c' }}> <Statistic.Value>{typeof data[data.length - 1].y === 'number' ? Math.floor(data[data.length - 1].y) : data[data.length - 1].y}</Statistic.Value> <Statistic.Label>{data[data.length - 1].x}</Statistic.Label> </Statistic> : null}