Hugging Face's logo

Spaces:
binaychandra
/
datasenseapp
Running

App Files Community
datasenseapp
File size: 4,046 Bytes 
cce2a89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
{% extends 'lay_side.html' %}

{% block css %}
<!-- style="pointer-events: none;color: #ccc;cursor: not-allowed;" -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/validate_style.css') }}">

{% endblock %}

{% block content %}
<br>

<!-- Dashboard Content -->
<div class="dashboard-content">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Employee Count</h5>
            <p class="card-text">{{ table_info['unique_gui'] }}</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Record Count</h5>
            <p class="card-text">{{ table_info['n_rows'] }}</p>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title"> # Features</h5>
            <p class="card-text">{{ table_info['n_cols'] }}</p>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Placeholder</h5>
            <p class="card-text">Yes</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Data Validation for Learning</h3>
        <p>We have done the validations on data given and we have categorized the data into various categories.
          which shows good data which is displayed on right against each columns and bad data which should be either
          processed
          or discarded on left side against the column. Here are the results.
        </p>
        <canvas id="validationbar"></canvas>
      </div>
    </div>
  </div>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Employee variation over cities for Learning</h3>
        <p>The pareto diagram shows the distribution of employees over different cities.
        </p>
        <canvas id="pareto_citydistribution"></canvas>
      </div>
    </div>
  </div>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <br>
        {{ bar_chart_html | safe }}
      </div>
      <div class="col-md-4">
        <canvas id="doughnutChart"></canvas>
       </div>
    </div>
  </div>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Employee variation for badges</h3>
        <p>The line chart below shows the variation of employees based on Rank and their count.
        </p>
        <canvas id="line_empdistribution"></canvas>
      </div>
    </div>
  </div>
  <br>
  
  {% endblock %}

  {% block javascript %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="{{ url_for('static', filename='js/validate_script.js') }}"></script>
  <!-- Add any additional JavaScript specific to data.html here -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.5.1/plotly.min.js"></script>
  <!-- Bootstrap JS (Make sure to include this before your custom JS, if any) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
  <!-- <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    var labels = {{ labels | tojson }};
    var reg_issue = {{ reg_issue | tojson }};
    var null_issue = {{ null_issue | tojson }};
    var ok_data = {{ ok_data | tojson }};
    var mismatch_issue = {{ mismatch_issue | tojson }};
    var barthinkness = 50
  </script>
  {% endblock %}