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 };

app/routes/components/Analytics/SessionsByDevice.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SessionsByDevice = (props) => (
+    <React.Fragment>
+        <div className={ `mb-2 ${ props.valuePercentColor }` }>
+            { props.title }
+        </div>
+        <h2 className={ `${ props.valuePercentColor }` }>
+            { props.valuePercent }%
+        </h2>
+        <div className={ `mb-3 ${ props.valueColor }` }>
+            { props.value }
+        </div>
+    </React.Fragment>
+)
+SessionsByDevice.propTypes = {
+    title: PropTypes.node,
+    titlePercentColor: PropTypes.node,
+    valuePercent: PropTypes.string,
+    valuePercentColor: PropTypes.node,
+    value: PropTypes.node,
+    valueColor: PropTypes.node
+};
+SessionsByDevice.defaultProps = {
+    title: "Title",
+    titlePercentColor: "text-inverse",
+    valuePercent: "00,0",
+    valuePercentColor: "text-muted",
+    value: "000,000",
+    valueColor: "text-muted"
+};
+
+
+export { SessionsByDevice };

app/routes/components/Analytics/TinyAreaChart.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChart = ({ height }) => (
+    <ResponsiveContainer width='100%' height={ height }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+TinyAreaChart.propTypes = {
+    height: PropTypes.number,
+};
+TinyAreaChart.defaultProps = {
+    height: 25,
+};
+
+export { TinyAreaChart };

app/routes/components/Analytics/TinyAreaChartSpend.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import _ from 'lodash';
+import {  
+    ResponsiveContainer,
+    AreaChart, 
+    Area
+} from 'recharts';
+
+import colors from './../../../colors';
+
+const data = _.times(20, () => ({ pv: Math.random() * 100 }));
+
+const TinyAreaChartSpend = () => (
+    <ResponsiveContainer width='100%' height={ 125 }>
+        <AreaChart data={data}>
+            <Area dataKey='pv' stroke={ colors['primary'] } fill={ colors['primary-02'] } />
+        </AreaChart>
+    </ResponsiveContainer>
+);
+
+export { TinyAreaChartSpend };

app/routes/components/Analytics/TrTableTrafficChannels.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import _ from 'lodash';
+import faker from 'faker/locale/en_US';
+import {  
+    Media, 
+    Avatar,
+    AvatarAddOn
+} from './../../../components';
+
+import { randomArray } from './../../../utilities';
+
+import {
+    TinyAreaChart
+} from "./TinyAreaChart";
+
+const channel = [
+    "Organic Search",
+    "Display",
+    "Direct",
+    "Paid Search"
+];
+
+const change = [
+    "75,0% ",
+    "34,4% ",
+    "12,9%",
+    "23,0%"
+];
+
+const TrTableTrafficChannels = () => (
+    <React.Fragment>
+        {
+            _.times(5, (index) => (
+                <tr key={ index }>
+                    <td className="align-middle text-inverse">
+                        { randomArray(channel) }
+                    </td>
+                    <td className="text-inverse align-middle">
+                        { faker.finance.amount() }
+                    </td>
+                    <td className="align-middle">
+                        { faker.finance.amount() }
+                    </td>
+                    <td className="align-middle text-right">
+                        { randomArray(change) } <i className="fa fa-caret-down text-danger ml-1"></i>
+                    </td>
+                    <td className="text-right align-middle">
+                        <TinyAreaChart />
+                    </td>
+                </tr>
+            ))
+        }
+    </React.Fragment>
+)
+
+export { TrTableTrafficChannels };

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 };