Event stats

package.json

@@ -16,7 +16,6 @@
     "@aws-amplify/adapter-nextjs": "^1.2.10",
     "@aws-amplify/auth": "^6.3.7",
     "@aws-amplify/ui-react": "^6.1.12",
-    "aws-amplify": "^6.3.8",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -29,6 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.10",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.396.0",
     "next": "14.2.3",
     "react": "^18",

src/components/Stats/ChartBox.module.css

@@ -0,0 +1,9 @@
+.dynamicWidth {
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .dynamicWidth {
+    width: var(--dynamic-width);
+  }
+}

src/components/Stats/ChartBox.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+import styles from './ChartBox.module.css'
+
+interface ChartBoxProps {
+  height?: string;
+  width?: string;
+  title: string;
+  children: ReactNode;
+}
+
+const ChartBox: React.FC<ChartBoxProps> = ({
+  children,
+  title,
+  height = "100%",
+  width = "100%",
+}) => {
+  return (
+    <div 
+    className={`bg-dark-slate my-2 p-4 flex flex-col rounded ${styles.dynamicWidth}`}
+    style={{ 
+      height: height, 
+      '--dynamic-width': width 
+    } as React.CSSProperties}
+  >
+      <p className="text-white font-600 mb-2">{title}</p>
+      <div className="flex-grow flex items-center">
+        <div className="flex-grow">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartBox;

src/components/Stats/PercentageBars.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import { StatsChartData } from "@/types/types";
+
+interface PercentageBarsProps {
+  data: StatsChartData[];
+}
+
+export const barColors = ['#A0C86E', '#75CFF5', '#E75A7C', '#FFC960', '#C082D6', '#7F94FF', '#EB8273']
+
+const calculateBarPercentages = (
+  data: StatsChartData[],
+  total: number
+) => {
+  const percentages: { [key: string]: number } = {};
+
+  data.forEach((item) => {
+    const { label, value } = item;
+    percentages[label] = (value / total) * 100;
+  });
+  return percentages;
+};
+
+const getColorForIndex = (index: number): string => {
+  return barColors[index % barColors.length];
+};
+
+const PercentageBars: React.FC<PercentageBarsProps> = ({ data }) => {
+  const [total, setTotal] = useState(0);
+  const [percentages, setPercentages] = useState<{ [key: string]: number }>({});
+
+  useEffect(() => {
+    const totalValue = data.reduce((sum, item) => sum + item.value, 0);
+    setTotal(totalValue);
+    setPercentages(calculateBarPercentages(data, totalValue));
+  }, [data]);
+
+  return (
+    <div>
+      <div className="flex h-[50px] w-full mb-3 pt-6">
+        {Object.entries(percentages).map(([label, percentage], index) => (
+          <div
+            key={label}
+            className="flex items-center justify-center relative"
+            style={{
+              flex: `0 0 ${percentage}%`,
+              backgroundColor: getColorForIndex(index),
+              borderTopLeftRadius: index === 0 ? "4px" : "0",
+              borderBottomLeftRadius: index === 0 ? "4px" : "0",
+              borderTopRightRadius:
+                index === Object.entries(percentages).length - 1 ? "4px" : "0",
+              borderBottomRightRadius:
+                index === Object.entries(percentages).length - 1 ? "4px" : "0",
+            }}
+          >
+            <div className="absolute top-[-25px] left-[50%] text-white text-sm font-medium translate-x-[-50%]">
+              {percentage.toFixed(1)}%
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center w-full text-white">
+        <div className="flex flex-wrap">
+          {Object.keys(percentages).map((label, index) => (
+            <div key={label} className="flex items-center mr-5 text-xs">
+              <div
+                className="w-4 h-4 mr-2 rounded-[2px]"
+                style={{
+                  backgroundColor: getColorForIndex(index),
+                }}
+              />
+              <span>{label}</span>
+            </div>
+          ))}
+        </div>
+        <p className="ml-auto self-end font-600">Total registered: {total}</p>
+      </div>
+    </div>
+  );
+};
+
+export default PercentageBars;

src/components/Stats/StatsTable.tsx

@@ -1,46 +1,51 @@
+import { StatsChartData } from "@/types/types";
+
 interface StatsTableProps {
-  title: string;
-  data: Object;
+  data: StatsChartData[];
 }
 
-const StatsTable: React.FC<StatsTableProps> = ({ title, data }) => {
-  const renderData = (data: Object, marginValue: number = 0): JSX.Element[] => {
-    return Object.entries(data).map(([label, count]) => {
-      if (typeof count === "number" || typeof count === "string") {
-        return (
-          <>
-            <div
-              className="col-span-2"
-              style={{ marginLeft: `${marginValue}px` }}
-            >
-              {label}
-            </div>
-            <div className="col-span-1 text-right">{count}</div>
-          </>
-        );
+const StatsTable: React.FC<StatsTableProps> = ({ data }) => {
+  const renderData = () => {
+    const simpleData: JSX.Element[] = [];
+    const groupedData: { [key: string]: StatsChartData[] } =
+      {};
+
+    data.forEach((item) => {
+      const [parent, child] = item.label.split(":");
+      if (child) {
+        if (!groupedData[parent]) {
+          groupedData[parent] = [];
+        }
+        groupedData[parent].push({ label: child, value: item.value });
       } else {
-        return (
+        simpleData.push(
           <>
-            <div
-              className="col-span-2"
-              style={{ marginLeft: `${marginValue}px` }}
-            >
-              {label}
-            </div>
-            {renderData(count, marginValue + 16)}
+            <div className="col-span-2">{item.label}</div>
+            <div className="col-span-1 text-right">{item.value}</div>
           </>
         );
       }
     });
+
+    Object.entries(groupedData).forEach(([parent, children]) => {
+      simpleData.push(
+        <>
+          <div className="col-span-3 font-bold">{parent}</div>
+          {children.map(({ label, value }) => (
+            <>
+              <div className="col-span-2 pl-4">{label}</div>
+              <div className="col-span-1 text-right">{value}</div>
+            </>
+          ))}
+        </>
+      );
+    });
+
+    return simpleData;
   };
+
   return (
-    <div className="bg-dark-slate p-8 w-1/3 rounded-md">
-      <h5 className="text-white">{title}</h5>
-      <br />
-      <div className="grid grid-cols-3 gap-2 text-pale-blue">
-        {renderData(data)}
-      </div>
-    </div>
+    <div className="grid grid-cols-3 gap-2 text-pale-blue">{renderData()}</div>
   );
 };
 

src/components/stats/BarChart.tsx

@@ -1,29 +1,43 @@
-import React from "react";
+import { StatsChartData } from "@/types/types";
+import { debounce } from "lodash";
+import React, { useEffect, useState } from "react";
 import { Chart } from "react-google-charts";
 
 interface BarChartProps {
-  data: { label: string; value: number }[];
+  data: StatsChartData[];
   title?: string;
   width?: number;
   height?: number;
 }
 
 const BarChart: React.FC<BarChartProps> = ({
   data,
-  title = "Bar Chart",
-  width = 600,
-  height = 400,
+  title,
+  width = "100%",
+  height = "100%",
 }) => {
   const chartData = [
     ["Label", "Value"],
     ...data.map((item) => [item.label, item.value]),
   ];
+
+  // Re-render the chart component when window is resized horizontally
+  const [windowWidth, setWindowWidth] = useState<number | null>(null);
+  useEffect(() => {
+    setWindowWidth(window.innerWidth);
+    const handleResize = debounce(() => {
+      setWindowWidth(window.innerWidth);
+    }, 25);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   const options = {
     backgroundColor: "transparent",
     chartArea: {
-      left: "10%",
-      top: "20%",
       width: "80%",
       height: "70%",
     },
@@ -81,18 +95,14 @@ const BarChart: React.FC<BarChartProps> = ({
   };
 
   return (
-    <div
-      className={`bg-login-form-card rounded-md font-poppins`}
-      style={{ width: width + "px" }}
-    >
-      <Chart
-        chartType="ColumnChart"
-        data={chartData}
-        options={options}
-        width={width + "px"}
-        height={height + "px"}
-      />
-    </div>
+    <Chart
+      key={windowWidth}
+      chartType="ColumnChart"
+      data={chartData}
+      options={options}
+      width={width}
+      height={height}
+    />
   );
 };
 

src/components/stats/PieChart.tsx

@@ -1,25 +1,40 @@
-import React from 'react';
-import { Chart } from 'react-google-charts';
-
+import React, { useEffect, useState } from "react";
+import { Chart } from "react-google-charts";
+import { debounce } from "lodash";
+import { StatsChartData } from "@/types/types";
 interface PieChartProps {
-  data: { label: string; value: number }[];
+  data: StatsChartData[];
   title?: string;
   width?: number;
   height?: number;
 }
 
 const PieChart: React.FC<PieChartProps> = ({
   data,
-  title = 'Pie Chart',
-  width = 600,
-  height = 400,
+  title,
+  width = "100%",
+  height = "100%",
 }) => {
   // Format the data for Google Charts
   const chartData = [
     ['Label', 'Value'],
     ...data.map(item => [item.label, item.value]),
   ];
 
+  // Re-render the chart component when window is resized horizontally
+  const [windowWidth, setWindowWidth] = useState<number | null>(null);
+  useEffect(() => {
+    setWindowWidth(window.innerWidth);
+    const handleResize = debounce(() => {
+      setWindowWidth(window.innerWidth);
+    }, 25);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   const options = {
     backgroundColor: 'transparent',
     pieHole: 0.4,
@@ -58,24 +73,23 @@ const PieChart: React.FC<PieChartProps> = ({
       showColorCode: true
     },
     chartArea: {
-      left: '10%',
-      top: '20%',
-      width: '80%',
-      height: '70%',
+      left: "0%",
+      top: "5%",
+      width: "100%",
+      height: "100%",
     },
     fontName: 'Poppins'
   };
 
   return (
-    <div className={`bg-login-form-card rounded-md font-poppins`} style={{width: width + 'px'}}>
-        <Chart  
-          chartType="PieChart"
-          data={chartData}
-          options={options}
-          width={width + 'px'}
-          height={height + 'px'}
-        />
-    </div>
+    <Chart
+      key={windowWidth}
+      chartType="PieChart"
+      data={chartData}
+      options={options}
+      width={width}
+      height={height}
+    />
   );
 };