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