Skip to content

Commit 0b42ad1

Browse files
dmytrotskodmytrotsko
authored
OKRS-24-55 (#1243)
* 'latest known data' link now preserves context * Set default date to the date we have data for all 3 sensors. * Made Hospital Admissions sensor work as Doctor Visits and Deaths. Removed annotation for Hospital Admissions sensor when we don't have recent data for chosen date
1 parent 3fd07be commit 0b42ad1

File tree

4 files changed

+111
-39
lines changed

4 files changed

+111
-39
lines changed

‎src/blocks/IndicatorWarning.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,13 @@
3838
<div data-uk-alert class="uk-alert-warning">
3939
The indicator "{sensor.name}" is not available for {formatDateYearDayOfWeekAbbr(date.value)}, yet. The latest
4040
known data is available on
41-
<a href="?date={formatAPITime(sensor.timeFrame.max)}" on:click={switchDate}
42-
>{formatDateYearDayOfWeekAbbr(sensor.timeFrame.max)}</a
41+
<!--
42+
window.location.search.split('&').slice(1).join('&') is used to keep the query parameters except the date parameter.
43+
So we are getting query params from url, splitting them by & and removing the first element which is date parameter.
44+
-->
45+
<a
46+
href="?date={formatAPITime(sensor.timeFrame.max)}&{window.location.search.split('&').slice(1).join('&')}"
47+
on:click={switchDate}>{formatDateYearDayOfWeekAbbr(sensor.timeFrame.max)}</a
4348
>.
4449
</div>
4550
{/if}

‎src/blocks/NoRecentDataWarning.svelte‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script>
2+
import { formatDateYearDayOfWeekAbbr } from '../formats';
3+
import { formatAPITime } from '../data';
4+
/**
5+
* @type {import("../stores/params").DateParam}
6+
*/
7+
export let minMaxDate;
8+
/**
9+
* @type {import("../stores/params").DateParam}
10+
*/
11+
export let date;
12+
13+
export let warningType;
14+
15+
function switchDate() {
16+
date.set(minMaxDate);
17+
}
18+
</script>
19+
20+
{#if warningType === 1}
21+
<div data-uk-alert class="uk-alert-warning">
22+
<p>
23+
This date, {formatDateYearDayOfWeekAbbr(minMaxDate)}, is the most recent that has data for all three of the
24+
highlighted indicators. You can mouse over the tooltips just below this message to see the latest available date
25+
for each indicator. Note that the latest available date may be different for each indicator.
26+
</p>
27+
</div>
28+
{/if}
29+
30+
{#if warningType === 2}
31+
<div data-uk-alert class="uk-alert-warning">
32+
<p>
33+
This date ({formatDateYearDayOfWeekAbbr(date.value)}) does not yet have data for all of the highlighted
34+
indicators.
35+
<br />
36+
<!--
37+
window.location.search.split('&').slice(1).join('&') is used to keep the query parameters except the date parameter.
38+
So we are getting query params from url, splitting them by & and removing the first element which is date parameter.
39+
-->
40+
<a
41+
href="?date={formatAPITime(minMaxDate)}&{window.location.search.split('&').slice(1).join('&')}"
42+
on:click={switchDate}>{formatDateYearDayOfWeekAbbr(minMaxDate)}</a
43+
>
44+
is the most recent that has data for all three. You can mouse over the tooltips just below this message to see the
45+
latest available date for each indicator. Note that the latest available date may be different for each indicator.
46+
</p>
47+
</div>
48+
{/if}

‎src/modes/summary/Overview.svelte‎

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<script>
22
import KPIValue from '../../components/KPIValue.svelte';
33
import KPIChange from '../../components/KPIChange.svelte';
4-
import { DateParam, SensorParam } from '../../stores/params';
5-
import { formatDateDayOfWeek } from '../../formats';
4+
import { SensorParam } from '../../stores/params';
65
import SensorUnit from '../../components/SensorUnit.svelte';
7-
import IndicatorAnnotations from '../../components/IndicatorAnnotations.svelte';
86
import MaxDateHint from '../../blocks/MaxDateHint.svelte';
9-
import IndicatorWarning from '../../blocks/IndicatorWarning.svelte';
7+
import NoRecentDataWarning from '../../blocks/NoRecentDataWarning.svelte';
108
import { defaultDeathSensor, defaultCasesSensor, defaultHospitalSensor, metaDataManager } from '../../stores';
11-
import IndicatorFallbackWarning from '../../blocks/IndicatorFallbackWarning.svelte';
9+
import { onMount, beforeUpdate } from 'svelte';
1210
1311
/**
1412
* @type {import("../../stores/params").DateParam}
@@ -27,33 +25,56 @@
2725
$: DEATHS = new SensorParam($defaultDeathSensor, $metaDataManager);
2826
$: HOSPITAL_ADMISSION = new SensorParam($defaultHospitalSensor, $metaDataManager);
2927
30-
function fetchFallback(fetcher, sensor, region, trend) {
31-
return trend.then((t) => {
32-
if (t && t.value != null) {
33-
return t;
34-
}
35-
return fetcher.fetch1Sensor1Region1DateTrend(sensor, region, DateParam.box(sensor.timeFrame.max));
36-
});
37-
}
38-
3928
$: trends = fetcher.fetchNSensors1Region1DateTrend([CASES, HOSPITAL_ADMISSION, DEATHS], region, date);
4029
$: casesTrend = trends[0];
41-
$: hospitalTrend = fetchFallback(fetcher, HOSPITAL_ADMISSION, region, trends[1]);
30+
$: hospitalTrend = trends[1];
4231
$: deathTrend = trends[2];
43-
</script>
4432
45-
<IndicatorWarning sensor={CASES} {date} {region} {fetcher} />
46-
<IndicatorAnnotations {date} {region} sensor={CASES} range="sparkLine" />
33+
let minMaxDate = new Date();
34+
35+
onMount(() => {
36+
[CASES, HOSPITAL_ADMISSION].map((s) => {
37+
if (s.timeFrame.max < minMaxDate) {
38+
minMaxDate = s.timeFrame.max;
39+
}
40+
});
41+
let urlSearchParams = new URLSearchParams(window.location.search);
42+
if (!urlSearchParams.has('date')) {
43+
// if no date is specified in the URL, default to the latest day before today with data from all 3 highlighted indicators
44+
date.set(minMaxDate);
45+
}
46+
});
47+
48+
// warningType is indicator of which exact warning message should be shown.
49+
// By default, when user opens page with no specified date, the date will be set to the latest date we have data for all 3 indicators.
50+
// In this case, warningType should be set to 1.
51+
// In case selected date is set to future date (date > minMaxDate, where we don't have recent data for all 3 indicators), the warningType will be set to 2
52+
// which has different warning message.
53+
// In case selected date is set to some date which is < minMaxDate, the warningType will be set to 0 which means that we will not show
54+
// any warning message.
55+
56+
// warningType should be set in beforeUpdate() method, to guess correct warningType.
57+
58+
let warningType = 1;
59+
beforeUpdate(() => {
60+
if (date.value > minMaxDate) {
61+
warningType = 2;
62+
} else if (date.value < minMaxDate) {
63+
warningType = 0;
64+
} else {
65+
warningType = 1;
66+
}
67+
});
68+
</script>
4769

48-
<p>
49-
On {formatDateDayOfWeek(date.value)}
50-
<MaxDateHint sensor={CASES.value} suffix="," {fetcher} />
51-
the {CASES.valueUnit}s were:
52-
</p>
70+
<NoRecentDataWarning {minMaxDate} {date} {warningType} />
5371

5472
<div class="mobile-three-col">
5573
<div class="mobile-kpi">
56-
<h3>Doctor Visits</h3>
74+
<h3>
75+
Doctor Visits
76+
<MaxDateHint sensor={CASES.value} {fetcher} />
77+
</h3>
5778
<div>
5879
{#await casesTrend}
5980
<KPIValue value={null} loading />
@@ -66,20 +87,26 @@
6687
</div>
6788
</div>
6889
<div class="mobile-kpi">
69-
<h3>Hospital Admissions</h3>
90+
<h3>
91+
Hospital Admissions
92+
<MaxDateHint sensor={HOSPITAL_ADMISSION.value} {fetcher} />
93+
</h3>
7094
<div>
7195
{#await hospitalTrend}
7296
<KPIValue value={null} loading />
7397
{:then d}
74-
<KPIValue value={d ? d.value : null} asterisk={d != null && (d.value == null || d.date < date.value)} />
98+
<KPIValue value={d ? d.value : null} />
7599
{/await}
76100
</div>
77101
<div class="sub">
78102
<SensorUnit sensor={HOSPITAL_ADMISSION} long />
79103
</div>
80104
</div>
81105
<div class="mobile-kpi">
82-
<h3>Deaths</h3>
106+
<h3>
107+
Deaths
108+
<MaxDateHint sensor={DEATHS.value} {fetcher} />
109+
</h3>
83110
<div>
84111
{#await deathTrend}
85112
<KPIValue value={null} loading />
@@ -111,10 +138,7 @@
111138
{#await hospitalTrend}
112139
<KPIChange value={null} loading />
113140
{:then d}
114-
<KPIChange
115-
value={d && d.value != null && !Number.isNaN(d.value) ? d.change : null}
116-
asterisk={d != null && (d.value == null || d.date < date.value)}
117-
/>
141+
<KPIChange value={d && d.value != null && !Number.isNaN(d.value) ? d.change : null} />
118142
{/await}
119143
</div>
120144
<div class="sub">Relative change to 7 days ago</div>
@@ -130,5 +154,3 @@
130154
<div class="sub">Relative change to 7 days ago</div>
131155
</div>
132156
</div>
133-
134-
<IndicatorFallbackWarning trend={hospitalTrend} date={date.value} level={region.level} sensor={HOSPITAL_ADMISSION} />

‎src/modes/summary/Summary.svelte‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script>
22
import IndicatorTable from './IndicatorTable.svelte';
3-
// TEMPORARY DISABLING OF THIS OVERVIEW WIDGET UNTIL SIGNALS ARE FIXED:
4-
// import Overview from './Overview.svelte';
3+
import Overview from './Overview.svelte';
54
import { countyInfo, nationInfo, stateInfo } from '../../data/regions';
65
import RegionDatePicker from '../../components/RegionDatePicker.svelte';
76
import {
@@ -71,9 +70,7 @@
7170
<div class="uk-container content-grid">
7271
<div class="grid-3-11">
7372
<FancyHeader invert>{region.displayName}</FancyHeader>
74-
<!-- TEMPORARY DISABLING OF THIS OVERVIEW WIDGET UNTIL SIGNALS ARE FIXED
7573
<Overview {date} {region} {fetcher} />
76-
-->
7774
<hr />
7875
<FancyHeader invert sub="Map" anchor="map">{HOSPITAL_ADMISSION.name}</FancyHeader>
7976
<p>{@html HOSPITAL_ADMISSION.signalTooltip}</p>

0 commit comments

Comments
 (0)