new changes

Pareshkr · Oct 31, 2022 · 93211a2 · 93211a2
1 parent ec07612
commit 93211a2
Show file tree

Hide file tree

Showing 18 changed files with 929 additions and 466 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4",
     "webfontloader": "^1.6.28",
-    "websocket": "^1.0.34"
+    "websocket": "^1.0.34",
+    "zingchart": "^2.9.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/dashboard/anomalyimages.js b/src/components/dashboard/anomalyimages.js
@@ -5,6 +5,11 @@ import ImageListItemBar from "@mui/material/ImageListItemBar";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import ListSubheader from "@mui/material/ListSubheader";
+import D0 from "../image/D0.jpg";
+import D1 from "../image/D1.jpg";
+import D19 from "../image/D19.jpg";
+import D23 from "../image/D23.jpg";
+
 
 export default function AnomalyImages() {
   const [open, setOpen] = useState(false);
@@ -21,26 +26,26 @@ export default function AnomalyImages() {
 
   const itemData = [
     {
-      img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
-      class: "D21",
+      img: D0,
+      class: "D0",
       time: "11:43 17-10-22",
       rows: 2,
       cols: 2,
       featured: true,
     },
     {
-      img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
-      class: "D14",
+      img: D1,
+      class: "D1",
       time: "12:15 17-10-22",
     },
     {
-      img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
-      class: "D32",
+      img: D19,
+      class: "D19",
       time: "13:38 17-10-22",
     },
     {
-      img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
-      class: "D9",
+      img: D23,
+      class: "D23",
       time: "14:05 17-10-22",
       cols: 2,
     },
@@ -49,7 +54,7 @@ export default function AnomalyImages() {
   const allItemData = [
     {
       img: "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e",
-      class: "D21",
+      class: "D0",
       time: "11:43 17-10-22",
       rows: 2,
       cols: 2,

diff --git a/src/components/dashboard/barchart.js b/src/components/dashboard/barchart.js
@@ -1,155 +1,177 @@
 import React from "react";
 import Chart from "react-apexcharts";
-export default function BarChart() {
+export default function BarChart(props) {
+
+  const data = props.data;
+  // console.log("barChart data", data)
+  let boxData = ""
+  if(data) {
+    boxData = data.data.Box_wise;
+  }
+  console.log("BOX DATA",boxData)
   const barGraph = {
     series: [
       {
         name: "Box count",
         data: [
+          {
+            x: "D0",
+            y: boxData.D0,
+          },
           {
             x: "D1",
-            y: 18,
+            y: boxData.D1,
           },
           {
             x: "D2",
-            y: 25,
+            y: boxData.D2,
           },
           {
             x: "D3",
-            y: 73,
+            y: boxData.D3,
           },
           {
             x: "D4",
-            y: 12,
+            y: boxData.D4,
           },
           {
             x: "D5",
-            y: 54,
+            y: boxData.D5,
           },
           {
             x: "D6",
-            y: 96,
+            y: boxData.D6,
           },
           {
             x: "D7",
-            y: 23,
+            y: boxData.D7,
           },
           {
             x: "D8",
-            y: 45,
+            y: 0,
           },
           {
             x: "D9",
-            y: 31,
+            y: 0,
           },
           {
             x: "D10",
-            y: 65,
+            y: 0,
           },
           {
             x: "D11",
-            y: 19,
+            y: 0,
           },
           {
             x: "D12",
-            y: 80,
+            y: 0,
           },
           {
             x: "D13",
-            y: 85,
+            y: 0,
           },
           {
             x: "D14",
-            y: 24,
+            y: 0,
           },
           {
             x: "D15",
-            y: 72,
+            y: 0,
           },
           {
             x: "D16",
-            y: 31,
+            y: 0,
           },
           {
             x: "D17",
-            y: 55,
+            y: 0,
           },
           {
             x: "D18",
-            y: 17,
+            y: 0,
           },
           {
             x: "D19",
-            y: 64,
+            y: 0,
           },
           {
             x: "D20",
-            y: 98,
+            y: 0,
           },
           {
             x: "D21",
-            y: 26,
+            y: 0,
           },
           {
             x: "D22",
-            y: 84,
+            y: 0,
           },
           {
             x: "D23",
-            y: 78,
+            y: 0,
           },
           {
             x: "D24",
-            y: 67,
+            y: 0,
           },
           {
             x: "D25",
-            y: 79,
+            y: 0,
           },
           {
             x: "D26",
-            y: 40,
+            y: 0,
           },
           {
             x: "D27",
-            y: 39,
+            y: 0,
           },
           {
             x: "D28",
-            y: 89,
+            y: 0,
           },
           {
             x: "D29",
-            y: 72,
+            y: 0,
           },
           {
             x: "D30",
-            y: 16,
+            y: 0,
           },
           {
             x: "D31",
-            y: 47,
+            y: 0,
           },
           {
             x: "D32",
-            y: 28,
+            y: 0,
           },
           {
             x: "D33",
-            y: 99,
+            y: 0,
           },
           {
             x: "D34",
-            y: 74,
+            y: 0,
           },
           {
             x: "D35",
-            y: 43,
+            y: 0,
           },
         ],
       },
     ],
     options: {
+      fill: {
+        type: "gradient",
+        gradient: {
+          type: "vertical",
+          gradientToColors: ["#6ee7b7"],
+          opacityFrom: 1,
+          opacityTo: 1,
+          stops: [0, 100, 100, 100],
+        },
+      },
       xaxis: {
         type: "category",
       },
@@ -163,30 +185,19 @@ export default function BarChart() {
           borderRadius: 4,
           dataLabels: {
             position: "top",
-            orientation: "vertical"
+            orientation: "vertical",
           },
           columnWidth: "50%",
         },
         dataLabels: {
           enabled: true,
-          formatter: function (val) {
-            return val;
-          },
-          offsetY: -200,
-          style: {
-            fontSize: '12px',
-            colors: ["#304758"]
-          }
         },
       },
       stroke: {
         show: false,
         width: 1,
         colors: ["transparent"],
       },
-      fill: {
-        opacity: 1,
-      },
       tooltip: {
         y: {
           formatter: function (val) {