source: appstream-generator/data/templates/default/sections_index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 3.8 KB
Line 
1{{#partial}}{title}Data for the {{suite}} suite{{/partial}}
2
3{{#partial}}{ header_content }
4<span style="font-size:18px;"><a href="../" style="color: #000000;">⇦ |</a></span>
5<span>AppStream data for {{project_name}}/{{suite}}</span>
6{{/partial}}
7
8{{#partial}}{ head_extra }
9<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/jquery/jquery.min.js"></script>
10<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.js"></script>
11<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.pie.js"></script>
12<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.resize.js"></script>
13
14<style>
15.graph-container {
16    position: relative;
17    height: 380px;
18}
19
20.graph-placeholder {
21    height: 90%;
22    font-size: 14px;
23    margin-top: -20px;
24}
25</style>
26{{/partial}}
27
28{{#partial}}{ content }
29    <h1>Select an archive section</h1>
30
31    <h2>Sections</h2>
32    {{#sections}}
33      <h3><a href="{{section}}/index.html">{{section}}</a></h3>
34    {{/sections}}
35
36    <h2>Health of suite "{{suite}}"</h2>
37
38    <div class="wrapper">
39      <div class="graph-container">
40          {{#sections}}
41          <div align="center" class="float-left" style="height: 100%; float: left; width: 33.333%;">
42            <center><strong>{{section}}</strong></center>
43            <div id="placeholder_{{section}}" class="graph-placeholder" style="float:left; width:100%;"></div>
44          </div>
45          {{/sections}}
46      </div>
47    </div>
48
49    <script>
50      $.getJSON("{{root_url}}/statistics.json", function(data) {
51        var sections = [];
52        {{#sections}}
53          sections.push("{{section}}");
54        {{/sections}}
55
56        for (var i = 0; i < sections.length; i++) {
57          var sdata = data["{{suite}}"];
58          var sectionName = sections[i];
59          var secData = sdata[sectionName];
60
61          var resData = [
62              {
63                label: "Errors",
64                data: [ 1, secData["errors"][secData["errors"].length-1][1] ],
65                color: "#c05020"
66              },
67              {
68                label: "Warnings",
69                data: [ 1, secData["warnings"][secData["warnings"].length-1][1] ],
70                color: "#ffcc66"
71              },
72              {
73                label: "Infos",
74                data: [ 1, secData["infos"][secData["infos"].length-1][1] ],
75                color: "#6060c0"
76              },
77              {
78                label: "Valid Data",
79                data: [ 1, secData["metadata"][secData["metadata"].length-1][1] ],
80                color: "#30a420"
81              }
82          ];
83
84          drawSummaryChart(resData, sectionName);
85        }
86      });
87    </script>
88    <script>
89      function labelFormatter(label, series) {
90          return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + Math.round(series.percent) + "%</div>";
91      }
92
93      function drawSummaryChart(data, section) {
94        $.plot('#placeholder_' + section, data, {
95            series: {
96                pie: {
97                    innerRadius: 0.34,
98                    show: true,
99
100                    label: {
101                        show: true,
102                        radius: 3/5,
103                        formatter: labelFormatter,
104                        background: {
105                            opacity: 0.6,
106                            color: '#000'
107                        }
108                    }
109                }
110            },
111
112            grid: {
113                hoverable: true,
114                clickable: true,
115                margin: 0,
116                borderWidth: 0
117            },
118
119            legend: { show: false }
120        });
121      }
122    </script>
123
124{{/partial}}
125
126{{#partial}}{ float_right }
127<small>Last updated on: {{time}}</small>
128{{/partial}}
129
130{{> base}}
Note: See TracBrowser for help on using the repository browser.