Elementos HTML utilizando tags$... en R Markdown

library(htmltools)

Contenido

1. tags$label
2. tags$button
3. tags$div para construir un slider
4. Construcción de tablas en HTML
5. Construccion de contenedores en HTML con tags$div
6. Creación de gráfico en Highcharts utilizando JS

---

1. Ejemplo : tags$label

Código

tags$label("Esta es una etiqueta creada con tags$label", 
           style="font-weight:bold; font-size:16px;color:white;background-color: #316094;")

Esta es una etiqueta creada con tags$label

---

2. Ejemplo: tags$button

Código

tags$button("Clic aquí",
            id = "btnDemo1",
            style="background-color: #316094; /* Green */
                    border: 1px;
                    color: white;
                    padding: 5px 10px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 12px;
                    position:relative;
                    border-radius: 4px;
                    width: 15%;
                    left:1%;
                    margin-top: 1px;")

Clic aquí

JS

document.addEventListener("DOMContentLoaded", function(){
  const btn = document.getElementById("btnDemo1");
  if(btn){
    btn.addEventListener("click", ()=>{
      alert("Botón presionado desde HTML generado con tags$button()");
    });
  }
});

---

3. Ejemplo tags$div (para crear un slider)

Código

tags$div(
  tags$label("Seleccione un valor:", `for`="slider1"),
  tags$input(type="range", id="slider1", min=0, max=100, value=50, 
             style="width:300px;"),
  tags$span("texto",id="sliderValue", style="margin-top:10px; font-weight:normal;color:white;background: #316094;border-radius: 4px;")
)

Seleccione un valor: texto

JS

document.addEventListener("DOMContentLoaded", function(){
  const slider = document.getElementById("slider1");
  const out = document.getElementById("sliderValue");
  if(slider && out){
    out.textContent = slider.value;
    slider.oninput = function(){ out.textContent = slider.value; };
  }
});

---

4. Construcción de una tabla HTML manual con tags$table, tags$tr, tags$td

Vamos a construir una tabla totalmente personalizada.

Código

tabla <- tags$table(
  style="border-collapse:collapse; width:50%;",
  tags$thead(
    tags$tr(
      tags$th("Producto", style="border:1px solid #ccc; padding:6px; background:#f5f5f5;"),
      tags$th("Ventas", style="border:1px solid #ccc; padding:6px; background:#f5f5f5;")
    )
  ),
  tags$tbody(
    tags$tr(
      tags$td("A", style="border:1px solid #ccc; padding:6px;"),
      tags$td("120", style="border:1px solid #ccc; padding:6px;")
    ),
    tags$tr(
      tags$td("B", style="border:1px solid #ccc; padding:6px;"),
      tags$td("340", style="border:1px solid #ccc; padding:6px;")
    ),
    tags$tr(
      tags$td("C", style="border:1px solid #ccc; padding:6px;"),
      tags$td("230", style="border:1px solid #ccc; padding:6px;")
    )
  )
)
tabla

Producto	Ventas
A	120
B	340
C	230

5. Construcción de contenedores en HTML con tags$div

library(highcharter)

## Registered S3 method overwritten by 'quantmod':
##   method            from
##   as.zoo.data.frame zoo

tags$style(HTML("
  .grid-container { display: grid; grid-template-columns: 75% 24%;height:100%;
    border: 4px dashed orange !important; }
  .grafico-container {height: 270px;color:red; border: 2px solid red !important; }
  .controles-container { height: 250px;color:blue; border: 2px solid blue !important; }
"))

tags$div(class = "grid-container",
  tags$div(id = "id_contenedor_grafico",class = "grafico-container",
           tags$label("Aquí va el gráfico")),
  tags$div(id = "id_contenedor_controles",class = "controles-container",
    tags$label("Aquí van los controles")
  )
)

Aquí va el gráfico

Aquí van los controles

6. Creación de gráfico en Highcharts

Contenedor del gráfico

tags$div(highchartOutput('id_plot'))

Código en JS

Highcharts.chart('id_plot', {
  //chart: { type: 'column' },
  title: { text: 'Producción promedio diaria' },
  subtitle: { text: 'Año 2025' },
  yAxis:{ title: { text: 'Millones de barriles'}},
  xAxis: { 
    categories: ['ene-25', 'feb-25', 'mar-25', 'abr-25', 'may-25','jun-25','jul-25','ago-25','sep-25']
  },
  
  series: [{
    name: 'Petroecuador',
    data: [378, 374, 362, 374, 369,371,110,369,373],
    type:'column',
    color:'#1E4976'
  }, {
    name: 'Privadas',
    data: [96, 95, 88,97, 96, 96,37,98,96],
    type:'column',
    color:'#BBBE64'
  }]
});