Skip to content

Commit 68c7f22

Browse files
PrinceSumberiaPrinceSumberia
committed
Add and style MiniPanels
1 parent 7b24feb commit 68c7f22

File tree

4 files changed

+142
-68
lines changed

4 files changed

+142
-68
lines changed

‎src/components/MapSection.js‎

Lines changed: 96 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,94 @@ import Map from "./Map/Map";
44
import { withStyles } from "@material-ui/styles";
55

66
const styles = {
7-
container: {
7+
mainContainer: {
88
backgroundColor: "rgba(129, 124, 155, 0.05)",
9+
padding: "7rem 3rem",
10+
textAlign: "center",
11+
},
12+
heading: {
13+
fontSize: "2.5rem",
14+
},
15+
container: {
916
display: "flex",
1017
justifyContent: "center",
1118
alignItems: "center",
12-
padding: "2rem 3rem",
1319
},
1420
mapContainer: {
1521
flex: "1",
1622
},
1723
panelsContainer: {
1824
display: "flex",
19-
flex: "0 0 25%",
25+
flex: "0 0 30%",
2026
justifyContent: "center",
2127
flexWrap: "wrap",
2228
alignItems: "center",
2329
},
30+
singlePanel: {
31+
width: "50%",
32+
},
2433
};
2534

2635
class MapSection extends Component {
2736
constructor(props) {
2837
super(props);
2938
this.state = {
30-
confirmed: null,
31-
deaths: null,
32-
recovered: null,
33-
active: null,
39+
title: "",
40+
confirmed: "-",
41+
deaths: "-",
42+
recovered: "-",
43+
active: "-",
44+
changed: {
45+
title: "",
46+
confirmed: "-",
47+
deaths: "-",
48+
recovered: "-",
49+
active: "-",
50+
},
3451
};
3552
this.currentLocation = this.currentLocation.bind(this);
3653
}
3754

3855
currentLocation(location) {
3956
const stateName = location.replace(" & ", " and ");
4057
const data = this.props.data.slice(-1)[0].regional;
58+
const previousData = this.props.data.slice(-2, -1)[0].regional;
59+
60+
console.log(data);
61+
console.log(previousData);
62+
4163
const updatedData = data.filter((el) => el.loc === stateName);
64+
const previousUpdatedData = previousData.filter(
65+
(el) => el.loc === stateName
66+
);
67+
4268
if (updatedData[0]) {
4369
this.setState({
70+
title: stateName,
4471
confirmed: updatedData[0].totalConfirmed,
4572
deaths: updatedData[0].deaths,
4673
recovered: updatedData[0].discharged,
4774
active:
4875
updatedData[0].totalConfirmed -
4976
(updatedData[0].discharged + updatedData[0].deaths),
77+
changed: {
78+
confirmed:
79+
updatedData[0].totalConfirmed -
80+
previousUpdatedData[0].totalConfirmed,
81+
deaths: updatedData[0].deaths - previousUpdatedData[0].deaths,
82+
recovered:
83+
updatedData[0].discharged - previousUpdatedData[0].discharged,
84+
active:
85+
updatedData[0].totalConfirmed -
86+
(updatedData[0].discharged + updatedData[0].deaths) -
87+
(previousUpdatedData[0].totalConfirmed -
88+
(previousUpdatedData[0].discharged +
89+
previousUpdatedData[0].deaths)),
90+
},
5091
});
5192
} else {
5293
this.setState({
94+
title: stateName,
5395
confirmed: "NA",
5496
deaths: "NA",
5597
recovered: "NA",
@@ -60,37 +102,54 @@ class MapSection extends Component {
60102

61103
render() {
62104
const { classes, mapData, isDarkMode } = this.props;
63-
const { confirmed, deaths, recovered, active } = this.state;
105+
const { confirmed, deaths, recovered, active, title, changed } = this.state;
64106
return (
65-
<div className={classes.container}>
66-
<div className={classes.panelsContainer}>
67-
<DisplayPanels
68-
title="Confirmed"
69-
number={confirmed}
70-
isDarkMode={isDarkMode}
71-
dataChange={4}
72-
/>
73-
<DisplayPanels
74-
title="Active"
75-
number={active}
76-
isDarkMode={isDarkMode}
77-
dataChange={4}
78-
/>
79-
<DisplayPanels
80-
title="Recovered"
81-
number={recovered}
82-
isDarkMode={isDarkMode}
83-
dataChange={4}
84-
/>
85-
<DisplayPanels
86-
title="Deceased"
87-
number={deaths}
88-
isDarkMode={isDarkMode}
89-
dataChange={4}
90-
/>
91-
</div>
92-
<div className={classes.mapContainer}>
93-
<Map mapData={mapData} currentLocation={this.currentLocation} />
107+
<div className={classes.mainContainer}>
108+
<h4 className={classes.heading}>
109+
State/UT: <span>{title}</span>
110+
</h4>
111+
<div className={classes.container}>
112+
<div className={classes.panelsContainer}>
113+
<div className={classes.singlePanel}>
114+
<DisplayPanels
115+
title="Confirmed"
116+
number={confirmed}
117+
isDarkMode={isDarkMode}
118+
dataChange={changed.confirmed}
119+
isMiniPanel={true}
120+
/>
121+
</div>
122+
<div className={classes.singlePanel}>
123+
<DisplayPanels
124+
title="Active"
125+
number={active}
126+
isDarkMode={isDarkMode}
127+
dataChange={changed.active}
128+
isMiniPanel={true}
129+
/>
130+
</div>
131+
<div className={classes.singlePanel}>
132+
<DisplayPanels
133+
title="Recovered"
134+
number={recovered}
135+
isDarkMode={isDarkMode}
136+
dataChange={changed.recovered}
137+
isMiniPanel={true}
138+
/>
139+
</div>
140+
<div className={classes.singlePanel}>
141+
<DisplayPanels
142+
title="Deceased"
143+
number={deaths}
144+
isDarkMode={isDarkMode}
145+
dataChange={changed.deaths}
146+
isMiniPanel={true}
147+
/>
148+
</div>
149+
</div>
150+
<div className={classes.mapContainer}>
151+
<Map mapData={mapData} currentLocation={this.currentLocation} />
152+
</div>
94153
</div>
95154
</div>
96155
);

‎src/components/Overview.js‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -75,30 +75,38 @@ class Overview extends Component {
7575
return (
7676
<div className={classes.root}>
7777
<div className={classes.panels}>
78-
<DisplayPanels
79-
title="Confirmed"
80-
number={confirmed}
81-
isDarkMode={isDarkMode}
82-
dataChange={dataChange.confirmed}
83-
/>
84-
<DisplayPanels
85-
title="Active"
86-
number={activeCases}
87-
isDarkMode={isDarkMode}
88-
dataChange={dataChange.activeCases}
89-
/>
90-
<DisplayPanels
91-
title="Recovered"
92-
number={recovered}
93-
isDarkMode={isDarkMode}
94-
dataChange={dataChange.recovered}
95-
/>
96-
<DisplayPanels
97-
title="Deceased"
98-
number={deaths}
99-
isDarkMode={isDarkMode}
100-
dataChange={dataChange.deaths}
101-
/>
78+
<div className={classes.panelContainer}>
79+
<DisplayPanels
80+
title="Confirmed"
81+
number={confirmed}
82+
isDarkMode={isDarkMode}
83+
dataChange={dataChange.confirmed}
84+
/>
85+
</div>
86+
<div className={classes.panelContainer}>
87+
<DisplayPanels
88+
title="Active"
89+
number={activeCases}
90+
isDarkMode={isDarkMode}
91+
dataChange={dataChange.activeCases}
92+
/>
93+
</div>
94+
<div className={classes.panelContainer}>
95+
<DisplayPanels
96+
title="Recovered"
97+
number={recovered}
98+
isDarkMode={isDarkMode}
99+
dataChange={dataChange.recovered}
100+
/>
101+
</div>
102+
<div className={classes.panelContainer}>
103+
<DisplayPanels
104+
title="Deceased"
105+
number={deaths}
106+
isDarkMode={isDarkMode}
107+
dataChange={dataChange.deaths}
108+
/>
109+
</div>
102110
</div>
103111
</div>
104112
);

‎src/styles/DisplayPanelsStyles.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import colors from "../constants/colors";
22

33
export default {
44
panel: {
5-
width: "15%",
65
display: "flex",
76
flexDirection: "column",
8-
backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
97
marginBottom: "3.5rem",
108
marginTop: "3.5rem",
11-
padding: "1.5rem 3rem",
129
boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
13-
borderRadius: "2.5rem",
10+
backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
11+
margin: (props) => (props.isMiniPanel ? "3rem 1rem" : "3.5rem 0"),
12+
padding: (props) => (props.isMiniPanel ? "1.5rem 1.5rem" : "1.5rem 3rem"),
13+
borderRadius: (props) => (props.isMiniPanel ? "2rem" : "2.5rem"),
1414
},
15+
1516
heading: {
16-
fontSize: "2rem",
17+
fontSize: (props) => (props.isMiniPanel ? "1.5rem" : "2rem"),
1718
},
19+
1820
number: {
1921
color: (props) => {
2022
let color;
@@ -30,11 +32,12 @@ export default {
3032
}
3133
return color;
3234
},
33-
fontSize: "3.5rem",
35+
fontSize: (props) => (props.isMiniPanel ? "2.2rem" : "3.5rem"),
3436
paddingTop: ".5rem",
3537
paddingBottom: ".5rem",
3638
},
3739
dataChange: {
40+
fontSize: (props) => (props.isMiniPanel ? "1.4rem" : "inherit"),
3841
color: (props) => {
3942
let color;
4043
let title = props.title.toLowerCase();

‎src/styles/OverviewStyles.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ export default {
44
},
55
panels: {
66
display: "flex",
7-
justifyContent: "space-between",
7+
justifyContent: "space-evenly",
88
alignItems: "center",
99
},
10+
panelContainer: {
11+
width: "20%",
12+
// padding: ''
13+
},
1014
};

0 commit comments

Comments
 (0)