Init

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

app/routes/components/Analytics/MetricVsTarget.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { 
+    Progress,
+    InputGroupAddon,
+    InputGroupText,
+    Input,
+    InputGroup
+} from './../../../components';
+
+
+const MetricVsTarget = (props) => (
+    <React.Fragment>
+        <h2 className="pt-4 pb-2">
+            { props.value }
+        </h2>
+        <Progress value={ `${ props.progressbarValue }` } color={ `${ props.progressbarColor }` } className="mb-2" style={{height: "5px"}} />
+        <div className="mb-3">
+            Target: { props.targetValue }
+        </div>
+        <InputGroup className="mb-1">
+            <InputGroupAddon addonType="prepend">
+                <InputGroupText>Daily Target:</InputGroupText>
+            </InputGroupAddon>
+            <Input placeholder="Enter..." />
+        </InputGroup>
+    </React.Fragment>
+)
+MetricVsTarget.propTypes = {
+    title: PropTypes.node,
+    value: PropTypes.node,
+    progressbarValue: PropTypes.string,
+    progressbarColor: PropTypes.node,
+    targetValue: PropTypes.node
+};
+MetricVsTarget.defaultProps = {
+    title: "Title",
+    value: "000.000",
+    progressbarValue: "24",
+    progressbarColor: "secondary",
+    targetValue: "000.000"
+};
+
+
+export { MetricVsTarget };