ok

src/components/BarChart.module.css

@@ -71,7 +71,7 @@
   }
   
   .chartWrapper {
-    /* border: 1px solid rgb(179, 177, 177);
+    width: 100%;    /* This makes the chart responsive to its parent's width */
-    border-radius: 0 0 11px 11px; */
+    height: 200px;  /* Set a fixed height for the chart */
   }
   

src/components/DailyCharts.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Chart from "react-apexcharts";
 import styles from "./BarChart.module.css"; // Import the CSS module
 
-const DailyCharts = ({ transactionGraph, colors, type }) => {
+const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, type, graphFilter }) => {
   const [selectedIndex, setSelectedIndex] = useState(-1);
 
   useEffect(() => {
@@ -23,7 +23,9 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
         "21-24",
       ];
       console.log(dayData)
-      const seriesData = [
+      let seriesData = []
+      if(graphFilter == 'transactions'){
+      seriesData = [
         dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
         dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
         dayData.hour6To9Transactions.reduce((acc, t) => acc + t.sold, 0),
@@ -33,7 +35,31 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
         dayData.hour18To21Transactions.reduce((acc, t) => acc + t.sold, 0),
         dayData.hour21To24Transactions.reduce((acc, t) => acc + t.sold, 0),
       ];
-
+      }
+      else if(graphFilter == 'income'){
+        seriesData = [
+          dayData.hour0To3Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour3To6Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour6To9Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour9To12Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour12To15Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour15To18Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour18To21Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          dayData.hour21To24Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+        ];
+      }
+      else if(graphFilter == 'outcome'){
+        seriesData = [
+          dayData.hour3To6MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour6To9MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour0To3MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour9To12MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour12To15MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour15To18MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour18To21MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          dayData.hour21To24MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+        ];
+      }
       return {
         date: new Date(dayData.date).toLocaleDateString(),
         categories,
@@ -47,7 +73,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
     });
   };
 
-  const chartData = processData(transactionGraph);
+  const chartData = processData(graphFilter != 'outcome' ? transactionGraph : materialGraph);
 
   let globalMax = null;
   if (chartData)
@@ -139,7 +165,9 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
                     },
                   },
                   yaxis: {
+                    show: false, 
                     max: globalMax,
+                    min: 0,
                     labels: {
                       style: {
                         colors: "transparent",

src/components/PeriodCharts.js

@@ -105,7 +105,7 @@ if (aggregatedCurrentReports || aggregatedPreviousReports) {
                     }
                   }
                 },
-                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                yaxis: { show: false, max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                 grid: { show: false },
                 fill: { opacity: 0.5 },
                 colors: [colors[0]],
@@ -166,7 +166,7 @@ if (aggregatedCurrentReports || aggregatedPreviousReports) {
                     }
                   }
                 },
-                yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
+                yaxis: { show: false,  max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
                 grid: { show: false },
                 fill: { opacity: 0.5 },
                 colors: [colors[1]],

src/pages/Reports.js

@@ -612,7 +612,7 @@ const App = ({ forCafe = true, cafeId = -1,
             </div>
           </div>
           {filter == 'yesterday' || filter == 'weekly' ?
-            <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
+            <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} materialGraph={analytics?.materialGraph || analytics?.combinedMaterialGraph} type={filter} graphFilter={graphFilter} colors={colors} />
             :
             <PeriodCharts type={filter} graphFilter={graphFilter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
           }