Add comprehensive documentation for DMARQ, including user guides, deployment instructions, and feature descriptions

- Created main documentation index and user guide with sections on getting started, dashboard overview, managing domains, and reports. - Added detailed deployment guide for Docker and manual installation. - Included user-friendly explanations of DMARC, its benefits, and how to manage domains and reports. - Implemented visual assets for dashboard, domains, IMAP, and reports. - Established requirements for documentation build using MkDocs and Material theme. - Integrated navigation structure for easy access to all documentation sections.
2025-04-21 01:49:34 +02:00
parent 1b79ec4f20
commit 5e8b1f033f
29 changed files with 1947 additions and 110 deletions
@@ -436,36 +436,110 @@ function domainDetailsApp(domainId) {
            const labels = timelineData.map(item => item.date);
            const complianceData = timelineData.map(item => item.compliance_rate);
            
+            // Calculate the threshold line data (recommended 98% for policy advancement)
+            const thresholdData = Array(labels.length).fill(98);
+            
            this.complianceChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
-                    datasets: [{
-                        label: 'Compliance Rate',
-                        data: complianceData,
-                        borderColor: '#1A237E',
-                        backgroundColor: 'rgba(26, 35, 126, 0.1)',
-                        tension: 0.3,
-                        fill: true
-                    }]
+                    datasets: [
+                        {
+                            label: 'Compliance Rate',
+                            data: complianceData,
+                            borderColor: 'rgb(59, 130, 246)', // blue-500
+                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                            tension: 0.4,
+                            fill: true,
+                            pointBackgroundColor: 'rgb(59, 130, 246)',
+                            pointRadius: 3,
+                            pointHoverRadius: 5
+                        },
+                        {
+                            label: 'Recommended Threshold (98%)',
+                            data: thresholdData,
+                            borderColor: 'rgba(220, 38, 38, 0.6)', // red-600 with opacity
+                            borderDash: [5, 5],
+                            pointRadius: 0,
+                            borderWidth: 2,
+                            fill: false,
+                            tension: 0
+                        }
+                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
-                            beginAtZero: true,
+                            beginAtZero: false,
+                            min: Math.max(0, Math.min(...complianceData) - 10), // Dynamic min value
                            max: 100,
                            ticks: {
                                callback: value => value + '%'
+                            },
+                            title: {
+                                display: true,
+                                text: 'Compliance Rate (%)',
+                                font: {
+                                    weight: 'bold'
+                                }
+                            },
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Date',
+                                font: {
+                                    weight: 'bold'
+                                }
+                            },
+                            grid: {
+                                display: false
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                            titleFont: {
+                                size: 13
+                            },
+                            bodyFont: {
+                                size: 12
+                            },
+                            padding: 10,
                            callbacks: {
                                label: function(context) {
-                                    return context.parsed.y + '%';
+                                    if (context.dataset.label === 'Compliance Rate') {
+                                        return `Compliance: ${context.parsed.y}%`;
+                                    }
+                                    return context.dataset.label;
+                                },
+                                title: function(context) {
+                                    return `Date: ${context[0].label}`;
+                                }
+                            }
+                        },
+                        legend: {
+                            display: true,
+                            position: 'top',
+                            labels: {
+                                usePointStyle: true,
+                                padding: 15
+                            }
+                        },
+                        annotation: {
+                            annotations: {
+                                box1: {
+                                    type: 'box',
+                                    yMin: 90,
+                                    yMax: 100,
+                                    backgroundColor: 'rgba(34, 197, 94, 0.05)',
+                                    borderWidth: 0
                                }
                            }
                        }