index.rmd

---
title: Proyecto Monitoreo GISTAQ 2020
author: Víctor Gauto
output: 
  html_document:
    includes:
      in_header: extras/header.html
email_address: victor.gauto@outlook.com
github_repo: https://github.com/vhgauto/sameep
---

<!-- ubuntu -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
</style>

<!-- victor -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Victor+Mono:wght@100&display=swap');
</style>

<!-- fontawesome -->
```{css echo = FALSE}
@font-face {
    font-family: fa-brands;
    src: url(extras/fa-brands-400.ttf);
}
```

<!-- ubicación de los elementos en el html -->
```{css echo = FALSE}
.author, .title {
    display: none;
}

.main-container {
    max-width: 50%;
}

body {
    background-color: #FAFAFA;
    color: black;
    font-size: 1.2vw;
}

```

```{r setup, include=FALSE} 
knitr::opts_chunk$set(warning = FALSE, message = FALSE, fig.align = "center")
```

```{r echo = FALSE, message = FALSE}

# paquetes
library(lubridate)
library(ggtext)
library(glue)
# library(plotly)
library(ggiraph)
library(tidyverse)

# tema general de las figuras
theme_set(theme_bw())

# datos SAMEEP, solo me interesa turbidez (NTU)
sameep_tidy <- read_tsv("datos/sameep_historicos.tsv") |>
  filter(param == "turbidez") |>
  select(-param, fecha, turb = valor)

# datos GIS, obtenidos de GEE
# https://code.earthengine.google.com/?scriptPath=users%2Fvhgauto%2FGISTAQ%3Asameep_historico
gee <- read_tsv("datos/base_de_datos_gis.tsv")

# acomodo los datos, columnas -> bandas/turb/fecha
gee_tidy <- gee |>
  pivot_wider(names_from = banda, values_from = reflec) |>
  unnest(cols = everything())

# máx eje vertical
turb_m <- max(sameep_tidy$turb) |> round(digits = -2)

# máx eje horizontal
fecha_m <- max(gee_tidy$fecha) |> ceiling_date(unit = "month")

# creo la carpeta para almacenar la firma espectral
dir.create("figuras")

# base de datos de turb estimados
t_p2 <- read_tsv("datos/turb_pred.tsv")

fecha_turb <- read_tsv("datos/datos_nuevos.tsv") |>
  distinct(fecha) |>
  pull(fecha)

# último dato turb estimado
dato_turb2 <- t_p2 |>
  filter(fecha == fecha_turb) |>
  mutate(l = format(round(.pred, 1), nsmall = 1)) |>
  mutate(l = sub(pattern = "\\.", replacement = ",", x = l)) |>
  pull(l)

# FIGURA
t_p3 <- t_p2 |>
  mutate(
    p = format(round(.pred, 1), nsmall = 1) |>
      as.character() |>
      sub("\\.", ",", x = _)
    ) |>  # nolint
  mutate(texto = glue("{p} NTU<br>{format(fecha, '%d/%m/%Y')}"))

# límite eje vertical máximo
t1 <- max(t_p3$.pred) - max(t_p3$.pred) %% 100 + 100
# límite eje horizontal máximo, fecha más actual
fe2 <- ceiling_date(max(t_p3$fecha), "month")
# límite eje horizontal mínimo, dos años previos a la fecha actual
fe1 <- floor_date(fe2 - years(1), "month")
# fecha y hora de la figura
fyh <- glue(
  "{format(now(tzone = 'America/Argentina/Buenos_Aires'), '%d/%m/%Y %T')}")

mes_p <- c(
  "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep",
  "Oct", "Nov", "Dic")

eje_x_fecha <- tibble(rango = seq.Date(fe1, fe2, "1 month")) |>
  mutate(anio = year(rango)) |>
  group_by(anio) |>
  mutate(anio1 = if_else(row_number() == 1, as.character(anio), "")) |>
  mutate(mes = month(rango)) |>
  mutate(mes_p = mes_p[mes]) |>
  mutate(lab = glue("{mes_p}\n{anio1}")) |>
  pull(lab)

# figura
# g1 <- ggplot(data = t_p3, aes(x = fecha, y = .pred)) +
#   # tendencia
#   stat_smooth(
#     geom = "line", alpha = .8, color = "steelblue",
#     se = FALSE, lineend = "round", formula = y ~ x,
#     method = "loess", linewidth = 2) +
#   # puntos
#   geom_point(
#     color = "#FC8D59", size = 2, alpha = .8, shape = 19, aes(text = texto)) +
#   # manual
#   scale_x_continuous(
#     breaks = seq.Date(fe1, fe2, "1 month"), labels = eje_x_fecha,
#     expand = c(0, 0)) +
#   scale_y_continuous(
#     limits = c(0, t1), expand = c(0, 0), breaks = seq(0, t1, 100)) +
#   # ejes
#   labs(
#     y = "Turbidez (NTU)",
#     x = NULL,
#     color = NULL)+
#   coord_cartesian(xlim = c(fe1, fe2)) +
#   theme_classic() +
#   theme(
#     aspect.ratio = 1,
#     axis.text = element_text(
#       color = "black", family = "victor", margin = margin(0, 2, 0,20), 
#       size = 10, hjust = .5),
#     axis.title.y = element_text(
#       size = 16, margin = margin(0, 40, 0, 0)),
#     axis.ticks = element_line(),
#     panel.grid.major = element_line(linewidth = .1, color = "lightgrey"),
#     panel.background = element_rect(fill = "ivory"),
#     plot.margin = margin(25, 5, 60, 5),
#     plot.background = element_rect(fill = NA)
#   )

g1 <- ggplot(
  data = filter(t_p3, between(fecha, fe1, fe2)), 
  aes(x = fecha, y = .pred)) +
  # tendencia
  stat_smooth(
    geom = "line", alpha = .6, color = "steelblue",
    se = FALSE, lineend = "round", formula = y ~ x,
    method = "loess", linewidth = 2) +
  # puntos
  geom_point_interactive(
    aes(tooltip = texto, data_id = texto),
    color = "#FC8D59", size = 2.5, alpha = .8, shape = 19, hover_nearest = TRUE) +
  # manual
  scale_x_continuous(
    breaks = seq.Date(fe1, fe2, "1 month"), labels = eje_x_fecha,
    expand = c(0, 0)) +
  scale_y_continuous(
    limits = c(0, t1), expand = c(0, 0), breaks = seq(0, t1, 100)) +
  # ejes
  labs(
    y = "Turbidez (NTU)",
    x = NULL,
    color = NULL)+
  coord_cartesian(xlim = c(fe1, fe2)) +
  theme_void() +
  theme(
    aspect.ratio = .6,
    axis.text = element_text(
      color = "black", family = "Victor Mono", margin = margin(0, 2, 0,20), 
      size = 10, hjust = .5),
    axis.text.x = element_text(margin = margin(t = 8)),
    axis.text.y = element_text(vjust = 0),
    axis.title.y = element_text(
      size = 16, margin = margin(0, 0, 0, 0), angle = 90, family = "Ubuntu"),
    # axis.ticks = element_line(),
    panel.grid.major = element_line(linewidth = .1, color = "lightgrey"),
    # panel.background = element_rect(fill = "ivory"),
    plot.margin = margin(t = 0, r = 10, b = 0, l = 0),
    plot.background = element_rect(fill = "#FAFAFA", color = NA)
  )
```

```{r, echo=FALSE}

# https://plotly.com/r/axes/

# construyo figura interactiva
# gp <- ggplotly(g1, tooltip = "text") |>
#   layout(
#     height = 500,
#     hoverlabel = list(
#       bgcolor = "ivory",
#       bordercolor = "#FC8D59",
#       font = list(color = "steelblue", size = 14, family = "Ubuntu")),
#     xaxis = list(
#       fixedrange = TRUE,
#       tickfont = list(family = "Victor Mono", size = 17)),
#     yaxis = list(
#       fixedrange = TRUE,
#       tickfont = list(family = "Victor Mono", size = 17),
#       title = list(
#         font = list(size = 22, family = "Ubuntu"),
#         standoff = 25))
#   ) |>
#   # remuevo los controles
#   config(displayModeBar = FALSE)

gp <- girafe(
  ggobj = g1,
  bg = "#FAFAFA",
  options = list(
    opts_hover(css = girafe_css(
      css = glue("fill:#FC8D59;stroke:steelblue")
      # text = glue("fill:gold;stroke:none")
    )),
    opts_tooltip(
      opacity = 1,
      css = glue(
        "background-color:#FAFAFA;color:steelblue;padding:5px;font-family:Ubuntu;",
        "font-size:15pt;border-radius:0px;border-style:solid;border-color:#FC8D59"),
      use_cursor_pos = TRUE,
      offx = 20,
      offy = 20),
    opts_sizing(width = 1, rescale = TRUE),
    opts_toolbar = opts_toolbar(saveaspng = FALSE),
    opts_hover_inv(css = "opacity:0.6;")
  ))
```

<br>
<!-- última estimación de turbidez ddisponible -->
<center style="font-size:3em; font-family: Ubuntu;">Turbidez = `r dato_turb2` NTU</center>

<!-- pequeño espacio entre líneas -->
<center style="font-size:.1em;"><br></center>

<!-- fecha -->
<center style="font-size:.8em; color:grey; font-family: Victor Mono;">`r format(fecha_turb, "%d/%m/%Y")`</center>

<br>

<center style='font-family: Ubuntu'>Estimación de <span style='color:steelblue'>turbidez</span> del agua en el ingreso a <b>La Toma</b></center>

<!-- figura interactiva -->
`r gp`

<!-- pequeño espacio entre líneas -->
<!-- <p style="font-size:.1em;"><br></p> -->

<p style="text-align:Right; font-size:.75em; font-family: Ubuntu;">
Los <b style='color:#FC8D59'> puntos</b> indican los valores individuales estimados.
<br>
La <b style='color:steelblue'>línea</b> muestra la tendencia global.
</p>

:::: {.columns}

<!-- <br>
<br> -->
<br>

::: {.column width="70%"}

<p style='font-size:.8em; color:grey; font-family: Victor Mono;'>`r format(now(tzone = "America/Argentina/Buenos_Aires"), "%d/%m/%Y %T")`</p>

[<span style='font-family: Ubuntu; color: black'>Ver en</span> <span style='font-family: fa-brands; color: black'>&#xf09b;</span>](`r rmarkdown::metadata$github_repo`){target="_blank"}
:::

::: {.column width="10%"}

:::

::: {.column width="20%"}

[![](extras/gistaq_logo.png)](https://www.instagram.com/gistaq.utn/){fig-align="right" height=10% target="_blank"}

:::

::::