@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/NewUserAnalytics.tsx

@@ -1,101 +1,101 @@
-// components/ui/new-users-chart.tsx
-"use client";
-
-import { Line } from "react-chartjs-2";
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
-interface AnalyticsData {
-  date: string;
-  country: string;
-  deviceCategory: string;
-  activeUsers: number;
-  totalUsers: number;
-  newUsers: number;
-  pageViews: number;
-  engagedSessions: number;
-  averageSessionDuration: number;
-  averageEngagementTimePerActiveUser: number;
-  bounceRate: number;
-}
-
-interface NewUsersChartProps {
-  data: AnalyticsData[];
-  currentYear: number;
-}
-
-const formatMonth = (date: string) => {
-  const year = date.slice(0, 4);
-  const month = parseInt(date.slice(4, 6), 10);
-  return new Date(parseInt(year), month - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" });
-};
-
-export function NewUsersChart({ data, currentYear }: NewUsersChartProps) {
-  const chartData = {
-    labels: data.map((row) => formatMonth(row.date)),
-    datasets: [
-      {
-        label: "New Users",
-        data: data.map((row) => row.newUsers),
-        borderColor: "#34D399",
-        backgroundColor: "rgba(52, 211, 153, 0.5)",
-        tension: 0.1,
-        pointRadius: 3,
-        borderWidth: 2,
-      },
-    ],
-  };
-
-  const chartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "top" as const,
-        labels: {
-          color: "#9CA3AF", 
-        },
-      },
-      title: {
-        display: false,
-      },
-      tooltip: {
-        backgroundColor: "#1F2937",
-        titleColor: "#E5E7EB", 
-        bodyColor: "#E5E7EB",
-      },
-    },
-    scales: {
-      x: {
-        grid: {
-          display: false,
-        },
-        ticks: {
-          color: "#9CA3AF", 
-        },
-      },
-      y: {
-        grid: {
-          color: "rgba(255, 255, 255, 0.1)",
-        },
-        ticks: {
-          color: "#9CA3AF",
-        },
-      },
-    },
-  };
-
-  return (
-    <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
-      <h2 className="text-2xl font-bold text-blue-200 mb-6">New Users by Month ({currentYear})</h2>
-      {data.length === 0 ? (
-        <p className="text-gray-400 text-center py-4">No data available</p>
-      ) : (
-        <div className="h-[300px]">
-          <Line data={chartData} options={chartOptions} />
-        </div>
-      )}
-    </section>
-  );
+// components/ui/new-users-chart.tsx
+"use client";
+
+import { Line } from "react-chartjs-2";
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+interface AnalyticsData {
+  date: string;
+  country: string;
+  deviceCategory: string;
+  activeUsers: number;
+  totalUsers: number;
+  newUsers: number;
+  pageViews: number;
+  engagedSessions: number;
+  averageSessionDuration: number;
+  averageEngagementTimePerActiveUser: number;
+  bounceRate: number;
+}
+
+interface NewUsersChartProps {
+  data: AnalyticsData[];
+  currentYear: number;
+}
+
+const formatMonth = (date: string) => {
+  const year = date.slice(0, 4);
+  const month = parseInt(date.slice(4, 6), 10);
+  return new Date(parseInt(year), month - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" });
+};
+
+export function NewUsersChart({ data, currentYear }: NewUsersChartProps) {
+  const chartData = {
+    labels: data.map((row) => formatMonth(row.date)),
+    datasets: [
+      {
+        label: "New Users",
+        data: data.map((row) => row.newUsers),
+        borderColor: "#34D399",
+        backgroundColor: "rgba(52, 211, 153, 0.5)",
+        tension: 0.1,
+        pointRadius: 3,
+        borderWidth: 2,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top" as const,
+        labels: {
+          color: "#9CA3AF", 
+        },
+      },
+      title: {
+        display: false,
+      },
+      tooltip: {
+        backgroundColor: "#1F2937",
+        titleColor: "#E5E7EB", 
+        bodyColor: "#E5E7EB",
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: "#9CA3AF", 
+        },
+      },
+      y: {
+        grid: {
+          color: "rgba(255, 255, 255, 0.1)",
+        },
+        ticks: {
+          color: "#9CA3AF",
+        },
+      },
+    },
+  };
+
+  return (
+    <section className="bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-gray-700/50 hover:border-blue-500/50 transition-colors">
+      <h2 className="text-2xl font-bold text-blue-200 mb-6">New Users by Month ({currentYear})</h2>
+      {data.length === 0 ? (
+        <p className="text-gray-400 text-center py-4">No data available</p>
+      ) : (
+        <div className="h-[300px]">
+          <Line data={chartData} options={chartOptions} />
+        </div>
+      )}
+    </section>
+  );
 }