From 06af183544140d3dcb6fbac860863751b01a2670 Mon Sep 17 00:00:00 2001 From: Dimitri FAJAL Date: Sun, 24 May 2026 18:20:00 +0200 Subject: [PATCH 1/3] feat: remove charts --- package-lock.json | 38 -------------------------------------- package.json | 2 -- src/app/app.config.ts | 3 +-- 3 files changed, 1 insertion(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0a71e6f..61bd8dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,10 +19,8 @@ "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "@codemirror/language-data": "^6.5.2", - "chart.js": "^4.5.1", "katex": "^0.16.25", "mermaid": "^11.12.3", - "ng2-charts": "^8.0.0", "ngx-remark": "^0.2.1", "pyodide": "^0.29.0", "remark": "^15.0.1", @@ -2615,12 +2613,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@kurkle/color": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", - "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", - "license": "MIT" - }, "node_modules/@lezer/common": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz", @@ -5602,18 +5594,6 @@ "dev": true, "license": "MIT" }, - "node_modules/chart.js": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", - "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", - "license": "MIT", - "dependencies": { - "@kurkle/color": "^0.3.0" - }, - "engines": { - "pnpm": ">=8" - } - }, "node_modules/chevrotain": { "version": "11.1.1", "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.1.1.tgz", @@ -9345,24 +9325,6 @@ "node": ">= 0.6" } }, - "node_modules/ng2-charts": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-8.0.0.tgz", - "integrity": "sha512-nofsNHI2Zt+EAwT+BJBVg0kgOhNo9ukO4CxULlaIi7VwZSr7I1km38kWSoU41Oq6os6qqIh5srnL+CcV+RFPFA==", - "license": "MIT", - "dependencies": { - "lodash-es": "^4.17.15", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/cdk": ">=19.0.0", - "@angular/common": ">=19.0.0", - "@angular/core": ">=19.0.0", - "@angular/platform-browser": ">=19.0.0", - "chart.js": "^3.4.0 || ^4.0.0", - "rxjs": "^6.5.3 || ^7.4.0" - } - }, "node_modules/ngx-remark": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/ngx-remark/-/ngx-remark-0.2.1.tgz", diff --git a/package.json b/package.json index d442d4b..5196470 100644 --- a/package.json +++ b/package.json @@ -34,10 +34,8 @@ "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", "@codemirror/language-data": "^6.5.2", - "chart.js": "^4.5.1", "katex": "^0.16.25", "mermaid": "^11.12.3", - "ng2-charts": "^8.0.0", "ngx-remark": "^0.2.1", "pyodide": "^0.29.0", "remark": "^15.0.1", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 8c67782..17517a5 100755 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -8,7 +8,6 @@ import { provideRouter, TitleStrategy, withComponentInputBinding, withInMemorySc import { AppTitleStrategy } from './app.title-strategy'; import { MAT_ICON_DEFAULT_OPTIONS } from "@angular/material/icon"; -import { provideCharts, withDefaultRegisterables } from 'ng2-charts'; export const appConfig: ApplicationConfig = { providers: [ @@ -18,6 +17,6 @@ export const appConfig: ApplicationConfig = { provideHttpClient(withFetch(), withXsrfConfiguration({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' })), provideClientHydration(withEventReplay()), {provide: TitleStrategy, useClass: AppTitleStrategy}, - {provide: MAT_ICON_DEFAULT_OPTIONS, useValue: {fontSet: 'material-symbols-outlined'}}, provideCharts(withDefaultRegisterables()) + {provide: MAT_ICON_DEFAULT_OPTIONS, useValue: {fontSet: 'material-symbols-outlined'}} ] }; From 736b54b28646eb808e5eb146ff07776bb6ecf7ca Mon Sep 17 00:00:00 2001 From: Dimitri FAJAL Date: Sun, 24 May 2026 18:20:13 +0200 Subject: [PATCH 2/3] feat: dashboard proof of concept --- src/app/features/dashboard/dashboard.html | 153 +++++- src/app/features/dashboard/dashboard.scss | 450 +++++++++++++++++- src/app/features/dashboard/dashboard.ts | 49 +- .../components/area-chart/area-chart.html | 11 - .../components/area-chart/area-chart.scss | 0 .../components/area-chart/area-chart.spec.ts | 23 - .../components/area-chart/area-chart.ts | 82 ---- .../components/bar-chart/bar-chart.html | 11 - .../components/bar-chart/bar-chart.scss | 0 .../components/bar-chart/bar-chart.spec.ts | 23 - .../shared/components/bar-chart/bar-chart.ts | 35 -- 11 files changed, 612 insertions(+), 225 deletions(-) delete mode 100644 src/app/shared/components/area-chart/area-chart.html delete mode 100644 src/app/shared/components/area-chart/area-chart.scss delete mode 100644 src/app/shared/components/area-chart/area-chart.spec.ts delete mode 100644 src/app/shared/components/area-chart/area-chart.ts delete mode 100644 src/app/shared/components/bar-chart/bar-chart.html delete mode 100644 src/app/shared/components/bar-chart/bar-chart.scss delete mode 100644 src/app/shared/components/bar-chart/bar-chart.spec.ts delete mode 100644 src/app/shared/components/bar-chart/bar-chart.ts diff --git a/src/app/features/dashboard/dashboard.html b/src/app/features/dashboard/dashboard.html index 61fe91c..a8b43ac 100644 --- a/src/app/features/dashboard/dashboard.html +++ b/src/app/features/dashboard/dashboard.html @@ -1,15 +1,144 @@ -
-
-

Bienvenue dans ton dashboard

+
+
+
+

Salut, Robert !

+
+
+ +
+ @for (stat of stats; track stat.label) { + + +
+ {{ stat.label }} +
+ {{ stat.icon }} +
+
+
{{ stat.value }}
+
+ trending_up + {{ stat.trend }} +
+ + + }
-
-
-
- -
+
+
+ +
+
+ Course visual + {{ relevantCourse.category }} +
+
+
+

{{ relevantCourse.title }}

+

{{ relevantCourse.description }}

+
+
+
+ schedule + {{ relevantCourse.duration }} +
+
+ menu_book + {{ relevantCourse.lessons }} +
+
+ stars + {{ relevantCourse.xp }} +
+
+
+ +
+
+
+ + + + + Mes cours actifs + + +
+ @for (course of courses; track course.title) { +
+
+
+

{{ course.title }}

+ {{ course.lessonsCompleted }}/{{ course.totalLessons }} leçons +
+
+ + {{ course.progress }}% +
+
+ Dernière activité : {{ course.lastActive }} + +
+
+
+ } +
+ + +
-
- -
-
\ No newline at end of file +
+ + + Défis & Activités + + +
+ @for (ach of achievements; track ach.title) { +
+
+ {{ ach.icon }} +
+
+

{{ ach.title }}

+

{{ ach.desc }}

+
+ {{ ach.points }} + +
+
+
+ } +
+ + + + + + Derniers badges gagnés + + +
+ @for (badge of badges; track badge.name) { +
+
+ {{ badge.icon }} +
+
{{ badge.name }}
+
+ } +
+ + +
+ + \ No newline at end of file diff --git a/src/app/features/dashboard/dashboard.scss b/src/app/features/dashboard/dashboard.scss index 4513190..c948e12 100644 --- a/src/app/features/dashboard/dashboard.scss +++ b/src/app/features/dashboard/dashboard.scss @@ -1,36 +1,436 @@ -.chart-section { - display: flex; - flex-direction: row; +.dashboard-container { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 2.5rem; + max-width: 1400px; + margin: 0 auto; + box-sizing: border-box; +} + +@media (max-width: 768px) { + .dashboard-container { + padding: 1.5rem; gap: 2rem; - padding: 1rem; - width: 100%; - box-sizing: border-box; + } +} + +.dashboard-header { + display: flex; + align-items: center; + margin-top: 1rem; + margin-bottom: 1.5rem; +} - @media (max-width: 1024px) { - flex-direction: column; +.header-welcome { + h1 { + font-family: 'Rubik', sans-serif; + font-weight: 900; + font-size: 3.5rem; + margin: 0; + color: var(--mat-sys-on-surface, #1c1b1f); + letter-spacing: -0.025em; + } +} + +@media (max-width: 600px) { + .dashboard-header { + margin-top: 0.5rem; + margin-bottom: 0.75rem; + } + + .header-welcome { + h1 { + font-size: 2.5rem; } + } +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 2rem; + width: 100%; +} + +.stat-card { + border-radius: 24px !important; + border: 1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.05)) !important; + background: var(--mat-sys-surface-container-low, #f7f2fa) !important; +} + +.stat-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; +} + +.stat-label { + font-size: 1.35rem; + font-weight: 700; + color: var(--mat-sys-on-surface-variant, #49454f); +} + +.stat-icon-wrapper { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 16px; + background: var(--mat-sys-primary-container, #d1e4ff); + color: var(--mat-sys-primary, #0061a4); +} + +.stat-value { + font-size: 2.5rem; + font-weight: 800; + margin: 1rem 0 0.75rem 0; + letter-spacing: -0.02em; + color: var(--mat-sys-on-surface, #1c1b1f); +} + +.stat-trend { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.95rem; + font-weight: 500; + + &.positive { + color: #0f9d58; + } + &.neutral { + color: var(--mat-sys-secondary, #625b71); + } +} + +.dashboard-content-layout { + display: grid; + grid-template-columns: 2.2fr 1.1fr; + gap: 2.5rem; + align-items: start; +} + +@media (max-width: 1024px) { + .dashboard-content-layout { + grid-template-columns: 1fr; + } +} + +.section-card { + border-radius: 28px !important; + border: 1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.05)) !important; + background: var(--mat-sys-surface-container-lowest, #ffffff) !important; + margin-bottom: 2rem; + + mat-card-header { + padding: 2rem 2rem 0.75rem 2rem; + } + + mat-card-title { + font-family: 'Rubik', sans-serif; + font-weight: 700; + font-size: 1.5rem; + color: var(--mat-sys-on-surface, #1c1b1f); + } + + mat-card-content { + padding: 2rem; + } +} + +.course-list { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.course-row { + padding-bottom: 2rem; + border-bottom: 1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.06)); + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } +} + +.course-header-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + gap: 1rem; +} + +.course-title { + margin: 0; + font-size: 1.35rem; + font-weight: 700; + color: var(--mat-sys-on-surface, #1c1b1f); +} + +.course-meta { + font-size: 0.95rem; + font-weight: 500; + color: var(--mat-sys-on-surface-variant, #49454f); +} + +.progress-container { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1rem; + + mat-progress-bar { + border-radius: 8px; + height: 8px; + flex: 1; + } + + .progress-percentage { + font-size: 0.95rem; + font-weight: 700; + min-width: 35px; + text-align: right; + } +} + +.course-footer { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.course-last-active { + font-size: 0.95rem; + color: var(--mat-sys-on-surface-variant, #49454f); +} + +.resume-btn { + font-weight: 600; + display: inline-flex; + align-items: center; +} + +.challenge-list { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.challenge-item { + display: flex; + gap: 1.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.06)); + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } +} + +.challenge-icon-box { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 18px; + background: var(--mat-sys-tertiary-container, #ffd7f3); + color: var(--mat-sys-tertiary, #76546f); + flex-shrink: 0; +} + +.challenge-details { + flex: 1; +} + +.challenge-title { + margin: 0 0 0.35rem 0; + font-size: 1.2rem; + font-weight: 700; + color: var(--mat-sys-on-surface, #1c1b1f); +} + +.challenge-desc { + margin: 0 0 1rem 0; + font-size: 1rem; + line-height: 1.5; + color: var(--mat-sys-on-surface-variant, #49454f); +} + +.challenge-footer { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} - &>section { - flex: 1; - min-width: 0; - padding: 1.5rem; +.challenge-reward { + font-size: 0.95rem; + font-weight: 700; + color: var(--mat-sys-tertiary, #76546f); + background: var(--mat-sys-tertiary-container, #ffd7f3); + padding: 6px 12px; + border-radius: 10px; +} + +.badges-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); + gap: 1.5rem; + justify-items: center; + text-align: center; +} + +.badge-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + cursor: pointer; + transition: transform 0.2s ease; + + &:hover { + transform: scale(1.08); + } +} + +.badge-icon-shield { + display: inline-flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 50%; + box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); + color: #ffffff; + + &.gold { + background: linear-gradient(135deg, #ffe066 0%, #f5b041 100%); + } + + &.silver { + background: linear-gradient(135deg, #e2e2e2 0%, #90a4ae 100%); + } + + &.bronze { + background: linear-gradient(135deg, #f5b041 0%, #b87333 100%); + } + + &.platinum { + background: linear-gradient(135deg, #e0f7fa 0%, #80deea 50%, #0097a7 100%); + } +} + +.badge-name { + font-size: 0.9rem; + font-weight: 600; + color: var(--mat-sys-on-surface, #1c1b1f); + max-width: 100px; + line-height: 1.3; +} + +.horizontal-course-card { + padding: 0 !important; + overflow: hidden; +} + +.horizontal-card-layout { + display: flex; + flex-direction: row; + width: 100%; + min-height: 240px; + + @media (max-width: 768px) { + flex-direction: column; + } +} + +.horizontal-card-image-box { + position: relative; + width: 35%; + min-width: 220px; + + @media (max-width: 768px) { + width: 100%; + height: 180px; + } + + .horizontal-course-image { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + .category-badge { + position: absolute; + top: 1rem; + left: 1rem; + background: var(--mat-sys-primary, #0061a4); + color: var(--mat-sys-on-primary, #ffffff); + padding: 6px 12px; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 700; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); + } +} + +.horizontal-card-details { + flex: 1; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1.25rem; + + .horizontal-card-header { + h2 { + font-family: 'Rubik', sans-serif; + font-weight: 800; + font-size: 1.65rem; + margin: 0 0 0.5rem 0; + color: var(--mat-sys-on-surface, #1c1b1f); + line-height: 1.3; + } + .horizontal-card-desc { + font-size: 1.05rem; + line-height: 1.5; + color: var(--mat-sys-on-surface-variant, #49454f); + margin: 0; } + } } -.hero-section { - background-color: var(--mat-sys-surface-container-low); - padding: 1rem; - text-align: center; +.horizontal-card-meta { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + align-items: center; - .hero-content { - max-width: 800px; - margin: 0 auto; + .meta-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.95rem; + font-weight: 600; + color: var(--mat-sys-on-surface-variant, #49454f); - h1 { - font-family: 'Rubik', sans-serif; - font-size: 3rem; - margin-bottom: 1rem; - color: var(--mat-sys-primary); - } + .xp-text { + color: var(--mat-sys-tertiary, #76546f); + font-weight: 700; } + } +} + +.horizontal-card-footer { + display: flex; + justify-content: flex-end; } \ No newline at end of file diff --git a/src/app/features/dashboard/dashboard.ts b/src/app/features/dashboard/dashboard.ts index 3daecb9..15f92a0 100644 --- a/src/app/features/dashboard/dashboard.ts +++ b/src/app/features/dashboard/dashboard.ts @@ -1,13 +1,56 @@ import { Component } from '@angular/core'; -import { BarChart } from '@shared/components/bar-chart/bar-chart'; -import { AreaChart } from '@shared/components/area-chart/area-chart'; +import { CommonModule } from '@angular/common'; +import { MatCardModule } from '@angular/material/card'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'app-dashboard', - imports: [BarChart, AreaChart], + imports: [ + CommonModule, + MatCardModule, + MatButtonModule, + MatIconModule, + MatProgressBarModule, + MatTooltipModule + ], templateUrl: './dashboard.html', styleUrl: './dashboard.scss', }) export class Dashboard { + stats = [ + { label: 'Cours finis', value: '3', icon: 'school', trend: '+1 ce mois-ci', trendClass: 'positive' }, + { label: 'Exercices résolus', value: '142', icon: 'check_circle', trend: '+18 cette semaine', trendClass: 'positive' }, + { label: 'Score d\'XP', value: '4 850 pts', icon: 'emoji_events', trend: 'Niveau 8 (Ninja Python)', trendClass: 'neutral' }, + { label: 'Série de jours', value: '5 jours', icon: 'local_fire_department', trend: 'Record à battre : 12j', trendClass: 'positive' } + ]; + courses = [ + { title: 'Les fondamentaux de Python', progress: 85, color: 'primary', lastActive: 'Il y a 2 heures', lessonsCompleted: 17, totalLessons: 20 }, + { title: 'Structures conditionnelles et boucles', progress: 42, color: 'accent', lastActive: 'Hier', lessonsCompleted: 5, totalLessons: 12 }, + { title: 'Introduction à la NSI', progress: 15, color: 'warn', lastActive: 'Le 20 mai', lessonsCompleted: 2, totalLessons: 15 } + ]; + + badges = [ + { name: 'Premier Script', desc: 'A compilé son premier code', icon: 'code', color: 'bronze' }, + { name: 'Boucleur Fou', desc: '100 boucles for exécutées', icon: 'repeat', color: 'silver' }, + { name: 'Sans Erreur', desc: 'A validé un exercice du premier coup', icon: 'verified', color: 'gold' }, + { name: 'Ninja Python', desc: 'A atteint le score de 4 000 XP', icon: 'psychology', color: 'platinum' } + ]; + + achievements = [ + { title: 'Relever le défi de la semaine', desc: 'Écrire une fonction récursive pour trier une liste.', points: '+250 XP', icon: 'star', actionLabel: 'Rejoindre le défi' }, + { title: 'Participer au quiz express', desc: 'Répondre à 5 questions pièges sur les dictionnaires.', points: '+100 XP', icon: 'quiz', actionLabel: 'Lancer le quiz' } + ]; + + relevantCourse = { + title: 'Maîtriser les Structures Conditionnelles avancées', + category: 'Python Intermédiaire', + description: 'Apprenez à structurer des conditions imbriquées complexes et optimisez vos algorithmes de décision.', + duration: '2h 15m', + lessons: '8 leçons', + xp: '+150 XP' + }; } \ No newline at end of file diff --git a/src/app/shared/components/area-chart/area-chart.html b/src/app/shared/components/area-chart/area-chart.html deleted file mode 100644 index b79e0be..0000000 --- a/src/app/shared/components/area-chart/area-chart.html +++ /dev/null @@ -1,11 +0,0 @@ - - - Évolution de mes points - - - -
- -
- - \ No newline at end of file diff --git a/src/app/shared/components/area-chart/area-chart.scss b/src/app/shared/components/area-chart/area-chart.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/shared/components/area-chart/area-chart.spec.ts b/src/app/shared/components/area-chart/area-chart.spec.ts deleted file mode 100644 index 066bc8f..0000000 --- a/src/app/shared/components/area-chart/area-chart.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AreaChart } from './area-chart'; - -describe('AreaChart', () => { - let component: AreaChart; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AreaChart] - }) - .compileComponents(); - - fixture = TestBed.createComponent(AreaChart); - component = fixture.componentInstance; - await fixture.whenStable(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/shared/components/area-chart/area-chart.ts b/src/app/shared/components/area-chart/area-chart.ts deleted file mode 100644 index f1932ad..0000000 --- a/src/app/shared/components/area-chart/area-chart.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { BaseChartDirective } from 'ng2-charts'; -import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card'; -import { ChartConfiguration, ChartData } from 'chart.js'; - -type SummaryItem = { - name: string; - value: number; - color: string; -}; - -@Component({ - selector: 'app-area-chart', - templateUrl: './area-chart.html', - styleUrl: './area-chart.scss', - imports: [BaseChartDirective, MatCard, MatCardContent, MatCardHeader, MatCardTitle], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class AreaChart { - chartType = 'line' as const; - - chartData: ChartData<'line', number[], string> = { - labels: ['Sept', 'Oct', 'Nov', 'Déc', 'Janv', 'Févr'], - datasets: [ - { - data: [44, 121, 135, 155, 227, 324], - label: 'Mathématiques', - borderColor: '#6366f1', - backgroundColor: 'rgba(99, 102, 241, 0.1)', - fill: true, - tension: 0.4, - }, - { - data: [20, 30, 45, 60, 120, 150], - label: 'Physique', - borderColor: '#f43f5e', - backgroundColor: 'rgba(244, 63, 94, 0.1)', - fill: true, - tension: 0.4, - }, - { - data: [62, 80, 90, 150, 170, 175], - label: 'NSI', - borderColor: '#10b981', - backgroundColor: 'rgba(16, 185, 129, 0.1)', - fill: true, - tension: 0.4, - }, - ], - }; - - chartOptions: ChartConfiguration<'line'>['options'] = { - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - }, - scales: { - x: { - display: true, - grid: { - display: false, - }, - }, - y: { - display: true, - beginAtZero: true, - max: 400, - }, - }, - }; - - get summary(): SummaryItem[] { - return this.chartData.datasets.map(dataset => ({ - name: dataset.label ?? '', - value: dataset.data[dataset.data.length - 1], // Last note - color: dataset.borderColor?.toString() ?? '', - })); - } -} diff --git a/src/app/shared/components/bar-chart/bar-chart.html b/src/app/shared/components/bar-chart/bar-chart.html deleted file mode 100644 index 86e440f..0000000 --- a/src/app/shared/components/bar-chart/bar-chart.html +++ /dev/null @@ -1,11 +0,0 @@ - - - Mes moyennes - - - -
- -
- - \ No newline at end of file diff --git a/src/app/shared/components/bar-chart/bar-chart.scss b/src/app/shared/components/bar-chart/bar-chart.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/shared/components/bar-chart/bar-chart.spec.ts b/src/app/shared/components/bar-chart/bar-chart.spec.ts deleted file mode 100644 index b9ace4e..0000000 --- a/src/app/shared/components/bar-chart/bar-chart.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BarChart } from './bar-chart'; - -describe('BarChart', () => { - let component: BarChart; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [BarChart] - }) - .compileComponents(); - - fixture = TestBed.createComponent(BarChart); - component = fixture.componentInstance; - await fixture.whenStable(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/shared/components/bar-chart/bar-chart.ts b/src/app/shared/components/bar-chart/bar-chart.ts deleted file mode 100644 index ff3ca3e..0000000 --- a/src/app/shared/components/bar-chart/bar-chart.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component } from '@angular/core'; -import { BaseChartDirective } from 'ng2-charts'; -import { ChartOptions, ChartData } from 'chart.js'; -import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card'; - -@Component({ - selector: 'app-bar-chart', - imports: [BaseChartDirective, MatCard, MatCardContent, MatCardHeader, MatCardTitle, BaseChartDirective, MatCard, MatCardContent, MatCardHeader, MatCardTitle], - templateUrl: './bar-chart.html', - styleUrl: './bar-chart.scss', -}) -export class BarChart { - readonly chartData: ChartData<'bar'> = { - labels: ['Mathématiques', 'Physique', 'NSI'], - datasets: [ - { - data: [15, 13, 17], - label: 'Notes', - backgroundColor: '#6366f1', - borderRadius: 5, - }, - ], - }; - - readonly chartOptions: ChartOptions<'bar'> = { - responsive: true, - maintainAspectRatio: false, - scales: { - y: { - beginAtZero: true, - max: 20, - }, - }, - }; -} From d4b824461659611f9460247aa057efa63cdb161e Mon Sep 17 00:00:00 2001 From: Dimitri FAJAL Date: Sun, 31 May 2026 18:09:33 +0200 Subject: [PATCH 3/3] feat: add WIP disclaimer banner to dashboard and update course placeholder image --- src/app/features/dashboard/dashboard.html | 11 +++++++++-- src/app/features/dashboard/dashboard.scss | 17 +++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/app/features/dashboard/dashboard.html b/src/app/features/dashboard/dashboard.html index a8b43ac..1d80e3f 100644 --- a/src/app/features/dashboard/dashboard.html +++ b/src/app/features/dashboard/dashboard.html @@ -1,7 +1,14 @@
+
+ warning +
+ Interface en cours de développement : Ce tableau de bord est une maquette d'illustration avec des données fictives. +
+
+
-

Salut, Robert !

+

Salut !

@@ -30,7 +37,7 @@

Salut, Robert !

- Course visual + Course visual {{ relevantCourse.category }}
diff --git a/src/app/features/dashboard/dashboard.scss b/src/app/features/dashboard/dashboard.scss index c948e12..2a497e8 100644 --- a/src/app/features/dashboard/dashboard.scss +++ b/src/app/features/dashboard/dashboard.scss @@ -14,6 +14,23 @@ gap: 2rem; } } +.wip-banner { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.5rem; + background: var(--mat-sys-tertiary-container, #fff0c6); + color: var(--mat-sys-on-tertiary-container, #231b00); + border-radius: 16px; + font-size: 0.95rem; + font-weight: 500; + margin-top: 1.5rem; + + .wip-icon { + color: var(--mat-sys-tertiary, #715d00); + flex-shrink: 0; + } +} .dashboard-header { display: flex;