Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/components/Analytics/WebsitePerformance.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import faker from 'faker/locale/en_US';
+
+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 };