From b831360438fb5f7735f1221389861a8a3d501437 Mon Sep 17 00:00:00 2001 From: AlexTraveylan Date: Wed, 8 Jan 2025 00:24:35 +0100 Subject: [PATCH] feature: upgrade front style #minor --- .github/workflows/main-workflow.yml | 2 +- .../[pageName]/[reportNumber]/page.tsx | 4 ++- components/best-practice-card.tsx | 29 +++++++++++----- components/eco-metric-card.tsx | 33 +------------------ components/ecoindex-card.tsx | 2 +- components/report-infos.tsx | 21 ++++++++++++ lib/analysis.service.ts | 2 ++ lib/best-practice.service.ts | 4 +-- lib/best-practice.test.ts | 4 +-- lib/types.ts | 1 + package-lock.json | 4 +-- 11 files changed, 56 insertions(+), 50 deletions(-) create mode 100644 components/report-infos.tsx diff --git a/.github/workflows/main-workflow.yml b/.github/workflows/main-workflow.yml index 130f1f2..1c8c425 100644 --- a/.github/workflows/main-workflow.yml +++ b/.github/workflows/main-workflow.yml @@ -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 diff --git a/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx b/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx index 26a1095..14af69e 100644 --- a/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx +++ b/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx @@ -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" @@ -40,8 +41,9 @@ export default async function Page({ return ( <>
-
+
+
diff --git a/components/best-practice-card.tsx b/components/best-practice-card.tsx index 4fc2b05..7b62519 100644 --- a/components/best-practice-card.tsx +++ b/components/best-practice-card.tsx @@ -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" @@ -56,7 +62,7 @@ const BestPracticeCard: React.FC<{ practice: BestPractice }> = ({ practice }) => )} {practice.title} -

Ref: {practice.refCode}

+ Ref: {practice.refCode}
{practice.impact.map((imp) => ( @@ -74,13 +80,18 @@ const BestPracticeCard: React.FC<{ practice: BestPractice }> = ({ practice }) => {messages.length > 0 ? ( -
    - {messages.map((message, index) => ( -
  • - • {message} -
    • - ))} -
+
+ + {"Afficher les détails"} + +
    + {messages.map((message, index) => ( +
  • + {message} +
    • + ))} +
+
) : (

{"Rien à afficher"}

)} diff --git a/components/eco-metric-card.tsx b/components/eco-metric-card.tsx index 34aecef..a8450e3 100644 --- a/components/eco-metric-card.tsx +++ b/components/eco-metric-card.tsx @@ -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, @@ -20,9 +17,8 @@ const formatNumber = (num: number) => num.toLocaleString("fr-FR") const EcoMetricCard: React.FC<{ metrics: EcoMetric }> = ({ metrics }) => { return ( - + Performances Eco - {format(metrics.date, "PPP", { locale: fr })}
@@ -71,33 +67,6 @@ const EcoMetricCard: React.FC<{ metrics: EcoMetric }> = ({ metrics }) => { {formatNumber(metrics.byteWeight.total)} octets

- {/* Détail des requêtes */} -
-
-

{"Répartition des requêtes"}

-
    -
  • Scripts : {formatNumber(metrics.requests.scripts)}
    • -
  • Feuilles de style : {formatNumber(metrics.requests.stylesheets)}
    • -
  • Images : {formatNumber(metrics.requests.images)}
    • -
  • Polices : {formatNumber(metrics.requests.fonts)}
    • -
  • Autres : {formatNumber(metrics.requests.other)}
    • -
-
-
-

- {"Répartition du poids en octets"} -

-
    -
  • Scripts : {formatNumber(metrics.byteWeight.scripts)} octets
    • -
  • - Feuilles de style : {formatNumber(metrics.byteWeight.stylesheets)} octets -
    • -
  • Images : {formatNumber(metrics.byteWeight.images)} octets
    • -
  • Polices : {formatNumber(metrics.byteWeight.fonts)} octets
    • -
  • Autres : {formatNumber(metrics.byteWeight.other)} octets
    • -
-
-
diff --git a/components/ecoindex-card.tsx b/components/ecoindex-card.tsx index b4d9042..b659f1e 100644 --- a/components/ecoindex-card.tsx +++ b/components/ecoindex-card.tsx @@ -18,7 +18,7 @@ const EcoIndexDisplay: React.FC<{ ecoIndex: EcoIndex }> = ({ ecoIndex }) => { return ( - Eco Index + Eco Index
diff --git a/components/report-infos.tsx b/components/report-infos.tsx new file mode 100644 index 0000000..97843a2 --- /dev/null +++ b/components/report-infos.tsx @@ -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 ( + + + Information du rapport + + + {format(metrics.date, "PPP", { locale: fr })} + {metrics.url && {metrics.url}} + + + ) +} + +export default EcoMetricCard diff --git a/lib/analysis.service.ts b/lib/analysis.service.ts index 5a0093f..0bd208c 100644 --- a/lib/analysis.service.ts +++ b/lib/analysis.service.ts @@ -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, diff --git a/lib/best-practice.service.ts b/lib/best-practice.service.ts index de38fe0..215ade8 100644 --- a/lib/best-practice.service.ts +++ b/lib/best-practice.service.ts @@ -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)} %`, ] } diff --git a/lib/best-practice.test.ts b/lib/best-practice.test.ts index d2052d7..ee4f0a1 100644 --- a/lib/best-practice.test.ts +++ b/lib/best-practice.test.ts @@ -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 %"]) }) }) @@ -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 %"]) }) }) diff --git a/lib/types.ts b/lib/types.ts index bd301e7..589ef23 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -19,6 +19,7 @@ export type ByteWeight = RequestDetails export type EcoMetric = { date: Date + url?: string dom: number requests: Requests byteWeight: ByteWeight diff --git a/package-lock.json b/package-lock.json index c123841..779bb79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "eco-track", - "version": "0.1.2", + "version": "0.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "eco-track", - "version": "0.1.2", + "version": "0.1.3", "dependencies": { "@aws-sdk/client-s3": "^3.717.0", "@hookform/resolvers": "^3.9.1",