Résultats agrégés à la commune

dbC = DuckDBClient.of({
  referentiel_geographique : FileAttachment("data/referentiel_geographique.csv"),
  donnees_combined : FileAttachment("data/donnees_combined.csv"),
  dico_des_indicateurs : FileAttachment("data/dico_des_indicateurs.csv")
})

communes_listV = dbC.sql`SELECT distinct insee as value, commune as label
                         FROM referentiel_geographique order by 2 asc
                         `

Inputs_VirtualSelect = (options) => {
  const div = html`<div>`;  

  VirtualSelect.init({
    ele: div,
    ...options
  });

  div.addEventListener("change", function () {
    // div.value = this.value;
    // choix de prendre mettre value et label en propriété d'objet plutôt que juste value
    div.value = {
      value : this.value,
      label : this.getDisplayValue()
    };
    div.dispatchEvent(new Event("input"));
  });
  /* Besoin si on met pas body en wrapper dans les options du virtual select...
  requestAnimationFrame(() => {
    const parentCell = div.closest('.cell-output.cell-output-display');
    if (parentCell) {
      parentCell.classList.remove("cell-output-display"); // Supprime la classe gênante
    }
  });
  */
  return div;
}

Veuillez sélectionner une commune

viewof selectedCommune = Inputs_VirtualSelect({
  search:true,
  multiple:false,
  dropboxWrapper: "body", // indispensable dans quarto
  hideClearButton: true,
  placeholder:'Veuillez sélectionner une commune',
  options: communes_listV,
  autoSelectFirstOption: true,
  //selectedValue:"50003",
  maxWidth: "100%"
})

// selectedCommune.value
// selectedCommune.value +'_'+selectedCommune.label

Carte communale et chiffres clefs

res_indicateurs_commune = dbC.sql`
  SELECT 
  --id, echelle, 
  --indicateur,
  libcourt as indicateur,
  liblong,
  valeur,
  thematique,
  retenu_portail_numerique
  FROM donnees_combined
    left join dico_des_indicateurs on indicateur = libcourt
  WHERE echelle='multi_recoquartiers_communes' and retenu_portail_numerique
  and id=${selectedCommune.value}
`

//Inputs.table(res_indicateurs_commune)

nb_q_commune = dbC.sql`SELECT insee, commune, insee||'_'||commune as insee_commune, count(id) as nb_q
  FROM referentiel_geographique 
  WHERE insee=${selectedCommune.value}
  group by 1,2,3
  `
//nb_q_commune

md`
**${nb_q_commune[0].nb_q>1 ? nb_q_commune[0].nb_q+' quartiers' : nb_q_commune[0].nb_q+' quartier'} de la reconstruction**  

**${res_indicateurs_commune.filter(d=>d.indicateur=='nb_batiment_reco').map(d=>d.valeur)[0]} bâtiments de la reconstruction**  

**${res_indicateurs_commune.filter(d=>d.indicateur=='somme_nlogh_reco').map(d=>d.valeur)[0]} logements de la reconstruction**  
`

imgUrl = `images/cartes/${selectedCommune.value+'_'+selectedCommune.label}.png`;
imageContainer = document.getElementById('imageContainer');

// Utilise innerHTML pour insérer le code HTML avec l'image
imageContainer.innerHTML = `<img src="${imgUrl}" class="img-fluid quarto-figure quarto-figure-center figure-img"  alt="${selectedCommune.insee_commune}">`;

Détail des indicateurs (ensemble des quartiers de la reconstruction de la commune)

md`
## <i class="bi bi-buildings"></i>  Bâtiment`

Inputs.table(res_indicateurs_commune.filter(d=>d.thematique=='Bâtiment' && d.retenu_portail_numerique), {
  columns: ["liblong","valeur"],
  header: {liblong: "Indicateur",valeur: "Valeur"},
  width: {valeur: 100},
  rows: 50,
  maxWidth: 1000,
  multiple: false,
  layout: "fixed"
})

md`## <i class="bi bi-house-heart"></i>  Habitat`

Inputs.table(res_indicateurs_commune.filter(d=>d.thematique=='Habitat' && d.retenu_portail_numerique), {
  columns: ["liblong","valeur"],
  header: {liblong: "Indicateur",valeur: "Valeur"},
  width: {valeur: 100},
  rows: 50,
  maxWidth: 1000,
  multiple: false,
  layout: "fixed"
})

md`## <i class="bi bi-person-arms-up"></i>  Socio-économique`

Inputs.table(res_indicateurs_commune.filter(d=>d.thematique=='Socio-économique' && d.retenu_portail_numerique), {
  columns: ["liblong","valeur"],
  header: {liblong: "Indicateur",valeur: "Valeur"},
  width: {valeur: 100},
  rows: 50,
  maxWidth: 1000,
  multiple: false,
  layout: "fixed"
})

md`## <i class="bi bi-tree"></i>  Nature en ville et cadre de vie`

Inputs.table(res_indicateurs_commune.filter(d=>d.thematique=='Nature en ville et cadre de vie' && d.retenu_portail_numerique), {
  columns: ["liblong","valeur"],
  header: {liblong: "Indicateur",valeur: "Valeur"},
  width: {valeur: 100},
  rows: 50,
  maxWidth: 1000,
  multiple: false,
  layout: "fixed"
})

md`## <i class="bi bi-gear"></i>  Autre`

Inputs.table(res_indicateurs_commune.filter(d=>d.thematique=='Sans objet' && d.retenu_portail_numerique), {
  columns: ["liblong","valeur"],
  header: {liblong: "Indicateur",valeur: "Valeur"},
  width: {valeur: 150},
  rows: 50,
  maxWidth: 1000,
  multiple: false,
  layout: "fixed"
})

html`
  <style>
    .observablehq td, .observablehq th {
      white-space: normal;
      word-break: break-word;
    }
  </style>
`