tweak codestats filtering
All checks were successful
Deploy Blog / deploy (push) Successful in 1m54s
All checks were successful
Deploy Blog / deploy (push) Successful in 1m54s
This commit is contained in:
parent
04950b84bb
commit
5ed2cbd87e
1 changed files with 96 additions and 91 deletions
|
|
@ -6,109 +6,114 @@ 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`
|
||||
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 { 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 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 personalProjects =
|
||||
data &&
|
||||
data?.projects.filter(
|
||||
(project) =>
|
||||
!project.key.includes("gp-") && !project.key.includes("unknown")
|
||||
)
|
||||
|
||||
const personalProjectsSorted =
|
||||
personalProjects && personalProjects.sort((a, b) => b.total - a.total)
|
||||
const personalProjectsSorted =
|
||||
personalProjects && personalProjects.sort((a, b) => b.total - a.total)
|
||||
|
||||
const mainProject = personalProjects ? personalProjectsSorted[0].key : "Error"
|
||||
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 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),
|
||||
}))
|
||||
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),
|
||||
}))
|
||||
.slice(0, 4)
|
||||
|
||||
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
|
||||
}
|
||||
/>
|
||||
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>
|
||||
<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="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>
|
||||
)
|
||||
<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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue