From 1bf16671e4f9b57b43c52c33585c28c59b7103d9 Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Wed, 29 May 2024 10:34:45 -0500 Subject: [PATCH 01/13] Update viz start and end date --- 0_config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/0_config.yml b/0_config.yml index 21645fe..28ab690 100644 --- a/0_config.yml +++ b/0_config.yml @@ -43,9 +43,9 @@ targets: ##-- Fetch configs --## viz_start_date: - command: as.Date(I('2022-01-01')) + command: as.Date(I('2023-01-01')) viz_end_date: - command: as.Date(I('2022-12-31')) + command: as.Date(I('2023-12-31')) # Use bounding box in case we want to do this regionally someday # Start with CONUS only # I don't think this is being used any more ... From 72159310041992d1daf873fea1a674e63299e91f Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Thu, 30 May 2024 13:18:02 -0500 Subject: [PATCH 02/13] Fix projection issue with shifting --- 3_visualize/src/sf_utils_shift.R | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/3_visualize/src/sf_utils_shift.R b/3_visualize/src/sf_utils_shift.R index fd5669c..d3d66a7 100644 --- a/3_visualize/src/sf_utils_shift.R +++ b/3_visualize/src/sf_utils_shift.R @@ -158,6 +158,10 @@ shift_sf <- function(obj_sf, rotation_deg, scale, shift, proj_str) { stopifnot(!is.na(st_crs(obj_sf))) + # store original projection (CONUS) to use to redefine projection + # once geometry is projected and shifted + proj_orig <- st_crs(obj_sf) + obj_sf_transf <- st_transform(obj_sf, proj_str) obj_sfg <- st_geometry(obj_sf_transf) obj_sfg_centroid <- st_centroid(obj_sfg) @@ -176,10 +180,10 @@ shift_sf <- function(obj_sf, rotation_deg, scale, shift, proj_str) { # Want to return a complete `sf` object, not just the geometry # Not features were filtered, the values were just updated, so # we can make a copy of `obj_sf` and then insert the updated - # geometry + add the appropriate projection info + # geometry + set the projection to the original CONUS projection obj_sf_shifted <- obj_sf_transf # Make a copy st_geometry(obj_sf_shifted) <- obj_sfg_shifted - st_crs(obj_sf_shifted) <- proj_str + st_crs(obj_sf_shifted) <- proj_orig return(obj_sf_shifted) } @@ -265,6 +269,10 @@ shift_points_sf <- function(pts_sf, rotation_deg, scale, shift, proj_str, ref_sf stopifnot(!is.na(st_crs(pts_sf))) + # store original projection (CONUS) to use to redefine projection + # once geometry is projected and shifted + proj_orig <- st_crs(pts_sf) + pts_sf_transf <- st_transform(pts_sf, proj_str) pts_sfg <- st_geometry(pts_sf_transf) @@ -283,10 +291,10 @@ shift_points_sf <- function(pts_sf, rotation_deg, scale, shift, proj_str, ref_sf # Want to return a complete `sf` object, not just the geometry # No features were filtered, the values were just updated, so # we can make a copy of `pts_sf` and then insert the updated - # geometry + add the appropriate projection info + # geometry + set the projection to the original CONUS projection pts_sf_shifted <- pts_sf # Make a copy st_geometry(pts_sf_shifted) <- pts_sfg_shifted - st_crs(pts_sf_shifted) <- proj_str + st_crs(pts_sf_shifted) <- proj_orig return(pts_sf_shifted) } From 86f5c7d5aa8d8fa97b6566ef8a2a268844cbdccf Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Thu, 30 May 2024 13:18:34 -0500 Subject: [PATCH 03/13] rerun pipeline for 2023 --- ...gw-conditions-daily-proportions-s3copy.ind | 2 +- .../gw-conditions-peaks-timeseries-s3copy.ind | 2 +- .../out/gw-conditions-site-coords-s3copy.ind | 2 +- .../out/gw-conditions-time-labels-s3copy.ind | 2 +- src/assets/gw-conditions-peaks-map.svg | 136 +++++++++--------- .../gw-conditions-daily-proportions.csv.ind | 2 +- .../data/gw-conditions-peaks-map.svg.ind | 2 +- .../gw-conditions-peaks-timeseries.csv.ind | 2 +- .../data/gw-conditions-site-coords.csv.ind | 2 +- .../data/gw-conditions-time-labels.csv.ind | 2 +- 10 files changed, 77 insertions(+), 77 deletions(-) diff --git a/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind b/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind index 47030c8..ffd34c4 100644 --- a/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind +++ b/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind @@ -1,2 +1,2 @@ -hash: 7e98eb082cb2abda37fcd663230f1940 +hash: 5d9d05238386e4f818f4d6f1ca051bc7 diff --git a/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind b/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind index 11b358f..721ae77 100644 --- a/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind +++ b/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind @@ -1,2 +1,2 @@ -hash: 27af0faa6ba9d1aa69ced5d194c1376b +hash: 15f470784c897971afd9c7a7f63366b2 diff --git a/3_visualize/out/gw-conditions-site-coords-s3copy.ind b/3_visualize/out/gw-conditions-site-coords-s3copy.ind index 8c4190d..e92e73d 100644 --- a/3_visualize/out/gw-conditions-site-coords-s3copy.ind +++ b/3_visualize/out/gw-conditions-site-coords-s3copy.ind @@ -1,2 +1,2 @@ -hash: 5c330a701c80681e587e4f1afe1f0139 +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 diff --git a/3_visualize/out/gw-conditions-time-labels-s3copy.ind b/3_visualize/out/gw-conditions-time-labels-s3copy.ind index 4efda5b..07e57f5 100644 --- a/3_visualize/out/gw-conditions-time-labels-s3copy.ind +++ b/3_visualize/out/gw-conditions-time-labels-s3copy.ind @@ -1,2 +1,2 @@ -hash: 8286962579ff4062969e873cc574bdd9 +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea diff --git a/src/assets/gw-conditions-peaks-map.svg b/src/assets/gw-conditions-peaks-map.svg index d5b898a..b074dbd 100644 --- a/src/assets/gw-conditions-peaks-map.svg +++ b/src/assets/gw-conditions-peaks-map.svg @@ -13,23 +13,23 @@ - + - - - - + + + + - - - - - + + + + + - + @@ -61,7 +61,7 @@ - + @@ -80,61 +80,61 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/visualizations/data/gw-conditions-daily-proportions.csv.ind b/visualizations/data/gw-conditions-daily-proportions.csv.ind index 47030c8..ffd34c4 100644 --- a/visualizations/data/gw-conditions-daily-proportions.csv.ind +++ b/visualizations/data/gw-conditions-daily-proportions.csv.ind @@ -1,2 +1,2 @@ -hash: 7e98eb082cb2abda37fcd663230f1940 +hash: 5d9d05238386e4f818f4d6f1ca051bc7 diff --git a/visualizations/data/gw-conditions-peaks-map.svg.ind b/visualizations/data/gw-conditions-peaks-map.svg.ind index 20e8d0f..9a3836b 100644 --- a/visualizations/data/gw-conditions-peaks-map.svg.ind +++ b/visualizations/data/gw-conditions-peaks-map.svg.ind @@ -1,2 +1,2 @@ -hash: c2b6a9e8634a02156d9c107b1839c5c3 +hash: c2f5967d4482d31078e0af3589e7b411 diff --git a/visualizations/data/gw-conditions-peaks-timeseries.csv.ind b/visualizations/data/gw-conditions-peaks-timeseries.csv.ind index 11b358f..721ae77 100644 --- a/visualizations/data/gw-conditions-peaks-timeseries.csv.ind +++ b/visualizations/data/gw-conditions-peaks-timeseries.csv.ind @@ -1,2 +1,2 @@ -hash: 27af0faa6ba9d1aa69ced5d194c1376b +hash: 15f470784c897971afd9c7a7f63366b2 diff --git a/visualizations/data/gw-conditions-site-coords.csv.ind b/visualizations/data/gw-conditions-site-coords.csv.ind index 8c4190d..e92e73d 100644 --- a/visualizations/data/gw-conditions-site-coords.csv.ind +++ b/visualizations/data/gw-conditions-site-coords.csv.ind @@ -1,2 +1,2 @@ -hash: 5c330a701c80681e587e4f1afe1f0139 +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 diff --git a/visualizations/data/gw-conditions-time-labels.csv.ind b/visualizations/data/gw-conditions-time-labels.csv.ind index 4efda5b..07e57f5 100644 --- a/visualizations/data/gw-conditions-time-labels.csv.ind +++ b/visualizations/data/gw-conditions-time-labels.csv.ind @@ -1,2 +1,2 @@ -hash: 8286962579ff4062969e873cc574bdd9 +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea From a9020f8466b389c23650cce0b3c083b0b12e86bc Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Thu, 30 May 2024 13:18:46 -0500 Subject: [PATCH 04/13] Fix typo --- src/components/GWL.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 4a01e10..06a97fc 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -70,7 +70,7 @@ class="tooltiptext" style="font-size: 0.8rem;" > - The percentile calculates the percent of days in the past that groundwater was below the current value. For a site is in the 10th percentile, water levels have been lower 10% of the time. + The percentile calculates the percent of days in the past that groundwater was below the current value. For a site in the 10th percentile, water levels have been lower 10% of the time. ), indicating where groundwater is comparatively high or low to what has been observed in the past. The corresponding time series chart shows the percent of sites in each water-level category through time.

From 6b49c3644313b2174dbe7fcab8e4e085000c7fcc Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Thu, 30 May 2024 14:03:12 -0500 Subject: [PATCH 05/13] Slightly improve map labels and lines --- src/assets/gw-conditions-labels-map.svg | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/assets/gw-conditions-labels-map.svg b/src/assets/gw-conditions-labels-map.svg index febbbe3..5b6cce4 100644 --- a/src/assets/gw-conditions-labels-map.svg +++ b/src/assets/gw-conditions-labels-map.svg @@ -2,18 +2,19 @@ - - - - - + + + + + + - U.S. Virgin Islands + U.S. Virgin Islands Puerto Rico Hawaii - American Samoa + American Samoa Guam - NorthernMariana Islands + NorthernMariana Islands Alaska From 48bf4ae5ce2dbadb41df0e2dbfa217998d6154a3 Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Thu, 30 May 2024 15:42:48 -0500 Subject: [PATCH 06/13] set up different data paths for prod vs test/beta --- src/components/GWL.vue | 44 +++++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 06a97fc..5c1b208 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -144,15 +144,17 @@ import { isMobile } from 'mobile-device-detect'; export default { name: "GWLsvg", - components: { - GWLmap, - mapLabels, - Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend"), - authorship: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/Authorship") - }, - data() { + components: { + GWLmap, + mapLabels, + Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend"), + authorship: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/Authorship") + }, + data() { return { publicPath: process.env.BASE_URL, // this is need for the data files in the public folder, this allows the application to find the files when on different deployment roots + vueTier: process.env.VUE_APP_TIER, // this is used to determine the file path suffix for data files + dataFileSuffix: null, d3: null, mobileView: isMobile, // test for mobile @@ -183,7 +185,7 @@ export default { yScale: null, line: null, - // Blue-Brown categorical color scale + // Blue-Brown categorical color scale verylow: "#BF6200", low: "#FEB100", normal: "#B3B3B3", @@ -194,8 +196,10 @@ export default { } }, mounted(){ + this.dataFileSuffix = this.vueTier == '' ? '-live' : '' // In the prod site we want to use the '-live' files. These are uploaded manually, to hold off updating the live site until we are ready + console.log(`vue tier: ${this.vueTier}, suffix: ${this.dataFileSuffix}`) this.d3 = Object.assign({d3Trans, scaleLinear, scaleThreshold, scaleOrdinal, select, selectAll, csv, utcFormat, line, path, axisBottom, axisLeft, format }); - + // resize const window_line = document.getElementById('line-container') this.width = window_line.clientWidth; @@ -211,21 +215,21 @@ export default { }, methods:{ isMobile() { - if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { - return true - } else { - return false - } - }, - loadData() { + if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + return true + } else { + return false + } + }, + loadData() { const self = this; // read in data let promises = [ self.d3.csv(self.publicPath + "quant_peaks.csv", this.d3.autotype), // used to draw legend shapes - color palette needs to be pulled out - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels-live.csv", this.d3.autotype), + self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels${self.dataFileSuffix}.csv`, this.d3.autotype), ]; Promise.all(promises).then(self.callback); // once it's loaded }, From bdfa8dc61a5f65bc044be5a3a3b1f27265af681c Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 10:33:28 -0500 Subject: [PATCH 07/13] few more adjustments to map labels --- src/assets/gw-conditions-labels-map.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/gw-conditions-labels-map.svg b/src/assets/gw-conditions-labels-map.svg index 5b6cce4..e92c8bf 100644 --- a/src/assets/gw-conditions-labels-map.svg +++ b/src/assets/gw-conditions-labels-map.svg @@ -2,10 +2,10 @@ - - - - + + + + From fceb414157b390e1acce138e12f1b6dddee41d0e Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 10:34:06 -0500 Subject: [PATCH 08/13] place map labels in separate div for easier grid layout manipulation --- src/components/GWL.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 5c1b208..cde1649 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -13,13 +13,16 @@ -
- + +
From a8327466af416df6d3ceb3ef049826721207a520 Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 10:35:52 -0500 Subject: [PATCH 09/13] set up laptop view --- src/App.vue | 12 ++++-- src/components/GWL.vue | 91 ++++++++++++++++++++++++++++-------------- 2 files changed, 69 insertions(+), 34 deletions(-) diff --git a/src/App.vue b/src/App.vue index 5c23cfe..e3da04a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -99,7 +99,10 @@ h2{ font-weight: 700; @media screen and (max-width: 800px) { font-size: 2rem; - } + } + @media screen and (max-height: 770px) { + font-size: 2em; + } @media screen and (max-width: 650px) { font-size: 1.3em; } @@ -109,10 +112,13 @@ h3{ //padding-top: 0.5em; @media screen and (max-width: 800px) { font-size: 1.3em; - } + } + @media screen and (max-height: 770px) { + font-size: 1.25em; + } @media screen and (max-width: 650px) { font-size: 1em; - } + } } h4{ font-size: 1.2em; diff --git a/src/components/GWL.vue b/src/components/GWL.vue index cde1649..86726d7 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -718,27 +718,49 @@ section { "line line" "text text"; } - + + @media screen and (max-height: 770px) { + grid-template-columns: 10vw 0.6fr 1.25fr; + grid-template-rows: max-content; + grid-template-areas: + "title title map" + "button legend map" + "line line map" + "text text text"; + } + @media screen and (max-width: 600px) { + grid-template-columns: 1fr; + grid-template-areas: + "title" + "map" + "legend" + "button" + "line" + "text"; + } } -#map-container { +#map_gwl { grid-area: map; +} +#map-label-container { + grid-area: map; +} +.map-container { + align-self: center; +} +.map { + max-height: 68vh; + max-width: 98vw; + width: 100%; + height: 100%; padding: 0rem; padding-bottom: 0px; margin-top: 0.5rem; display: flex; - justify-content: center; - align-items: center; - svg.map { - max-height: 68vh; - max-width: 98vw; - width: 100%; - height: 100%; - } - svg.map.labels { - position: absolute; + @media screen and (max-height: 770px) { + max-height: 100vh; } } - #line-container { grid-area: line; width: 100%; @@ -753,15 +775,13 @@ section { #legend-container { grid-area: legend; width: 100%; - margin: auto; - margin-bottom: 1rem; + margin: 1rem 0 1rem 0; justify-content: center; max-width: 550px; - align-self: right; + align-self: center; justify-self: start; svg{ max-width: 550px; - margin: auto; align-self: start; justify-self: start; overflow: visible; @@ -780,9 +800,8 @@ section { grid-area: title; width: 100%; max-width: 700px; - height: auto; - margin: auto; - align-items: start; + align-self: start; + justify-self: center; h1, h2{ margin-top: 1rem; } @@ -799,14 +818,16 @@ section { } #button-container { grid-area: button; - width: 100%; - max-width: 700px; - height: auto; - min-height: 40px; - margin: auto; - margin-bottom: 1rem; + margin: 1rem 0 1rem 0; + align-self: center; justify-content: space-evenly; position: relative; + @media screen and (max-height: 770px) { + margin: 0.5rem 0 0.5rem 0; + } + @media screen and (min-width: 551px) { + justify-self: center; + } } .text-content { margin: 0.5rem auto; @@ -845,6 +866,9 @@ section { @media screen and (max-width: 550px) { font-size: 16px; } + @media screen and (max-height: 770px) { + font-size: 0.8rem; + } } button { @@ -856,7 +880,10 @@ button { align-items: center; box-sizing: border-box; padding: 1rem 4px; - margin: 0rem 1rem;; + margin: 0rem 1rem; + @media screen and (max-height: 770px) { + margin: 0.25rem 1rem; + } } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; @@ -896,11 +923,13 @@ text.legend-label { stroke-width: 2px; } #spacer { - display: flex; - justify-content: center; @media screen and (min-width: 551px) { - justify-content: end; - } + justify-content: end; + } + @media screen and (max-width: 650px) { + display: flex; + justify-content: center; + } } #vizlab-wordmark { max-width: 200px; From c6e590d745e24d948e62a0c6f669208a89796ee0 Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 11:06:11 -0500 Subject: [PATCH 10/13] Set up file access for beta site --- 3_visualize.yml | 16 +++++++++++- lib/cfg/s3_config_viz_beta.yml | 3 +++ src/components/GWL.vue | 26 ++++++++++++++----- ...-conditions-daily-proportions-beta.csv.ind | 2 ++ ...w-conditions-peaks-timeseries-beta.csv.ind | 2 ++ .../gw-conditions-site-coords-beta.csv.ind | 2 ++ .../gw-conditions-time-labels-beta.csv.ind | 2 ++ 7 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 lib/cfg/s3_config_viz_beta.yml create mode 100644 visualizations/data/gw-conditions-daily-proportions-beta.csv.ind create mode 100644 visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind create mode 100644 visualizations/data/gw-conditions-site-coords-beta.csv.ind create mode 100644 visualizations/data/gw-conditions-time-labels-beta.csv.ind diff --git a/3_visualize.yml b/3_visualize.yml index 077d11c..24faa25 100644 --- a/3_visualize.yml +++ b/3_visualize.yml @@ -75,8 +75,22 @@ targets: visualizations/data/gw-conditions-daily-proportions.csv.ind: command: s3_put(target_name, '3_visualize/out/gw-conditions-daily-proportions.csv', config_file = I('lib/cfg/s3_config_viz.yml')) + # MUST BE RUN MANUALLY, AS UPLOADING FILES UPDATES THE BETA SITE + # Upload to Prod (beta bucket) a copy of the timeseries, daily proportions, site coords, and time labels to use on the beta site + visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-peaks-timeseries.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-daily-proportions-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-daily-proportions.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-site-coords-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-site-coords.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-time-labels-beta.csv.ind: + command: s3_put(target_name, '2_process/out/gw-conditions-time-labels.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + # MUST BE RUN MANUALLY, AS UPLOADING FILES UPDATES THE LIVE SITE - # Upload to Prod a copy of the timeseries, daily proportions, site coords, and time labels to use on the live site + # Upload to Prod (prod bucket) a copy of the timeseries, daily proportions, site coords, and time labels to use on the live site visualizations/data/gw-conditions-peaks-timeseries-live.csv.ind: command: s3_put(target_name, '3_visualize/out/gw-conditions-peaks-timeseries.csv', config_file = I('lib/cfg/s3_config_viz.yml')) diff --git a/lib/cfg/s3_config_viz_beta.yml b/lib/cfg/s3_config_viz_beta.yml new file mode 100644 index 0000000..2183239 --- /dev/null +++ b/lib/cfg/s3_config_viz_beta.yml @@ -0,0 +1,3 @@ +profile: 'default' + +bucket: 'water-visualizations-beta-website' diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 86726d7..db98600 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -157,6 +157,7 @@ export default { return { publicPath: process.env.BASE_URL, // this is need for the data files in the public folder, this allows the application to find the files when on different deployment roots vueTier: process.env.VUE_APP_TIER, // this is used to determine the file path suffix for data files + dataUrlPrefix: null, dataFileSuffix: null, d3: null, mobileView: isMobile, // test for mobile @@ -199,8 +200,21 @@ export default { } }, mounted(){ - this.dataFileSuffix = this.vueTier == '' ? '-live' : '' // In the prod site we want to use the '-live' files. These are uploaded manually, to hold off updating the live site until we are ready - console.log(`vue tier: ${this.vueTier}, suffix: ${this.dataFileSuffix}`) + // In the prod site we want to use the '-live' files. + // In the beta site we want to use the '-beta' files. + // These are uploaded manually, to hold off updating the beta or live site until we are ready + switch(this.vueTier) { + case '-test build-': + this.dataFileSuffix = ''; + break; + case '-beta build-': + this.dataFileSuffix = '-beta'; + break; + default: + this.dataFileSuffix = '-live'; + } + // The beta site needs to access the data files in the beta bucket on prod + this.dataUrlPrefix = this.vueTier == '-beta build-' ? '-beta' : '' this.d3 = Object.assign({d3Trans, scaleLinear, scaleThreshold, scaleOrdinal, select, selectAll, csv, utcFormat, line, path, axisBottom, axisLeft, format }); // resize @@ -229,10 +243,10 @@ export default { // read in data let promises = [ self.d3.csv(self.publicPath + "quant_peaks.csv", this.d3.autotype), // used to draw legend shapes - color palette needs to be pulled out - self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries${self.dataFileSuffix}.csv`, this.d3.autotype), - self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords${self.dataFileSuffix}.csv`, this.d3.autotype), - self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions${self.dataFileSuffix}.csv`, this.d3.autotype), - self.d3.csv(`https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels${self.dataFileSuffix}.csv`, this.d3.autotype), ]; Promise.all(promises).then(self.callback); // once it's loaded }, diff --git a/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind b/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind new file mode 100644 index 0000000..ffd34c4 --- /dev/null +++ b/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind @@ -0,0 +1,2 @@ +hash: 5d9d05238386e4f818f4d6f1ca051bc7 + diff --git a/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind b/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind new file mode 100644 index 0000000..721ae77 --- /dev/null +++ b/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind @@ -0,0 +1,2 @@ +hash: 15f470784c897971afd9c7a7f63366b2 + diff --git a/visualizations/data/gw-conditions-site-coords-beta.csv.ind b/visualizations/data/gw-conditions-site-coords-beta.csv.ind new file mode 100644 index 0000000..e92e73d --- /dev/null +++ b/visualizations/data/gw-conditions-site-coords-beta.csv.ind @@ -0,0 +1,2 @@ +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 + diff --git a/visualizations/data/gw-conditions-time-labels-beta.csv.ind b/visualizations/data/gw-conditions-time-labels-beta.csv.ind new file mode 100644 index 0000000..07e57f5 --- /dev/null +++ b/visualizations/data/gw-conditions-time-labels-beta.csv.ind @@ -0,0 +1,2 @@ +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea + From c864d519b1c5b335b7cc0a3ac53b726e30c2d406 Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 11:09:09 -0500 Subject: [PATCH 11/13] give linechart more space in laptop view --- src/components/GWL.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index db98600..9aaa17f 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -734,7 +734,7 @@ section { } @media screen and (max-height: 770px) { - grid-template-columns: 10vw 0.6fr 1.25fr; + grid-template-columns: 10vw 0.75fr 1.25fr; grid-template-rows: max-content; grid-template-areas: "title title map" From a7b8bea49bc15a9613039a42d9022ced71bcd73c Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 11:17:53 -0500 Subject: [PATCH 12/13] Match button and legend grid alignment to current site --- src/components/GWL.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 9aaa17f..3d50b65 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -793,7 +793,7 @@ section { justify-content: center; max-width: 550px; align-self: center; - justify-self: start; + justify-self: center; svg{ max-width: 550px; align-self: start; @@ -836,11 +836,12 @@ section { align-self: center; justify-content: space-evenly; position: relative; + @media screen and (min-width: 551px) { + justify-self: end; + } @media screen and (max-height: 770px) { margin: 0.5rem 0 0.5rem 0; - } - @media screen and (min-width: 551px) { - justify-self: center; + justify-self: start; } } .text-content { From 54eac695c4ed44d44a0f7933733869ac2e90059f Mon Sep 17 00:00:00 2001 From: Corson-Dosch Date: Fri, 31 May 2024 11:54:13 -0500 Subject: [PATCH 13/13] simplify laptop layout --- src/components/GWL.vue | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 3d50b65..927d24a 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -359,7 +359,7 @@ export default { }, formatDates(dates){ - this.formatTime = this.d3.utcFormat("%b %e, %Y"); + this.formatTime = this.d3.utcFormat("%B %e, %Y"); this.date_start = this.formatTime(new Date(dates[0])); this.date_end = this.formatTime(new Date(dates[this.n_days-1])); @@ -734,13 +734,21 @@ section { } @media screen and (max-height: 770px) { - grid-template-columns: 10vw 0.75fr 1.25fr; + grid-template-columns: 15% 35% 50%; grid-template-rows: max-content; grid-template-areas: - "title title map" - "button legend map" - "line line map" + "title map map" + "null map map" + "button button legend" + "line line line" "text text text"; + // grid-template-columns: 10vw 0.75fr 1.25fr; + // grid-template-rows: max-content; + // grid-template-areas: + // "title title map" + // "button legend map" + // "line line map" + // "text text text"; } @media screen and (max-width: 600px) { grid-template-columns: 1fr; @@ -840,8 +848,7 @@ section { justify-self: end; } @media screen and (max-height: 770px) { - margin: 0.5rem 0 0.5rem 0; - justify-self: start; + justify-self: center; } } .text-content { @@ -881,10 +888,6 @@ section { @media screen and (max-width: 550px) { font-size: 16px; } - @media screen and (max-height: 770px) { - font-size: 0.8rem; - } - } button { appearance: auto; @@ -896,9 +899,6 @@ button { box-sizing: border-box; padding: 1rem 4px; margin: 0rem 1rem; - @media screen and (max-height: 770px) { - margin: 0.25rem 1rem; - } } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button;