Skip to content

Commit 25a75a9

Browse files
okendokenokendoken
committed
add more charts
1 parent fbc9c79 commit 25a75a9

File tree

9 files changed

+233
-78
lines changed

9 files changed

+233
-78
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
-->
2525
<title>React App</title>
2626
</head>
27-
<body>
27+
<body style="font-family: 'Roboto', sans-serif;">
2828
<noscript>You need to enable JavaScript to run this app.</noscript>
2929
<div id="root"></div>
3030
<!--

‎src/components/PageTitle/PageTitle.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
2-
import { Button, Typography, withStyles } from "@material-ui/core";
2+
import { Button, withStyles } from "@material-ui/core";
3+
import { Typography } from "../Wrappers";
34

45
const PageTitle = ({ classes, ...props }) => (
56
<div className={classes.pageTitleContainer}>
6-
<Typography className={classes.typo} variant="h2">
7+
<Typography className={classes.typo} variant="h1" size="sm">
78
{props.title}
89
</Typography>
910
{props.button && (

‎src/pages/charts/Charts.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/pages/charts/ChartsContainer.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { compose, withState, withHandlers } from "recompose";
2+
3+
import ChartsView from "./ChartsView";
4+
5+
export default compose(
6+
withState("activeIndex", "setActiveIndexId", 0),
7+
withHandlers({
8+
changeActiveIndexId: props => (event, id) => {
9+
props.setActiveIndexId(id);
10+
}
11+
})
12+
)(ChartsView);

‎src/pages/charts/ChartsView.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import React from 'react';
2+
import { Grid } from '@material-ui/core';
3+
4+
import Widget from '../../components/Widget';
5+
import ApexLineChart from './components/ApexLineChart';
6+
import ApexHeatmap from './components/ApexHeatmap'
7+
import {
8+
CartesianGrid,
9+
Legend,
10+
Line,
11+
LineChart,
12+
Pie,
13+
PieChart,
14+
ResponsiveContainer, Sector,
15+
Tooltip,
16+
XAxis,
17+
YAxis
18+
} from "recharts";
19+
import {withTheme} from "@material-ui/core";
20+
import PageTitle from "../../components/PageTitle";
21+
22+
const lineChartData = [
23+
{
24+
name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
25+
},
26+
{
27+
name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
28+
},
29+
{
30+
name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
31+
},
32+
{
33+
name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
34+
},
35+
{
36+
name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
37+
},
38+
{
39+
name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
40+
},
41+
{
42+
name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
43+
},
44+
];
45+
46+
const pieChartData = [
47+
{ name: 'Group A', value: 400 },
48+
{ name: 'Group B', value: 300 },
49+
{ name: 'Group C', value: 300 },
50+
{ name: 'Group D', value: 200 },
51+
];
52+
53+
const renderActiveShape = (props) => {
54+
const RADIAN = Math.PI / 180;
55+
const {
56+
cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
57+
fill, payload, percent, value,
58+
} = props;
59+
const sin = Math.sin(-RADIAN * midAngle);
60+
const cos = Math.cos(-RADIAN * midAngle);
61+
const sx = cx + (outerRadius + 10) * cos;
62+
const sy = cy + (outerRadius + 10) * sin;
63+
const mx = cx + (outerRadius + 30) * cos;
64+
const my = cy + (outerRadius + 30) * sin;
65+
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
66+
const ey = my;
67+
const textAnchor = cos >= 0 ? 'start' : 'end';
68+
69+
return (
70+
<g>
71+
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
72+
<Sector
73+
cx={cx}
74+
cy={cy}
75+
innerRadius={innerRadius}
76+
outerRadius={outerRadius}
77+
startAngle={startAngle}
78+
endAngle={endAngle}
79+
fill={fill}
80+
/>
81+
<Sector
82+
cx={cx}
83+
cy={cy}
84+
startAngle={startAngle}
85+
endAngle={endAngle}
86+
innerRadius={outerRadius + 6}
87+
outerRadius={outerRadius + 10}
88+
fill={fill}
89+
/>
90+
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
91+
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
92+
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text>
93+
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
94+
{`(Rate ${(percent * 100).toFixed(2)}%)`}
95+
</text>
96+
</g>
97+
);
98+
};
99+
100+
const ChartsView = (props) => (
101+
<React.Fragment>
102+
<PageTitle title="Charts Page - Data Display" button="Latest Reports" />
103+
<Grid container spacing={32}>
104+
<Grid item xs={12} md={6}>
105+
<Widget title="Apex Line Chart" upperTitle noBodyPadding>
106+
<ApexLineChart />
107+
</Widget>
108+
</Grid>
109+
<Grid item xs={12} md={6}>
110+
<Widget title="Apex Heatmap" upperTitle noBodyPadding>
111+
<ApexHeatmap />
112+
</Widget>
113+
</Grid>
114+
<Grid item xs={12} md={8}>
115+
<Widget title="Simple Line Chart" noBodyPadding upperTitle>
116+
<ResponsiveContainer width="100%" height={350}>
117+
<LineChart
118+
width={500}
119+
height={300}
120+
data={lineChartData}
121+
margin={{
122+
top: 5, right: 30, left: 20, bottom: 5,
123+
}}
124+
>
125+
<CartesianGrid strokeDasharray="3 3" />
126+
<XAxis dataKey="name" />
127+
<YAxis />
128+
<Tooltip />
129+
<Legend />
130+
<Line type="monotone" dataKey="pv" stroke={props.theme.palette.primary.main} activeDot={{ r: 8 }} />
131+
<Line type="monotone" dataKey="uv" stroke={props.theme.palette.secondary.main} />
132+
</LineChart>
133+
</ResponsiveContainer>
134+
</Widget>
135+
</Grid>
136+
<Grid item xs={12} md={4}>
137+
<Widget title="Pie Chart with Tooltips" noBodyPadding upperTitle>
138+
<ResponsiveContainer width="100%" height={300}>
139+
<PieChart width={200} height={300}>
140+
<Pie
141+
activeIndex={props.activeIndex}
142+
activeShape={renderActiveShape}
143+
data={pieChartData}
144+
cx={200}
145+
cy={150}
146+
innerRadius={60}
147+
outerRadius={80}
148+
fill={props.theme.palette.primary.main}
149+
dataKey="value"
150+
onMouseEnter={props.changeActiveIndexId}
151+
/>
152+
</PieChart>
153+
</ResponsiveContainer>
154+
</Widget>
155+
</Grid>
156+
</Grid>
157+
</React.Fragment>
158+
);
159+
160+
export default withTheme()(ChartsView);

‎src/pages/charts/components/ApexHeatmap.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ApexCharts from 'react-apexcharts';
3-
import { blue } from '@material-ui/core/colors';
3+
import { withTheme } from "@material-ui/core";
44

55
const generateData = (count, yrange) => {
66
var i = 0;
@@ -19,16 +19,18 @@ const generateData = (count, yrange) => {
1919
return series;
2020
}
2121

22-
var options = {
23-
chart: {
24-
toolbar: {
25-
show: false,
22+
const themeOptions = (props) => {
23+
return {
24+
chart: {
25+
toolbar: {
26+
show: false,
27+
},
2628
},
27-
},
28-
dataLabels: {
29-
enabled: false
30-
},
31-
colors: [blue[500]],
29+
dataLabels: {
30+
enabled: false
31+
},
32+
colors: [props.theme.palette.primary.main],
33+
};
3234
};
3335

3436
const series = [{
@@ -96,8 +98,8 @@ const series = [{
9698
}
9799
];
98100

99-
const ApexLineChart = () => (
100-
<ApexCharts options={options} series={series} type="heatmap" height={350} />
101+
const ApexLineChart = (props) => (
102+
<ApexCharts options={themeOptions(props)} series={series} type="heatmap" height={350} />
101103
);
102104

103-
export default ApexLineChart;
105+
export default withTheme()(ApexLineChart);

‎src/pages/charts/components/ApexLineChart.js‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,6 @@
11
import React from 'react';
22
import ApexCharts from 'react-apexcharts';
3-
import { blue, green } from '@material-ui/core/colors';
4-
5-
const options = {
6-
dataLabels: {
7-
enabled: false
8-
},
9-
stroke: {
10-
curve: 'smooth'
11-
},
12-
xaxis: {
13-
type: 'datetime',
14-
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00",
15-
"2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00",
16-
"2018-09-19T06:30:00"
17-
],
18-
},
19-
tooltip: {
20-
x: {
21-
format: 'dd/MM/yy HH:mm'
22-
},
23-
},
24-
fill: {
25-
colors: [green[200], blue[200]]
26-
},
27-
colors: [green[500], blue[500]],
28-
chart: {
29-
toolbar: {
30-
show: false,
31-
},
32-
},
33-
legend: {
34-
show: false,
35-
}
36-
};
3+
import { withTheme } from "@material-ui/core";
374

385
const series = [{
396
name: 'series1',
@@ -43,8 +10,43 @@ const series = [{
4310
data: [11, 32, 45, 32, 34, 52, 41]
4411
}];
4512

46-
const ApexLineChart = () => (
47-
<ApexCharts options={options} series={series} type="area" height={350} />
13+
const themeOptions = (props) => {
14+
return {
15+
dataLabels: {
16+
enabled: false
17+
},
18+
stroke: {
19+
curve: 'smooth'
20+
},
21+
xaxis: {
22+
type: 'datetime',
23+
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00",
24+
"2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00",
25+
"2018-09-19T06:30:00"
26+
],
27+
},
28+
tooltip: {
29+
x: {
30+
format: 'dd/MM/yy HH:mm'
31+
},
32+
},
33+
fill: {
34+
colors: [props.theme.palette.primary.light, props.theme.palette.success.light]
35+
},
36+
colors: [props.theme.palette.primary.main, props.theme.palette.success.main],
37+
chart: {
38+
toolbar: {
39+
show: false,
40+
},
41+
},
42+
legend: {
43+
show: false,
44+
}
45+
};
46+
};
47+
48+
const ApexLineChart = (props) => (
49+
<ApexCharts options={themeOptions(props)} series={series} type="area" height={350} />
4850
);
4951

50-
export default ApexLineChart;
52+
export default withTheme()(ApexLineChart);

‎src/pages/charts/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
"name": "Charts",
33
"version": "1.0.0",
44
"private": true,
5-
"main": "Charts.js"
5+
"main": "ChartsContainer.js"
66
}

‎src/pages/maps/Maps.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ const styles = theme => {
3131
console.log(theme.mixins.toolbar);
3232
return {
3333
mapContainer: {
34-
height: `calc(100% - ${64}px)`,
34+
height: '100%',
35+
margin: -theme.spacing.unit*3
3536
}
3637
}
3738
};

0 commit comments

Comments
 (0)