Skip to content

Commit 0c00070

Browse files
PrinceSumberiaPrinceSumberia
committed
Add Table
1 parent 24c6b9a commit 0c00070

File tree

5 files changed

+281
-9
lines changed

5 files changed

+281
-9
lines changed

‎package-lock.json‎

Lines changed: 95 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"@fortawesome/fontawesome-svg-core": "^1.2.28",
77
"@fortawesome/free-solid-svg-icons": "^5.13.0",
88
"@fortawesome/react-fontawesome": "^0.1.9",
9+
"@material-ui/core": "^4.9.11",
10+
"@material-ui/icons": "^4.9.1",
911
"@material-ui/styles": "^4.9.10",
1012
"@testing-library/jest-dom": "^4.2.4",
1113
"@testing-library/react": "^9.5.0",

‎src/components/CovidApp.js‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import colors from "../colors";
66
import "./CodeApp.css";
77
import Charts from "./Charts";
88
import Map from "./Map/Map";
9+
import DisplayTable from "./Table/DisplayTable";
910

1011
const styles = {
1112
root: {
1213
display: "flex",
13-
minHeight: "100vh",
1414
},
1515
navBar: {
1616
flex: "0 0 10%",
@@ -52,11 +52,11 @@ const styles = {
5252
padding: "4rem",
5353
},
5454
contentArea: {
55-
width: "30vw",
55+
minWidth: "50%",
5656
},
5757
chartArea: {
58-
flex: "1",
59-
minWidth: "50vw",
58+
// flex: "1",
59+
minWidth: "50%",
6060
display: "flex",
6161
flexDirection: "column",
6262
justifyContent: "center",
@@ -112,12 +112,14 @@ class CovidApp extends Component {
112112
completeData: [],
113113
isLoading: false,
114114
mapData: [],
115+
tableData: [],
115116
};
116117
this.getData = this.getData.bind(this);
117118
this.loadingStatus = this.loadingStatus.bind(this);
118119
this.formatData = this.formatData.bind(this);
119120
this.findId = this.findId.bind(this);
120121
this.handleFormat = this.handleFormat.bind(this);
122+
this.tableData = this.tableData.bind(this);
121123
}
122124

123125
formatData(completeData) {
@@ -132,6 +134,24 @@ class CovidApp extends Component {
132134
return formatedData;
133135
}
134136

137+
tableData(completeData) {
138+
const newArr = completeData
139+
.slice(-1)
140+
.map((data) => data.regional)
141+
.flat();
142+
const data = newArr.map((region, i) => {
143+
return {
144+
id: region.loc,
145+
name: region.loc,
146+
deaths: region.deaths,
147+
discharged: region.discharged,
148+
confirmed: region.totalConfirmed,
149+
active: region.totalConfirmed - (region.discharged + region.deaths),
150+
};
151+
});
152+
return data;
153+
}
154+
135155
findId(location) {
136156
for (let [key, value] of Object.entries(stateCodes)) {
137157
if (location === key) {
@@ -151,7 +171,9 @@ class CovidApp extends Component {
151171
}
152172
handleFormat() {
153173
const newdata = this.formatData(this.state.completeData);
154-
this.setState({ mapData: newdata });
174+
const tableData = this.tableData(this.state.completeData);
175+
// console.log(tableData);
176+
this.setState({ mapData: newdata, tableData: tableData });
155177
}
156178

157179
loadingStatus(loadingStatus) {
@@ -160,7 +182,7 @@ class CovidApp extends Component {
160182

161183
render() {
162184
const { classes, setDarkMode, isDarkMode } = this.props;
163-
const { mapData } = this.state;
185+
const { mapData, tableData } = this.state;
164186

165187
return (
166188
<div className={classes.root}>
@@ -186,9 +208,7 @@ class CovidApp extends Component {
186208
/>
187209
{!this.state.isLoading && (
188210
<div className={classes.content}>
189-
<div className={classes.contentArea}>
190-
<h1>Hello World</h1>
191-
</div>
211+
<div className={classes.contentArea}></div>
192212
<div className={classes.chartArea}>
193213
<Map mapData={mapData} />
194214
<Charts
@@ -198,6 +218,7 @@ class CovidApp extends Component {
198218
</div>
199219
</div>
200220
)}
221+
<DisplayTable tableData={tableData} />
201222
</div>
202223
</div>
203224
);

‎src/components/Table/DisplayTable.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
table {
2+
width: 100%;
3+
border-collapse: collapse;
4+
}
5+
6+
thead th {
7+
text-align: left;
8+
border-bottom: 2px solid black;
9+
}
10+
11+
thead button {
12+
border: 0;
13+
border-radius: none;
14+
font-family: inherit;
15+
font-weight: 700;
16+
font-size: inherit;
17+
padding: 0.5em;
18+
margin-bottom: 1px;
19+
}
20+
21+
thead button.ascending::after {
22+
content: '👇';
23+
display: inline-block;
24+
margin-left: 1em;
25+
}
26+
27+
thead button.descending::after {
28+
content: '☝️';
29+
display: inline-block;
30+
margin-left: 1em;
31+
}
32+
33+
tbody td {
34+
padding: 0.5em;
35+
border-bottom: 1px solid #ccc;
36+
}
37+
38+
tbody tr:hover {
39+
background-color: #eee;
40+
}

‎src/components/Table/DisplayTable.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React from "react";
2+
import "./DisplayTable.css";
3+
4+
const useSortableData = (items, config = null) => {
5+
const [sortConfig, setSortConfig] = React.useState(config);
6+
7+
const sortedItems = React.useMemo(() => {
8+
let sortableItems = [...items];
9+
if (sortConfig !== null) {
10+
sortableItems.sort((a, b) => {
11+
if (a[sortConfig.key] < b[sortConfig.key]) {
12+
return sortConfig.direction === "ascending" ? -1 : 1;
13+
}
14+
if (a[sortConfig.key] > b[sortConfig.key]) {
15+
return sortConfig.direction === "ascending" ? 1 : -1;
16+
}
17+
return 0;
18+
});
19+
}
20+
return sortableItems;
21+
}, [items, sortConfig]);
22+
23+
const requestSort = (key) => {
24+
let direction = "ascending";
25+
if (
26+
sortConfig &&
27+
sortConfig.key === key &&
28+
sortConfig.direction === "ascending"
29+
) {
30+
direction = "descending";
31+
}
32+
setSortConfig({ key, direction });
33+
};
34+
35+
return { items: sortedItems, requestSort, sortConfig };
36+
};
37+
38+
const DisplayTable = (props) => {
39+
console.log(props.tableData);
40+
const { items, requestSort, sortConfig } = useSortableData(props.tableData);
41+
const getClassNamesFor = (name) => {
42+
if (!sortConfig) {
43+
return;
44+
}
45+
return sortConfig.key === name ? sortConfig.direction : undefined;
46+
};
47+
return (
48+
<table>
49+
{/* <caption>Products</caption> */}
50+
<thead>
51+
<tr>
52+
<th>
53+
<button
54+
type="button"
55+
onClick={() => requestSort("name")}
56+
className={getClassNamesFor("name")}
57+
>
58+
Name
59+
</button>
60+
</th>
61+
<th>
62+
<button
63+
type="button"
64+
onClick={() => requestSort("confirmed")}
65+
className={getClassNamesFor("confirmed")}
66+
>
67+
Confirmed
68+
</button>
69+
</th>
70+
<th>
71+
<button
72+
type="button"
73+
onClick={() => requestSort("active")}
74+
className={getClassNamesFor("active")}
75+
>
76+
Active
77+
</button>
78+
</th>
79+
<th>
80+
<button
81+
type="button"
82+
onClick={() => requestSort("discharged")}
83+
className={getClassNamesFor("discharged")}
84+
>
85+
Recovered
86+
</button>
87+
</th>
88+
<th>
89+
<button
90+
type="button"
91+
onClick={() => requestSort("deaths")}
92+
className={getClassNamesFor("deaths")}
93+
>
94+
Deceased
95+
</button>
96+
</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
{items.map((item) => (
101+
<tr key={item.id}>
102+
<td>{item.name}</td>
103+
<td>{item.confirmed}</td>
104+
<td>{item.active}</td>
105+
<td>{item.discharged}</td>
106+
<td>{item.deaths}</td>
107+
</tr>
108+
))}
109+
</tbody>
110+
</table>
111+
);
112+
};
113+
114+
export default DisplayTable;

0 commit comments

Comments
 (0)