Skip to content
Snippets Groups Projects
Commit b7bb2798 authored by M2947's avatar M2947 :sunglasses:
Browse files

visualizing data of one day traffic

parent a81e926d
No related branches found
No related tags found
1 merge request!1Jaber v01
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1709 additions and 92 deletions
.DS_Store
+ 0
− 0
View file @ b7bb2798
No preview for this file type
Tavara- raskaan liikenne/.DS_Store
+ 0
− 0
View file @ b7bb2798
No preview for this file type
Tavara- raskaan liikenne/backend/index.js
+ 7
− 41
View file @ b7bb2798
......@@ -2,52 +2,18 @@
var express = require('express');
var cors = require('cors');
var app = express();
var port = 3030;
app.listen(port, function () {
console.log(`server running on http://localhost:${port}`);
});
app.use(cors());
//Part2: Express Get Request for Covid-19 Time Series data
app.get('/',function (req, res) {
console.log(req.query.data)
var spawn = require('child_process').spawn;
var childProcess = spawn('python', ['../python/test.py',
req.query.data],{shell: true});
// childProcess.stdout.on('data', function (data) {
//
// res.send(data.toString());
//
// });
var uint8arrayToString = function(data){
return String.fromCharCode.apply(null, data);
};
// Handle normal output
childProcess.stdout.on('data', (data) => {
console.log(uint8arrayToString(data));
res.send(data);
console.log(typeof data)
});
// Handle error output
childProcess.stderr.on('data', (data) => {
// As said before, convert the Uint8Array to a readable string.
console.log(uint8arrayToString(data));
});
childProcess.on('exit', (code) => {
console.log("Process quit with code : " + code);
});
app.use(cors());
app.use("/",require("./routes/test.js"))
app.use("/api/vehicle/", require('./routes/api/vehicles/vehicle'));
});
var port = 3030;
app.listen(port, function () {
console.log(`server running on http://localhost:${port}`);
});
Tavara- raskaan liikenne/backend/package-lock.json
+ 52
− 0
View file @ b7bb2798
......@@ -84,6 +84,14 @@
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
......@@ -453,6 +461,24 @@
"unpipe": "~1.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
}
}
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
......@@ -970,6 +996,32 @@
"lowercase-keys": "^1.0.0"
}
},
"router": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/router/-/router-1.3.5.tgz",
"integrity": "sha512-kozCJZUhuSJ5VcLhSb3F8fsmGXy+8HaDbKCAerR1G6tq3mnMZFMuSohbFvGv1c5oMFipijDjRZuuN/Sq5nMf3g==",
"requires": {
"array-flatten": "3.0.0",
"debug": "2.6.9",
"methods": "~1.1.2",
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"setprototypeof": "1.2.0",
"utils-merge": "1.0.1"
},
"dependencies": {
"array-flatten": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
"integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
},
"setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
}
}
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
......
Tavara- raskaan liikenne/backend/package.json
+ 3
− 1
View file @ b7bb2798
......@@ -9,9 +9,11 @@
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.19.2",
"cors": "^2.8.5",
"express": "^4.17.1",
"nodemon": "^2.0.4",
"python-shell": "^2.0.1"
"python-shell": "^2.0.1",
"router": "^1.3.5"
}
}
Tavara- raskaan liikenne/backend/routes/api/vehicles/vehicle.js 0 → 100644
+ 63
− 0
View file @ b7bb2798
const express = require('express');
const router = express.Router();
const axios = require('axios');
//Part2: Express Get Request for Covid-19 Time Series data
router.get('/',function (req, res) {
var year = req.query.year;
var areaID = req.query.areaID;
var lamID = req.query.lamID;
var startDayNumber = req.query.startDayNumber;
var endDayNumber = req.query.endDayNumber;
//var vehicleClass =req.query.vehicleClass;
console.log(req.query);
if(endDayNumber== undefined | endDayNumber =="" | endDayNumber ==NaN)endDayNumber=NaN;
var spawn = require('child_process').spawn;
var childProcess = spawn('python', ['../python/cars/lamData.py',
year,
areaID,
lamID,
startDayNumber,
endDayNumber
//,vehicleClass,
]
,{shell: true});
// childProcess.stdout.on('data', function (data) {
//
// res.send(data.toString());
//
// });
var uint8arrayToString = function(data){
return String.fromCharCode.apply(null, data);
};
// Handle normal output
childProcess.stdout.on('data', (data) => {
console.log(uint8arrayToString(data));
res.send(data);
console.log(typeof data)
});
// Handle error output
childProcess.stderr.on('data', (data) => {
//As said before, convert the Uint8Array to a readable string.
console.log(uint8arrayToString(data));
//res.send(data)
});
childProcess.on('exit', (code) => {
console.log("Process quit with code : " + code);
});
});
module.exports = router
\ No newline at end of file
Tavara- raskaan liikenne/backend/routes/test.js 0 → 100644
+ 52
− 0
View file @ b7bb2798
const express = require('express');
const router = express.Router();
const axios = require('axios');
//Part2: Express Get Request for Covid-19 Time Series data
router.get('/',function (req, res) {
var data = req.query.data;
console.log(req.query)
var spawn = require('child_process').spawn;
var childProcess = spawn('python', ['../python/test.py',
data,
]
,{shell: true});
// childProcess.stdout.on('data', function (data) {
//
// res.send(data.toString());
//
// });
var uint8arrayToString = function(data){
return String.fromCharCode.apply(null, data);
};
// Handle normal output
childProcess.stdout.on('data', (data) => {
console.log(uint8arrayToString(data));
res.send(data);
console.log(typeof data)
});
// Handle error output
childProcess.stderr.on('data', (data) => {
// As said before, convert the Uint8Array to a readable string.
console.log(uint8arrayToString(data));
});
childProcess.on('exit', (code) => {
console.log("Process quit with code : " + code);
});
});
module.exports = router
\ No newline at end of file
Tavara- raskaan liikenne/frontend/.DS_Store 0 → 100644
+ 0
− 0
View file @ b7bb2798
File added
Tavara- raskaan liikenne/frontend/traffic/package-lock.json
+ 122
− 0
View file @ b7bb2798
......@@ -1356,6 +1356,25 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
},
"@popperjs/core": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
"integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
},
"@restart/context": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
},
"@restart/hooks": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
"integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
"requires": {
"lodash": "^4.17.15",
"lodash-es": "^4.17.15"
}
},
"@sheerun/mutationobserver-shim": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
......@@ -1830,6 +1849,11 @@
}
}
},
"@types/warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
"integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
},
"@types/yargs": {
"version": "13.0.9",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
......@@ -3581,6 +3605,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
......@@ -4616,6 +4645,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
"integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^2.6.7"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
......@@ -7937,6 +7975,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash-es": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
......@@ -10288,6 +10331,15 @@
"react-is": "^16.8.1"
}
},
"prop-types-extra": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
"integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
"requires": {
"react-is": "^16.3.2",
"warning": "^4.0.0"
}
},
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
......@@ -10475,6 +10527,26 @@
"whatwg-fetch": "^3.0.0"
}
},
"react-bootstrap": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz",
"integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==",
"requires": {
"@babel/runtime": "^7.4.2",
"@restart/context": "^2.1.4",
"@restart/hooks": "^0.3.21",
"@types/react": "^16.9.23",
"classnames": "^2.2.6",
"dom-helpers": "^5.1.2",
"invariant": "^2.2.4",
"prop-types": "^15.7.2",
"prop-types-extra": "^1.1.0",
"react-overlays": "^3.1.2",
"react-transition-group": "^4.0.0",
"uncontrollable": "^7.0.0",
"warning": "^4.0.3"
}
},
"react-chartjs-2": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
......@@ -10751,6 +10823,26 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-overlays": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.2.0.tgz",
"integrity": "sha512-YTgCmw6l4uBOYylSnc3V8WLX+A0EoGnzDrqkYz0K7MUKbMBZFpaxLXH4EF9eZbspd+syZHQ5XAABI7n/zak1EA==",
"requires": {
"@babel/runtime": "^7.4.5",
"@popperjs/core": "^2.0.0",
"@restart/hooks": "^0.3.12",
"@types/warning": "^3.0.0",
"dom-helpers": "^5.1.0",
"prop-types": "^15.7.2",
"uncontrollable": "^7.0.0",
"warning": "^4.0.3"
}
},
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
......@@ -10811,6 +10903,17 @@
"workbox-webpack-plugin": "4.3.1"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
......@@ -12826,6 +12929,17 @@
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
"uncontrollable": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
"integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
"requires": {
"@babel/runtime": "^7.6.3",
"@types/react": "^16.9.11",
"invariant": "^2.2.4",
"react-lifecycles-compat": "^3.0.4"
}
},
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
......@@ -13112,6 +13226,14 @@
"makeerror": "1.0.x"
}
},
"warning": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
......
Tavara- raskaan liikenne/frontend/traffic/package.json
+ 1
− 0
View file @ b7bb2798
......@@ -12,6 +12,7 @@
"chart.js": "^2.9.3",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
......
Tavara- raskaan liikenne/frontend/traffic/src/App.css
+ 6
− 0
View file @ b7bb2798
......@@ -7,6 +7,12 @@
pointer-events: none;
}
.Cars_graph{
max-width: 443px;
margin: 30px;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
......
Tavara- raskaan liikenne/frontend/traffic/src/App.js
+ 6
− 4
View file @ b7bb2798
import React from 'react';
import logo from './logo.svg';
import Linechart from './components/Linechart'
import Linechart from './components/Linechart';
import CarsGraph from './components/CarsGraph';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
//<Linechart />
function App() {
return (
<div className="App">
<Linechart />
<CarsGraph />
</div>
);
}
......
Tavara- raskaan liikenne/frontend/traffic/src/components/CarsGraph.js 0 → 100644
+ 576
− 0
View file @ b7bb2798
import React, { Component } from "react";
import axios from "axios";
import Chart from "react-apexcharts";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
var year = "";
var fromDate;
var toDate = "";
var startDayNumber;
var endDayNumber;
var VehicleNumberDataObjectForOneDay;
var AvgSpeedDataObjectForOneDay;
var DataOjbectForMultipleDays;
export class CarsGraph extends Component {
constructor(props) {
super(props);
this.state = {
options: {},
series: [],
options2: {},
series2: [],
year: "",
areaID: "",
lamID: "",
startDayNumber: "",
endDayNumber: "",
vehicleClass: '8',//8 means all classes
error: "",
message:"",
toggleDisabled:true,
isloaded: false,
};
this.yearHandler = this.yearHandler.bind(this);
this.lamIDHandler = this.lamIDHandler.bind(this);
this.areaIDHandler = this.areaIDHandler.bind(this);
this.startDayNumberHandler = this.startDayNumberHandler.bind(this);
this.endDayNumberHandler = this.endDayNumberHandler.bind(this);
this.vehicleClassHandler = this.vehicleClassHandler.bind(this);
}
getData() {
var year_ = this.state.year;
var areaID = this.state.areaID;
var lamID = this.state.lamID;
var startDayNumber_ = this.state.startDayNumber;
var endDayNumber_ = this.state.endDayNumber;
var vehicleClass = this.state.vehicleClass;
var url = `http://localhost:3030/api/vehicle/?year=${year_}&areaID=${areaID}&lamID=${lamID}&startDayNumber=${startDayNumber_}&endDayNumber=${endDayNumber_}`;//&vehicleClass=${vehicleClass}
axios
.get(url)
.then((res) => {
console.log(res.data);
console.log(res.status);
//if the user has put only one day
if (res.status === 200) {
if(isNaN(endDayNumber)){
//getting the vehicle number in each our based on vehicle class from response of the request
var vehicle_number = res.data.vehicle_number;
//filling the missing values of vehicle number to zero
let final_Vehicle_number = this.fillMissingValues(vehicle_number);
//console.log(final)
VehicleNumberDataObjectForOneDay = this.filterDataForOneDay(final_Vehicle_number);
//console.log(VehicleNumberDataObjectForOneDay);
//getting the cars avarage speed based in each our based on car category
var avg_speed = res.data.avg_speed_km_h;
//filling the missing values of avarage speed to zero
let final_avg_speed = this.fillMissingValues(avg_speed);
AvgSpeedDataObjectForOneDay = this.filterDataForOneDay(final_avg_speed);
//getting the avarage speed of all cars in each hour
for(let x=0; x<24; x++){
let count=0
Object.keys(AvgSpeedDataObjectForOneDay).map(key=>{
let value = AvgSpeedDataObjectForOneDay[key];
if(value[x] === undefined | value[x] ===0 | value[x] === NaN | value[x] === null){
count+=1;
}
});
let temp = (AvgSpeedDataObjectForOneDay['8'][x]/(7-count)).toFixed(1);
AvgSpeedDataObjectForOneDay['8'][x] = parseFloat(temp);
}
console.log({AvgSpeedDataObjectForOneDay})
//using setDataForGraph function to set the filtered and sorted data as graph's data set
this.setDataForGraph(VehicleNumberDataObjectForOneDay,AvgSpeedDataObjectForOneDay);
this.setState({toggleDisabled: false});
}
//if user has a start date and end date (multiple days)
else{
console.log("time iterval!!!!")
}
}
})
.catch((er) => {
console.log(er);
});
}
setDataForGraph = (Vnumber,Vspeed)=>{
//data for graph
var TIME=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
var VCLASS = this.state.vehicleClass;
//Setting the fetched data as graph's input data
this.setState({
//Data for vehcile number graph
options:{
chart: {
id: "basic-bar"
},
dataLabels: {
enabled: false
},
xaxis: {
categories: TIME,
title:{
text : "Hour"
}
},
yaxis: {
title: {
text: 'Vehicle Number'
}
},
title: {
text: 'Number of vehicles in each hour',
align: 'center'
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
},
series:[{
name: "Vehicle Number",
data: Vnumber[VCLASS]
}],
//data for avarage speed garaph
options2:{
chart: {
id: "basic-bar"
},
dataLabels: {
enabled: false
},
xaxis: {
categories: TIME,
title:{
text : "Hour"
}
},
yaxis: {
title: {
text: 'Avrage speed km/h'
}
},
colors: ['#cc3b31'],
title: {
text: 'Avrage Speed in each hour',
align: 'center'
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
},
series2:[{
name: "Avarage Speed km/h",
data: Vspeed[VCLASS]
}],
});
}
filterVehicleNumberDataForMultipleDay= (input)=>{
var dataObj = {
1: [],
2: [],
3: [],
4: [],
5: [],
6: [],
7: [],
8: [],
};
Object.keys(input).forEach((key) => {
let value = input[key];
let keyList = key
.toString()
.replace("[", "")
.replace("]", "")
.split(",");
let hour = parseInt(keyList[0]);
let categ = parseInt(keyList[1]);
for (let x = 1; x < 8; x++) {
if (categ === x) {
dataObj[x][hour] = value;
}
}
if (dataObj[8][hour]) {
dataObj[8][hour] += value;
} else {
dataObj[8][hour] = value;
}
});
//console.log({ dataObj });
return dataObj;
}
//function for filling the missing values like vehicle category and its number
fillMissingValues=(input)=>{
let final = {};
for (let i = 0; i <= 23; i++) {
for (let j = 1; j <= 7; j++) {
const key = `[${i},${j}]`;
final[key] = input[key];
if (input[key] === undefined) {
final[key] = 0;
}
}
}
return final;
}
//function for filtering data from one day to one object based on each car category
filterDataForOneDay = (input)=>{
var dataObj = {
1: [],
2: [],
3: [],
4: [],
5: [],
6: [],
7: [],
8: [],
};
Object.keys(input).forEach((key) => {
let value = input[key];
let keyList = key
.toString()
.replace("[", "")
.replace("]", "")
.split(",");
let hour = parseInt(keyList[0]);
let categ = parseInt(keyList[1]);
for (let x = 1; x < 8; x++) {
if (categ === x) {
dataObj[x][hour] = value;
}
}
if (dataObj[8][hour]) {
dataObj[8][hour] += value;
} else {
dataObj[8][hour] = value;
}
});
//console.log({ dataObj });
return dataObj;
}
//function for filling the missing values like vehicle category and its number
fillMissingValues=(input)=>{
let final = {};
for (let i = 0; i <= 23; i++) {
for (let j = 1; j <= 7; j++) {
const key = `[${i},${j}]`;
final[key] = input[key];
if (input[key] === undefined) {
final[key] = 0;
}
}
}
return final;
}
dateTodaynumber = (year, md) => {
var x = new Date(year, 0, 0);
x = x.getTime();
var d = md.split(".");
d = new Date(year, parseInt(d[0]) - 1, d[1]);
d = d.getTime();
var sec = d - x;
var secToDay = sec / 1000 / 60 / 60 / 24;
secToDay = Math.floor(secToDay);
return secToDay;
}
yearHandler(e) {
year = e.target.value;
this.setState({ year });
}
areaIDHandler(e) {
var areaID = e.target.value;
this.setState({ areaID });
}
lamIDHandler(e) {
var lamID = e.target.value;
this.setState({ lamID });
}
startDayNumberHandler(e) {
fromDate = e.target.value;
startDayNumber = this.dateTodaynumber(year, e.target.value);
this.setState({ startDayNumber });
}
endDayNumberHandler(e) {
toDate = e.target.value;
endDayNumber = this.dateTodaynumber(year, e.target.value);
this.setState({ endDayNumber });
}
vehicleClassHandler(e) {
var vehicleClass = e.target.value;
this.setState({ vehicleClass },()=>{
//using setDataForGraph function to set the filtered and sorted data as graph's data set
this.setDataForGraph(VehicleNumberDataObjectForOneDay,AvgSpeedDataObjectForOneDay);
});
}
buttonHandler = () => {
//checking for all input if they are fed with the right data
var patt = /^(0[1-9]|1[0-2])\.([0-2][0-9]|3[0-1])$/;
var matchPattern = patt.test(fromDate);
//console.log(matchPattern)
if (!matchPattern) {
this.setState({ error: "Please insert a valid date mm.dd!" });
} else {
var matchPattern2 =true;
if (toDate.length === 0) {
this.setState({ error: "" });
} else {
matchPattern2 = patt.test(toDate);
if (!matchPattern2) this.setState({ error: "Please insert a valid date mm.dd!" });
else {
var dateCheck = endDayNumber - startDayNumber;
console.log(endDayNumber, startDayNumber, dateCheck);
if ((dateCheck === 0) | (dateCheck < 0)) {
this.setState({
error: "End date is smaller than the start date!",
});
} else this.setState({ error: "" });
}
}
}
var inputs = [
this.state.year,
this.state.areaID,
this.state.lamID,
this.state.vehicleClass,
];
if (
(inputs[0] === "") |
(inputs[1] === "") |
(inputs[2] === "") |
!matchPattern |
!matchPattern2
) {
if(this.state.error !==""){
this.setState({error:
"Please make sure that you have shosen right value for Year, Area, LAM point ID fields!",
});
}
} else {
this.setState({message : "Please wait while the data is beeing processed! Depending on your inputs This might take a while!"})
this.getData();
console.log("Sending request to server!")
//console.log(this.state)
}
};
render() {
return (
<div className="Cars_graph">
<div style={{ color: "red" }}>{this.state.error}</div>
<Form>
<Form.Row>
<Form.Label
className="my-1 mr-2"
htmlFor="inlineFormCustomSelectPref"
>
Year
</Form.Label>
<Form.Control
as="select"
className="my-1 mr-sm-2"
id="year"
custom
onChange={this.yearHandler}
>
<option value="0">Choose...</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</Form.Control>
<Form.Label
className="my-1 mr-2"
htmlFor="inlineFormCustomSelectPref"
>
Month and day (mm.dd)
</Form.Label>
<Row>
<Col>
<Form.Control
id="dateFrom"
placeholder="From"
onChange={this.startDayNumberHandler}
pattern="(0[1-9]|1[0-2])\.([0-2]d|3[0-1])"
title="the right format is: mm.dd "
/>
</Col>
<Col>
<Form.Control
id="dateTo"
placeholder="To"
onChange={this.endDayNumberHandler}
/>
</Col>
</Row>
<Form.Label
className="my-1 mr-2"
htmlFor="inlineFormCustomSelectPref"
>
Choose an Area
</Form.Label>
<Form.Control
as="select"
className="my-1 mr-sm-2"
id="areaID"
custom
onChange={this.areaIDHandler}
>
<option value="">Choose...</option>
<option value="01">Uusimaa, Häme</option>
<option value="02">Varsinais-Suomi, Satakunta</option>
<option value="03">Kaakkois-Suomi</option>
<option value="04">Pirkanmaa</option>
<option value="08">
Pohjois-Savo, Etelä-Savo, Pohjois-Karjala)
</option>
<option value="09">Keski-Suomi</option>
<option value="10">Etelä-Pohjanmaa, Pohjanmaa</option>
<option value="12">Pohjois-Pohjanmaa, Kainuu</option>
<option value="14">Lappi</option>
</Form.Control>
<Form.Label
className="my-1 mr-2"
htmlFor="inlineFormCustomSelectPref"
>
LAM point ID
</Form.Label>
<Form.Control
as="select"
className="my-1 mr-sm-2"
id="lamID"
custom
onChange={this.lamIDHandler}
>
<option value="">Choose...</option>
<option value="101">101</option>
</Form.Control>
<Button
type="button"
className="my-1"
id="drawGraph"
onClick={this.buttonHandler}
>
Draw graph
</Button>
</Form.Row>
</Form>
<div>
<br/>
<div style={{ color: "blue" }}>
{this.state.message}
</div><br/>
<Form.Label
className="my-1 mr-2"
htmlFor="inlineFormCustomSelectPref"
>
vehicle Category
</Form.Label>
<Form.Control
as="select"
className="my-1 mr-sm-2"
id="vehicleClass"
custom
onChange={this.vehicleClassHandler}
disabled={this.state.toggleDisabled}
>
<option value="8">All</option>
<option value="1">1 HA-PA (henkilö- tai pakettiauto)</option>
<option value="2">2 KAIP (kuorma-auto ilman perävaunua)</option>
<option value="3">3 Linja-autot</option>
<option value="4">4 KAPP (kuorma-auto ja puoliperävaunu)</option>
<option value="5">5 KATP (kuorma-auto ja täysperävaunu)</option>
<option value="6">6 HA + PK (henkilöauto ja peräkärry)</option>
<option value="7">7 HA + AV (henkilöauto ja asuntovaunu)</option>
</Form.Control>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
width="500"
/>
<Chart
options={this.state.options2}
series={this.state.series2}
type="bar"
width="500"
/>
</div>
</div>
);
}
}
export default CarsGraph;
Tavara- raskaan liikenne/frontend/traffic/src/components/Linechart.js
+ 0
− 1
View file @ b7bb2798
......@@ -2,7 +2,6 @@ import React, { Component } from 'react'
import axios from 'axios';
import { Line } from 'react-chartjs-2';
import Chart from "react-apexcharts";
export class Linechart extends Component {
......
Tavara- raskaan liikenne/python/cars/lamData.py 0 → 100644
+ 88
− 0
View file @ b7bb2798
import datetime
import pandas as pd
import numpy as np
import sys
import math
#argument should be given in following sequence
year = sys.argv[1]
areaID = sys.argv[2]
lamID = sys.argv[3]
startDayNumber = sys.argv[4]
endDayNumber = sys.argv[5]
#vehicle_class =sys.argv[6]
names = ["point_d", "Year", "day_number", "hour", "minute", "second", "100th_of_a_second", "length_m","lane", "direction", "vehicle_class", "speed_km/h", "faulty_0=valid_1=incorrect", "total_time", "interval","jonoalku"]
shortYear = year[-2:]
output = pd.DataFrame()
check = math.isnan(float(endDayNumber))
if(check == False):
start = int(startDayNumber)
end = int(endDayNumber)
duration = (end+1) - start
vehicleTotalNumberInOneDay = pd.DataFrame()
date = []
day = start
for x in range(duration):
url = "https://aineistot.vayla.fi/lam/rawdata/{year}/{areaID}/lamraw_{lamID}_{shortYear}_{day}.csv".format(year=year,areaID=areaID,lamID=lamID,shortYear = shortYear, day=day)
csv = pd.read_csv(url, names=names, sep = ";",error_bad_lines=False)
#getting the day from sequectial day number
dt = datetime.datetime(int(year),1,1)
dtdelta = datetime.timedelta(days=(day-1))
dt = dt + dtdelta
dt=dt.strftime('%d.%m.%Y')
date.append(dt)
#temp = csv.groupby(["vehicle_class"])["vehicle_class"].count()
temp = csv.groupby(["vehicle_class","direction"]).agg({"vehicle_class":"count", "speed_km/h":"mean"})\
.rename(columns={'vehicle_class':'vehicle_number','speed_km/h':'avg_speed_km_h'})
#changing indexes to create uniqe indexs containing date and vehicle class
indexv = temp.index.values.tolist()
newindex = []
for i in range(len(indexv)):
a= list(indexv[i])
ind = dt+"_"+str(a[0])+"_"+str(a[1])
newindex.append(ind)
#setting the new index to dataframe
temp["date_vehicleclass_direction"]= newindex
temp.set_index("date_vehicleclass_direction", inplace= True)
vehicleTotalNumberInOneDay= vehicleTotalNumberInOneDay.append(temp)
day +=1
output= vehicleTotalNumberInOneDay
outputJson = output.to_json()
print(outputJson)
#data for only one day
else:
url = "https://aineistot.vayla.fi/lam/rawdata/{year}/{areaID}/lamraw_{lamID}_{shortYear}_{startDayNumber}.csv"\
.format(year=year,areaID=areaID,lamID=lamID,shortYear = shortYear, startDayNumber=startDayNumber)
allData = pd.read_csv(url, names=names, sep = ";",error_bad_lines=False)
# getting date from day number
dt = datetime.datetime(int(year),1,1)
dtdelta = datetime.timedelta(days=int(startDayNumber))
dt = dt + dtdelta
dt=dt.strftime('%d.%m.%Y')
# df = allData.groupby(["hour","vehicle_class","direction"]).agg({"vehicle_class": "count", "speed_km/h":"mean"})\
# .rename(columns={'vehicle_class':'vehicle_number','speed_km/h':'avg_speed_km_h'})
df = allData.groupby(["hour","vehicle_class"]).agg({"vehicle_class": "count", "speed_km/h":"mean"})\
.rename(columns={'vehicle_class':'vehicle_number','speed_km/h':'avg_speed_km_h'})
df['avg_speed_km_h'] = df['avg_speed_km_h'].astype(float).round(1)
outjson = df.to_json()
print(outjson)
sys.stdout.flush()
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment