jfmcarreira/immich-power-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: New api endpoint for statistics

Browse Source
This commit is contained in:
sai80082
2024-09-12 13:58:29 +00:00
parent dbfb10b73a
commit 7df379336d
4 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/analytics/exif/contributiongraph.tsx
+60 -4
View File
@@ -1,4 +1,26 @@
import React from 'react';
import React, { useEffect, useState } from "react";
import { getAssetStatistics } from "@/handlers/api/analytics.handler";
// List of month labels
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const weeksPerMonth = [4, 4, 4, 4, 5, 4, 4, 4, 5, 4, 4, 5];
// Function to map weeks to months
const getMonthLabels = () => {
// Approximate number of weeks per month
const monthLabels = [];
let cumulativeWeeks = 0;
for (let i = 0; i < months.length; i++) {
monthLabels.push({
month: months[i],
startWeek: cumulativeWeeks,
span: weeksPerMonth[i],
});
cumulativeWeeks += weeksPerMonth[i];
}
return monthLabels;
};
// Function to generate the last 365 days of contribution data
const generateContributions = () => {
@@ -14,7 +36,7 @@ const generateContributions = () => {
// Function to determine the background color based on the contribution count
const getColor = (count: number) => {
if (count === 0) return '';
if (count === 0) return 'bg-zinc-900';
if (count === 1) return 'bg-green-200';
if (count === 2) return 'bg-green-400';
if (count === 3) return 'bg-green-500';
@@ -24,12 +46,46 @@ const getColor = (count: number) => {
const ContributionGraph: React.FC = () => {
const contributions = generateContributions();
const [statistics, setStatistics] = useState({});
const [loading, setLoading] = useState(false);
const fetchData = async () => {
setLoading(true); // Set loading to true when starting to fetch data
return getAssetStatistics()
.then((data) => {
setStatistics(data); // Update statistics with the returned data
})
.finally(() => setLoading(false)); // Stop loading after data is fetched
};
const monthLabels = getMonthLabels();
return (
<div className="p-4 w-full">
<h2 className="text-xl font-bold mb-4">GitHub Contribution Graph - Past Year</h2>
<h2 className="text-xl font-bold mb-4">Past Year</h2>
<div className="overflow-x-auto">
{/* Month labels */}
{/* <div className="flex mb-1">
{monthLabels.map(({ month, startWeek, span }) => (
<div
key={month}
style={{ width: `calc(${span / 52 * 100}%)`, marginLeft: `calc(${startWeek / 52 * 100}%)` }}
className="text-center font-bold text-sm"
>
{month}
</div>
))}
</div> */}
<table className="table-auto border-separate border-spacing-1 w-full">
<thead>
<tr>
{months.map((month, index) => (
<th key={index} colSpan={weeksPerMonth[index]}>{month}</th>
))}
</tr>
</thead>
<tbody>
{contributions.map((dayContributions, dayIndex) => (
<tr key={dayIndex}>
@@ -38,7 +94,7 @@ const ContributionGraph: React.FC = () => {
key={weekIndex}
className={`h-6 ${getColor(count)} rounded-lg`}
style={{ width: `calc(${100 / 52}%)` }}
title={`${count} contributions`}
title={`${count} Images`}
></td>
))}
</tr>
src/config/routes.ts
+5 -1
View File
@@ -34,4 +34,8 @@ export const ASSET_VIDEO_PATH = (id: string) => BASE_PROXY_ENDPOINT + "/asset/vi
// Location
export const SEARCH_PLACES_PATH = BASE_PROXY_ENDPOINT + "/search/places";
export const SEARCH_PLACES_PATH = BASE_PROXY_ENDPOINT + "/search/places";
//Analytics
export const ASSET_STATISTICS = BASE_PROXY_ENDPOINT + "/assets/statistics";
src/handlers/api/analytics.handler.ts
+5 -1
View File
@@ -1,4 +1,4 @@
import { EXIF_DISTRIBUTION_PATH } from "@/config/routes";
import { ASSET_STATISTICS, EXIF_DISTRIBUTION_PATH } from "@/config/routes";
import API from "@/lib/api";
export type ISupportedEXIFColumns =
@@ -7,3 +7,7 @@ export type ISupportedEXIFColumns =
export const getExifDistribution = async (column: ISupportedEXIFColumns) => {
return API.get(EXIF_DISTRIBUTION_PATH(column));
};
export const getAssetStatistics = async () => {
return API.get(ASSET_STATISTICS);
}
src/pages/analytics/exif.tsx
+33 -13
View File
@@ -13,6 +13,8 @@ import {
CardTitle,
} from "@/components/ui/card";
import ContributionGraph from "@/components/analytics/exif/contributiongraph";
import { useEffect, useState } from "react";
import { getAssetStatistics } from "@/handlers/api/analytics.handler";
const inter = Inter({ subsets: ["latin"] });
@@ -69,48 +71,65 @@ const exifCharts: IEXIFDistributionProps[] = [
},
];
export default function ExifDataAnalytics() {
const [statistics, setStatistics] = useState({ images: 0, videos: 0, total: 0 });
const [loading, setLoading] = useState(false);
const fetchStatisticsData = async () => {
setLoading(true); // Set loading to true when starting to fetch data
return getAssetStatistics()
.then((data) => {
console.log("asdasdadasd")
setStatistics(data); // Update statistics with the returned data
})
.finally(() => setLoading(false)); // Stop loading after data is fetched
};
useEffect(() => {
fetchStatisticsData();
}, []);
return (
<PageLayout>
<Header leftComponent="Exif Data" />
<div className="grid grid-cols-4 gap-4">
<Card>
<CardHeader>
<CardTitle className="text-center">Total Files</CardTitle>
<CardTitle className="text-center text-lg font-mono">Total Files</CardTitle>
</CardHeader>
<CardContent className="text-center">
<CardContent className="text-center text-lg font-mono">
{(() => {
const a = 700000;
const a = statistics.total;
return a.toLocaleString();
})()}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-center">Images</CardTitle>
<CardTitle className="text-center text-lg font-mono">Images</CardTitle>
</CardHeader>
<CardContent className="text-center">
<CardContent className="text-center text-lg font-mono">
{(() => {
const a = 600000;
const a = statistics.images;
return a.toLocaleString();
})()}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-center">Videos</CardTitle>
<CardTitle className="text-center text-lg font-mono">Videos</CardTitle>
</CardHeader>
<CardContent className="text-center">
<CardContent className="text-center text-lg font-mono">
{(() => {
const a = 100000;
const a = statistics.videos;
return a.toLocaleString();
})()}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-center">Live</CardTitle>
<CardTitle className="text-center text-lg font-mono">Live</CardTitle>
</CardHeader>
<CardContent className="text-center">
<CardContent className="text-center text-lg font-mono">
{(() => {
const a = 50000;
return a.toLocaleString();
@@ -118,7 +137,8 @@ export default function ExifDataAnalytics() {
</CardContent>
</Card>
</div>
<ContributionGraph />
<ContributionGraph />
<div className="grid grid-cols-3 gap-4">
{exifCharts.map((chart) => (
<EXIFDistribution
@@ -128,7 +148,7 @@ export default function ExifDataAnalytics() {
description={chart.description}
/>
))}
</div>
</PageLayout>
);