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

61
app/routes/components/Stock/SimpleLineChart.js Executable file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import {
Line,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
Legend,
LineChart,
Dot
} from './../../../components/recharts';
import colors from './../../../colors';
const data = [
{name: 'Mar \'11', uv: 4000, pv: 2400, amt: 2400},
{name: 'Dec \'11', uv: 3000, pv: 1398, amt: 2210},
{name: 'Oct \'12', uv: 2000, pv: 9800, amt: 2290},
{name: 'Jul \'13', uv: 2780, pv: 3908, amt: 2000},
{name: 'May \'14', uv: 1890, pv: 4800, amt: 2181},
{name: 'Feb \'15', uv: 2390, pv: 3800, amt: 2500},
{name: 'Dec \'15', uv: 3490, pv: 4300, amt: 2100},
];
// eslint-disable-next-line
const generateDot = ({stroke, ...other}) => (
<Dot
{ ...other }
fill={ stroke }
stroke={ colors['white'] }
r={ 4 }
strokeWidth={ 2 }
/>
);
const generateActiveDot = (props) => (
<Dot
{ ...props }
stroke={ colors['white'] }
r={ 7 }
/>
);
const SimpleLineChart = () => (
<ResponsiveContainer width='100%' aspect={6.0/3.0}>
<LineChart data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line dataKey="pv" stroke={ colors['success'] } dot={generateDot} activeDot={generateActiveDot} name='Internistic Value' />
<Line dataKey="uv" stroke={ colors['purple'] } dot={generateDot} activeDot={generateActiveDot} name='Buy Price' />
<Line dataKey="amt" stroke={ colors['blue'] } dot={generateDot} activeDot={generateActiveDot} name='Stock Price' />
</LineChart>
</ResponsiveContainer>
);
export { SimpleLineChart };

64
app/routes/components/Stock/TrTableFavStock.js Executable file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import _ from 'lodash';
import { randomArray } from './../../../utilities';
import {
Badge
} from './../../../components';
const name = [
"Action Score",
"Quality Score",
"Value Score",
"Growth Score"
];
const badge = [
"a",
"q",
"v",
"g"
];
const value = [
"23",
"67",
"12",
"89",
"11",
"10",
"43",
"98"
];
const TrTableFavStock = () => {
return (
<React.Fragment>
{
_.times(5, (index) => (
<tr key={ index }>
<td className="align-middle">
{ randomArray(name) }
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
<td className="align-middle">
<Badge pill className="text-uppercase mr-1"> { randomArray(badge) } </Badge> <span className="text-inverse">{ randomArray(value) }</span>
</td>
</tr>
))
}
</React.Fragment>)
}
export { TrTableFavStock };

93
app/routes/components/Stock/TrTableStock.js Executable file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import _ from 'lodash';
import { randomArray } from './../../../utilities';
const name = [
<React.Fragment key="name-1">
<span className="text-inverse">Caterpillar</span> <small>(CAT)</small>
</React.Fragment>,
<React.Fragment key="name-2">
<span className="text-inverse">Google</span> <small>(GOOGL)</small>
</React.Fragment>,
<React.Fragment key="name-3">
<span className="text-inverse">Microsoft</span> <small>(MSFT)</small>
</React.Fragment>,
<React.Fragment key="name-4">
<span className="text-inverse">Apple</span> <small>(AAPL)</small>
</React.Fragment>,
<React.Fragment key="name-5">
<span className="text-inverse">Samsung Electronics</span> <small>(0593xq)</small>
</React.Fragment>
];
const percentForPrice = [
"34.18",
"21.34",
"19.12",
"67.82"
];
const score = [
"87",
"11",
"12"
];
const q = [
"35",
"98",
"56"
];
const v = [
"17",
"38",
"23"
];
const g = [
"45",
"15",
"16"
];
const price = [
<React.Fragment key="price1">
<span className="text-success">
<i className="fa fa-caret-up mr-1"></i> { randomArray(percentForPrice) }%
</span>
</React.Fragment>,
<React.Fragment key="price2">
<span className="text-danger">
<i className="fa fa-caret-down mr-1"></i> { randomArray(percentForPrice) }%
</span>
</React.Fragment>
];
const TrTableStock = () => {
return (
<React.Fragment>
{
_.times(5, (index) => (
<tr key={ index }>
<td className="align-middle">
{ randomArray(name) }
</td>
<td className="align-middle text-right text-nowrap">
{ randomArray(price) }
</td>
<td className="align-middle text-right">
{ randomArray(score) }
</td>
<td className="align-middle text-right">
{ randomArray(q) }
</td>
<td className="align-middle text-right">
{ randomArray(v) }
</td>
<td className="align-middle text-right">
{ randomArray(g) }
</td>
</tr>
))
}
</React.Fragment>)
}
export { TrTableStock };

48
app/routes/components/Stock/TrTableSummary.js Executable file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import _ from 'lodash';
import { randomArray } from './../../../utilities';
const name = [
"PE",
"CROIC",
"Magic Y",
"EV/EBITDA",
"P/FCF",
"ROA"
];
const tr2013 = [
"33*4%",
"10*4",
"2*5"
];
const ttm = [
"28*3%",
"16*5"
];
const TrTableSummary = () => (
<React.Fragment>
{
_.times(9, (index) => (
<tr key={ index }>
<td className="align-middle text-inverse">
{ randomArray(name) }
</td>
<td className="align-middle text-right">
{ randomArray(tr2013) }
</td>
<td className="align-middle text-right">
{ randomArray(tr2013) }
</td>
<td className="align-middle text-right">
{ randomArray(ttm) }
</td>
</tr>
))
}
</React.Fragment>
)
export { TrTableSummary };