Skip to content

Commit

Permalink
Merge pull request #268 from COS301-SE-2024/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@paul-nhlapo
paul-nhlapo authored Oct 22, 2024
2 parents cb3793f + 3a57e8d commit be75e80
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 107 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ https://github.com/user-attachments/assets/a5979f3e-41be-493e-b4c0-0d5f4b0442e1

# Download the GND Application

Download GND -> [📥](https://drive.google.com/file/d/1WV0WCWq1VSLAgREVHJ523JzclZXMwBnW/view?usp=sharing)
<!-- Download GND -> [📥](https://drive.google.com/file/d/1WV0WCWq1VSLAgREVHJ523JzclZXMwBnW/view?usp=sharing) -->
Download GND -> [📥](href="https://drive.google.com/uc?export=download&id=1WV0WCWq1VSLAgREVHJ523JzclZXMwBnW")

### Download Instructions

Expand Down
102 changes: 72 additions & 30 deletions gnd-admin/src/app/home/home.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,27 +53,6 @@
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chart-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

.trend-chart {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 48%;
}

.chart-row > .trend-chart {
margin-right: 2%;
}

.chart-row > .trend-chart:last-child {
margin-right: 0;
}


canvas {
Expand All @@ -91,25 +70,88 @@ h3, h4 {
margin-bottom: 20px;
}

/* This is the category graphs styling */
/* General Dashboard Styling */
.violation-type-trends {
padding: 20px;
background-color: #f5f5f5;
}

.violation-type-trends h1 {
font-size: 22px;
margin-bottom: 15px;
text-align: center;
color: #333;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

/* Dropdown Styling */
select#chartSelector {
display: block;
margin: 0 auto 20px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
max-width: 400px;
}

.trend-chart {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
/* Chart Container */
.chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto; /* Center the chart on the page */
padding: 10px;
}

/* Individual Chart Styling */
canvas.chart {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
width: 100% !important; /* Ensure full responsiveness */
max-height: 400px; /* Set a reasonable max height */
height: auto !important;
transition: all 0.3s ease;
}

/* Hover effect to make charts pop */
.trend-chart:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
/* Chart Hover Effect */
canvas.chart:hover {
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
select#chartSelector {
max-width: 100%;
font-size: 14px;
}

.chart-container {
max-width: 100%;
}

canvas.chart {
max-height: 300px; /* Ensure the chart height is reduced on smaller screens */
}
}

@media (max-width: 480px) {
canvas.chart {
max-height: 250px; /* Further reduce chart size on very small screens */
}
}

/* This is where it ends */

/* Enhance chart container */
.trend-charts {
display: flex;
Expand Down
97 changes: 23 additions & 74 deletions gnd-admin/src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ <h1>GDPR Violations Dashboard</h1>
<div class="card">
<h3>Total Violations</h3>
<p class="large-number">{{ totalViolations }}</p>
<p class="trend">{{ totalViolationsTrend | number:'1.0-2' }}% from last period</p>
<p class="trend">{{ formatTrend(totalViolationsTrend) }} from last period</p>
</div>
<div class="card">
<h3>Documents Scanned</h3>
<p class="large-number">{{ documentsScanned }}</p>
<p class="trend">{{ documentsScannedTrend | number:'1.0-2' }}% from last period</p>
<p class="trend">{{ formatTrend(documentsScannedTrend) }} from last period</p>
</div>
<div class="card">
<h3>Highest Violation Category</h3>
<p class="large-number">{{ highestViolationCategory }}</p>
<p class="trend">{{ highestViolationCategoryDiff | number:'1.0-2' }}% from last period</p>
<p class="trend">{{ formatTrend(highestViolationCategoryDiff) }} from last period</p>
</div>
<div class="card">
<h3>Last Scan</h3>
Expand All @@ -46,79 +46,30 @@ <h3>Violation Types</h3>

<div class="violation-type-trends">
<h1>Violation Type Trends</h1>
<!-- <div class="trend-charts">
<div class="trend-chart">
<h4>Personal Data Violations</h4>
<canvas id="personalDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Medical Data Violations</h4>
<canvas id="medicalDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Biometric Data Violations</h4>
<canvas id="biometricDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Ethnic Data Violations</h4>
<canvas id="ethnicDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Genetic Data Violations</h4>
<canvas id="geneticDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Financial Data Violations</h4>
<canvas id="financialDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Contact Data Violations</h4>
<canvas id="contactDataTrendChart"></canvas>
</div>
</div> -->
<div class="chart-row">
<div class="trend-chart">
<h4>Personal Data Violations</h4>
<canvas id="personalDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Medical Data Violations</h4>
<canvas id="medicalDataTrendChart"></canvas>
</div>
</div>

<div class="chart-row">
<div class="trend-chart">
<h4>Biometric Data Violations</h4>
<canvas id="biometricDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Ethnic Data Violations</h4>
<canvas id="ethnicDataTrendChart"></canvas>
</div>
</div>

<div class="chart-row">
<div class="trend-chart">
<h4>Genetic Data Violations</h4>
<canvas id="geneticDataTrendChart"></canvas>
</div>
<div class="trend-chart">
<h4>Financial Data Violations</h4>
<canvas id="financialDataTrendChart"></canvas>
</div>
</div>
<div class="chart-row">
<div class="trend-chart">
<h4>Contact Data Violations</h4>
<canvas id="contactDataTrendChart"></canvas>
</div>
</div>
<!-- Dropdown for selecting the graph -->
<select id="chartSelector" (change)="onChartChange($event)">
<option value="personalDataTrendChart">Personal Data Violations</option>
<option value="medicalDataTrendChart">Medical Data Violations</option>
<option value="biometricDataTrendChart">Biometric Data Violations</option>
<option value="ethnicDataTrendChart">Ethnic Data Violations</option>
<option value="geneticDataTrendChart">Genetic Data Violations</option>
<option value="financialDataTrendChart">Financial Data Violations</option>
<option value="contactDataTrendChart">Contact Data Violations</option>
</select>


<!-- Dynamic Charts -->
<div class="chart-container">
<canvas id="personalDataTrendChart" class="dynamic-chart"></canvas>
<canvas id="medicalDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
<canvas id="biometricDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
<canvas id="ethnicDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
<canvas id="geneticDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
<canvas id="financialDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
<canvas id="contactDataTrendChart" class="dynamic-chart" style="display:none;"></canvas>
</div>
</div>


<div class="recent-reports">
<h3>Recent Violation Reports</h3>
<table>
Expand All @@ -134,7 +85,6 @@ <h3>Recent Violation Reports</h3>
<th>Genetic</th>
<th>Financial</th>
<th>Contact</th>
<!-- <th>Consent Agreement</th> -->
</tr>
</thead>
<tbody>
Expand All @@ -149,7 +99,6 @@ <h3>Recent Violation Reports</h3>
<td>{{ report.genetic_data_violations }}</td>
<td>{{ report.financial_data_violations }}</td>
<td>{{ report.contact_data_violations }}</td>
<!-- <td>{{ report.consent_agreement }}</td> -->
</tr>
</tbody>
</table>
Expand Down
39 changes: 37 additions & 2 deletions gnd-admin/src/app/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,22 @@ export class HomeComponent implements OnInit {

}


onChartChange(event: any) {
const chartId = event.target.value;

// Hiding only the dynamic charts
const dynamicCharts = document.querySelectorAll('.dynamic-chart');
dynamicCharts.forEach((chart) => {
(chart as HTMLElement).style.display = 'none';
});

// Showing the selected chart
const selectedChart = document.getElementById(chartId);
if (selectedChart) {
selectedChart.style.display = 'block';
}
}

async fetchData() {
const endDate = new Date();
const startDate = new Date(endDate);
Expand Down Expand Up @@ -128,8 +143,24 @@ export class HomeComponent implements OnInit {
// Preparing chart data
this.prepareChartData(currentReports);
}
formatTrend(trendValue: number): string {
if (trendValue === 0) {
return "No change";
}

const direction = trendValue >= 0 ? "Up" : "Down";
const absValue = Math.abs(trendValue);

if (absValue >= 1000) {
const thousands = Math.floor(absValue / 1000);
const remainder = absValue % 1000;
const formattedRemainder = remainder > 0 ? remainder.toFixed(1).replace(/\.0$/, '') : '';
return `${direction} ${thousands},${formattedRemainder}%`;
}

return `${direction} ${absValue.toFixed(1).replace(/\.0$/, '')}%`;
}


prepareChartData(reports: any[]) {
// Preparing violations trends data
this.violationTrends = reports.map(report => ({
Expand Down Expand Up @@ -220,6 +251,7 @@ export class HomeComponent implements OnInit {
}
});
}


createViolationTypeTrendCharts() {
const types: Array<'personal' | 'medical' | 'biometric' | 'ethnic' | 'genetic' | 'financial' | 'contact'> = [
Expand Down Expand Up @@ -304,5 +336,8 @@ export class HomeComponent implements OnInit {
// Recreating charts with new data
this.createCharts();
}


}


39 changes: 39 additions & 0 deletions gnd-admin/src/app/landing/landing.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,45 @@
background-color: #45a049;
}

/* Here I want to style the download-sections */
.download-section {
text-align: center;
padding: 40px;
background-color: #f4f4f4;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.download-section h2 {
font-weight: bold;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}

.download-section p {
font-size: 16px;
color: #666;
margin-bottom: 30px;
}

.cta-button {
display: inline-block;
padding: 12px 24px;
background-color: #4CAF50;
color: white;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.cta-button:hover {
background-color: #45a049;
}

/* This is where it all ends */

.features-section {
display: flex;
justify-content: space-around;
Expand Down
7 changes: 7 additions & 0 deletions gnd-admin/src/app/landing/landing.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ <h1>Welcome to GDPR Compliance Dashboard</h1>
<a href="/register" class="cta-button">Get Started</a>
</div>

<div class="download-section">
<h2>Download the GDPR Compliance Desktop App</h2>
<p>Monitor your compliance status and receive real-time alerts on your desktop</p>
<a href="https://drive.google.com/uc?export=download&id=1WV0WCWq1VSLAgREVHJ523JzclZXMwBnW" class="cta-button">Download Now</a>
</div>


<div class="features-section">
<div class="feature">
<img src="/securit.jpg" alt="Security Icon">
Expand Down

0 comments on commit be75e80

Please sign in to comment.