diff --git a/raspberry-pi/src/App.js b/raspberry-pi/src/App.js index 0e2776b..ac1c2ff 100644 --- a/raspberry-pi/src/App.js +++ b/raspberry-pi/src/App.js @@ -1,22 +1,17 @@ import React from "react"; import Header from "./components/Header"; -import Chart1 from "./components/Chart1"; -import Chart2 from "./components/Chart2"; -import Chart3 from "./components/Chart3"; -import Chart4 from "./components/Chart4"; -import Chart5 from "./components/Chart5"; -import Chart6 from "./components/Chart6"; +import Temperature from "./components/Temperature"; +import DiskUsage from "./components/DiskUsage"; +import CpuUsage from "./components/CPUUsage"; + function App() { return (
- - - - - - + + +
); diff --git a/raspberry-pi/src/components/CPUUsage.js b/raspberry-pi/src/components/CPUUsage.js new file mode 100644 index 0000000..d3cde1e --- /dev/null +++ b/raspberry-pi/src/components/CPUUsage.js @@ -0,0 +1,42 @@ +import React from "react"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; +import { Doughnut } from "react-chartjs-2"; + +ChartJS.register(ArcElement, Tooltip, Legend); + +const CpuUsage = () => { + const data = { + labels: ["CPU in use"], + datasets: [ + { + data: [24, 76], + backgroundColor: [ + "rgba(23, 112, 201, 0.8)", + "rgba(23, 112, 201, 0.3)", + ], + borderColor: [ + "rgb(23, 112, 201, 255)", + "rgba(23, 112, 201, 0.4)", + ], + borderWidth: 1, + }, + ], + }; + const options = { + responsive: true, + plugins: { + title: { + display: true, + text: "CPU usage" + }, + }, + }; + + return ( +
+ +
+ ); +}; + +export default CpuUsage; diff --git a/raspberry-pi/src/components/Chart3.js b/raspberry-pi/src/components/Chart3.js deleted file mode 100644 index c74330d..0000000 --- a/raspberry-pi/src/components/Chart3.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Filler, - Legend, -} from "chart.js"; -import { Line } from "react-chartjs-2"; - -ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Filler, - Legend -); - -const Chart3 = () => { - const options = { - responsive: true, - plugins: { - title: { - display: true, - text: "Placeholder", - }, - }, - }; - const labels = ["1", "1", "1", "1", "1", "1", "1",]; - const data = { - labels, - datasets: [ - { - fill: true, - label: "Placeholder", - data: [45, 65, 23, 34, 76, 12, 32], - borderColor: "rgb(59,99,140)", - backgroundColor: "rgba(59, 99, 140, 0.694)", - }, - ], - }; - - return ( -
- -
- ); -}; - -export default Chart3; - diff --git a/raspberry-pi/src/components/Chart4.js b/raspberry-pi/src/components/Chart4.js deleted file mode 100644 index b13328a..0000000 --- a/raspberry-pi/src/components/Chart4.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import { Bar } from "react-chartjs-2"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend, -} from "chart.js"; - -ChartJS.register( - CategoryScale, - LinearScale, - BarElement, - Title, - Tooltip, - Legend -); - -const Chart4 = () => { - const options = { - responsive: true, - plugins: { - title: { - display: true, - text: "Placeholder", - }, - }, - }; - const labels = ["1", "2", "3", "4", "5", "6", "7"]; - const data = { - labels, - datasets: [ - { - label: "Placeholder 1", - data: [344, 233, 125, 654, 345, 233, 432], - backgroundColor: "rgba(230, 130, 15, 0.721", - borderColor: "rgb(230,128,15)" - }, - { - label: "Placeholder 2", - data: [234, 143, 245, 234, 765, 443, 322], - borderColor: "rgb(37,119,191)", - backgroundColor: "rgba(37, 119, 191, 0.726)" - }, - ], - }; - - return ( -
- -
- ); -}; - -export default Chart4; diff --git a/raspberry-pi/src/components/Chart5.js b/raspberry-pi/src/components/Chart5.js deleted file mode 100644 index 48ce5eb..0000000 --- a/raspberry-pi/src/components/Chart5.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { Line } from "react-chartjs-2"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend, -} from "chart.js"; - - -ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend -); - -const Chart5 = () => { - const options = { - responsive: true, - plugins: { - title: { - display: false, - }, - }, - }; - const labels = ["1", "2", "3", "4", "5", "6", "7"]; - const data = { - labels, - datasets: [ - { - label: "Placeholder", - data: [23, 23, 13, -4, 14, 23, 34], - borderColor: "rgb(37,119,191)", - backgroundColor: "rgba(37, 119, 191, 0.726)", - } - ], - }; - - return ( -
- -
- ); -}; - -export default Chart5; diff --git a/raspberry-pi/src/components/Chart6.js b/raspberry-pi/src/components/Chart6.js deleted file mode 100644 index 8127f75..0000000 --- a/raspberry-pi/src/components/Chart6.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Filler, - Legend, -} from "chart.js"; -import { Line } from "react-chartjs-2"; - -ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Filler, - Legend -); - -const Chart6 = () => { - const options = { - responsive: true, - plugins: { - title: { - display: true, - text: "Placeholder", - }, - }, - }; - const labels = ["1", "2", "3", "4", "5", "6", "7"]; - const data = { - labels, - datasets: [ - { - fill: true, - label: "Placeholder", - data: [45, 65, 23, 34, 76, 12, 32], - borderColor: "rgb(230,128,15)", - backgroundColor: "rgba(230, 130, 15, 0.721)", - }, - ], - }; - - return ( -
- -
- ); -}; - -export default Chart6; - diff --git a/raspberry-pi/src/components/Chart2.js b/raspberry-pi/src/components/DiskUsage.js similarity index 61% rename from raspberry-pi/src/components/Chart2.js rename to raspberry-pi/src/components/DiskUsage.js index aa1c7e8..97a6bc1 100644 --- a/raspberry-pi/src/components/Chart2.js +++ b/raspberry-pi/src/components/DiskUsage.js @@ -4,24 +4,19 @@ import { Doughnut } from "react-chartjs-2"; ChartJS.register(ArcElement, Tooltip, Legend); -const Chart2 = () => { +const DiskUsage = () => { const data = { - labels: ["Placeholder 1", "Placeholder 2", "Placeholder 3", "Placeholder 4"], + labels: ["Storage in use"], datasets: [ { - label:" # of Votes", - data: [12, 19, 3, 5], + data: [13, 87], backgroundColor: [ "rgba(230, 130, 15, 0.721)", - "rgba(37, 119, 191, 0.726)", - "rgba(59, 99, 140, 0.721)", - "rgba(4, 45, 79, 0.721)", + "rgba(230, 130, 15, 0.3)", ], borderColor: [ "rgb(230,128,15)", - "rgb(37,119,191)", - "rgb(59,99,140)", - "rgb(4,45,79)", + "rgba(230, 130, 15, 0.2)", ], borderWidth: 1, }, @@ -32,7 +27,7 @@ const Chart2 = () => { plugins: { title: { display: true, - text: "Placeholder" + text: "Disk usage" }, }, }; @@ -44,4 +39,4 @@ const Chart2 = () => { ); }; -export default Chart2; +export default DiskUsage; diff --git a/raspberry-pi/src/components/Chart1.js b/raspberry-pi/src/components/Temperature.js similarity index 71% rename from raspberry-pi/src/components/Chart1.js rename to raspberry-pi/src/components/Temperature.js index 56b4374..ed6b9a3 100644 --- a/raspberry-pi/src/components/Chart1.js +++ b/raspberry-pi/src/components/Temperature.js @@ -21,13 +21,13 @@ ChartJS.register( Legend ); -const Chart1 = () => { +const Temperature = () => { const options = { responsive: true, plugins: { title: { display: true, - text: "Placeholder" + text: "Temperature" }, }, }; @@ -36,10 +36,10 @@ const Chart1 = () => { labels, datasets: [ { - label: "Placeholder", - data: [1, 5, 2, 5, 2, 4, 5], - borderColor: "rgb(230,128,15)", - backgroundColor: "rgba(230, 130, 15, 0.721)", + label: "CPU Temperature [C\u00B0]", + data: [10, 24, 21, 35, 32, 41, 28], + borderColor: "rgba(23, 112, 201, 0.9)", + backgroundColor: "rgba(23, 112, 201, 0.8)", } ], }; @@ -51,4 +51,4 @@ const Chart1 = () => { ); }; -export default Chart1; +export default Temperature; diff --git a/raspberry-pi/src/index.css b/raspberry-pi/src/index.css index 9466383..4397d5f 100644 --- a/raspberry-pi/src/index.css +++ b/raspberry-pi/src/index.css @@ -25,7 +25,7 @@ code { } .container { - max-width: 1100px; + max-width: 1400px; margin: 30px auto; overflow: auto; min-height: 300px; @@ -41,7 +41,8 @@ code { .chartContainer { margin: 10px; - max-width: 80%; + width: 30%; + /* max-width: 90%; */ margin: 30px auto; overflow: auto; min-height: 300px;