From 386229d884b71a78198c3e1cfac2bddb2125f3dc Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Mon, 24 Feb 2025 23:11:31 +0100
Subject: [PATCH] add expansion panel for statistics and charts
---
.../dashboard/dashboard.component.html | 16 +++++++--
.../dashboard/dashboard.component.scss | 36 +++++++++++++++++++
.../dashboard/dashboard.component.ts | 15 +++++++-
3 files changed, 64 insertions(+), 3 deletions(-)
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index cb0f201..99042da 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,6 +1,18 @@
<app-page-wrapper>
<div header>Monitoring and Analysis</div>
-
- Dashboard content goes here
+ <mat-accordion class="accordion__header" multi>
+ <mat-expansion-panel class="accordion__panel">
+ <mat-expansion-panel-header class="accordion__panel-header">
+ <mat-panel-title class="accordion__panel-title"> Statistics </mat-panel-title>
+ </mat-expansion-panel-header>
+ <p>Statistics info</p>
+ </mat-expansion-panel>
+ <mat-expansion-panel class="accordion__panel">
+ <mat-expansion-panel-header class="accordion__panel-header">
+ <mat-panel-title class="accordion__panel-title"> Charts </mat-panel-title>
+ </mat-expansion-panel-header>
+ <p>Charts info</p>
+ </mat-expansion-panel>
+ </mat-accordion>
<p-skeleton height="10rem" width="100%" />
</app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index 2995308..23599fd 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -1,4 +1,40 @@
+@use '../../../vars';
+@use 'sass:map';
+
:host {
height: 100%;
width: 100%;
+
+ .actions {
+ display: flex;
+ gap: map.get(vars.$spacing, 'md');
+ }
+
+ .accordion__panel {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 10);
+ padding: map.get(vars.$spacing, 'xs') map.get(vars.$spacing, 'xs');
+
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+
+ border-bottom: 1px solid map.get(vars.$grey, 30);
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ transition: background-color 0.3s ease-in-out;
+
+ &:hover {
+ background-color: map.get(vars.$grey, 30);
+ }
+ }
+ }
+
}
+
+
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index ad068b9..3357fa5 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,23 @@
import { Component } from '@angular/core';
import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
import { Skeleton } from 'primeng/skeleton';
+import { MatExpansionModule } from '@angular/material/expansion';
+import {
+ MatExpansionPanel,
+ MatExpansionPanelDescription,
+ MatExpansionPanelTitle,
+} from '@angular/material/expansion';
@Component({
selector: 'app-dashboard',
- imports: [PageWrapperComponent, Skeleton],
+ imports: [
+ PageWrapperComponent,
+ Skeleton,
+ MatExpansionPanel,
+ MatExpansionPanelTitle,
+ MatExpansionPanelDescription,
+ MatExpansionModule,
+ ],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss',
})
--
GitLab