-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (114 loc) · 4.64 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>PRC Operations 3W Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./css/dc.css" />
<link rel="stylesheet" type="text/css" href="./css/3w-dashboard.css" />
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.min.css" />
</head>
<body>
<div class="row">
<div class ="col-sm-4" id="loading">
<img src="./images/prc_logo (disabled).png" class="logo" />
<h1>Loading... (~2.5MB) </h1>Please wait .... <small>(Does not work on IE8 or older)</small>
</div>
</div>
<!-- <div class="container" id="dashboard" style="display: none;"> -->
<div class="container" id="dashboard" style="display: none;">
<!-- header -->
<div class="row page_header">
<div class="col-xs-12 col-md-6">
<img src="./images/prc_logo (disabled).png" class="logo" />
<h3 id="page_header_title">PRC 3W Dashboard</h3>
</div>
<div class="col-xs-12 col-md-6">
<span id="page_header_subtitle"><strong>Explore What PRC does Where.</strong><br /> </span>
<div id="count-info"><span class="filter-count "></span> selected out of <span class="total-count "></span> activities
<a class="btn btn-primary btn-sm" id="reset" href="javascript:dc.filterAll();dc.redrawAll();datatable.dataTable().fnFilter('');">Reset All</a>
</div>
</div>
</div>
<!-- END header -->
<!-- graphs and map -->
<div class="row">
<!-- graphs -->
<div class="col-xs-12 col-md-6">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h4>Sectors</h4>
<div id="sectors" class="col-xs-12"># of activities</div>
</div>
<div class="col-xs-12 col-sm-6">
<h4>Supported by</h4>
<div id="organisations" class="col-xs-12"># of activities</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h4>Services provided and # beneficiaries</h4>
<div id="services" class="col-xs-12"># of beneficiaries</div>
<small>(Note that there are different types of beneficiaries: individuals, families, municipalities. Scroll down to the activities table for more information.)</small>
</div>
</div>
</div>
<!-- map -->
<div class="col-xs-12 col-md-6">
<div id="map">
<div style="display: block; float: right"><button onclick="municipalitiesMapShow();" class="button-secondary">Municipalities</button><button onclick="municipalitiesMapShow();" class="button-success">Provinces</button></div>
<h4>Response area</h4>
</div>
<div id="map2">
<div style="display: block; float: right"><button onclick="provincesMapShow();" class="button-success">Municipalities</button><button onclick="provincesMapShow();" class="button-secondary">Provinces</button></div>
<h4>Response area</h4>
</div>
</div>
</div>
<!-- END graphs -->
<hr />
<!-- data -->
<div class="row">
<div class="col">
<h3>Activities table</h3>
<div id="services">
# of activities (Note use the filters in the table heading to sort rows.)
</div>
<table class='table table-hover' id='dc-table-graph'>
<thead>
<tr class='header'>
<th>Organisation</th>
<th>Sector</th>
<th>Subsector</th>
<th>Service provided</th>
<th>Province</th>
<th>Municipality</th>
<th>Barangay</th>
<th>Status</th>
<th>Beneficiaries</th>
<th>Beneficiary type</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- END table -->
<div class="row page_footer">
<div class="col" id="page_footer_text"></div>
</div>
</div>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./js/d3.js"></script>
<script type="text/javascript" src="./js/crossfilter.js"></script>
<script type="text/javascript" src="./js/dc.js"></script>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src='./js/jquery.js'></script>
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="./js/site.js"></script>
</body>
</html>