Skip to content

Commit

Permalink
feature: upgrade front style #minor
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexTraveylan committed Jan 7, 2025
1 parent 3c16759 commit b831360
Show file tree
Hide file tree
Showing 11 changed files with 56 additions and 50 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/main-workflow.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ jobs:
npm version $VERSION_TYPE --no-git-tag-version
# Make a commit
git add package.json
git add package.json package-lock.json
git commit -m "${{ github.event.head_commit.message}} [+ update version to: $(cat package.json | jq -r .version)]"
# Push commit without triggering a new build
Expand Down
4 changes: 3 additions & 1 deletion app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ChartRequests from "@/components/chart-requests"
import EcoMetricCard from "@/components/eco-metric-card"
import EcoIndexDisplay from "@/components/ecoindex-card"
import Header from "@/components/header"
import ReportInfos from "@/components/report-infos"
import { AnalysisService } from "@/lib/analysis.service"
import { bestPracticesFactory } from "@/lib/best-practice.service"
import { EcoIndexCalculator } from "@/lib/eco-index"
Expand Down Expand Up @@ -40,8 +41,9 @@ export default async function Page({
return (
<>
<Header navigation={navigation} />
<main>
<main className="py-4">
<div className="flex flex-col gap-4">
<ReportInfos metrics={metrics} />
<EcoIndexDisplay ecoIndex={ecoIndex} />
<EcoMetricCard metrics={metrics} />
<div className="flex gap-4 w-full max-w-4xl mx-auto">
Expand Down
29 changes: 20 additions & 9 deletions components/best-practice-card.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { BestPractice } from "@/lib/best-practice.service"
import type { Impact } from "@/lib/types"
import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -56,7 +62,7 @@ const BestPracticeCard: React.FC<{ practice: BestPractice }> = ({ practice }) =>
)}
{practice.title}
</CardTitle>
<p className="text-sm text-gray-500 mt-1">Ref: {practice.refCode}</p>
<CardDescription>Ref: {practice.refCode}</CardDescription>
</div>
<div className="flex gap-2">
{practice.impact.map((imp) => (
Expand All @@ -74,13 +80,18 @@ const BestPracticeCard: React.FC<{ practice: BestPractice }> = ({ practice }) =>
</CardHeader>
<CardContent>
{messages.length > 0 ? (
<ul className="space-y-2">
{messages.map((message, index) => (
<li key={index} className="text-sm">
{message}
</li>
))}
</ul>
<details>
<summary className="text-sm text-muted-foreground cursor-pointer">
{"Afficher les détails"}
</summary>
<ul className="space-y-2 mt-2">
{messages.map((message, index) => (
<li key={index} className="text-sm">
{message}
</li>
))}
</ul>
</details>
) : (
<p className="text-sm text-gray-500 italic">{"Rien à afficher"}</p>
)}
Expand Down
33 changes: 1 addition & 32 deletions components/eco-metric-card.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { settings } from "@/lib/settings"
import type { EcoMetric } from "@/lib/types"
import { format } from "date-fns"
import { fr } from "date-fns/locale"

const getColorClass = (
value: number,
Expand All @@ -20,9 +17,8 @@ const formatNumber = (num: number) => num.toLocaleString("fr-FR")
const EcoMetricCard: React.FC<{ metrics: EcoMetric }> = ({ metrics }) => {
return (
<Card className="w-full max-w-4xl mx-auto">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardHeader>
<CardTitle>Performances Eco</CardTitle>
<Badge variant="outline">{format(metrics.date, "PPP", { locale: fr })}</Badge>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4">
Expand Down Expand Up @@ -71,33 +67,6 @@ const EcoMetricCard: React.FC<{ metrics: EcoMetric }> = ({ metrics }) => {
{formatNumber(metrics.byteWeight.total)} octets
</p>
</div>
{/* Détail des requêtes */}
<div className="col-span-3 mt-4 grid grid-cols-2 gap-4">
<div>
<h4 className="text-sm font-semibold mb-2">{"Répartition des requêtes"}</h4>
<ul className="space-y-1 text-sm">
<li>Scripts : {formatNumber(metrics.requests.scripts)}</li>
<li>Feuilles de style : {formatNumber(metrics.requests.stylesheets)}</li>
<li>Images : {formatNumber(metrics.requests.images)}</li>
<li>Polices : {formatNumber(metrics.requests.fonts)}</li>
<li>Autres : {formatNumber(metrics.requests.other)}</li>
</ul>
</div>
<div>
<h4 className="text-sm font-semibold mb-2">
{"Répartition du poids en octets"}
</h4>
<ul className="space-y-1 text-sm">
<li>Scripts : {formatNumber(metrics.byteWeight.scripts)} octets</li>
<li>
Feuilles de style : {formatNumber(metrics.byteWeight.stylesheets)} octets
</li>
<li>Images : {formatNumber(metrics.byteWeight.images)} octets</li>
<li>Polices : {formatNumber(metrics.byteWeight.fonts)} octets</li>
<li>Autres : {formatNumber(metrics.byteWeight.other)} octets</li>
</ul>
</div>
</div>
</div>
</CardContent>
<CardFooter className="text-xs text-muted-foreground border-t pt-4">
Expand Down
2 changes: 1 addition & 1 deletion components/ecoindex-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const EcoIndexDisplay: React.FC<{ ecoIndex: EcoIndex }> = ({ ecoIndex }) => {
return (
<Card className="w-full max-w-4xl mx-auto">
<CardHeader>
<CardTitle className="text-xl font-bold">Eco Index</CardTitle>
<CardTitle>Eco Index</CardTitle>
</CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="flex items-center justify-center">
Expand Down
21 changes: 21 additions & 0 deletions components/report-infos.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { EcoMetric } from "@/lib/types"
import { format } from "date-fns"
import { fr } from "date-fns/locale"
import { Badge } from "./ui/badge"

const EcoMetricCard: React.FC<{ metrics: EcoMetric }> = ({ metrics }) => {
return (
<Card className="w-full max-w-4xl mx-auto">
<CardHeader>
<CardTitle>Information du rapport</CardTitle>
</CardHeader>
<CardContent className="flex gap-4">
<Badge variant="outline">{format(metrics.date, "PPP", { locale: fr })}</Badge>
{metrics.url && <Badge variant="outline">{metrics.url}</Badge>}
</CardContent>
</Card>
)
}

export default EcoMetricCard
2 changes: 2 additions & 0 deletions lib/analysis.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ export class AnalysisService implements Analyzer {
const [requests, byteWeight] = this.getRequests()
const date = this.getDate()
const dom = this.getDom()
const url = this.lhr.requestedUrl

return {
date,
url,
dom,
requests,
byteWeight,
Expand Down
4 changes: 2 additions & 2 deletions lib/best-practice.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -217,8 +217,8 @@ export class BPUnusedCode implements BestPractice {

displayMessages(): string[] {
return [
`Css inutilisé: ${(this.getUnusedCssRatio() * 100).toFixed(2)}`,
`Js inutilisé: ${(this.getUnusedJsRatio() * 100).toFixed(2)}`,
`Css inutilisé: ${(this.getUnusedCssRatio() * 100).toFixed(2)} %`,
`Js inutilisé: ${(this.getUnusedJsRatio() * 100).toFixed(2)} %`,
]
}

Expand Down
4 changes: 2 additions & 2 deletions lib/best-practice.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ describe("BPUnusedCode-TMF", () => {
it("should return invalid image URLs", () => {
const bpUnusedCode = new BPUnusedCode(result)
const messages = bpUnusedCode.displayMessages()
expect(messages).toEqual(["Css inutilisé: 89.62", "Js inutilisé: 63.21"])
expect(messages).toEqual(["Css inutilisé: 89.62 %", "Js inutilisé: 63.21 %"])
})
})

Expand Down Expand Up @@ -341,7 +341,7 @@ describe("BPUnusedCode-HP", () => {
it("should return invalid image URLs", () => {
const bpUnusedCode = new BPUnusedCode(result)
const messages = bpUnusedCode.displayMessages()
expect(messages).toEqual(["Css inutilisé: 91.27", "Js inutilisé: 50.93"])
expect(messages).toEqual(["Css inutilisé: 91.27 %", "Js inutilisé: 50.93 %"])
})
})

Expand Down
1 change: 1 addition & 0 deletions lib/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type ByteWeight = RequestDetails

export type EcoMetric = {
date: Date
url?: string
dom: number
requests: Requests
byteWeight: ByteWeight
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b831360

Please sign in to comment.