clusters.html.jinja 3.11 KB
Newer Older
1 2 3 4 5 6
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
7
    
8 9
    <title>{{ title }}</title>

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
    <style>
      body {
        padding: 1em;
        font-family: Arial,x-locale-body,sans-serif;
        font-size: 0.9em;
      }

      header {
        font-size: 1.1em;
      }

      header span.ident {
        font-weight: bold;
      }

      #all-clusters {
        border-spacing: 0em 2em;
      }

      #all-clusters td:last-of-type {
        padding-left: 2em;
      }

      table.cluster {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-size: 0.9em
      }

      table.cluster th,
      table.cluster td {
        padding: 3px 6px;
      }

      /*table.cluster tbody tr {
        border-bottom: 1px solid #dddddd;
      }*/

      table.cluster tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
      }

      /* table.cluster tbody tr:last-of-type {
        border-bottom: 2px solid #009879;
      } */

      div.cluster-header {
        background-color: #ccc;
        width: max-content;
        padding: 2px 10px;
        border-radius: 5px 5px 0 0;
      }
    </style>
63 64
  </head>

65 66 67 68 69 70 71 72 73 74 75
  <body>
    <header>
      <span class="ident">Generated</span>: {{ timestamp }} <br>
      <span class="ident">No. of eDoz students</span>: {{ edoz_count }} <br>
      <span class="ident">No. of CX students</span>: {{ course_count }} <span style="color: #999999">(may include staff)</span><br>
      <span class="ident">No. of plagiarists</span>: {{ plagiarist_count }} <br>
      {% for data in datapoints %}
        <span class="ident">{{ data.name }}</span>: {{ data.percentage }}% ({{ data.part }}/{{ data.base }}) <br>
      {% endfor %}
    </header>
    <table id="all-clusters">
76 77 78 79 80 81 82
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>  
83
      {% for (cluster_id, cluster_size, cluster, cluster_rows) in clusters %}
84 85
        <tr>
          <td>
86 87
            <div class="cluster-header">CID: {{cluster_id}} | Size: {{ cluster_size }}</div>
            {{ cluster_rows.to_html(classes="cluster", index_names=False, border=0, justify="left") }}
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
          </td>
          <td>
            <object data="{{ cluster['svg_file'].iat[0] }}" type="image/svg+xml" style="transform:scale(60%); max-width: 75em; visibility: hidden"></object>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

    <script>
      window.addEventListener("load", function(){
        var svg_objects = document.querySelectorAll("table > tbody object");
        // console.log(svg_objects);
        svg_objects.forEach(obj => {
          var dim = obj.getBoundingClientRect();
          // console.log(dim.width, dim.height);
          obj.style.visibility = "visible";
          //obj.style.removeProperty("visibility");
          obj.style.transform = "";
          obj.style.width = dim.width + "px";
          obj.style.height = dim.height + "px";
        })
      });    
    </script>
  </body>
</html>