Skip to content

Commit e1ebbca

Browse files
dmytrotskodmytrotsko
authored
Merge pull request #104 from cmu-delphi/OKRS24-198
OKRS24-198
2 parents 65a4f2e + 7b9ecb7 commit e1ebbca

File tree

6 files changed

+232
-125
lines changed

6 files changed

+232
-125
lines changed

‎src/assets/css/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@
115115
border: none!important;
116116
}
117117

118+
.select2-container--default .select2-selection--multiple {
119+
border: none!important;
120+
}
121+
118122
.select2-container--default .select2-selection--single .select2-selection__arrow {
119123
display: none!important;
120124
}

‎src/signal_documentation/settings.py

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
from sentry_sdk.integrations.redis import RedisIntegration
2525

2626
EPIVIS_URL = "https://deploy-preview-36--cmu-delphi-epivis.netlify.app/"
27+
DATA_EXPORT_URL = "https://api.covidcast.cmu.edu/epidata/covidcast/csv"
2728

2829
SENTRY_DSN = os.environ.get('SENTRY_DSN')
2930
if SENTRY_DSN:

‎src/signals/views.py

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ def get_context_data(self, **kwargs) -> Dict[str, Any]:
102102

103103
context: Dict[str, Any] = super().get_context_data(**kwargs)
104104
context["epivis_url"] = settings.EPIVIS_URL
105+
context["data_export_url"] = settings.DATA_EXPORT_URL
105106
return context
106107

107108

‎src/templates/signals/epivis_block.html

-124
This file was deleted.

‎src/templates/signals/epivis_export_data_block.html

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<h5>Plot / Export data</h5>
2+
<section class="section">
3+
<div class="row">
4+
<div class="card">
5+
<div class="card-body">
6+
<form class="margin-top-1rem" onsubmit="submitMode(event)" id="epivis-form">
7+
<div class="row">
8+
<div class="col-2">
9+
<label class="form-label"
10+
>Select mode:</label
11+
>
12+
</div>
13+
<div class="col-10">
14+
<div class="form-check form-check-inline">
15+
<input class="form-check-input" type="radio" name="modes" id="epivis" value="epivis" checked>
16+
<label class="form-check-label" for="epivis">Plot data</label>
17+
</div>
18+
<div class="form-check form-check-inline">
19+
<input class="form-check-input" type="radio" name="modes" id="export" value="export">
20+
<label class="form-check-label" for="export">Export data</label>
21+
</div>
22+
</div>
23+
</div>
24+
<div class="row margin-top-1rem">
25+
<div class="col-2">
26+
<label for="source" class="form-label"
27+
>Data Source:</label
28+
>
29+
</div>
30+
<div class="col-10">
31+
<select id="source" name="source" class="form-select" disabled>
32+
<option selected>{{ signal.source.name }}</option>
33+
</select>
34+
</div>
35+
</div>
36+
<div class="row margin-top-1rem">
37+
<div class="col-2">
38+
<label for="signal" class="form-label"
39+
>Data Signal:</label
40+
>
41+
</div>
42+
<div class="col-10">
43+
<select id="signal" name="signal" class="form-select" disabled>
44+
<option selected>{{ signal.name }}</option>
45+
</select>
46+
</div>
47+
</div>
48+
<div class="row margin-top-1rem">
49+
<div class="col-2">
50+
<label for="geographic_type" class="form-label"
51+
>Geographic Type:</label
52+
>
53+
</div>
54+
<div class="col-10">
55+
<select id="geographic_type" name="geographic_type" class="form-select">
56+
<option selected>Choose...</option>
57+
{% for geography in signal.available_geography.all %}
58+
<option>{{ geography }}</option>
59+
{% endfor %}
60+
</select>
61+
</div>
62+
</div>
63+
<div class="row margin-top-1rem">
64+
<div class="col-2">
65+
<label for="geographic_value" class="col-form-label">Geographic Value:</label>
66+
</div>
67+
<div class="col-10">
68+
<select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
69+
</div>
70+
</div>
71+
<div class="row margin-top-1rem" name="choose_date" style="display: none;">
72+
<div class="col-2">
73+
<label for="start_date" class="form-label">
74+
Start Date:
75+
</label>
76+
</div>
77+
<div class="col-10">
78+
<input type="date" class="form-control" id="start_date" name="start_date">
79+
</div>
80+
</div>
81+
<div class="row margin-top-1rem" name="choose_date" style="display: none;">
82+
<div class="col-2">
83+
<label for="end_date" class="form-label">
84+
End Date:
85+
</label>
86+
</div>
87+
<div class="col-10">
88+
<input type="date" class="form-control" id="end_date" name="end_date">
89+
</div>
90+
</div>
91+
<div class="row">
92+
<button type="submit" value="Submit" class="btn btn-primary margin-top-1rem">
93+
Submit
94+
</button>
95+
</div>
96+
</form>
97+
</div>
98+
</div>
99+
</div>
100+
</section>
101+
<script>
102+
function initGeographicValueSelect(mode) {
103+
var maxSelectionLength = 1;
104+
if (mode === 'epivis') {
105+
maxSelectionLength = 1;
106+
} else {
107+
maxSelectionLength = 10;
108+
}
109+
$('#geographic_value').select2({
110+
ajax: {
111+
url: '{% url 'geography_units_api' %}',
112+
dataType: 'json',
113+
data: function (params) {
114+
var geographic_type = document.getElementById('geographic_type');
115+
return {
116+
geography__name: geographic_type.value,
117+
term: params.term,
118+
limit: 50
119+
};
120+
},
121+
processResults: function (data) {
122+
return {
123+
results: $.map(data.results, function (item) {
124+
if (typeof item.geo_id === 'string') {
125+
return {
126+
text: item.display_name,
127+
id: item.geo_id.toLowerCase()
128+
}
129+
} else {
130+
return {
131+
text: item.display_name,
132+
id: item.geo_id
133+
}
134+
}
135+
})
136+
};
137+
}
138+
},
139+
minimumInputLength: 0,
140+
maximumSelectionLength: maxSelectionLength,
141+
});
142+
}
143+
144+
$(document).ready(function () {
145+
initGeographicValueSelect('epivis');
146+
});
147+
148+
document.getElementById('geographic_type').addEventListener("change", (event) => {
149+
$('#geographic_value').val(null).trigger('change');
150+
})
151+
152+
document.getElementsByName('modes').forEach((el) => {
153+
el.addEventListener('change', (event) => {
154+
$('#geographic_value').val(null).trigger('change');
155+
//$('#geographic_value').select2('destroy');
156+
if (event.target.value === 'epivis') {
157+
initGeographicValueSelect(event.target.value);
158+
} else {
159+
initGeographicValueSelect('export');
160+
}
161+
handleModeChange(event.target.value);
162+
});
163+
});
164+
165+
var currentMode = 'epivis';
166+
167+
function handleModeChange(mode) {
168+
document.getElementById("epivis-form").reset();
169+
170+
var choose_dates = document.getElementsByName('choose_date');
171+
if (mode === 'epivis') {
172+
currentMode = 'epivis';
173+
choose_dates.forEach((el) => {
174+
el.style.display = 'none';
175+
});
176+
} else {
177+
currentMode = 'export';
178+
choose_dates.forEach((el) => {
179+
el.style.display = 'flex';
180+
});
181+
}
182+
document.getElementsByName("modes").forEach((el) => {
183+
if (currentMode === el.value) {
184+
el.checked = true;
185+
}
186+
});
187+
}
188+
189+
190+
function submitMode(event) {
191+
event.preventDefault();
192+
193+
var dataSource = document.getElementById('source').value;
194+
var dataSignal = document.getElementById('signal').value;
195+
var geographicType = document.getElementById('geographic_type').value;
196+
var geographicValue = $('#geographic_value').select2('data').map((el) => el.id).join(',');
197+
198+
if (geographicType === 'Choose...' || geographicValue === '') {
199+
alert('Please select Geographic Type and Geographic Value!');
200+
return;
201+
}
202+
203+
if (currentMode === 'epivis') {
204+
var epiVisUrl = "{{ epivis_url }}";
205+
var urlParamsEncoded = btoa(`{"datasets":[{"color":"#415742","title":"value","params":{"_endpoint":"covidcast","data_source":"${dataSource}","signal":"${dataSignal}","time_type":"day","geo_type":"${geographicType}","geo_value":"${geographicValue}"}}]}`);
206+
207+
epiVisUrl += `#${urlParamsEncoded}`;
208+
window.open(epiVisUrl, '_blank').focus();
209+
210+
} else {
211+
var startDate = document.getElementById('start_date').value;
212+
var endDate = document.getElementById('end_date').value;
213+
214+
var dataExportUrl = "{{ data_export_url }}";
215+
216+
if (startDate === '' || endDate === '') {
217+
alert('Please select start and end date');
218+
return;
219+
}
220+
221+
dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
222+
window.open(dataExportUrl, '_blank').focus();
223+
}
224+
}
225+
</script>

‎src/templates/signals/signal_detail.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ <h5>Response Example</h5>
221221
</div>
222222
</section>
223223
{% endif %}
224-
{% include "signals/epivis_block.html"%}
224+
{% include "signals/epivis_export_data_block.html"%}
225225
<h5>Related links</h5>
226226
<section class="section">
227227
<div class="row">

0 commit comments

Comments
 (0)