Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Analytics #77

Open
wants to merge 1 commit into
base: 1.9.0
Choose a base branch
from
Open

Analytics #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions demo/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ export default class Demo extends Component {
}, {
name: 'Components',
buttons: [{
name: 'Analytics',
link: '/analytics'
}, {
name: 'Buttons',
link: '/button'
}, {
Expand Down
144 changes: 144 additions & 0 deletions demo/content/Analytics/Example/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import React, { Component } from 'react'
import classNames from 'classnames'
import {
AnalyticsBlock,
Grid,
GridCell,
Modal,
View
} from '../../../../src'
import style from '../../../../src/components/Analytics/Block/style.less'

export default class DemoContentModal extends Component {
static propTypes = {
contents: React.PropTypes.array
}

render() {
return (
<Modal width="1600px" height="900px" closeURL="/analytics" windowClassName="bgNone">
<View format="auto" padding="30px 0px">
<Grid gutter="3px" columns="6">
<GridCell>
<AnalyticsBlock label="Bags Produced" value="0" targetValue="85" />
</GridCell>
<GridCell>
<AnalyticsBlock label="Bags Sold" value="0" targetValue="85" />
</GridCell>
<GridCell>
<AnalyticsBlock label="Bags Delivered" value="0" targetValue="85" />
</GridCell>
<GridCell>
<AnalyticsBlock label="Sales" value="$0" targetValue="$10,000" />
</GridCell>
<GridCell colspan="2" style={{ float: 'right' }}>
<AnalyticsBlock label="Current Projects" tall>
<table>
<thead>
<tr>
<th colspan="3">Stockist Kit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Messenger Card</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge, style.green)}>
Completed
</span>
</td>
</tr>
<tr>
<td>1st Approach Script</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge, style.blue)}>
In Progress
</span>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Customer Kit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Messenger Card</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge, style.red)}>
Stalled
</span>
</td>
</tr>
<tr>
<td>1st Approach Script</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge)}>
Not Started
</span>
</td>
</tr>
<tr>
<td>1st Approach Script</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge)}>
Not Started
</span>
</td>
</tr>
</tbody>
</table>
</AnalyticsBlock>
</GridCell>
<GridCell colspan="2" style={{ float: 'left' }}>
<AnalyticsBlock label="Current Orders" tall />
</GridCell>
<GridCell colspan="2" style={{ float: 'left' }}>
<AnalyticsBlock label="Current Outreach" tall>
<table>
<tbody>
<tr>
<td>Avenue Magazine</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge, style.blue)}>
In Contact
</span>
</td>
</tr>
<tr>
<td>Store Name</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge)}>
Not Started
</span>
</td>
</tr>
<tr>
<td>Store Name</td>
<td>-</td>
<td>
<span className={classNames(style.analyticsBadge)}>
Not Started
</span>
</td>
</tr>
</tbody>
</table>
</AnalyticsBlock>
</GridCell>
</Grid>
</View>
</Modal>
)
}
}
110 changes: 110 additions & 0 deletions demo/content/Analytics/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React, { Component } from 'react'
import { Link } from 'react-router'
import {
Button,
ButtonGroup,
Grid,
GridCell,
GridRow,
Spacer,
Text,
Title,
TitleBar,
View
} from '../../../src'
import style from '../../style.less'

export default class DemoContentModal extends Component {
static propTypes = {
children: React.PropTypes.node,
contents: React.PropTypes.array
}

render() {
return (
<View width="100%" className={style.docs}>
<TitleBar title="Analytics" flush />
<Spacer size="9" />
<Grid columns="1[a] 2[b] 4[c-e]" gutter="60px">
<GridRow>
<GridCell>
<Title>Modal Configurations</Title>
<Text size="2" color="gray50">
Props for using the <code>Modal</code> component
</Text>
</GridCell>
<GridCell colspan="3">
<ButtonGroup>
<Link to="/analytics/example">
<Button name="Open Modal" />
</Link>
</ButtonGroup>
</GridCell>
</GridRow>
<GridCell>
<Title>Modal Configurations</Title>
<Text size="2" color="gray50">
Props for using the <code>Modal</code> component
</Text>
</GridCell>
<GridCell colspan="3">
<table className={style.table}>
<thead>
<tr>
<th width="150px">Prop</th>
<th width="90px">Prop Type</th>
<th width="120px">Default Value</th>
<th>Description/Options</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>windowMargin</b></td>
<td>String</td>
<td><code>0px</code></td>
<td>
It is the pixel from top, left, right, bottom positions of the modal window.
</td>
</tr>
<tr>
<td><b>height</b></td>
<td>String</td>
<td>-</td>
<td>
-
</td>
</tr>
<tr>
<td><b>mode</b></td>
<td>String</td>
<td><code>fixed</code></td>
<td>
<code>fixed</code>
<code>fill</code>
</td>
</tr>
<tr>
<td><b>closeURL</b></td>
<td>String</td>
<td>-</td>
<td>
URL that user is directed to when they close the <code>Modal</code>
</td>
</tr>
<tr>
<td><b>width</b></td>
<td>String</td>
<td>-</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</GridCell>
</Grid>
{this.props.children}
</View>
)
}
}
3 changes: 1 addition & 2 deletions demo/content/View/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ export default class DemoContentView extends Component {
<GridCell colspan="3">
<Text size="6" weight="light">
The View component is probably one of the most important components within OIO.
It is the core OIO component you should use to structure your pages, layouts and components for your application.
You can think of the <code>View</code> component as OIO‘s take on a <code>div</code>.
It is the core OIO component you should use to structure your pages, layouts and components for your application. You can think of the <code>View</code> component as OIO‘s take on a <code>div</code>.
</Text>
</GridCell>
<GridCell>
Expand Down
5 changes: 5 additions & 0 deletions demo/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import Demo from './Demo'
import Analytics from './content/Analytics'
import AnalyticsExample from './content/Analytics/Example'
import Button from './content/Button'
import Form from './content/Form'
import Text from './content/Text'
Expand All @@ -12,6 +14,9 @@ import ExamplesWindow from './examples/Window'
export default (
<Route path="/" component={Demo}>
<IndexRoute component={Welcome} />
<Route path="analytics" component={Analytics}>
<Route path="example" component={AnalyticsExample} />
</Route>
<Route path="button" component={Button} />
<Route path="form" component={Form} />
<Route path="modal" component={Modal} />
Expand Down
48 changes: 24 additions & 24 deletions demo/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,37 +27,37 @@
background: #FFEBEE;
color: #F44336;
}
}

table {
width: 100%;
.table {
width: 100%;

th {
padding: 12px 30px;
font-size: 13px;
background: #CFD8DC;
background: #f8f8f8;
border-bottom: 0px solid #607D8B;
color: #546E7A;
}
th {
padding: 12px 30px;
font-size: 13px;
background: #CFD8DC;
background: #f8f8f8;
border-bottom: 0px solid #607D8B;
color: #546E7A;
}

tr {
&:nth-child(even) {
td {
background: #f8f8f8;
}
tr {
&:nth-child(even) {
td {
background: #f8f8f8;
}
}
}

td {
color: #607D8B;
padding: 12px 30px;
font-size: 0.8em;
border-right: 1px solid #ECEFF1;
td {
color: #607D8B;
padding: 12px 30px;
font-size: 0.8em;
border-right: 1px solid #ECEFF1;

a {
color: #546E7A;
text-decoration: underline;
}
a {
color: #546E7A;
text-decoration: underline;
}
}
}
Expand Down
Loading