Skip to content

Commit f995a13

Browse files
Angular2GuyAngular2Guy
committed
feat: add chart
1 parent a6629af commit f995a13

File tree

3 files changed

+121
-3
lines changed

3 files changed

+121
-3
lines changed

‎frontend/src/components/Chart.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*
2+
- Copyright 2022 Sven Loesekann
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.
12+
*/
13+
import {
14+
ScatterChart,
15+
Scatter,
16+
XAxis,
17+
YAxis,
18+
ZAxis,
19+
CartesianGrid,
20+
Tooltip,
21+
Legend,
22+
ResponsiveContainer,
23+
} from 'recharts';
24+
25+
export enum FuelType {
26+
e5, e10, diesel
27+
}
28+
29+
export interface TimeSlot {
30+
x: Date;
31+
y: number;
32+
fuelType: FuelType;
33+
}
34+
35+
export interface ChartProps {
36+
e5: TimeSlot[];
37+
e10: TimeSlot[];
38+
diesel: TimeSlot[];
39+
}
40+
41+
export default function Chart(props: ChartProps) {
42+
43+
return ( (props?.diesel?.length > 0 || props?.e10?.length > 0 || props?.e5?.length > 0) ?
44+
<ResponsiveContainer width="100%" height={300}>
45+
<ScatterChart
46+
margin={{
47+
top: 20,
48+
right: 20,
49+
bottom: 20,
50+
left: 20,
51+
}}
52+
>
53+
<CartesianGrid />
54+
<XAxis type="number" dataKey="x" name="time" />
55+
<YAxis type="number" dataKey="y" name="price" />
56+
<ZAxis type="number" range={[100]} />
57+
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
58+
<Legend />
59+
<Scatter name="E5" data={props.e5} fill="#8884d8" line shape="cross" />
60+
<Scatter name="E10" data={props.e10} fill="#82ca9d" line shape="diamond" />
61+
<Scatter name="Diesel" data={props.diesel} fill="#ff8042" line shape="triangle" />
62+
</ScatterChart>
63+
</ResponsiveContainer>
64+
: <div></div>
65+
);
66+
}

‎frontend/src/components/Main.tsx

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ import { Tabs, Tab, Box } from '@mui/material';
1414
import { useEffect, useState, SyntheticEvent } from 'react';
1515
import DataTable, { TableDataRow } from './DataTable';
1616
import GsMap, { GsValue } from './GsMap';
17-
import { useRecoilRefresher_UNSTABLE, useRecoilValue, useRecoilState } from 'recoil';
17+
import { useRecoilRefresher_UNSTABLE, useRecoilValue } from 'recoil';
1818
import GlobalState from '../GlobalState';
1919
import styles from './main.module.scss';
20+
import Chart, {FuelType, TimeSlot} from './Chart';
2021

2122
interface GasPriceAvgs {
2223
Postcode: string
@@ -76,6 +77,22 @@ interface MyDataJson {
7677
Timestamp: string;
7778
}
7879

80+
interface TimeSlotResponse {
81+
ID: number;
82+
CreatedAt: Date;
83+
UpdatedAt: Date;
84+
DeletedAt: Date;
85+
GasStationNum: number;
86+
AvgE5: number;
87+
AvgE10: number;
88+
AvgDiesel: number;
89+
GsNumE5: number;
90+
GsNumE10: number;
91+
GsNumDiesel: number;
92+
StartDate: Date;
93+
CountyDataID: number;
94+
}
95+
7996
interface TabPanelProps {
8097
children?: React.ReactNode;
8198
index: number;
@@ -108,7 +125,7 @@ export default function Main() {
108125
const [value, setValue] = useState(0);
109126
const [first, setFirst] = useState(true);
110127
const [rows, setRows] = useState([] as TableDataRow[]);
111-
const [avgTimeSlots, setAvgTimeSlots] = useState([])
128+
const [avgTimeSlots, setAvgTimeSlots] = useState([] as TimeSlot[])
112129
const [gsValues, setGsValues] = useState([] as GsValue[]);
113130
const globalJwtTokenState = useRecoilValue(GlobalState.jwtTokenState);
114131
const globalUserUuidState = useRecoilValue(GlobalState.userUuidState);
@@ -206,7 +223,29 @@ export default function Main() {
206223
signal: controller?.signal
207224
}
208225
const myPostcode = formatPostCode(globalUserDataState.PostCode);
209-
fetch(`/postcode/countytimeslots/${myPostcode}`, requestOptions2).then(myResult1 => myResult1.json()).then(myJson1 => console.log(myJson1));
226+
fetch(`/postcode/countytimeslots/${myPostcode}`, requestOptions2).then(myResult1 => myResult1.json() as Promise<TimeSlotResponse[]>).then(myJson1 => {
227+
const timeSlots = [] as TimeSlot[];
228+
timeSlots.push(...myJson1.filter(myValue => myValue.AvgDiesel > 10).map(myValue => {
229+
let dieselTimeSlot = {fuelType: FuelType.diesel, x: new Date(), y: 0} as TimeSlot;
230+
dieselTimeSlot.x = myValue.StartDate;
231+
dieselTimeSlot.y = myValue.AvgDiesel;
232+
return dieselTimeSlot;
233+
}));
234+
timeSlots.push(...myJson1.filter(myValue => myValue.AvgE10 > 10).map(myValue => {
235+
let e10TimeSlot = {fuelType: FuelType.e10, x: new Date(), y: 0} as TimeSlot;
236+
e10TimeSlot.x = myValue.StartDate;
237+
e10TimeSlot.y = myValue.AvgE10;
238+
return e10TimeSlot;
239+
}));
240+
timeSlots.push(...myJson1.filter(myValue => myValue.AvgE5 > 10).map(myValue => {
241+
let e5TimeSlot = {fuelType: FuelType.e5, x: new Date(), y: 0} as TimeSlot;
242+
e5TimeSlot.x = myValue.StartDate;
243+
e5TimeSlot.y = myValue.AvgE5;
244+
return e5TimeSlot;
245+
}));
246+
setAvgTimeSlots(timeSlots);
247+
console.log(myJson1);
248+
});
210249
})
211250
.then(() => setController(null));
212251
}
@@ -229,6 +268,7 @@ export default function Main() {
229268
<DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
230269
</TabPanel>
231270
<TabPanel value={value} index={1}>
271+
<Chart e5={avgTimeSlots.filter(value => value.fuelType === FuelType.e5)} e10={avgTimeSlots.filter(value => value.fuelType === FuelType.e10)} diesel={avgTimeSlots.filter(value => value.fuelType === FuelType.diesel)}></Chart>
232272
<DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
233273
</TabPanel>
234274
<TabPanel value={value} index={2}>

‎frontend/src/components/chart.module.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
- Copyright 2022 Sven Loesekann
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.
12+
*/

0 commit comments

Comments
 (0)