Skip to content

Commit

Permalink
update date on chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@echen831
echen831 committed Dec 9, 2020
1 parent ca14780 commit da6c886
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 33 deletions.
2 changes: 1 addition & 1 deletion .eslintcache
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"/Users/ericchen/Desktop/MB_projects/sj_project/src/index.js":"1","/Users/ericchen/Desktop/MB_projects/sj_project/src/App.js":"2","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/input.jsx":"3","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/states.js":"4","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/buttons.jsx":"5","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/today.jsx":"6","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/history.jsx":"7"},{"size":199,"mtime":1607224861875,"results":"8","hashOfConfig":"9"},{"size":1193,"mtime":1607386750633,"results":"10","hashOfConfig":"9"},{"size":766,"mtime":1607227340486,"results":"11","hashOfConfig":"9"},{"size":5659,"mtime":1607320414068,"results":"12","hashOfConfig":"9"},{"size":816,"mtime":1607407453938,"results":"13","hashOfConfig":"9"},{"size":2190,"mtime":1607409356566,"results":"14","hashOfConfig":"9"},{"size":2117,"mtime":1607412486110,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"150614y",{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21","usedDeprecatedRules":"18"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"24","usedDeprecatedRules":"25"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"30","usedDeprecatedRules":"18"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/ericchen/Desktop/MB_projects/sj_project/src/index.js",[],["35","36"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/App.js",["37"],"import React, { useState, useEffect } from 'react';\n\nimport './App.css';\nimport { Today } from './components/today';\nimport { History } from './components/history'\nimport { Buttons } from './components/buttons';\n\n\nconst App = () => {\n\n const [currState, setCurrState] = useState('CA');\n const [isHistLoaded, setHistIsLoaded] = useState(false);\n const [histError, setHistError] = useState(null);\n const [histData, setHistdata] = useState([]);\n\n\n useEffect(() => { fetchHistData(currState)}, [])\n\n const fetchHistData = (state) => {\n setHistIsLoaded(false);\n fetch(`https://api.covidtracking.com/v1/states/${state}/daily.json`)\n .then(res => res.json())\n .then((result) => {\n setHistIsLoaded(true);\n setHistdata(result);\n },\n (error) => {\n setHistIsLoaded(true);\n setHistError(error)\n }\n )\n }\n\n \n return (\n <div className=\"App\">\n MB Social Justice Hackathon\n <Buttons currState={currState} setCurrState={setCurrState} fetchHistData={fetchHistData}/>\n <Today currState={currState}/>\n <History data={histData} isLoaded={isHistLoaded} error={histError}/>\n </div>\n );\n}\n\nexport default App;\n","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/input.jsx",["38","39"],"import React, { useState, useRef } from 'react';\n\nexport const Input = ({ add }) => {\n const [name, setName] = useState('');\n\n const nameInput = useRef();\n const addressInput = useRef();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n add({ name: nameInput.current.value, address: addressInput.current.value })\n nameInput.current.value = '';\n addressInput.current.value = '';\n }\n\n return (\n <div>\n <form action=\"\" onSubmit={handleSubmit}>\n <input type=\"text\" placeholder='Your name here...' ref={nameInput}/>\n <input type=\"text\" placeholder='Your address here...'ref={addressInput}/>\n <button>Submit</button>\n </form>\n </div>\n )\n}",["40","41"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/states.js",[],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/buttons.jsx",["42","43"],"import React, {useState, useEffect} from 'react';\nimport { STATES } from './states'\n\nconst COLORS = ['red', 'blue', 'green', 'orange', 'purple', 'gold', 'indigo', 'brown']\n\nexport const Buttons = ({ setCurrState, fetchHistData }) => {\n\n return (\n <div>\n <ul className='button-wrapper'>\n {STATES.map((state, idx) => (\n <li key={state.abbreviation}\n style={{color: 'white', backgroundColor: COLORS[idx % COLORS.length]}}\n className='button'\n onClick={() => {setCurrState(state.abbreviation); \n fetchHistData(state.abbreviation.toLowerCase())}}>\n {state.abbreviation}</li>\n ))}\n </ul>\n </div>\n )\n}","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/today.jsx",["44"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/history.jsx",["45"],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":17,"column":48,"nodeType":"52","endLine":17,"endColumn":50,"suggestions":"53"},{"ruleId":"54","severity":1,"message":"55","line":4,"column":12,"nodeType":"56","messageId":"57","endLine":4,"endColumn":16},{"ruleId":"54","severity":1,"message":"58","line":4,"column":18,"nodeType":"56","messageId":"57","endLine":4,"endColumn":25},{"ruleId":"46","replacedBy":"59"},{"ruleId":"48","replacedBy":"60"},{"ruleId":"54","severity":1,"message":"61","line":1,"column":16,"nodeType":"56","messageId":"57","endLine":1,"endColumn":24},{"ruleId":"54","severity":1,"message":"62","line":1,"column":26,"nodeType":"56","messageId":"57","endLine":1,"endColumn":35},{"ruleId":"54","severity":1,"message":"63","line":9,"column":18,"nodeType":"56","messageId":"57","endLine":9,"endColumn":25},{"ruleId":"54","severity":1,"message":"64","line":3,"column":20,"nodeType":"56","messageId":"57","endLine":3,"endColumn":24},"no-native-reassign",["65"],"no-negated-in-lhs",["66"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'currState'. Either include it or remove the dependency array.","ArrayExpression",["67"],"no-unused-vars","'name' is assigned a value but never used.","Identifier","unusedVar","'setName' is assigned a value but never used.",["65"],["66"],"'useState' is defined but never used.","'useEffect' is defined but never used.","'setDate' is assigned a value but never used.","'Cell' is defined but never used.","no-global-assign","no-unsafe-negation",{"desc":"68","fix":"69"},"Update the dependencies array to be: [currState]",{"range":"70","text":"71"},[495,497],"[currState]"]
[{"/Users/ericchen/Desktop/MB_projects/sj_project/src/index.js":"1","/Users/ericchen/Desktop/MB_projects/sj_project/src/App.js":"2","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/input.jsx":"3","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/states.js":"4","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/buttons.jsx":"5","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/today.jsx":"6","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/history.jsx":"7"},{"size":199,"mtime":1607224861875,"results":"8","hashOfConfig":"9"},{"size":1761,"mtime":1607488680142,"results":"10","hashOfConfig":"9"},{"size":766,"mtime":1607227340486,"results":"11","hashOfConfig":"9"},{"size":5659,"mtime":1607320414068,"results":"12","hashOfConfig":"9"},{"size":816,"mtime":1607407453938,"results":"13","hashOfConfig":"9"},{"size":2190,"mtime":1607409356566,"results":"14","hashOfConfig":"9"},{"size":1710,"mtime":1607488785108,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"150614y",{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"18"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"32","usedDeprecatedRules":"18"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/ericchen/Desktop/MB_projects/sj_project/src/index.js",[],["35","36"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/App.js",["37"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/input.jsx",["38","39"],"import React, { useState, useRef } from 'react';\n\nexport const Input = ({ add }) => {\n const [name, setName] = useState('');\n\n const nameInput = useRef();\n const addressInput = useRef();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n add({ name: nameInput.current.value, address: addressInput.current.value })\n nameInput.current.value = '';\n addressInput.current.value = '';\n }\n\n return (\n <div>\n <form action=\"\" onSubmit={handleSubmit}>\n <input type=\"text\" placeholder='Your name here...' ref={nameInput}/>\n <input type=\"text\" placeholder='Your address here...'ref={addressInput}/>\n <button>Submit</button>\n </form>\n </div>\n )\n}",["40","41"],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/states.js",[],"/Users/ericchen/Desktop/MB_projects/sj_project/src/components/buttons.jsx",["42","43"],"import React, {useState, useEffect} from 'react';\nimport { STATES } from './states'\n\nconst COLORS = ['red', 'blue', 'green', 'orange', 'purple', 'gold', 'indigo', 'brown']\n\nexport const Buttons = ({ setCurrState, fetchHistData }) => {\n\n return (\n <div>\n <ul className='button-wrapper'>\n {STATES.map((state, idx) => (\n <li key={state.abbreviation}\n style={{color: 'white', backgroundColor: COLORS[idx % COLORS.length]}}\n className='button'\n onClick={() => {setCurrState(state.abbreviation); \n fetchHistData(state.abbreviation.toLowerCase())}}>\n {state.abbreviation}</li>\n ))}\n </ul>\n </div>\n )\n}","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/today.jsx",["44"],"import React, { useEffect, useState } from 'react';\nimport { STATES_HASH } from './states.js';\n\nexport const Today = ({currState}) => {\n\n const [error, setError] = useState(null);\n const [isLoaded, setIsLoaded] = useState(false);\n const [items, setItems] = useState([]);\n const [date, setDate] = useState(new Date());\n\n useEffect(() => {\n fetch(`https://api.covidtracking.com/v1/states/current.json`)\n .then(res => res.json())\n .then((result) => {\n setIsLoaded(true);\n setItems(result);\n },\n (error) => {\n setIsLoaded(true);\n setError(error)\n }\n )\n }, [])\n\n if (error) {\n return (\n <div>Error: {error.message}</div>\n )\n } else if (!isLoaded) {\n return <div>Loading...</div>\n } else {\n return (\n <div>\n <h1>Today's Data: {`${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`}</h1>\n <h2>State: {STATES_HASH[currState]}</h2>\n {items.map(state => {\n const display = currState !== state.state ? 'hide' : 'state-wrapper'\n return (\n <div className={display} key={state.state}>\n <li>Total Tests</li>\n <li>Positive</li>\n <li>Negative</li>\n <li>{state.totalTestResults}</li>\n <li>{state.positive}</li>\n <li>{state.negative}</li>\n </div>\n\n )\n })}\n </div>\n )\n }\n // return (\n // <div className='map-container'>\n // {/* Map goes here...\n // <ul>\n // {names.map((name, idx) => {\n // return(\n // <div key={idx}>\n // <li>{name.name}</li>\n // <li>{name.address}</li>\n // </div>\n // )\n // })}\n // </ul> */}\n // </div>\n // )\n}","/Users/ericchen/Desktop/MB_projects/sj_project/src/components/history.jsx",["45","46","47"],{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","severity":1,"message":"53","line":31,"column":48,"nodeType":"54","endLine":31,"endColumn":50,"suggestions":"55"},{"ruleId":"56","severity":1,"message":"57","line":4,"column":12,"nodeType":"58","messageId":"59","endLine":4,"endColumn":16},{"ruleId":"56","severity":1,"message":"60","line":4,"column":18,"nodeType":"58","messageId":"59","endLine":4,"endColumn":25},{"ruleId":"48","replacedBy":"61"},{"ruleId":"50","replacedBy":"62"},{"ruleId":"56","severity":1,"message":"63","line":1,"column":16,"nodeType":"58","messageId":"59","endLine":1,"endColumn":24},{"ruleId":"56","severity":1,"message":"64","line":1,"column":26,"nodeType":"58","messageId":"59","endLine":1,"endColumn":35},{"ruleId":"56","severity":1,"message":"65","line":9,"column":18,"nodeType":"58","messageId":"59","endLine":9,"endColumn":25},{"ruleId":"56","severity":1,"message":"66","line":3,"column":22,"nodeType":"58","messageId":"59","endLine":3,"endColumn":30},{"ruleId":"56","severity":1,"message":"67","line":3,"column":32,"nodeType":"58","messageId":"59","endLine":3,"endColumn":35},{"ruleId":"56","severity":1,"message":"68","line":3,"column":37,"nodeType":"58","messageId":"59","endLine":3,"endColumn":41},"no-native-reassign",["69"],"no-negated-in-lhs",["70"],"react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'currState' and 'fetchHistData'. Either include them or remove the dependency array.","ArrayExpression",["71"],"no-unused-vars","'name' is assigned a value but never used.","Identifier","unusedVar","'setName' is assigned a value but never used.",["69"],["70"],"'useState' is defined but never used.","'useEffect' is defined but never used.","'setDate' is assigned a value but never used.","'BarChart' is defined but never used.","'Bar' is defined but never used.","'Cell' is defined but never used.","no-global-assign","no-unsafe-negation",{"desc":"72","fix":"73"},"Update the dependencies array to be: [currState, fetchHistData]",{"range":"74","text":"75"},[693,695],"[currState, fetchHistData]"]
30 changes: 29 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@ import { Today } from './components/today';
import { History } from './components/history'
import { Buttons } from './components/buttons';

const Months = {
'01': 'Jan',
'02': 'Feb',
'03': 'Mar',
'04': 'Apr',
'05': 'May',
'06': 'Jun',
'07': 'Jul',
'08': 'Aug',
'09': 'Sep',
'10': 'Oct',
'11': 'Nov',
'12': 'Dec'
}

const App = () => {

Expand All @@ -21,8 +35,13 @@ const App = () => {
fetch(`https://api.covidtracking.com/v1/states/${state}/daily.json`)
.then(res => res.json())
.then((result) => {
let newResult = result.map(res => {
let newRes = Object.assign({}, res);
newRes.date = setDate(newRes.date);
return newRes;
})
setHistIsLoaded(true);
setHistdata(result);
setHistdata(newResult);
},
(error) => {
setHistIsLoaded(true);
Expand All @@ -31,6 +50,15 @@ const App = () => {
)
}

const setDate = (date) => {
date = date.toString();
let y = date.slice(0, 4);
let m = date.slice(4, 6);
let d = date.slice(6);

return `${Months[m]} ${d}, ${y}`
}


return (
<div className="App">
Expand Down
38 changes: 7 additions & 31 deletions src/components/history.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
import React from 'react';
import {
BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

const Months = {
'01': 'Jan',
'02': 'Feb',
'03': 'Mar',
'04': 'Apr',
'05': 'May',
'06': 'Jun',
'07': 'Jul',
'08': 'Aug',
'09': 'Sep',
'10': 'Oct',
'11': 'Nov',
'12': 'Dec'
}

export const History = ({ data, isLoaded, error }) => {

Expand All @@ -28,23 +14,22 @@ export const History = ({ data, isLoaded, error }) => {
return (
<div>
<h1>Historic Data</h1>
<BarChart
<AreaChart
width={1200}
height={500}
data={data}
margin={{
top: 20, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<CartesianGrid strokeDasharray="4 4" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip content={<CustomTooltip date={data.date}/>}/>
<Legend />
<Bar dataKey="positive" stackId="a" fill="#8884d8" />
<Bar dataKey="negative" stackId="a" fill="#82ca9d" />
<Bar dataKey="totalTestResults" stackId="a" fill="#82c8ca" />
</BarChart>
<Area type="monotone" dataKey="positive" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="negative" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
</AreaChart>
</div>
)

Expand All @@ -55,7 +40,7 @@ const CustomTooltip = (props) => {
if (props.active) {
return (
<div className="custom-tooltip">
<p className="date">{setDate(props.payload[0].payload.date)}</p>
<p className="date">{props.payload[0].payload.date}</p>
<p>Total: {props.payload[0].payload.totalTestResults}</p>
<p className="positive">Pos: {props.payload[0].payload.positive}</p>
<p className="negative">Neg: {props.payload[0].payload.negative}</p>
Expand All @@ -65,12 +50,3 @@ const CustomTooltip = (props) => {

return null;
};

const setDate = (date) => {
date = date.toString();
let y = date.slice(0,4);
let m = date.slice(4,6);
let d = date.slice(6);

return `${Months[m]} ${d}, ${y}`
}

0 comments on commit da6c886

Please sign in to comment.