114 lines
3.7 KiB
JavaScript
114 lines
3.7 KiB
JavaScript
import { useQuery } from "@tanstack/react-query"
|
|
import wakapiApi from "../api/wakapi-api"
|
|
import { convertDateFriendly } from "../utils/convertDate"
|
|
import Scorecard from "../components/Scorecard"
|
|
import LanguagesChart from "../components/LanguagesChart"
|
|
import ProjectsChart from "../components/ProjectsChart"
|
|
|
|
const convertSeconds = (secs) => {
|
|
return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
|
|
}
|
|
|
|
const CodeStats = () => {
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["codestats"],
|
|
queryFn: () =>
|
|
wakapiApi.get(`summary?interval=week`).then((res) => res.data),
|
|
})
|
|
|
|
const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0)
|
|
const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m`
|
|
const os = data?.operating_systems
|
|
const osMetric = os ? (
|
|
<div className="text-sm">
|
|
{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
|
|
{convertSeconds(os[1].total)}
|
|
</div>
|
|
) : (
|
|
"Error"
|
|
)
|
|
|
|
const personalProjects =
|
|
data && data?.projects.filter((project) => !project.key.includes("gp-"))
|
|
|
|
const personalProjectsSorted =
|
|
personalProjects && personalProjects.sort((a, b) => b.total - a.total)
|
|
|
|
const mainProject = personalProjects ? personalProjectsSorted[0].key : "Error"
|
|
|
|
const languagesChartData = data?.languages
|
|
.map((lang) => ({
|
|
metric: lang.key,
|
|
language: lang.key,
|
|
hours: (lang.total / 3600).toFixed(1),
|
|
percentage: (
|
|
(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
|
|
100
|
|
).toFixed(1),
|
|
}))
|
|
.slice(0, 4)
|
|
|
|
const projectsChartData =
|
|
personalProjects &&
|
|
personalProjects.map((proj) => ({
|
|
metric: proj.key,
|
|
project: proj.key,
|
|
hours: (proj.total / 3600).toFixed(1),
|
|
percentage: (
|
|
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
|
|
100
|
|
).toFixed(1),
|
|
}))
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 grow">
|
|
<div className="space-my-8">
|
|
<section className="container">
|
|
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
|
|
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1">
|
|
{`> code stats`}
|
|
</h2>
|
|
<div className="mb-4 text-sm text-muted">
|
|
{convertDateFriendly(data?.from)} -{" "}
|
|
{convertDateFriendly(data?.to)}
|
|
</div>
|
|
</div>
|
|
{/* Score-cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<Scorecard
|
|
title="time coding"
|
|
metric={
|
|
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
|
|
}
|
|
/>
|
|
|
|
<Scorecard
|
|
title="main project"
|
|
metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
|
|
/>
|
|
|
|
<Scorecard
|
|
title="OS"
|
|
metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
|
|
/>
|
|
</div>
|
|
<LanguagesChart chartData={languagesChartData} error={error} />
|
|
<ProjectsChart chartData={projectsChartData} error={error} />
|
|
<div className="text-sm text-center text-muted-foreground">
|
|
Data sourced from my self-hosted{" "}
|
|
<a
|
|
href="https://wakapi.dev/"
|
|
target="__blank"
|
|
className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
|
|
>
|
|
Wakapi
|
|
</a>{" "}
|
|
instance.
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CodeStats
|