Tomasz Owczarczyk
770
app/routes/Widgets/Widgets.js
Executable file
770
app/routes/Widgets/Widgets.js
Executable file
@@ -0,0 +1,770 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardBody,
|
||||
ListGroup,
|
||||
ListGroupItem,
|
||||
CardDeck,
|
||||
Progress,
|
||||
CardFooter,
|
||||
CardColumns,
|
||||
CardTitle,
|
||||
InputGroup,
|
||||
Input,
|
||||
InputGroupAddon,
|
||||
UncontrolledButtonDropdown,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
DropdownItem,
|
||||
Button
|
||||
} from './../../components'
|
||||
import { HeaderMain } from "../components/HeaderMain";
|
||||
import {
|
||||
HeaderDemo
|
||||
} from "../components/HeaderDemo";
|
||||
import {
|
||||
TasksCardGrid
|
||||
} from "../components/Tasks/TasksCardGrid";
|
||||
import {
|
||||
ProfileOverviewCard
|
||||
} from "../components/Profile/ProfileOverviewCard";
|
||||
import {
|
||||
GalleryCard
|
||||
} from "../components/Gallery/GalleryCard";
|
||||
import {
|
||||
UsersResultsCard
|
||||
} from "../components/SearchResults/UsersResultsCard";
|
||||
import {
|
||||
ImagesResultsCard
|
||||
} from "../components/SearchResults/ImagesResultsCard";
|
||||
import {
|
||||
Attachment
|
||||
} from "../components/Attachment";
|
||||
import {
|
||||
Comment
|
||||
} from "../components/Comment";
|
||||
import {
|
||||
ChatLeft
|
||||
} from "../components/Chat/ChatLeft";
|
||||
import {
|
||||
ChatRight
|
||||
} from "../components/Chat/ChatRight";
|
||||
import {
|
||||
ChatCardFooter
|
||||
} from "../components/Chat/ChatCardFooter";
|
||||
import {
|
||||
SessionsByDevice
|
||||
} from "../components/Analytics/SessionsByDevice";
|
||||
import {
|
||||
MetricVsTarget
|
||||
} from "../components/Analytics/MetricVsTarget";
|
||||
import {
|
||||
Activity
|
||||
} from "../components/Dropdowns/Activity";
|
||||
import {
|
||||
WebsitePerformance
|
||||
} from "../components/Analytics/WebsitePerformance";
|
||||
import {
|
||||
Messages
|
||||
} from "../components/Dropdowns/Messages";
|
||||
import {
|
||||
TasksMedia
|
||||
} from "../components/ProjectsDashboards/TasksMedia";
|
||||
import {
|
||||
ProjectsList
|
||||
} from "../components/ProjectsDashboards/ProjectsList";
|
||||
import {
|
||||
SimpleLineChart
|
||||
} from "../Graphs/ReCharts/components/SimpleLineChart";
|
||||
import {
|
||||
TinyAreaChart
|
||||
} from "../Graphs/ReCharts/components/TinyAreaChart";
|
||||
import {
|
||||
TimelineMini
|
||||
} from "../components/Timeline/TimelineMini";
|
||||
|
||||
export const Widgets = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Widgets"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Widgets Metrics"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Last Update: <strong>12-23-2018, 4:32:12 PM</strong>, Amount: <strong>4</strong>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<CardDeck>
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<ProfileOverviewCard
|
||||
title="Total Views"
|
||||
badgeTitle="Monthly"
|
||||
badgeColor="primary"
|
||||
value="6.200"
|
||||
valueTitle="vs 4.891 prev."
|
||||
footerTitle="Prev"
|
||||
footerTitleClassName="text-success"
|
||||
footerValue="23%"
|
||||
footerIcon="caret-up"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<ProfileOverviewCard
|
||||
title="Total Orders"
|
||||
badgeTitle="Annual"
|
||||
badgeColor="info"
|
||||
value="75.938"
|
||||
valueTitle="vs 55.002 prev."
|
||||
footerTitle="Prev"
|
||||
footerTitleClassName="text-danger"
|
||||
footerValue="12%"
|
||||
footerIcon="caret-down"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<ProfileOverviewCard
|
||||
title="Total Visits"
|
||||
badgeTitle="Daily"
|
||||
badgeColor="secondary"
|
||||
value="456"
|
||||
valueTitle="vs 231 prev."
|
||||
footerTitle="Prev"
|
||||
footerTitleClassName="text-success"
|
||||
footerValue="67%"
|
||||
footerIcon="caret-up"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<ProfileOverviewCard
|
||||
title="Total Bounces"
|
||||
badgeTitle="Reatime"
|
||||
badgeColor="warning"
|
||||
value="91"
|
||||
valueTitle="vs 87 prev."
|
||||
footerTitle="Prev"
|
||||
footerTitleClassName="text-success"
|
||||
footerValue="8%"
|
||||
footerIcon="caret-up"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
</CardDeck>
|
||||
{ /* START Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Widgets Grids"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Last Update: <strong>12-23-2018, 4:32:12 PM</strong>, Amount: <strong>4</strong>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<CardColumns>
|
||||
<TasksCardGrid />
|
||||
<GalleryCard />
|
||||
<UsersResultsCard />
|
||||
<ImagesResultsCard />
|
||||
</CardColumns>
|
||||
{ /* START Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Widgets Texts"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Last Update: <strong>12-23-2018, 4:32:12 PM</strong>, Amount: <strong>4</strong>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Attachments
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag={ Link } to="apps/email-details" action className="by-0">
|
||||
<Attachment
|
||||
BgIconClassName="text-primary"
|
||||
icon="file-word-o"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } to="apps/email-details" action className="by-0">
|
||||
<Attachment
|
||||
BgIconClassName="text-success"
|
||||
icon="file-excel-o"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } to="apps/email-details" action className="by-0 mb-3">
|
||||
<Attachment
|
||||
BgIconClassName="text-warning"
|
||||
icon="file-powerpoint-o"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Chat
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<ChatLeft />
|
||||
<ChatRight />
|
||||
<ChatLeft />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ChatCardFooter />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Messages
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<ListGroup flush className="mb-4">
|
||||
<ListGroupItem tag={ Link } action to="/apps/email-details" className="bt-0">
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } action to="/apps/email-details" className="bt-0">
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } action to="/apps/email-details" className="bt-0">
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Projects
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Projects..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/projects/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action tag={ Link } to="/apps/projects/list">
|
||||
<ProjectsList
|
||||
badgeColor="success"
|
||||
badgeTitle="Active"
|
||||
progressValue="76"
|
||||
completeValue="13"
|
||||
myTasksValue="35"
|
||||
daysDueValue="6"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/projects/list">
|
||||
<ProjectsList
|
||||
badgeColor="danger"
|
||||
badgeTitle="Suspended"
|
||||
progressValue="23"
|
||||
completeValue="6"
|
||||
myTasksValue="87"
|
||||
daysDueValue="15"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/projects/list">
|
||||
<ProjectsList
|
||||
badgeColor="secondary"
|
||||
badgeTitle="Archived"
|
||||
progressValue="4"
|
||||
completeValue="98"
|
||||
myTasksValue="21"
|
||||
daysDueValue="7"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/projects/list">
|
||||
<ProjectsList
|
||||
badgeColor="warning"
|
||||
badgeTitle="Paused"
|
||||
progressValue="63"
|
||||
completeValue="98"
|
||||
myTasksValue="21"
|
||||
daysDueValue="7"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/projects/list" className="text-center">
|
||||
View All Projects
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Comments
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Comment />
|
||||
<Comment />
|
||||
<Comment />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<ChatCardFooter />
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* START Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Activity
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<ListGroup flush className="mb-4">
|
||||
<ListGroupItem action tag={ Link } to="/apps/profile-details" className="bt-0">
|
||||
<Activity
|
||||
iconColorBelow="success"
|
||||
icon="check"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/profile-details" className="bt-0">
|
||||
<Activity
|
||||
iconColorBelow="danger"
|
||||
icon="close"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/profile-details" className="bt-0">
|
||||
<Activity
|
||||
iconColorBelow="warning"
|
||||
icon="exclamation"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/profile-details" className="bt-0">
|
||||
<Activity
|
||||
iconColorBelow="primary"
|
||||
icon="info"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Tasks
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Tasks..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button color="secondary" outline tag={ Link } to="/apps/tasks/list">
|
||||
<i className="fa fa-search"></i>
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="success"
|
||||
id="1"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="danger"
|
||||
id="2"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
iconColor="warning"
|
||||
id="3"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action>
|
||||
<TasksMedia
|
||||
id="4"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem action tag={ Link } to="/apps/tasks/list" className="text-center">
|
||||
View All Tasks
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Timeline Mini
|
||||
</CardTitle>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="2 Days ago"
|
||||
icon="times-circle"
|
||||
iconClassName="text-danger"
|
||||
badgeTitle="Alert"
|
||||
badgeColor="danger"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="question-circle"
|
||||
iconClassName="text-warning"
|
||||
badgeTitle="Warning"
|
||||
badgeColor="warning"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="info-circle"
|
||||
iconClassName="text-info"
|
||||
badgeTitle="Info"
|
||||
badgeColor="info"
|
||||
/>
|
||||
<TimelineMini
|
||||
showPillDate
|
||||
pillDate="Yesterday"
|
||||
icon="plus-circle"
|
||||
iconClassName="text-primary"
|
||||
badgeTitle="Message"
|
||||
badgeColor="primary"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="check-circle"
|
||||
iconClassName="text-success"
|
||||
badgeTitle="Success"
|
||||
badgeColor="success"
|
||||
/>
|
||||
<TimelineMini
|
||||
icon="circle"
|
||||
badgeTitle="Obsolete"
|
||||
/>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem action tag={ Link } to="/pages/timeline" className="text-center">
|
||||
Timeline Details
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* START Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Widgets Graphs"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Last Update: <strong>12-23-2018, 4:32:12 PM</strong>, Amount: <strong>2</strong>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-4">
|
||||
Sessions by Device Type
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Row>
|
||||
<Col sm={ 4 }>
|
||||
<SessionsByDevice
|
||||
title="Desktop"
|
||||
valuePercent="51,5"
|
||||
valuePercentColor="text-primary"
|
||||
value="201,345"
|
||||
valueColor="text-primary"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={ 4 }>
|
||||
<SessionsByDevice
|
||||
title="Mobile"
|
||||
valuePercent="34,4"
|
||||
valuePercentColor="text-info"
|
||||
value="134,201"
|
||||
valueColor="text-info"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={ 4 }>
|
||||
<SessionsByDevice
|
||||
title="Tablet"
|
||||
valuePercent="20,8"
|
||||
value="81,525"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Progress multi className="mb-2" style={{height: "5px"}}>
|
||||
<Progress bar value="25" />
|
||||
<Progress bar color="info" value="30" />
|
||||
<Progress bar color="secondary" value="45" />
|
||||
</Progress>
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-0">
|
||||
Website Performance
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem className="by-0">
|
||||
<WebsitePerformance
|
||||
title="Bounce Rate (Avg)"
|
||||
value="46,893"
|
||||
valuePercentIcon="caret-up"
|
||||
valuePercentColor="text-success"
|
||||
valuePercent="23,91"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="by-0">
|
||||
<WebsitePerformance
|
||||
title="Pageviews (Avg)"
|
||||
value="2.15"
|
||||
valuePercentColor="text-danger"
|
||||
valuePercent="42,82"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="by-0">
|
||||
<WebsitePerformance
|
||||
title="New Sessions"
|
||||
value="76,40"
|
||||
valuePercentIcon="caret-up"
|
||||
valuePercentColor="text-success"
|
||||
valuePercent="23,91"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem className="by-0 pb-4">
|
||||
<WebsitePerformance
|
||||
title="Time on Site (Avg)"
|
||||
value="2m:16s"
|
||||
valuePercentColor="text-danger"
|
||||
valuePercent="65,28"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-flex mb-4">
|
||||
<CardTitle tag="h6">
|
||||
Spend
|
||||
<span className="small ml-1">
|
||||
#4.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<span className="ml-auto text-right">
|
||||
Dec 22, 2016 to<br />
|
||||
Dec 31, 2016 (prev.)
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center mb-4">
|
||||
<h2>
|
||||
$2,890.12
|
||||
</h2>
|
||||
<div className="mb-1 text-success">
|
||||
<i className="fa mr-1 fa-caret-up"></i>
|
||||
23.34%
|
||||
</div>
|
||||
<div>
|
||||
vs { faker.finance .amount() } (prev.)
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardBody className="p-0">
|
||||
<TinyAreaChart />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Metrics vs Targets
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<MetricVsTarget
|
||||
title="Users"
|
||||
value="168,793"
|
||||
progressbarColor="danger"
|
||||
targetValue="169,001"
|
||||
/>
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
{ /* START Card Widget */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-flex mb-5">
|
||||
<div>
|
||||
<h6 className="mb-0">
|
||||
How did my organic traffic perform?
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.04
|
||||
</span>
|
||||
</h6>
|
||||
<span>
|
||||
Dec 22, 2016 to Dec 31, 2016 (prev.)
|
||||
</span>
|
||||
</div>
|
||||
<span className="ml-auto text-right">
|
||||
Goal:
|
||||
<UncontrolledButtonDropdown className="ml-2">
|
||||
<DropdownToggle color="link" className="text-decoration-none">
|
||||
All<i className="fa fa-angle-down ml-2" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem header>Select Goal:</DropdownItem>
|
||||
<DropdownItem active>All</DropdownItem>
|
||||
<DropdownItem>Other</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Custom...</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center mb-4">
|
||||
<h6>Organics Sessons</h6>
|
||||
<h2>
|
||||
46,982
|
||||
</h2>
|
||||
<div className="mb-1 text-success">
|
||||
<i className="fa mr-1 fa-caret-up"></i>
|
||||
23.34% <span> vs { faker.finance .amount() } (prev.)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<SimpleLineChart />
|
||||
</CardBody>
|
||||
<CardFooter className="small">
|
||||
<i className="fa fa-fw fa-info-circle mr-2"></i>
|
||||
How do your users (visitors), sessions (visits) and pageviews
|
||||
metrics for <abbr title="attribute">www.webkom.com</abbr> compare to your targets over the last 30 days?
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{ /* END Card Widget */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* START Section 3 */}
|
||||
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default Widgets;
|
||||
3
app/routes/Widgets/index.js
Executable file
3
app/routes/Widgets/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Widgets from './Widgets';
|
||||
|
||||
export default Widgets;
|
||||
Reference in New Issue
Block a user