html`<h1>${paragraph01.map(d => d.title)[0]}</h1>
<p class="sidebar-text">${paragraph01.map(d => d.paragraph)[0]}</p>`

viewof lang = Inputs.radio(["Suomi", "Svenska"], {
  label: "Valitse kieli / Välj språk",
  value: "Suomi"})

value_lang = lang == "Suomi" ? 'fi' : 'sv';

// Valinnat
html`<h2 class="h3 sidebar-h">${paragraph01.map(d => d.valinnat)[0]}</h2>`

trans_menu_etuus = [
  {
    "lang": "fi",
    "label": "Valitse etuus"
  },
  {
    "lang": "sv",
    "label": "Välj förmån"
  }
]

labeli_etuudet = [... new Set(trans_menu_etuus.filter(d => d.lang == value_lang).map(x=>x.label))]

viewof etuus_selected = Inputs.select(map_etuus, {
  value: all_etuudet[0], 
  label: labeli_etuudet, 
  width: 150,})  

// Indikaattorin valinta
trans_menu_indi = [
  {
    "lang": "fi",
    "label": "Valitse indikaattori"
  },
  {
    "lang": "sv",
    "label": "Välj indikator"
  }
] 
 
 labeli_indikaattori = [... new Set(trans_menu_indi.filter(d => d.lang == value_lang).map(x=>x.label))]
 
 viewof indi_selected = Inputs.select(map_indi, {
   label: labeli_indikaattori,
   width: 150,
   multiple: false, 
   value: all_osoitin[1]})  

// Vuoden valinta
trans_menu_vuosi = [
  {
    "lang": "fi",
    "label": "Valitse vuosi"
  },
  {
    "lang": "sv",
    "label": "Välj år"
  }
] 
 
labeli_vuosi = [... new Set(trans_menu_vuosi.filter(d => d.lang == value_lang).map(x=>x.label))]

viewof year = Inputs.select(all_vuosi, {label: labeli_vuosi, value: 2023, width: 150, format: x => d3.format('')(x)})

html`<h2>${lab_etuus} ${paragraph01.map(d => d.title2)[0]} ${year}</h2>
<h3 class="h4">${lab_indi}</h3>`
tolppa = Plot.plot({
  ariaLabel: "Tiedot vaakapylväskuviossa",
  ariaHidden: "True",
  marginLeft: 300, //420,
  marginRight: 150, //210,
  marginTop: 10,
  marginBottom: 110,
  width: 1100,
  height: 1200,
  y: {
    domain: d3.sort(dat_subset_lang, d => -d.arvo).map(d => d[[reg_col]]),
    label: "",
    tickSize: 0,
    padding: 0.15,
  },
    x: {
    //label: lab_indi2,
    label: null,
    grid: false,
    //ticks: width/700,
    ticks: 0,
    tickSize: 0,
    tickPadding: 10,
    nice: true,
    labelOffset: 50,
    labelAnchor: "right",
    tickFormat: locale_FI.format(",")
  },
    color: {
    type: "quantize",
    range: ["#99C9D2","#008ac2","#1652a6","#00265f"],
    legend: false,
  },
    style: {
    fontSize: "1.55em", 
    overflow: "visible"
  },
  marks: [
  //  Plot.gridX({
  //    stroke: "#999",
  //    strokeOpacity: 1
  //  }),
    Plot.barX(dat_subset_lang, {
      x: "arvo", 
      y: reg_col, 
      title: (d) => d[[reg_col]] + "\n" + locale_FI.format(muotoilu)(d.arvo) + " " + lab_indi2,
      fill: (d) => d.arvo,
      inset: 0.5,
      //fontSize: ".6em",
    }),
     Plot.text(dat_subset_lang, {
      x: "arvo",
      y: reg_col,
      text: (d) => locale_FI.format(muotoilu)(d.arvo),
      textAnchor: "start",
      dx: 5,
      fill: "black"
    }),
  ]
})

// Karttakuva
//addTooltips(
kartta = Plot.plot({
  ariaLabel: "Tiedot kartalla",
  //width:,
  height: "900",
  marginLeft: 0,
  marginRight: 0,
  marginTop: 10,
  marginBottom: 30,
  projection: {
  //      ...projection,
    type: "orthographic",
    rotate: [-27, -52],
    domain: geo_taso_hva
  },
  marks: [
    // hva pohjalle
    Plot.geo(geo_taso_hva, 
         {stroke: "#D2D2D2"}),
    Plot.geo(geo_taso_hva, 
         {stroke: "white",
          strokeWidth: 2, 
          fill: (d) => map_values.get(d.properties.region_code),
          title: (d) => d.properties[[reg_col]] + "\n" + locale_FI.format(muotoilu)(map_values.get(d.properties.region_code)) + " " + lab_indi2
         })
         ],
  style: {
    fontFamily: "system-ui",
    overflow: "visible"
  },
    color: {
    type: "quantize",
    range: ["#99C9D2","#008ac2","#1652a6","#00265f"],
    nice: false,
    legend: false,
    label: lab_indi
  }
})

html`
<div class="accordion" id="accordionBottom"  style="padding-right: 2rem">

<!-- TIEDOT TAULUKKOMUODOSSA --> 
  <div class="accordion-item">
    <h3 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTaulukko" aria-expanded="false" aria-controls="collapseTaulukko">
         ${haitari01.map(d => d.taulukko_ots)[0]}
      </button>
    </h3>
    <div id="collapseTaulukko" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionBottom">
      <div class="accordion-body">
     
      <h4>${lab_etuus} ${paragraph01.map(d => d.title2)[0]} ${year}</h4>
      <h5 style="padding-bottom:1.25rem">${lab_indi}</h5>
      <table class="table table-bordered">
       
          <tr>
            <th role="columnheader">${table01.map(d => d.title2)[0]}</th>
            <th role="columnheader" style="text-align:right">${lab_indi2}</th>
          </tr>
       
        <tbody>
            ${d3.sort(dat_subset_lang, d => -d.arvo).map(d => htl.html`<tr>
            <td>${d[[reg_col]]}</td>
            <td align="right">${locale_FI.format(muotoilu)(d["arvo"])}</td>
      
          </tr>`)}
        </tbody>
      </table>
      
      </div>
  </div>

<!-- TALLENNUS --> 
<div class="accordion-item">
    <h3 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTallennus" aria-expanded="false" aria-controls="collapseTallennus">
         ${haitari01.map(d => d.haitari1)[0]}
      </button>
    </h3>
    <div id="collapseTallennus" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionBottom">
      <div class="accordion-body">
       ${csvBtn}
       ${DOM.download(() => serialize(tolppa), doc_name, labeli_tolppa)}
       ${DOM.download(() => serialize(kartta), doc_name, labeli_kartta)}
       <a href="img/slides.pdf">
          <button class="btn btn-quarto">
          ${labeli_slides}
          </button></a>
      </div>
  </div>

<!-- KELASTO-LINKIT -->   
  <div class="accordion-item">
    <h3 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKelasto" aria-expanded="false" aria-controls="collapseKelasto">
         ${haitari01.map(d => d.kelasto_ots1)[0]}
      </button>
    </h3>
    
    <div id="collapseKelasto" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionBottom">
      <div class="accordion-body">

      <!-- Kuvausteksti -->
      <p>${haitari01.map(d => d.kelasto_ots2)[0]}</p>
      
      <!-- Kelasto-raportin otsikko --> 
      <h4>${valitut_linkit[0].kelasto_raportti}</h4>
      
      <!-- Linkit -->
      <ul>${valitut_linkit.map((d) => d.kelasto_hva_linkit.map((e, ind) => htl.html`<li><a href="${d.kelasto_hva_linkit[ind][1]}" target="_blank">
      ${d.kelasto_hva_linkit[ind][0]}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
      </a></li>`))[0]}</ul>
      
      <!-- Kelasto-ohjeet -->
      <h4>${haitari01.map(d => d.kelasto_ohjeet)[0]}</h4>
      
      <ul>
      <li><a href="${haitari01.map(d => d.kelasto_ohje_url)[0]}" target="_blank">${haitari01.map(d => d.kelasto_ohje)[0]}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a></li>
      
      <li><a href="${haitari01.map(d => d.kelasto_cognos_ohje_url)[0]}" target="_blank">${haitari01.map(d => d.kelasto_cognos_ohje)[0]}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a></li>
      </ul>

      </div>
  </div>

 
</div>
`

kelasto_link = "https://raportit.kela.fi/ibi_apps/WFServlet?IBIF_ex=LINKKI&id=64627806"

html`

<div class="bottom-container">

  <h3>${tietotarjotin01.map(d => d.title)[0]}</h3>
  <p>${tietotarjotin01.map(d => d.paragraph)[0]}</p>
  <a class="link link-standalone" href="https://www.tietotarjotin.fi" target="_blank"><span class="link-text">${tietotarjotin01.map(d => d.linktext)[0]}</span><span class="visually-hidden">(avautuu uuteen välilehteen)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a>
  <hr>
  <h4 class="bottom-header">${alueentilannekuva01.map(d => d.title)[0]}</h4>
  <p>${alueentilannekuva01.map(d => d.paragraph)[0]}</p>
  <a class="link link-standalone" href="${alueentilannekuva01.map(d => d.link)[0]}" target="_blank"><span class="link-text">${alueentilannekuva01.map(d => d.linktext)[0]}</span><span class="visually-hidden">(avautuu uuteen välilehteen)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a>
  <hr>
  <h4 class="bottom-header">${kelasto201.map(d => d.title)[0]}</h4>
  <p>${kelasto201.map(d => d.paragraph)[0]}</p>
  <a class="link link-standalone" href="${kelasto201.map(d => d.link)[0]}" target="_blank"><span class="link-text">${kelasto201.map(d => d.linktext)[0]}</span><span class="visually-hidden">(avautuu uuteen välilehteen)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" class="link-type-icon" aria-hidden="true" style="vertical-align:-0.125em;margin-left:0.25em"><path d="M19 13v8H3V5h8m5-3h6v6m-10 4L22 2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a>

</div>

`

reg_col = `region_${value_lang}`
// poistetaan hyvinvointialue etc

trans_menu_lataus = [
  {
    "lang": "fi",
    "label_kartta": "Tallenna kartta (.svg)",
    "label_tolppa": "Tallenna pylväskuvio (.svg)",
    "label_data": "Tallenna data (.csv)",
    "label_slides": "Avaa diasarja (.pdf)"
  },
  {
    "lang": "sv",
    "label_kartta": "Spara kartan  (.svg)",
    "label_tolppa": "Spara stolpdiagrammet (.svg)",
    "label_data": "Spara datan (.csv)",
    "label_slides": "Öppna bildspelet (.pdf)"

  }
] 
 
 labeli_kartta = [... new Set(trans_menu_lataus.filter(d => d.lang == value_lang).map(x=>x.label_kartta))]
 labeli_tolppa = [... new Set(trans_menu_lataus.filter(d => d.lang == value_lang).map(x=>x.label_tolppa))]
 labeli_data = [... new Set(trans_menu_lataus.filter(d => d.lang == value_lang).map(x=>x.label_data))]
 labeli_slides = [... new Set(trans_menu_lataus.filter(d => d.lang == value_lang).map(x=>x.label_slides))]

doc_name = "HVA-tietopaketti" + "_" + etuus_selected + "_" + indi_selected + "_" + year

transl_paragraph = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Hyvinvointialueiden tietopaketti",
    "paragraph": "Kelan etuuksien tilastotietoja hyvinvointialueittain",
    "title2": "hyvinvointialueittain",
    "valinnat": "Valitse tiedot"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "Informationspaket om välfärdsområdena",
    "paragraph": "FPA-förmåner per välfärdsområde",
    "title2": "enligt välfärdsområde",
    "valinnat": "Välj data"
  }
]

paragraph01 = transl_paragraph.filter(d => d.lang == value_lang && d.item == "para1")

transl_haitarit = [
  {
    "lang": "fi",
    "item": "para1",
    "taulukko_ots": "Tiedot taulukkomuodossa",
    "haitari1": "Tietojen tallentaminen",
    "kelasto_ots1": "Kuntakohtaiset tiedot hyvinvointialueittain",
    "kelasto_ots2": "Tilastotietokanta Kelaston kuntakohtaiset tiedot hyvinvointialueittain.",
    "kelasto_ohjeet": "Kelasto-ohjeet",
    "kelasto_ohje": "Kelasto-raporttien käyttöohje",
    "kelasto_ohje_url": "https://tietotarjotin.fi/ohje/2053296/kelasto-raporttien-kayttoohje",
    "kelasto_cognos_ohje": "Kelaston Cognos-raporttien käyttöohje",
    "kelasto_cognos_ohje_url": "https://tietotarjotin.fi/ohje/311701/kelaston-cognos-raporttien-kayttoohje",
    "haitari3": "Saavutettavuusseloste"
  },
  {
    "lang": "sv",
    "item": "para1",
    "taulukko_ots": "Data i tabellformat",
    "haitari1": "Ladda ner filer",
    "kelasto_ots1": "Kommunspecifika uppgifter per välfärdsområde",
    "kelasto_ots2": "Länkar till närmare uppgifter i FPA:s statistikdatabas Kelasto.",
    "kelasto_ohjeet": "Anvisningar för Kelasto",
    "kelasto_ohje": "Bruksanvisning för Kelasto-rapporterna",
    "kelasto_ohje_url": "https://tietotarjotin.fi/sv/anvisning/2053296/bruksanvisning-for-kelasto-rapporterna",
    "kelasto_cognos_ohje": "Snabbguide till Cognos-rapporten",
    "kelasto_cognos_ohje_url": "https://tietotarjotin.fi/sv/anvisning/311701/kelasto-cognos-snabbguide-till-rapporten",
    "haitari3": "Tillgänglighet"
  }
]

haitari01 = transl_haitarit.filter(d => d.lang == value_lang && d.item == "para1")

transl_table = [
  {
    "lang": "fi",
    "item": "para1",
    "title1": "Tiedot taulukkomuodossa",
    "title2": "Hyvinvointialue"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title1": "Information i tabellform",
    "title2": "Välfärdsområde"
  }
]

table01 = transl_table.filter(d => d.lang == value_lang && d.item == "para1")

transl_tietotarjotin = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Kelan tietotarjotin",
    "paragraph": "Kelan tietotarjotin kokoaa yhteen paikkaan Kelan tuottaman tutkimus- ja tilastotiedon. Tarjolla on tietoa valtakunnallisesta, alueellisesta ja paikallisesta näkökulmasta.",
    "link": "https://www.tietotarjotin.fi",
    "linktext": "Siirry Tietotarjottimeen"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "FPA:s faktaportal",
    "paragraph": "FPA:s faktaportal sammanför all information om forskning och statistik som FPA producerar samt analyser och undersökningar baserade på denna information. Informationen finns på erbjudan från en nationell, regional och lokal synvinkel.",
    "link": "https://www.tietotarjotin.fi/sv/forstasidan",
    "linktext": "Till Faktaportalen"
  }
]

tietotarjotin01 = transl_tietotarjotin.filter(d => d.lang == value_lang && d.item == "para1")

transl_alueentilannekuva = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Alueen tilannekuva",
    "paragraph": "Alueen tilannekuva tarjoaa visuaalisessa muodossa tietoja Kelan etuuksista hyvinvointialueille ja kunnille.",
    "link": "https://www.tietotarjotin.fi/tilastodata/171491/alueen-tilannekuva?q=%22Alueen%20tilannekuva%22",
    "linktext": "Siirry Alueen tilannekuvaan"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "Områdets lägesbild",
    "paragraph": "Områdets lägesbild ger information i visuell form om FPA:s förmåner för välfärdsområdena och kommunerna.(Tietotarjottimen nykyinen teksti)",
    "link": "https://www.tietotarjotin.fi/sv/statistikdata/171491/kelasto-omrodets-lagesbild",
    "linktext": "Till Områdets lägesbilden"
  }
]

alueentilannekuva01 = transl_alueentilannekuva.filter(d => d.lang == value_lang && d.item == "para1")

transl_tkuntakokeilujentilannekuva = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Työllisyyden kuntakokeilujen tilannekuva",
    "paragraph": "Tietoja siitä, paljonko perustoimeentulotuen, kunnan osarahoittaman työmarkkinatuen ja ammatillisen kuntoutuksen saajia kuntakokeilualueilla on ja miten saajien lukumäärät ovat muuttuneet.",
    "link": "https://www.tietotarjotin.fi/tilastodata/490320/kelasto-tyollisyyden-kuntakokeilujen-tilannekuva",
    "linktext": "Siirry palveluun"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "Työllisyyden kuntakokeilujen tilannekuva",
    "paragraph": "Tietoja siitä, paljonko perustoimeentulotuen, kunnan osarahoittaman työmarkkinatuen ja ammatillisen kuntoutuksen saajia kuntakokeilualueilla on ja miten saajien lukumäärät ovat muuttuneet.",
    "link": "https://www.tietotarjotin.fi/sv/statistikdata/490320/kelasto-tyollisyyden-kuntakokeilujen-tilannekuva",
    "linktext": "Till tjänsten"
  }
]

tkuntakokeilujentilannekuva01 = transl_tkuntakokeilujentilannekuva.filter(d => d.lang == value_lang && d.item == "para1")

transl_kelasto2 = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Tilastotietokanta Kelasto",
    "paragraph": "Kelastoon on koottu keskeinen tilastotieto Kelan hoitamasta sosiaaliturvasta.",
    "link": "https://www.tietotarjotin.fi/tilastodata/2051231/tilastotietokanta-kelasto?q=kelasto",
    "linktext": "Siirry Kelastoon"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "Statistikdatabasen Kelasto",
    "paragraph": "Databasen innehåller central statistik över den sociala trygghet som handhas av FPA.",
    "link": "https://www.tietotarjotin.fi/sv/statistikdata/2051231/statistikdatabasen-kelasto",
    "linktext": "Till Kelasto"
  }
]

kelasto201 = transl_kelasto2.filter(d => d.lang == value_lang && d.item == "para1")

all_etuudet = [... new Set(trans_label.map(x=>x.etuus))]
// filtteroidaan vain valitun etuuden data 
//dat_subset_etuus = dat_vv.filter(d => d.etuus == etuus_selected)
// Listataan kaikki uniikit vuosi-sarakkeen arvot
all_vuosi = [... new Set(dat_vv.map(x=>x.vuosi))];
// Listataan kaikki uniikit hyvinvointialue_name_fi-sarakkeen arvot
all_hva = [... new Set(dat_vv.map(x=>x.hyvinvointialue_name_fi))];
// Filtteroidaan data vuoden, etuuden ja indikaattorin osalta
dat_subset = dat_vv.filter(d => d.vuosi == year && d.indi == indi_selected && d.etuus == etuus_selected)
// Listataan kaikki tarkenteet yo.datasta
// all_tarkenne = [... new Set(dat_subset0.map(x=>x.tarkenne))];
// Filtteroidaan data valittuun ikäluokkaan
// dat_subset = dat_subset0.filter(d => d.tarkenne == tarkenne_selected)

// dat_subset

// otetaan valitun aluetason (hyvinvointialueet) mukaiset eri kieliset nimet 
label_reg = trans_region.filter(d => d.aluetaso == reglevel)

// yhdistetään oikean aluetason eri kieliset nimet
dat_subset_lang = dat_subset.map(a => ({...label_reg.find(p => a.region_code === p.region_code), ...a}));
// dat_subset_lang
// tehdään arvot karttaan
map_values = new Map(dat_subset_lang.map(({region_code, arvo}) => [region_code, arvo]))

trans_label_lang = trans_label.map((d) => {
  return {
    etuus: d.etuus,
    indi: d.indi,
    tarkenne: d.tarkenne,
    etuus_label: d[`etuus_${value_lang}`],
    indi_label: d[`indi_${value_lang}`],
  //  tarkenne_label: d[`tarkenne_${value_lang}`]
  };
})

map_etuus = new Map(trans_label_lang.map(({etuus_label, etuus}) => [etuus_label, etuus]))

trans_label_lang_tmp = trans_label_lang.filter(d => d.indi == indi_selected && d.etuus == etuus_selected)
lab_indi = trans_label_lang_tmp.map(d => d.indi_label)


// Palkkikuvan label
lab_indi2 = (lab_indi).toString().includes("euro") == true ? "€"
            : (lab_indi).toString().includes("%") == true ? "%"
            : value_lang == "sv" ? "antal"
            : "lkm";

lab_etuus = trans_label_lang_tmp.map(d => d.etuus_label)
//lab_tarkenne = trans_label_lang_tmp.map(d => d.tarkenne_label)
//lab_tarkenne2 = {
//   if(tarkenne_selected == "ei_tarkennetta") { 
//     var lab_tarkenne2 = ""
//   } else {
//     var lab_tarkenne2 = "\n#### " + lab_tarkenne
//   }
//   return lab_tarkenne2
// }

trans_label_lang_indi = trans_label_lang.filter(d => d.etuus == etuus_selected)
// Listataan kaikki uniikit etuuskohtaisen datan indikaattori
all_osoitin = [... new Set(trans_label_lang_indi.map(x=>x.indi))];

map_indi = new Map(trans_label_lang_indi.map(({indi_label, indi}) => [indi_label, indi]))

//valitut_linkit = kelasto_linkit.filter(d => d.lang == value_lang && d.etuus.some((n) => d.etuus.includes(lab_etuus)))
// etuus_selected

// Filtteröidään valitun etuuden Kelasto-linkit
valitut_linkit = kelasto_linkit.filter(d => d.lang == value_lang && d.etuus.includes((lab_etuus).toString()))

locale_FI = d3.formatLocale({
  decimal: ",",
  thousands: "\u00a0",
  grouping: [3],
  currency: ["", "\u00a0€"],
  minus: "\u2212",
  percent: "\u202f%"
})

// Tolppakuvan lukujen muotoilut
muotoilu = (lab_indi).toString().includes("%") == true || (lab_indi).toString().includes("euroa/saaja") == true ? ".1f" : ",.0f";

reglevel = "hyvinvointialue"

// Annetaan satunnainen merkkijoho json-filun perään, jolloin selain ei cacheta sitä. 
// Ja käytetään d3.json():ia fileAttachmentin sijaan
characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function generateString(length) {
    let result = ' ';
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }

    return result;
}
rndstr = generateString(5)
jsonURL = "data/dat_hva.json?" + rndstr.replace(/\s/g, '')
dat_vv = d3.json(jsonURL)

trans_region = FileAttachment("data/trans_region.json").json()
// trans_region

trans_label = FileAttachment("data/trans_label.json").json()
// trans_label

kelasto_linkit = FileAttachment("data/kelasto.json").json()

alueet = FileAttachment("data/alueet4326.geojson").json({typed: true})
// hyvinvointialuetason rajat, koska halusin karttaan kuntanäkymässä hyvinvointialueen rajat
geo_taso_hva = geo.filter(alueet, (d) => d.aluetaso == "hyvinvointialue")

geo = require("geotoolbox@latest")

serialize = {
  const xmlns = "http://www.w3.org/2000/xmlns/";
  const xlinkns = "http://www.w3.org/1999/xlink";
  const svgns = "http://www.w3.org/2000/svg";
  return function serialize(svg) {
    svg = svg.cloneNode(true);
    const fragment = window.location.href + "#";
    const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
    while (walker.nextNode()) {
      for (const attr of walker.currentNode.attributes) {
        if (attr.value.includes(fragment)) {
          attr.value = attr.value.replace(fragment, "#");
        }
      }
    }
    svg.setAttributeNS(xmlns, "xmlns", svgns);
    svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
    const serializer = new window.XMLSerializer;
    const string = serializer.serializeToString(svg);
    return new Blob([string], {type: "image/svg+xml"});
  };
}

csvBtn = button(dat_subset_lang, `${doc_name}.csv`)
// jsonBtn = button(dat_subset_lang, 'fips.json')

d3d = d3.dsvFormat(";").format(dat_subset_lang)
d3d2 = '\ufeff' + d3d

button = (data, filename = 'data.csv') => {
  if (!data) throw new Error('Array of data required as first argument');

  let downloadData;
  if (filename.includes('.csv')) {
    downloadData = new Blob([d3d2], { type: "text/csv", charset: "utf-8"});
  } else {
    downloadData = new Blob([JSON.stringify(data, null, 2)], {
      type: "application/json"
    });
  }

  const size = (downloadData.size / 1024).toFixed(0);
  const button = DOM.download(
    downloadData,
    filename,
    //`${labeli_data} ${filename} (~${size} KB)`
    `${labeli_data} (~${size} KB)`
  );
  return button;
}