thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: sorting of projects chart
All checks were successful
Deploy Blog / deploy (push) Successful in 1m53s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-11-25 18:26:40 +00:00
parent 69d5afe641
commit 6821f93083
1 changed files with 91 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
src/containers/CodeStats.jsx
View file

@ -6,104 +6,109 @@ 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-"))
).sort((a, b) => b.total - a.total)
const mainProject = personalProjects?.sort((a, b) => a.total > b.total)[0].key const mainProject = personalProjects[0].key
console.log(personalProjects) console.log(personalProjects)
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.map((proj) => ({
metric: proj.key, metric: proj.key,
project: proj.key, project: proj.key,
hours: (proj.total / 3600).toFixed(1), hours: (proj.total / 3600).toFixed(1),
percentage: ( percentage: (
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) * (proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
100 100
).toFixed(1), ).toFixed(1),
})) }))
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 */} {/* 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 href="https://wakapi.dev/" target="__blank"> <a
Wakapi href="https://wakapi.dev/"
</a>{" "} target="__blank"
instance. className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
</div> >
</section> Wakapi
</div> </a>{" "}
</div> instance.
) </div>
</section>
</div>
</div>
)
} }
export default CodeStats export default CodeStats