adapting the application to the sample data

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 (
         <div div className='container'>
             <Header title='Raspberry-pi data'/>
             <div className='flex-container'>
-                <Chart1 />
-                <Chart2 />
-                <Chart3 />
-                <Chart4 />
-                <Chart5 />
-                <Chart6 />
+                <DiskUsage />
+                <Temperature />
+                <CpuUsage />
             </div>
         </div>
     );

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 (
+        <div className='chartContainer'>
+            <Doughnut data={data} options={options}/>
+        </div>
+    );
+};
+
+export default CpuUsage;

raspberry-pi/src/components/Chart2.js → 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;

raspberry-pi/src/components/Chart1.js → 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;