From 50d727d0717744797b12878fa8dcbcb63fc6cf0f Mon Sep 17 00:00:00 2001
From: Elias <eliaz@outlook.at>
Date: Sat, 21 Sep 2024 16:42:12 +0200
Subject: [PATCH] added Analytics

---
 .../components/Landingpage/DataInsights.tsx   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Landingpage/DataInsights.tsx b/src/app/components/Landingpage/DataInsights.tsx
index 733e6aa..dc64816 100644
--- a/src/app/components/Landingpage/DataInsights.tsx
+++ b/src/app/components/Landingpage/DataInsights.tsx
@@ -16,6 +16,7 @@ import {
   Legend,
 } from "recharts";
 import { FaChartLine, FaShoppingCart } from "react-icons/fa";
+import { track } from '@vercel/analytics';
 
 interface DataPoint {
   date: string;
@@ -283,6 +284,8 @@ const DataInsights: React.FC<DataInsightsProps> = () => {
       setSelectedYears([]); // Clear selected years when switching to Total View
       setInRowView(false); // Disable In-Row View when switching
     }
+    // Track view mode change
+    track('View Mode Changed', { mode });
   };
 
   // Function to toggle year selection
@@ -295,6 +298,8 @@ const DataInsights: React.FC<DataInsightsProps> = () => {
         return [...prev, year];
       }
     });
+    // Track year selection
+    track('Year Selected', { year });
   };
 
   // Function to extract unique years from the data
@@ -512,8 +517,12 @@ const DataInsights: React.FC<DataInsightsProps> = () => {
       {/* Toggle Button for Total In-Row View */}
       <div className="flex flex-wrap gap-2 mb-6">
         <button
-          onClick={() => setInRowView(!inRowView)}
-          disabled={!isByYear} // Enable only when By Year View is active
+          onClick={() => {
+            setInRowView(!inRowView);
+            // Track in-row view toggle
+            track('In-Row View Toggled', { enabled: !inRowView });
+          }}
+          disabled={!isByYear}
           className={`px-4 py-2 rounded-full border ${
             inRowView
               ? "bg-yellow-500 text-white border-yellow-500"
@@ -527,7 +536,11 @@ const DataInsights: React.FC<DataInsightsProps> = () => {
       {/* Toggle Buttons for Time Granularity */}
       <div className="flex flex-wrap gap-2 mb-6">
         <button
-          onClick={() => setTimeGranularity("Monthly")}
+          onClick={() => {
+            setTimeGranularity("Monthly");
+            // Track time granularity change
+            track('Time Granularity Changed', { granularity: 'Monthly' });
+          }}
           className={`px-4 py-2 rounded-full border ${
             timeGranularity === "Monthly"
               ? "bg-purple-500 text-white border-purple-500"
@@ -537,7 +550,11 @@ const DataInsights: React.FC<DataInsightsProps> = () => {
           Monthly
         </button>
         <button
-          onClick={() => setTimeGranularity("Weekly")}
+          onClick={() => {
+            setTimeGranularity("Weekly");
+            // Track time granularity change
+            track('Time Granularity Changed', { granularity: 'Weekly' });
+          }}
           className={`px-4 py-2 rounded-full border ${
             timeGranularity === "Weekly"
               ? "bg-purple-500 text-white border-purple-500"