Skip to content

Commit a5aa137

Browse files
lxieyanglxieyang
committed
fix time slider and graph positioning -- need some refactoring later
1 parent 18b4f34 commit a5aa137

File tree

5 files changed

+179
-32
lines changed

5 files changed

+179
-32
lines changed

‎package-lock.json

Lines changed: 1 addition & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.svelte

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@
412412
height: 35%;
413413
}
414414
415-
.graph-container {
415+
/* .graph-container {
416416
position: absolute;
417417
z-index: 1001;
418418
bottom: 24px;
@@ -529,7 +529,7 @@
529529
padding: 30px 10px;
530530
box-sizing: border-box;
531531
transition: all 0.1s ease-in;
532-
}
532+
} */
533533
534534
.error-message-container {
535535
position: absolute;
@@ -548,7 +548,7 @@
548548
<div class="error-message-container">Failed to load data. Please try again later...</div>
549549
{/if}
550550

551-
<MapBox />
551+
<MapBox {isIE} {graphShowStatus} {toggleGraphShowStatus} />
552552

553553
<div class="options-container">
554554
<Options {isIE} />
@@ -558,12 +558,11 @@
558558
<Legend />
559559
</div>
560560

561-
<div class="time-container">
561+
<!-- <div class="time-container">
562562
<Time />
563-
</div>
563+
</div> -->
564564

565-
<!-- need to add the $mapFirstLoaded check -->
566-
{#if $mapFirstLoaded && !graphShowStatus}
565+
<!-- {#if $mapFirstLoaded && !graphShowStatus}
567566
<div class="graph-toggole-button-container">
568567
<button
569568
title={isIE !== undefined ? 'Show time series' : ''}
@@ -576,7 +575,6 @@
576575
</div>
577576
{/if}
578577
579-
<!-- need to add the $mapFirstLoaded check -->
580578
<div class="graph-container {$mapFirstLoaded && graphShowStatus ? 'show' : ''}">
581579
<div class="hide-graph-button-anchor">
582580
<button
@@ -589,4 +587,4 @@
589587
</div>
590588
591589
<Graph />
592-
</div>
590+
</div> -->

‎src/MapBox.svelte

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
import { defaultRegionOnStartup, getTextColorBasedOnBackground } from './util.js';
66
import { DIRECTION_THEME, MAP_THEME } from './theme.js';
77
import AutoComplete from 'simple-svelte-autocomplete';
8+
import Time from './Time.svelte';
9+
import Graph from './Graph.svelte';
810
911
import {
1012
levels,
@@ -26,6 +28,8 @@
2628
import * as d3 from 'd3';
2729
import logspace from 'compute-logspace';
2830
31+
export let isIE, graphShowStatus, toggleGraphShowStatus;
32+
2933
let parseTime = d3.timeParse('%Y%m%d');
3034
let formatTimeWithoutYear = d3.timeFormat('%B %d');
3135
@@ -929,6 +933,7 @@
929933
top: 60px;
930934
z-index: 1001;
931935
}
936+
932937
.map-container {
933938
width: 100%;
934939
height: 80vh;
@@ -981,6 +986,126 @@
981986
.state-buttons-holder .pg-button img {
982987
width: 90%;
983988
}
989+
990+
.time-container {
991+
position: absolute;
992+
bottom: 24px;
993+
left: 10px;
994+
z-index: 1002;
995+
background-color: rgba(255, 255, 255, 0.9);
996+
padding: 30px 10px;
997+
box-sizing: border-box;
998+
transition: all 0.1s ease-in;
999+
}
1000+
1001+
.graph-container {
1002+
position: absolute;
1003+
z-index: 1001;
1004+
bottom: 24px;
1005+
right: 10px;
1006+
background-color: rgba(255, 255, 255, 0.9);
1007+
padding: 5px 5px;
1008+
box-sizing: border-box;
1009+
transition: opacity 0.3s ease-in-out;
1010+
visibility: hidden;
1011+
opacity: 0;
1012+
}
1013+
1014+
.graph-container.show {
1015+
visibility: visible;
1016+
opacity: 1;
1017+
}
1018+
1019+
.hide-graph-button-anchor {
1020+
position: relative;
1021+
}
1022+
1023+
.hide-graph-button {
1024+
position: absolute;
1025+
top: 0;
1026+
left: 0;
1027+
width: 14px;
1028+
height: 14px;
1029+
color: #333;
1030+
font-size: 12px;
1031+
display: flex;
1032+
justify-content: center;
1033+
align-items: center;
1034+
cursor: pointer;
1035+
background-color: transparent;
1036+
padding: 0;
1037+
border: 0;
1038+
transition: opacity 0.1s ease-in;
1039+
opacity: 0.7;
1040+
}
1041+
1042+
.hide-graph-button:hover {
1043+
opacity: 1;
1044+
}
1045+
1046+
.graph-toggole-button-container {
1047+
position: absolute;
1048+
float: right;
1049+
z-index: 1001;
1050+
bottom: 24px;
1051+
right: 10px;
1052+
background-color: rgba(255, 255, 255, 0.9);
1053+
padding: 5px 5px;
1054+
box-sizing: border-box;
1055+
}
1056+
1057+
.graph-toggle-button {
1058+
font-family: 'Open Sans', sans-serif;
1059+
width: 85px;
1060+
height: 40px;
1061+
font-size: 14px;
1062+
cursor: pointer;
1063+
color: #333;
1064+
background-color: transparent;
1065+
padding: 0;
1066+
border: 0;
1067+
transition: all 0.1s ease-in;
1068+
position: relative;
1069+
}
1070+
1071+
.graph-toggle-button:hover {
1072+
background-color: #eee;
1073+
}
1074+
1075+
button.graph-toggle-button .button-tooltip {
1076+
visibility: hidden;
1077+
width: 120px;
1078+
border-style: solid;
1079+
border-width: 1px;
1080+
border-color: #666;
1081+
background-color: #fff;
1082+
color: #333;
1083+
font-weight: 400;
1084+
font-size: 14px;
1085+
line-height: 14px;
1086+
text-align: center;
1087+
border-radius: 6px;
1088+
padding: 5px 5px;
1089+
position: absolute;
1090+
z-index: 1;
1091+
top: 0px;
1092+
right: 120%;
1093+
}
1094+
1095+
button.graph-toggle-button .button-tooltip::after {
1096+
content: '';
1097+
position: absolute;
1098+
top: 50%;
1099+
left: 100%;
1100+
margin-top: -5px;
1101+
border-width: 5px;
1102+
border-style: solid;
1103+
border-color: transparent transparent transparent #666;
1104+
}
1105+
1106+
button.graph-toggle-button:hover .button-tooltip {
1107+
visibility: visible;
1108+
}
9841109
</style>
9851110

9861111
<div class="banner">
@@ -1056,4 +1181,35 @@
10561181
<img src="./assets/imgs/us48.png" alt="" />
10571182
</button>
10581183
</div>
1184+
1185+
<div class="time-container">
1186+
<Time />
1187+
</div>
1188+
1189+
{#if $mapFirstLoaded && !graphShowStatus}
1190+
<div class="graph-toggole-button-container">
1191+
<button
1192+
title={isIE !== undefined ? 'Show time series' : ''}
1193+
class="graph-toggle-button"
1194+
aria-label="show time series"
1195+
on:click={event => toggleGraphShowStatus(false)}>
1196+
<span class="button-tooltip">Show time series</span>
1197+
<b>View Time Graph</b>
1198+
</button>
1199+
</div>
1200+
{/if}
1201+
1202+
<div class="graph-container {$mapFirstLoaded && graphShowStatus ? 'show' : ''}">
1203+
<div class="hide-graph-button-anchor">
1204+
<button
1205+
title="Hide time series"
1206+
aria-label="Hide time series"
1207+
on:click={toggleGraphShowStatus}
1208+
class="hide-graph-button">
1209+
&#10005;
1210+
</button>
1211+
</div>
1212+
1213+
<Graph />
1214+
</div>
10591215
</div>

‎src/Options.svelte

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
width: 100%;
2828
}
2929
30+
.option .option-title {
31+
margin-bottom: 0px !important;
32+
padding-bottom: 0px !important;
33+
}
34+
3035
.buttons-group {
3136
width: 100%;
3237
display: flex;
@@ -188,7 +193,7 @@
188193
<div class="options">
189194

190195
<div class="option">
191-
<p style="font-size: 15px;">
196+
<p style="font-size: 15px;" class="option-title">
192197
<strong>Geo-level:</strong>
193198
</p>
194199
<select
@@ -208,7 +213,7 @@
208213
</div>
209214

210215
<div class="option">
211-
<p style="font-size: 15px;">
216+
<p style="font-size: 15px;" class="option-title">
212217
<strong>Indicator:</strong>
213218
</p>
214219
<select

‎src/Time.svelte

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,13 @@
231231
position: relative;
232232
}
233233
234+
#time-label {
235+
font-family: 'Open Sans', sans-serif;
236+
line-height: 1rem;
237+
font-size: 16px;
238+
font-weight: 400;
239+
}
240+
234241
.selected-date {
235242
position: absolute;
236243
top: -20px;
@@ -311,6 +318,7 @@
311318
}
312319
313320
.time p.min-max {
321+
font-family: 'Open Sans', sans-serif;
314322
font-size: 0.8rem;
315323
color: #666;
316324
}

0 commit comments

Comments
 (0)