56 lines
1.6 KiB
JavaScript
Executable File
56 lines
1.6 KiB
JavaScript
Executable File
import React from 'react';
|
|
import { faker } from '@faker-js/faker/locale/fr';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
Row,
|
|
Col
|
|
} from './../../../components';
|
|
|
|
import {
|
|
TinyAreaChart
|
|
} from "./../../Graphs/ReCharts/components/TinyAreaChart";
|
|
|
|
const WebsitePerformance = (props) => (
|
|
<React.Fragment>
|
|
<Row noGutters className="flex-column-reverse flex-md-row flex-nowrap">
|
|
<Col sm={ 12 } md="auto" className="d-flex align-items-start flex-column flex-fill">
|
|
<h6 className="mb-auto d-none d-md-block text-md-left">
|
|
{ props.title }
|
|
</h6>
|
|
<TinyAreaChart />
|
|
</Col>
|
|
<Col sm={ 12 } md="auto" className="text-center text-md-right pl-md-2">
|
|
<h2>
|
|
{ props.value }
|
|
</h2>
|
|
<div className={ `mb-1 ${ props.valuePercentColor }` }>
|
|
<i className={ `fa mr-1 fa-${ props.valuePercentIcon }` }></i>
|
|
{ props.valuePercent }%
|
|
</div>
|
|
<div>
|
|
vs { faker.finance .amount() } <i>(prev.)</i>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</React.Fragment>
|
|
)
|
|
WebsitePerformance.propTypes = {
|
|
title: PropTypes.node,
|
|
value: PropTypes.node,
|
|
valuePercentColor: PropTypes.node,
|
|
valuePercentIcon: PropTypes.node,
|
|
valuePercent: PropTypes.node
|
|
};
|
|
WebsitePerformance.defaultProps = {
|
|
title: "Title",
|
|
value: "00.000",
|
|
valuePercentColor: "text-muted",
|
|
valuePercentIcon: "caret-down",
|
|
valuePercent: "00,00"
|
|
};
|
|
|
|
|
|
export { WebsitePerformance };
|