diff --git a/client/package-lock.json b/client/package-lock.json index a62a7a1..113b25f 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -3409,6 +3409,32 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==" }, + "chart.js": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz", + "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "requires": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + } + }, + "chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "requires": { + "color-name": "^1.0.0" + } + }, "chokidar": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", @@ -6127,6 +6153,11 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "highcharts-react-official": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/highcharts-react-official/-/highcharts-react-official-3.0.0.tgz", + "integrity": "sha512-VefJgDY2hkT9gfppsQGrRF2g5u8d9dtfHGcx2/xqiP+PkZXCqalw9xOeKVCRvJKTOh0coiDFwvVjOvB7KaGl4A==" + }, "history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", @@ -8694,6 +8725,11 @@ } } }, + "moment": { + "version": "2.26.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz", + "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -10746,6 +10782,15 @@ "whatwg-fetch": "^3.0.0" } }, + "react-chartjs-2": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz", + "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==", + "requires": { + "lodash": "^4.17.4", + "prop-types": "^15.5.8" + } + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", @@ -11009,6 +11054,19 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-icon": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-icon/-/react-icon-1.0.0.tgz", + "integrity": "sha1-YDhZjrB/s+ZLPnhl0nH3nzVZ3gs=" + }, + "react-icons": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz", + "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/client/package.json b/client/package.json index b2e1d5f..1d47b7e 100644 --- a/client/package.json +++ b/client/package.json @@ -6,11 +6,16 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "chart.js": "^2.9.3", "flatlist-react": "^1.3.2", + "highcharts-react-official": "^3.0.0", "mapbox-gl": "^1.9.1", "react": "^16.13.1", + "react-chartjs-2": "^2.9.0", "react-dom": "^16.13.1", "react-epic-spinners": "^0.4.1", + "react-icon": "^1.0.0", + "react-icons": "^3.10.0", "react-number-format": "^4.4.1", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", diff --git a/client/src/App.css b/client/src/App.css index 74b5e05..cfa527c 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -36,3 +36,26 @@ transform: rotate(360deg); } } +.search-country-notfound{ + display: flex; + justify-content: center; + margin: 1em; + text-transform: capitalize; + font-family: sans-serif; + + +} +.chartcontainer{ + display: flex; + justify-content: center; + /* flex-direction: column; */ + /* width: 100%; */ + height: 100em; +} +.static-chart{ + display: flex; + justify-content: center; + /* margin: 2em; */ + width: 3em; + height: 2em; +} \ No newline at end of file diff --git a/client/src/actions/constants.js b/client/src/actions/constants.js index 763b6c8..5623a79 100644 --- a/client/src/actions/constants.js +++ b/client/src/actions/constants.js @@ -5,6 +5,7 @@ export const MAP_STYLE= 'MAP_STYLE'; export const SET_ACTION = 'SET_ACTION'; export const MAP_STYLE_ACTION = 'MAP_STYLE_ACTION'; export const MAP_FLY_ACTION = 'MAP_FLY_ACTION'; +export const SHOW_CHART='SHOW_CHART'; export const BASE_URL = `http://YOUR_LOCAL_IP_ADDRESS:9000`; export const MAPBOX_ACCESS_TOKEN = `YOUR_MAPBOX_API_TOKEN`; \ No newline at end of file diff --git a/client/src/actions/index.js b/client/src/actions/index.js index be00aa9..7c7301c 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -5,6 +5,7 @@ import { MAP_STYLE, SET_ACTION, BASE_URL, + SHOW_CHART } from './constants'; export const dispatchStatistics = data => ({ @@ -46,4 +47,8 @@ export const setMapStyle = style => ({ export const setAction = action => ({ type: SET_ACTION, payload: {action} +}) +export const Showchart = value => ({ + type: SHOW_CHART, + payload: value }) \ No newline at end of file diff --git a/client/src/components/Chart.jsx b/client/src/components/Chart.jsx new file mode 100644 index 0000000..7e486aa --- /dev/null +++ b/client/src/components/Chart.jsx @@ -0,0 +1,80 @@ +import React, { Component } from "react"; +import { connect } from "react-redux"; +// import Highcharts from "highcharts"; +// import HighchartsReact from "highcharts-react-official"; +import { Bar } from "react-chartjs-2"; +import { GoGraph } from "react-icons/go"; + +import { + fetchCoronaStatistics, + +} from "../actions"; +import { MAP_STYLE_ACTION, MAP_FLY_ACTION } from "../actions/constants"; + +class Chart extends Component { + state = {}; + + componentDidMount() { + this.props.fetchCoronaStatistics(); + } + + renderStatistics() { + var data = JSON.parse(JSON.stringify(this.props.statistics)).results; + if (data.country_statistics !== undefined) { + var totalConfirmed = data.total_confirmed; + var totalDeaths = data.total_deaths; + var totalRecovered = data.total_recovered; + var date = data.last_date_updated; + + var statistics = data.country_statistics; + let cases = []; + let country = []; + var x = statistics.map((e) => { + if (e.confirmed > 10000) { + country.push(e.country); + cases.push(e.confirmed); + } + }); + return { + labels: country, + datasets: [ + { + label: "Confirmed cases", + backgroundColor: "rgb(182, 109, 41)", + borderColor: "rgb(182, 109, 41)", + borderWidth: 1, + data: cases, + }, + ], + }; + } + } + render() { + return ( +
+ +
+ ); + } +} +const stateProps = (state) => ({ + statistics: state.statistics, +}); +const dispatchProps = (dispatch) => ({ + fetchCoronaStatistics: () => dispatch(fetchCoronaStatistics()), +}); + +export default connect(stateProps, dispatchProps)(Chart); diff --git a/client/src/components/map/MapProvider.js b/client/src/components/map/MapProvider.js index fe914c9..c4b11a0 100644 --- a/client/src/components/map/MapProvider.js +++ b/client/src/components/map/MapProvider.js @@ -1,11 +1,34 @@ import React, {Component} from 'react'; import MapComponent from './MapComponent'; +import Chart from '../Chart' +import { connect } from 'react-redux'; class MapProvider extends Component { + state={ + show:this.props.Dislplay + } + render() { - return ; + + + return( +
+ {this.props.Dislplay.Dislplay &&
+ +
} + {!this.props.Dislplay.Dislplay && } +
+ + + ) } } -export default MapProvider; +const stateProps = state => ({ + statistics: state.statistics, + Dislplay:state.Dislplay +}); + +export default connect(stateProps)(MapProvider); + diff --git a/client/src/components/statistics/CoronaStatisticsContainer.js b/client/src/components/statistics/CoronaStatisticsContainer.js index c091df5..0438bfc 100644 --- a/client/src/components/statistics/CoronaStatisticsContainer.js +++ b/client/src/components/statistics/CoronaStatisticsContainer.js @@ -4,8 +4,10 @@ import NumberFormat from 'react-number-format'; import { OrbitSpinner } from 'react-epic-spinners'; import FlatList from 'flatlist-react'; -import { fetchCoronaStatistics, showCountryStatistics, setMapStyle, setAction } from '../../actions'; +import { fetchCoronaStatistics, showCountryStatistics, setMapStyle, setAction,Showchart } from '../../actions'; import { MAP_STYLE_ACTION, MAP_FLY_ACTION } from '../../actions/constants'; +import { GoGraph } from "react-icons/go"; +import { RiMapPinLine } from "react-icons/ri"; class CoronaStatisticsContainer extends Component { constructor(props) { @@ -17,7 +19,8 @@ class CoronaStatisticsContainer extends Component { tabMenuSelect: 1, tabSelectedtPos: -1, statistics: [], - matches: window.matchMedia("(min-width: 1000px)").matches + matches: window.matchMedia("(min-width: 1000px)").matches, + searchcountrynotfound:false, } this.filter_statistics = []; } @@ -42,6 +45,21 @@ class CoronaStatisticsContainer extends Component { this.props.showCountryStatistics(item.coordinates) } + DislplayChart=()=>{ + + + // this.props.show() + + +this.props.Showchart(true) + + + +} + +showmap=()=>{ + this.props.Showchart(false) +} onTabSelection = (index) => { if (index === 3) { this.setState({ @@ -117,6 +135,17 @@ class CoronaStatisticsContainer extends Component { const textData = keyword.toUpperCase(); return itemData.indexOf(textData) > -1; }); + if(newData.length==0){ + this.setState({ + searchcountrynotfound:true + }) + + }else{ + this.setState({ + searchcountrynotfound:false + }) + + } this.setState({ isLoading: true, statistics: newData @@ -162,11 +191,18 @@ class CoronaStatisticsContainer extends Component {

+ Last Updated: {date}
-
+ + {/* */} +
{ + this.DislplayChart(e) + }} + > +
RECOVERED
-
+
+ +
- -
+ +
Search @@ -205,6 +243,7 @@ class CoronaStatisticsContainer extends Component {
+ { this.state.searchcountrynotfound &&
Search country not found
} {this.state.isLoading && this.state.statistics && this.state.statistics.length > 0 ? : null}
- Dark Theme - Light Theme + { + this.DislplayChart() + // this.showmap() + }} + /> + {this.props.Dislplay.Dislplay && { + this.showmap() + }} + />} + + {!this.props.Dislplay.Dislplay && Dark Theme} + {!this.props.Dislplay.Dislplay && Light Theme} +
@@ -297,14 +349,16 @@ class CoronaStatisticsContainer extends Component { } const stateProps = state => ({ - statistics: state.statistics + statistics: state.statistics, + Dislplay:state. Dislplay }); const dispatchProps = dispatch => ({ fetchCoronaStatistics: () => dispatch(fetchCoronaStatistics()), showCountryStatistics: item => dispatch(showCountryStatistics(item)), setMapStyle: style => dispatch(setMapStyle(style)), - setAction: action => dispatch(setAction(action)) + setAction: action => dispatch(setAction(action)), + Showchart:value=>dispatch(Showchart(value)) }); export default connect(stateProps, dispatchProps)(CoronaStatisticsContainer); diff --git a/client/src/reducers/ShowChart.js b/client/src/reducers/ShowChart.js new file mode 100644 index 0000000..35b592b --- /dev/null +++ b/client/src/reducers/ShowChart.js @@ -0,0 +1,21 @@ + import {SHOW_CHART} from '../actions/constants'; + +const initialState = { + Dislplay: false, +}; + +const DisplayReducer = (state = initialState, action) => { + switch (action.type) { + case SHOW_CHART: { + const newState = { + ...state, + Dislplay: action.payload, + }; + return newState; + } + default: + return state; + } +}; + +export default DisplayReducer; \ No newline at end of file diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js index 9a635a4..a0d4891 100644 --- a/client/src/reducers/index.js +++ b/client/src/reducers/index.js @@ -5,13 +5,16 @@ import countryStatisticsReducer from '../reducers/countryStatisticsReducer'; import markersReducer from '../reducers/markersReducer'; import mapStyleReducer from '../reducers/mapStyleReducer'; import setActionReducer from '../reducers/setActionReducer'; +import DisplayReducer from '../reducers/ShowChart' + const rootReducer = combineReducers({ statistics: statisticsReducer, countryStatistics: countryStatisticsReducer, markers: markersReducer, style: mapStyleReducer, - action: setActionReducer + action: setActionReducer, + Dislplay:DisplayReducer }); export default rootReducer; \ No newline at end of file diff --git a/client/src/store/index.js b/client/src/store/index.js index 51db252..a1a0e0a 100644 --- a/client/src/store/index.js +++ b/client/src/store/index.js @@ -1,10 +1,14 @@ -import {createStore, applyMiddleware} from "redux"; +import {createStore, applyMiddleware,compose} from "redux"; import thunk from 'redux-thunk'; import logger from 'redux-logger'; import rootReducer from '../reducers'; const middle = applyMiddleware(thunk, logger); -const store = createStore(rootReducer, middle); +const store = createStore(rootReducer, compose( + middle, + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() + // window.devToolsExtension ? window.devToolsExtension() : f => f + )); export default store; \ No newline at end of file