Skip to content

Commit 15646c2

Browse files
JBrisJBris
committed
Adding React contents
1 parent 55cab1b commit 15646c2

File tree

15 files changed

+394
-101
lines changed

15 files changed

+394
-101
lines changed

‎client/package-lock.json

+72
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@
1616
"@fortawesome/free-solid-svg-icons": "^6.5.1",
1717
"@fortawesome/react-fontawesome": "^0.2.0",
1818
"@reduxjs/toolkit": "^2.2.1",
19+
"@tanstack/react-table": "^8.13.2",
1920
"graphql": "^16.8.1",
2021
"localforage": "^1.10.0",
2122
"match-sorter": "^6.3.4",
2223
"plotly.js": "^2.29.1",
2324
"react": "^18.2.0",
2425
"react-dom": "^18.2.0",
2526
"react-plotly.js": "^2.6.0",
27+
"react-redux": "^9.1.0",
2628
"react-router-dom": "^6.22.2",
2729
"react-select": "^5.8.0"
2830
},

‎client/src/components/contents/contents.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { Outlet } from "react-router-dom";
22

33
export default function Contents() {
44
return (
5-
<div id="contents">
6-
<Outlet />
7-
</div>
5+
<div id="contents" className="flex flex-col w-full h-full shadow-md ml-1 p-1">
6+
< Outlet />
7+
</div >
88
);
99
}

‎client/src/components/header/header.jsx

+27-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { Link } from 'react-router-dom';
2+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3+
import { faQuestion } from '@fortawesome/free-solid-svg-icons'
24

35
export default function Header() {
46
return (
5-
<div id="header" className="flex flex-row w-full shadow-md mb-0.5">
7+
<div id="header" className="flex flex-row w-full shadow-md">
68
<div className="navbar bg-base-100 rounded-box">
79
<div className="navbar-start pl-20 text-2xl">
810
<h1>FastAPI React GraphQL</h1>
@@ -17,7 +19,30 @@ export default function Header() {
1719
</li>
1820
</ul>
1921
</div>
22+
23+
<div className="navbar-end mr-10 text-2xl">
24+
<button
25+
className="btn w-1/5 bg-secondary-content shadow-md rounded-2xl"
26+
onClick={() => document.getElementById('info_modal').showModal()}>
27+
<FontAwesomeIcon
28+
icon={faQuestion}
29+
size="2x"
30+
/>
31+
</button>
32+
</div>
33+
<dialog id="info_modal" className="modal">
34+
<div className="modal-box">
35+
<h3 className="font-bold text-lg">Information</h3>
36+
<p className="py-4">This application demonstrates the use of FastAPI, React, and GraphQL.</p>
37+
</div>
38+
<form method="dialog" className="modal-backdrop">
39+
<button>close</button>
40+
</form>
41+
</dialog>
2042
</div>
2143
</div >
2244
);
23-
}
45+
}
46+
47+
{/*
48+
*/}

‎client/src/components/scatterplot/ScatterPlot2D.jsx

+40-53
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,42 @@
1+
import React from 'react';
2+
3+
import Plot from 'react-plotly.js';
4+
5+
export default function Scatterplot2D(
6+
{ title, xaxis, yaxis, data, limit }
7+
) {
8+
const x = data
9+
.slice(0, limit)
10+
.map(row => row[xaxis]);
11+
12+
const y = data
13+
.slice(0, limit)
14+
.map(row => row[yaxis]);
15+
16+
return (
17+
<div id="scatter-2d" className='flex flex-col w-full h-full justify-normal items-start'>
18+
<Plot
19+
style={{ width: "80%", height: "80%" }}
20+
data={[
21+
{
22+
x: x,
23+
y: y,
24+
mode: "markers",
25+
type: "scatter",
26+
},
27+
]}
28+
layout={{
29+
title: title,
30+
xaxis: {
31+
title: xaxis,
32+
},
33+
yaxis: {
34+
title: yaxis,
35+
},
36+
}}
37+
/>
38+
</div>
39+
);
40+
}
141

242

3-
4-
5-
6-
// import React from 'react';
7-
8-
// import Plot from 'react-plotly.js';
9-
10-
// export default function Scatterplot2D() {
11-
// return (
12-
// <div id="main">
13-
// <Outlet />
14-
// </div>
15-
// );
16-
// }
17-
18-
19-
// class App extends React.Component {
20-
21-
// render() {
22-
23-
// return (
24-
25-
// <Plot
26-
27-
// data={[
28-
29-
// {
30-
31-
// x: [1, 2, 3],
32-
33-
// y: [2, 6, 3],
34-
35-
// type: 'scatter',
36-
37-
// mode: 'lines+markers',
38-
39-
// marker: { color: 'red' },
40-
41-
// },
42-
43-
// { type: 'bar', x: [1, 2, 3], y: [2, 5, 3] },
44-
45-
// ]}
46-
47-
// layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
48-
49-
// />
50-
51-
// );
52-
53-
// }
54-
55-
// }

‎client/src/components/sidebar/sidebar.jsx

+33-36
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,63 @@
11
import Select from "react-select";
2-
import { useState } from "react";
3-
4-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
5-
import { faCheck } from '@fortawesome/free-solid-svg-icons'
6-
7-
const options = [
8-
{ value: 'chocolate', label: 'Chocolate' },
9-
{ value: 'strawberry', label: 'Strawberry' },
10-
{ value: 'vanilla', label: 'Vanilla' }
11-
]
2+
import React from 'react'
3+
import { useSelector, useDispatch } from 'react-redux';
4+
import { setX, setY } from "../../features/variables/relationshipSlice";
5+
import { setLimit } from "../../features/pagination/paginationSlice";
6+
import { config } from '../../config/config';
127

138
export default function Sidebar() {
14-
const [selectedOption, setSelectedOption] = useState("");
9+
const options = config.IRIS_FIELDS;
1510

16-
const handlePredictorTypeSelect = (e) => {
17-
console.log(e.value)
18-
setSelectedOption(e.value);
19-
};
11+
const x = useSelector(state => state.relationship.x);
12+
const y = useSelector(state => state.relationship.y);
13+
const limit = useSelector(state => state.pagination.limit);
2014

21-
const handleResponseTypeSelect = (e) => {
22-
console.log(e.value)
23-
setSelectedOption(e.value);
24-
};
15+
const dispatch = useDispatch()
2516

2617
return (
2718
<div id="sidebar" className="flex flex-col w-1/4 shadow-md ml-1 p-6">
2819

2920
<div id="header-wrapper flex flex-col">
30-
<h1 className="text-2xl mb-5">Visualise</h1>
21+
<h1 className="text-2xl text-center">Visualise</h1>
3122
</div>
3223

24+
<div className="divider"></div>
25+
3326
<div id="select-wrapper flex flex-col">
3427
<Select
3528
id="select-predictor"
3629
placeholder="Predictor"
3730
className="w-full max-w-sm m-2.5"
3831
options={options}
39-
onChange={handlePredictorTypeSelect}
40-
value={options.find(function (option) {
41-
return option.value === selectedOption;
42-
})}
32+
onChange={
33+
e => dispatch(setX(e.value))
34+
}
35+
defaultValue={x}
4336
/>
4437

4538
<Select
4639
id="select-response"
4740
placeholder="Response"
4841
className="w-full max-w-sm m-2.5"
4942
options={options}
50-
onChange={handleResponseTypeSelect}
51-
value={options.find(function (option) {
52-
return option.value === selectedOption;
53-
})}
43+
onChange={
44+
e => dispatch(setY(e.value))
45+
}
46+
defaultValue={y}
5447
/>
55-
</div>
5648

57-
<div id="confirm-wrapper flex flex-col">
58-
<button className="btn w-1/4 bg-base-100 shadow-md mt-5 rounded-2xl">
59-
<FontAwesomeIcon
60-
icon={faCheck}
61-
size="2x"
62-
/>
63-
</button>
49+
<input
50+
type="number"
51+
placeholder="Pagination Limit"
52+
className="input input-bordered w-full max-w-sm m-2.5"
53+
step="any"
54+
min="1"
55+
max="250"
56+
defaultValue={limit}
57+
onChange={
58+
e => dispatch(setLimit(e.target.value))
59+
}
60+
/>
6461
</div>
6562
</div >
6663
);

0 commit comments

Comments
 (0)