import React from 'react'
import { Spinner } from 'react-bootstrap';
/**
* Create a Stat object component
* @class Stat
*
* @prop {string} background - Background color value
* @prop {string} value - The value to display
* @prop {string} [addValue=''] - Secondary value to display
* @prop {string} type - The type of statistic
*
* @extends React.Component<Props>
*/
export default class Stat extends React.Component {
constructor(props) {
super(props);
}
addValueProcess(val){
return {'type': typeof val, 'value': val}
}
addValueRender(val){
switch (val.type) {
case 'number':
return (
<div className="additional-value ">
<span>
<i className={`fas fa-caret-${val.value >= 0 ? 'up' : 'down'} `} style={{ fontSize: '1vw' }} />
</span>
{val.value}%
</div>
)
break;
case 'string':
if(!val.value.includes('rgb')){
return (
<div className="additional-value-image">
<img src={val.value}/>
</div>
)}
break
default:
break;
}
}
render() {
let addValue = this.addValueProcess(this.props.addValue);
let addValueFa = addValue >= 0 ? <i class="fas fa-caret-up"></i> : <i class="fas fa-caret-down"></i>
let length = this.props.value.length
return (
<div className="col-md data-viz-statistics" style={{ background: this.props.background }}>
<div className="row ">
<div className="col-md-2 text-left">
<i className={`${this.props.fa} center-item`}></i>
</div>
{this.addValueRender(addValue)}
{this.props.loading ? (<Spinner animation="grow" role="status" variant="light" />) : ''}
<div className="col">
<div className="row">
<div className="col text-right font-weight-bold">
<h5 className={length > 15 ? 'reduce' : ''}>{this.props.value}</h5>
</div>
</div>
<div className="row">
<div className="col text-right text-muted text-uppercase text-small">{this.props.type}</div>
</div>
</div>
</div>
</div>
)
}
}