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

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

Initial release

File size: 5.2 KB
Line 
1{{#partial}}{title}Data for {{suite}}/{{section}}{{/partial}}
2
3{{#partial}}{ head_extra }
4<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/jquery/jquery.min.js"></script>
5<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.js"></script>
6<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.time.js"></script>
7<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.resize.js"></script>
8<script language="javascript" type="text/javascript" src="{{root_url}}/static/js/flot/jquery.flot.stack.js"></script>
9
10<style>
11.graph-container {
12    position: relative;
13    height: 280px;
14    width: 80%;
15}
16
17.graph-placeholder {
18    width: 100%;
19    height: 100%;
20    font-size: 14px;
21    line-height: 1.2em;
22}
23</style>
24{{/partial}}
25
26{{#partial}}{ header_content }
27<span style="font-size:18px;"><a href="../" style="color: #000000;">⇦ |</a></span>
28<span>AppStream data for {{project_name}}/{{suite}}/{{section}}</span>
29{{/partial}}
30
31{{#partial}}{ content }
32    <h1>Overview for {{suite}}/{{section}}</h1>
33
34    <h2>Data</h2>
35
36    <h3><a href="issues/index.html">Issues</a> - Issues found while extracting the data</h3>
37
38    <h3><a href="metainfo/index.html">Metainfo</a> - Per-package view of the generated data</h3>
39
40
41    <h2>Health</h2>
42    <div class="wrapper">
43
44      <h3>Issue overview</h3>
45      <div style="width: 80%;">
46
47        <div class="progress" style="margin-left: 20px;">
48          <div style="width: {{valid_percentage}}%" class="progress-bar progress-bar-green">
49            <span class="sr-only">{{valid_percentage}}% Valid</span>
50          </div>
51          <div style="width: {{info_percentage}}%" class="progress-bar progress-bar-blue">
52            <span class="sr-only">{{info_percentage}}% Infos</span>
53          </div>
54          <div style="width: {{warning_percentage}}%" class="progress-bar progress-bar-yellow">
55            <span class="sr-only">{{warning_percentage}}% Warnings</span>
56          </div>
57          <div style="width: {{error_percentage}}%" class="progress-bar progress-bar-red">
58            <span class="sr-only">{{error_percentage}}% Errors</span>
59          </div>
60        </div>
61
62        <div class="graph-container" style="width: 100%;">
63          <div id="placeholder" class="graph-placeholder" style="float:left; width:90%;"></div>
64          <div id="choices" style="float:right;"></div>
65        </div>
66
67      </div>
68
69      <ul>
70        <li>{{metainfo_count}} valid components</li>
71        <li>{{error_count}} errors</li>
72        <li>{{warning_count}} warnings</li>
73        <li>{{info_count}} infos/hints</li>
74      </ul>
75
76    </div>
77
78    <script type="text/javascript">
79      function dataUseJSTime(data) {
80          return data.map(function(v) {
81              return [v[0] * 1000, v[1]];
82          });
83      }
84
85      $.getJSON("{{root_url}}/statistics.json", function(allData) {
86        data = allData["{{suite}}"]["{{section}}"];
87
88        var datasets = {
89            "errors": {
90                color: "#c05020",
91                data: dataUseJSTime(data["errors"]),
92                label: "Errors"
93            },
94            "warnings": {
95                color: "#ffcc66",
96                data: dataUseJSTime(data["warnings"]),
97                label: "Warnings"
98            },
99            "infos": {
100                color: "#6060c0",
101                data: dataUseJSTime(data["infos"]),
102                label: "Infos"
103            },
104            "valid": {
105                color: "#30a420",
106                data: dataUseJSTime(data["metadata"]),
107                label: "Valid data"
108            }
109        };
110
111        // insert checkboxes
112        var choiceContainer = $("#choices");
113        $.each(datasets, function(key, val) {
114            choiceContainer.append("<br/><input type='checkbox' name='" + key +
115                "' checked='checked' id='id" + key + "'></input>" +
116                "<label for='id" + key + "'>" + val.label + "</label>");
117        });
118
119        choiceContainer.find("input").click(plotAccordingToChoices);
120
121        function plotAccordingToChoices() {
122            var data = [];
123
124            choiceContainer.find("input:checked").each(function () {
125                var key = $(this).attr("name");
126                if (key && datasets[key]) {
127                    data.push(datasets[key]);
128                }
129            });
130
131            if (data.length > 0) {
132                $.plot("#placeholder", data, {
133                    series: {
134                        stack: true,
135                        lines: {
136                            show: true,
137                            fill: true
138                        }
139                    },
140
141                    yaxis: {
142                        min: 0
143                    },
144
145                    xaxis: {
146                        mode: "time",
147                        timeformat: "%y/%m/%d"
148                    },
149
150                    grid: {
151                        hoverable: true,
152                        clickable: true
153                    }
154                });
155
156            };
157        }
158
159        plotAccordingToChoices();
160      });
161    </script>
162
163{{/partial}}
164
165{{#partial}}{ float_right }
166<small>Last updated on: {{time}}</small>
167{{/partial}}
168
169{{> base}}
Note: See TracBrowser for help on using the repository browser.