Analyse des loueurs meublés non professionnel

grid = await html`<div style="
              background: #fff;
              margin: 10;
              border: none ;
              display: grid;
              width: ${screen.width};
              grid-template-areas:
                'a b'
                'c c'
                'd d'
                ;
              grid-gap: 10px;
            ">
              <div name="a" style="grid-area: a; position: relative;">${viewof Seuil}</div>
              <div name="b" style="grid-area: b; position: relative;">${viewof selection}</div>
              <div name="c" style="grid-area: c; position: relative;">${viewof var_annexes}</div>
              <div name="d" style="grid-area: d; position: relative;">${viewof table_data}</div>
            </div>`

viewof Seuil = Inputs.range([0, 1], {label: "Seuil choisi", step: 0.01, value: 0.8})

viewof selection = Inputs.select(["Tous", "Bonnes prédictions", "Erreurs reprises", "Erreurs problématiques"], {label: "Résultats des LMNP"})

viewof var_annexes = Inputs.toggle({label: "Variables annexes", values: [true, false]})

viewof table_data = Inputs.table(selector(transpose(data_lmnp), selection), {
    rows: 17,
    columns: var_annexes
  ? ["text_description", "type_", "Prédiction", "Score", "nature", "surface", "event"]
  : ["text_description", "type_", "Prédiction", "Score"],
  header: {
    text_description: "Libellé",
    type_: "Type",
    nature: "Nature",
    surface: "Surface",
    event : "Évènement"
  }, 
  format: {
    "Score": d => get_background(d)
  }
})

function get_background(d) {
    const color = d > Seuil ? "#19975d" : "#f15060"

  
  return html`<div style="
    background: ${color.toLocaleString("en")};
    width: 95%;
    float: center;
    border-radius:15px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto; /* Center the div horizontally */
    text-align: center; /* Center the text within the div */
    ">
    ${Math.round(d * 10000) / 10000}`;
}

function selector(data, selector) {
    let b;
    switch (selector) {
        case "Tous":
            b = data;
        case "Bonnes prédictions":
            b = data.filter(d => d.Error === false);
            break;
        case "Erreurs reprises":
            b = data.filter(d => d.Error === true && d.Score <= Seuil);
            break;
        case "Erreurs problématiques":
            b = data.filter(d => d.Error === true && d.Score > Seuil);
            break;
        default:
            break;
    }
    return b;
}

import {slider} from "@jashkenas/inputs"