Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
app/routes/components/Financial/StackedAreaChart.js Executable file
View File

@@ -0,0 +1,119 @@
import React from 'react';
import { map } from 'lodash';
import {
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Area,
Dot,
Rectangle,
Polygon
} from './../../../components/recharts';
import colors from './../../../colors';
const generateDot = ({ diameter, fill, stroke }) =>
/* eslint-disable */
({ cx, cy }) => (
<Dot
cx={ cx }
cy={ cy }
r={ diameter / 2 }
fill={ fill }
stroke={ stroke }
strokeWidth={ 2 }
strokeOpacity={ 1 }
fillOpacity={ 1 }
/>
)
/* eslint-enable */
const generateSquare = ({ height, fill, stroke }) =>
/* eslint-disable */
({ cx, cy }) => (
<Rectangle
x={ cx - height / 2 }
y={ cy - height / 2 }
fill={ fill }
stroke={ stroke }
strokeOpacity={ 1 }
strokeWidth={ 2 }
fillOpacity={ 1 }
width={ height }
height={ height }
/>
);
/* eslint-enable */
const generateTriangle = ({height, fill, stroke}) =>
// eslint-disable-next-line react/prop-types
({ cx, cy }) => {
const halfSide = height / Math.sqrt(3);
const points = [
{ x: 0, y: -(height * 2 / 3) },
{ x: -halfSide, y: height / 3 },
{ x: halfSide, y: height / 3 }
];
const vertices = map(points, ({ x, y }) => ({ x: cx + x, y: cy + y }));
return (
<Polygon
points={ vertices }
fill={ fill }
fillOpacity={ 1 }
stroke={ stroke }
strokeWidth={ 2 }
/>
);
}
const data = [
{name: 'Mon', uv: 4000, pv: 2400, amt: 2400},
{name: 'Tue', uv: 3000, pv: 1398, amt: 2210},
{name: 'Wed', uv: 2000, pv: 9800, amt: 2290},
{name: 'Thu', uv: 2780, pv: 3908, amt: 2000},
{name: 'Fri', uv: 1890, pv: 4800, amt: 2181},
{name: 'Sat', uv: 2390, pv: 3800, amt: 2500},
{name: 'Sun', uv: 3490, pv: 4300, amt: 2100},
];
const StackedAreaChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<AreaChart data={data} margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Area
dataKey='uv'
stackId="1"
stroke={ colors['purple'] }
fill={ colors['purple-04'] }
dot={ generateTriangle({ height: 5, stroke: colors['purple'], fill: colors['purple'] }) }
activeDot={ generateTriangle({ height: 7, stroke: colors['purple'], fill: colors['purple'] }) }
/>
<Area
dataKey='pv'
stackId="1"
stroke={ colors['primary'] }
fill={ colors['primary-04'] }
dot={ generateSquare({ height: 5, stroke: colors['primary'], fill: colors['primary'] }) }
activeDot={ generateSquare({ height: 7, stroke: colors['primary'], fill: colors['primary'] }) }
/>
<Area
dataKey='amt'
stackId="1"
stroke={ colors['success'] }
fill={ colors['success-04'] }
dot={ generateDot({ diameter: 5, stroke: colors['success'], fill: colors['success'] }) }
activeDot={ generateDot({ diameter: 7, stroke: colors['success'], fill: colors['success'] }) }
/>
</AreaChart>
</ResponsiveContainer>
)
export { StackedAreaChart };

44
app/routes/components/Financial/TinyDonutChartBig.js Executable file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
PieChart,
Pie,
Cell
} from 'recharts';
import colors from './../../../colors';
const data = [
{name: 'Group A', value: 400},
{name: 'Group B', value: 300},
{name: 'Group C', value: 300},
{name: 'Group C', value: 300}
];
const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
const TinyDonutChartBig = (props) => (
<PieChart width={ 270 } height={ 270 }>
<Pie
data={data}
dataKey="value"
stroke={ colors['white'] }
innerRadius={ 98 }
outerRadius={ 109 }
fill={ colors[ props.pieBg ] }
>
{
data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]} />)
}
</Pie>
</PieChart>
);
TinyDonutChartBig.propTypes = {
pieBg: PropTypes.spring
};
TinyDonutChartBig.defaultProps = {
pieBg: "300"
};
export { TinyDonutChartBig };

74
app/routes/components/Financial/TrTableInvoices.js Executable file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import _ from 'lodash';
import faker from 'faker/locale/en_US';
import {
Media,
Avatar,
AvatarAddOn
} from './../../../components';
import { randomAvatar } from './../../../utilities';
const TrTableInvoices = () => (
<React.Fragment>
{
_.times(6, (index) => (
<tr key={ index }>
<td className="align-middle">
<span className="text-inverse">{ faker.company.companyName() }</span><br />
{ faker.company.bsBuzz() }
</td>
<td className="align-middle">
${ faker.commerce.price() }
</td>
<td className="align-middle text-nowrap">
25-May-2018
</td>
<td className="align-middle">
<Media>
<Media left className="align-self-center mr-4">
<Avatar.Image
size="md"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color="danger"
key="avatar-icon-fg"
/>
]}
/>
</Media>
<Media body>
<span className="d-flex mb-1">
<span className="mt-0 d-flex h6 mb-0">
{ faker.name.firstName() } { faker.name.lastName() }
</span>
</span>
<p className="mb-0">
{ faker.name.jobTitle() }
</p>
</Media>
</Media>
</td>
<td className="align-middle">
<a href="#" className="text-decoration-none">
{ faker.internet.exampleEmail() }
</a><br />
{ faker.phone.phoneNumber() }
</td>
<td className="text-right align-middle text-nowrap">
<a href="#" className="text-decoration-none">View <i className="fa fa-angle-right"></i></a>
</td>
</tr>
))
}
</React.Fragment>
)
export { TrTableInvoices };

29
app/routes/components/Financial/TrTableRecentFundings.js Executable file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import _ from 'lodash';
import faker from 'faker/locale/en_US';
const TrTableRecentFundings = () => (
<React.Fragment>
{
_.times(6, (index) => (
<tr key={ index }>
<td className="align-middle">
<span className="text-inverse">{ faker.company.companyName() }</span>
</td>
<td className="align-middle">
${ faker.commerce.price() }
</td>
<td className="align-middle text-nowrap">
20-02-2015
</td>
<td className="align-middle text-right text-nowrap">
<a href="#" className="text-decoration-none">View <i className="fa fa-angle-right"></i></a>
</td>
</tr>
))
}
</React.Fragment>
)
export { TrTableRecentFundings };