Data-preprocessing/result.html at main · Madhuarvind/Data-preprocessing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preprocessing Results</title>

    <!-- Bootstrap CSS via CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

</head>
<body>

    <!-- Hero Section -->
    <div class="container mt-4">
        <div class="hero shadow-lg">
            <h1>Preprocessing Complete</h1>
            <p>Your data has been successfully processed.</p>
        </div>

        <!-- Download Section -->
        <div class="download-section">
            <h2>Download Datasets</h2>
            <a href="{{ original_file }}" class="download-button me-3" download>Download Original Dataset</a>
            <a href="{{ cleaned_file }}" class="download-button" download>Download Cleaned Dataset</a>
        </div>

        <!-- Summary Statistics Section -->
        <div class="summary-section mt-5">
            <h2>Summary Statistics</h2>
            <div class="row">
                <div class="col-md-6">
                    <h3>Original Data</h3>
                    {{ original_summary | safe }}
                </div>
                <div class="col-md-6">
                    <h3>Cleaned Data</h3>
                    {{ cleaned_summary | safe }}
                </div>
            </div>
        </div>

        <!-- Visualization Section -->
        <div class="visualization-section mt-5">
            {% if charts_selected %}
                <h2>Generated Charts (Before and After)</h2>
                <div class="row">
                    {% for chart in charts %}
                    <div class="col-md-6 visualization">
                        <h3>{{ chart.name }}</h3>
                        <div class="chart-container">{{ chart.html | safe }}</div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p>No charts selected for visualization.</p>
            {% endif %}
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 Data Cleaner. All rights reserved.</p>
    </footer>

    <!-- Plotly JS CDN -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <!-- Bootstrap JS and dependencies via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>