diff --git a/src/AdvancedWeatherView.vue b/src/AdvancedWeatherView.vue index d1c56ac4..ecd766e0 100644 --- a/src/AdvancedWeatherView.vue +++ b/src/AdvancedWeatherView.vue @@ -3,11 +3,10 @@ - -

Just how cloudy is it in {{ locationName }} in April? + +

Just how cloudy is it in {{ locationName }} in April? ' >

- - - - - - - - - + + + + + + + + + + + + - - - + - {{ displayData ? (needToUpdate ? 'Update Map' : 'Shown on Map') : 'Show on Map' }} - - + @click="updateData()">{{ displayData ? (needToUpdate ? 'Update Map' : 'Shown on Map') : 'Show on Map' }} - - + + + - +
-

Show cloud cover statistics for currently selected location: {{ locationName }}

+

Show cloud cover statistics for currently selected location: {{ locationName }}

Show details + - - + +
-
+
-

Cloud Cover for {{ mapSubsets.get(dataSubset) }}:

+

Cloud Cover for {{ locationName }} for {{ mapSubsets.get(dataSubset) }}:

Cloud Cover for {{ locationName }}:

Location not in bounds
+ - - - + + +
- {{ mapDescriptionText }} -
+ {{ mapDescriptionText }}
+ - - + - + + :y-axis-options="{ + ticks: {callback: (value: number, index: number) => { + if (value < 0 || value > 1) {return;} + return (value * 100).toFixed(0) + '%'; + }}}" + timeseries + color="#aaa" + show-scatter + :annotations="[...skyCoverCodeRanges.map(([_,[min,max]],i) => { + return { + type: 'box', + yMin: min/100, + yMax: max/100, + backgroundColor: colorMap[i], + drawTime: 'beforeDraw', + borderColor: colorMap[i] + } + }), + ...skyCoverCodeRanges.map(([label,[min,max]],i) => { + return { + type: 'line', + borderWidth: 0, + drawTime: 'beforeDatasetsDraw', + + label: { + display: true, + color: 'black', + backgroundColor: 'transparent', + content: skyCoverCodes[i], + }, + xMin: new Date(2023, 1, 8), + yMin: (min + max) / 200, + yMax: (min + max) / 200, + }; + }) + ]" + /> - Close + Close @@ -423,7 +414,7 @@ export default defineComponent({ 'define-term': DefineTerm, }, - emits: ['update:modelValue','close'], + emits: ['update:modelValue','close', 'explainer-open'], props: { modelValue: { @@ -436,25 +427,7 @@ export default defineComponent({ type: Object as PropType | undefined, default: cityBoston, required: true, - }, - - showOnMap: { - type: Boolean, - default: false, - required: false, - }, - - showCharts: { - type: Boolean, - default: false, - required: false, - }, - - fullscreen: { - type: Boolean, - default: false, - required: false, - }, + } }, data() { @@ -476,7 +449,7 @@ export default defineComponent({ 2018, 2019, 2020, 2021, 2023 ], elNinoYears: [2003, 2007, 2010, 2016], - laNinaYears: [2000, 2008, 2011, 2012, 2021, 2022, 2023], + laNinaYears: [2000, 2008, 2011, 2012, 2021, 2022], neutralYears: [2001, 2002, 2004, 2005, 2006, 2009, 2013, 2014, 2015, 2017, 2018], selectedYear: 2021, selectedStat: 'median' as Statistics, @@ -533,10 +506,9 @@ export default defineComponent({ locationName: '', inBounds: false, displayData: false, - displayCharts: this.showCharts, + displayCharts: false, showCloudCover: true, transferFunction: this.transferFunction8, - loadingNewMap: false, }; }, @@ -553,7 +525,7 @@ export default defineComponent({ this.loadEightDayData().then(() => { console.log('preloading data'); this.dataloaded = true; - this.updateData(this.showOnMap); + this.updateData(false); this.updateMapDescriptionText(); }); } @@ -583,7 +555,7 @@ export default defineComponent({ subsetSelected() { // return !this.allYears.every(y => this.selectedYears.includes(y)); - return (this.selectedYears.length < this.allYears.length) || this.selectedStat === 'singleyear'; + return (this.selectedYears.length < this.allYears.length); }, hideHistogramSubset() { @@ -629,7 +601,7 @@ export default defineComponent({ // show the lat lon of index this.allYears.map((year) => { - allData.push({'x': new Date(year, 3, 8), 'y':this.allCloudData[year][index].cloudCover}); + allData.push({'x': new Date(year, 4, 8), 'y':this.allCloudData[year][index].cloudCover}); }); // console.log('index', index, this.latitudes[index], this.longitudes[index], allData.map(d => d.y)); return allData; @@ -683,7 +655,7 @@ export default defineComponent({ if (index === -1 || index === null) { return; } - allData.push({'x':new Date(year, 3, 8), 'y':data[index].cloudCover}); + allData.push({'x':new Date(year, 4, 8), 'y':data[index].cloudCover}); }); return allData; @@ -699,6 +671,7 @@ export default defineComponent({ locationValue(): number | null { + console.log('locationValue'); if (!this.inBounds) {return null;} if (this.selectedStat === 'mean') { @@ -783,8 +756,8 @@ export default defineComponent({ } return [{ type: 'scatter', - label: this.selectedStat !== 'singleyear' ? this.mapSubsets.get(this.dataSubset) as string : `${this.selectedYear}`, - backgroundColor: data.map(_v => '#eac402'), + label: this.mapSubsets.get(this.dataSubset) as string, + backgroundColor: data.map(_v => 'goldenrod'), data: data, pointRadius: 6, borderColor: 'black', @@ -1033,10 +1006,9 @@ export default defineComponent({ this.displayData = display; if (display){ this.needToUpdate = false; - this.loadingNewMap = true; } this.updateMapDescriptionText(); - + if (this.modisDataSet === '1day') { this.transferFunction = this.transferFunction1; } @@ -1159,8 +1131,7 @@ export default defineComponent({ // Displaying {{ selectedStat === 'singleyear' ? '' : statText.get(selectedStat)?.toLowerCase() }} cloud cover for {{ selectedStat === 'singleyear' ? selectedYear : mapSubsets.get(dataSubset) }}. const stat = this.selectedStat === 'singleyear' ? '' : this.statText.get(this.selectedStat); const subset = this.selectedStat === 'singleyear' ? this.selectedYear : this.mapSubsets.get(this.dataSubset); - const modis = this.modisDataSet === '1day' ? '1-day' : '8-day'; - this.mapDescriptionText = `Displaying ${modis} ${stat} cloud cover for ${subset}.`; + this.mapDescriptionText = `Displaying ${stat} cloud cover for ${subset}.`; }, getCloudCoverText(val: number | null): [number | null, string | undefined] { @@ -1184,7 +1155,7 @@ export default defineComponent({ watch: { modelValue(value: boolean) { - if (value && Object.keys(this.allModisData['8day']).length === 0) { + if (value) { console.log('loading data'); this.loadEightDayData().then(() => { console.log('finished loading data'); @@ -1193,7 +1164,6 @@ export default defineComponent({ }); } else { console.log('closing AWV view'); - this.needToUpdate = true; // this.displayData = false; } }, @@ -1236,8 +1206,11 @@ export default defineComponent({ this.inBounds = inBounds; }); this.getLatLonIndex(value.latitudeDeg, value.longitudeDeg); - }, + + explainerOpen(open: boolean) { + this.$emit('explainer-open', open); + } }, @@ -1249,13 +1222,7 @@ export default defineComponent({ #advanced-weather-view { --color: #eac402; - --default-font-size: clamp(10px, min(1.7vh, 1.7vw), 1.1rem); font-size: var(--default-font-size); - --smaller-font: calc(1 * var(--default-font-size)); - - h1 { - font-size: 1.5em; - } p.intro { font-size: 1em; @@ -1263,9 +1230,13 @@ export default defineComponent({ strong.attention { font-weight: bold; + font-size: 1em; color: var(--color); } + #chart-intro { + + } canvas.chartjs { border-radius: 5px; @@ -1273,18 +1244,6 @@ export default defineComponent({ .graph-col { height: 300px; - padding: 6px; - } - - .v-btn { - font-size: var(--smaller-font); - } - - .modis-radio { - margin-top: 0.125em; - } - .v-label { - font-size: var(--smaller-font); } #awv-map-description { @@ -1295,60 +1254,24 @@ export default defineComponent({ .map-colorbar { display: flex; - max-width: 99%; - } - - #awv-map { - &.show-after .map-container::after { - content: " "; - - display:flex; - width: 100%; - min-height: 2.5em; - height: max-content; - align-items: center; - justify-content: center; - font-size: calc(1 * var(--default-font-size)); - - position: absolute; - top: 0; - left: 0; - - color: black; - background-color: #cccccc77; - z-index: 500; - - backdrop-filter: blur(5px) saturate(50%); - } - - &.show-after.need-to-update .map-container::after { - content: "Press 'Update Map' to view new selection"; - } - - &.show-after.no-data-shown .map-container::after { - content: "Press 'Show on Map' to view data"; - } - - } .map-container { contain: strict; - aspect-ratio: 1.5; - max-height: 350px; + aspect-ratio: 2; + } + + .force-vuetify-small-font { + font-size: 0.8em!important; } .sentence-query { font-weight: bold; font-size: 1.125em; - @media (max-width: 600px) { - font-size: 1.25em; - } - - >label, >select { - margin: 0.25em 0.5ch; + > * { + margin: 0.25em auto; } > label { @@ -1376,13 +1299,6 @@ export default defineComponent({ margin-left: 1rem; margin-bottom: 1rem; font-size: 1em; - - @media (max-width: 810px) { - .label-icon-value-text-container { - width: max-content; - } - } - } .bold .label-icon-value-text-label { @@ -1390,6 +1306,6 @@ export default defineComponent({ font-size: 1.12em; } - + } - \ No newline at end of file + diff --git a/src/SolarEclipse2024.vue b/src/SolarEclipse2024.vue index 91ae36a0..123971be 100644 --- a/src/SolarEclipse2024.vue +++ b/src/SolarEclipse2024.vue @@ -694,7 +694,8 @@ @close="() => { console.log('closing'); showAdvancedWeather = false; - }" + }" + @explainer-open="(open: boolean) => { weatherInfoOpen = open }" :default-location="locationDeg" :show-on-map="showAWVMapByDefault" :show-charts="showAWVChartsByDefault" @@ -1809,8 +1810,13 @@ export default defineComponent({ uuid, infoTimeMs: 0, + weatherTimeMs: 0, + weatherInfoTimeMs: 0, appStartTimestamp: Date.now(), infoStartTimestamp: null as number | null, + weatherStartTimestamp: null as number | null, + weatherInfoStartTimestamp: null as number | null, + weatherInfoOpen: false, responseOptOut: responseOptOut as boolean | null, showSplashScreen: queryData.splash ?? true, @@ -2099,7 +2105,7 @@ export default defineComponent({ if (document.visibilityState === "hidden") { this.sendUpdateData(); } else { - this.clearData(); + this.resetData(); } }); @@ -2919,7 +2925,7 @@ export default defineComponent({ headers: { "Authorization": process.env.VUE_APP_CDS_API_KEY ?? "" } }); const content = await response.json(); - const exists = response.status === 200 && content.response.user_uuid != undefined; + const exists = response.status === 200 && content.response?.user_uuid != undefined; if (exists) { return; } @@ -2943,17 +2949,27 @@ export default defineComponent({ }); }, - clearData() { + resetData() { this.userSelectedLocations = []; this.cloudCoverSelectedLocations = []; this.infoTimeMs = 0; - this.appStartTimestamp = Date.now(); + this.weatherTimeMs = 0; + this.weatherInfoTimeMs = 0; + const now = Date.now(); + this.appStartTimestamp = now; + this.infoStartTimestamp = this.showInfoSheet ? now : null; + this.weatherStartTimestamp = this.showAdvancedWeather ? now : null; + this.weatherInfoStartTimestamp = this.weatherInfoOpen ? now : null; }, sendUpdateData() { if (this.responseOptOut) { return; } + const now = Date.now(); + const infoTime = (this.showInfoSheet && this.infoStartTimestamp !== null) ? now - this.infoStartTimestamp : this.infoTimeMs; + const weatherTime = (this.showAdvancedWeather && this.weatherStartTimestamp !== null) ? now - this.weatherStartTimestamp : this.weatherTimeMs; + const weatherInfoTime = (this.weatherInfoOpen && this.weatherInfoStartTimestamp !== null) ? now - this.weatherInfoStartTimestamp : this.weatherInfoTimeMs; fetch(`${API_BASE_URL}/solar-eclipse-2024/data/${this.uuid}`, { method: "PATCH", headers: { @@ -2967,11 +2983,13 @@ export default defineComponent({ // eslint-disable-next-line @typescript-eslint/naming-convention cloud_cover_selected_locations: toRaw(this.cloudCoverSelectedLocations), // eslint-disable-next-line @typescript-eslint/naming-convention - delta_info_time_ms: this.infoTimeMs, delta_app_time_ms: Date.now() - this.appStartTimestamp + delta_info_time_ms: infoTime, delta_app_time_ms: Date.now() - this.appStartTimestamp, + // eslint-disable-next-line @typescript-eslint/naming-convention + delta_advanced_weather_time_ms: weatherTime, delta_weather_info_time_ms: weatherInfoTime, }), keepalive: true, }).then(() => { - this.clearData(); + this.resetData(); }); }, @@ -3762,11 +3780,28 @@ export default defineComponent({ if (show) { this.infoStartTimestamp = Date.now(); } else if (this.infoStartTimestamp !== null) { - const timestamp = Date.now(); - this.infoTimeMs += (timestamp - this.infoStartTimestamp); + this.infoTimeMs += (Date.now() - this.infoStartTimestamp); this.infoStartTimestamp = null; } }, + + showAdvancedWeather(show: boolean) { + if (show) { + this.weatherStartTimestamp = Date.now(); + } else if (this.weatherStartTimestamp !== null) { + this.weatherTimeMs += (Date.now() - this.weatherStartTimestamp); + this.weatherStartTimestamp = null; + } + }, + + weatherInfoOpen(open: boolean) { + if (open) { + this.weatherInfoStartTimestamp = Date.now(); + } else if (this.weatherInfoStartTimestamp !== null) { + this.weatherInfoTimeMs += (Date.now() - this.weatherInfoStartTimestamp); + this.weatherInfoStartTimestamp = null; + } + }, introSlide(val: number) { this.inIntro = val < 3;