Hyvinvointialueiden tietopaketti -

logo_fill_color_lang = {
  if(lang == "Suomi") { 
    var logo_fill_color_lang = "#FFFFFF"
  } else {
    var logo_fill_color_lang = "#000000"
  }
  return logo_fill_color_lang
}
logo_fill_color_lang_rev = {
  if(lang == "Suomi") { 
    var logo_fill_color_lang_rev = "#000000"
  } else {
    var logo_fill_color_lang_rev = "#FFFFFF"
  }
  return logo_fill_color_lang_rev
}

svg_logo = `<svg width="114.95" height="40.602" version="1.2" viewBox="0 0 114.95 40.602" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/><cc:license rdf:resource=""/></cc:Work></rdf:RDF></metadata><g transform="scale(.53564)" fill="#000000"><g fill="#ba00ff"><path d="m193.4 14.1c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zm-5.4 10.7 1.5-16.7h2.4v1h2.8v-1h2.6v1h2.8v-1h2.4l1.5 16.7h-5.3l-0.3-3.3c0-1.5-1.1-2.6-2.5-2.6s-2.5 1.2-2.5 2.6l-0.4 3.3zm-3.7-7.7c0-6.5 5.2-11.7 11.7-11.7s11.7 5.2 11.7 11.7-5.2 11.7-11.7 11.7c-6.5-0.1-11.7-5.3-11.7-11.7" fill="#FFFFFF" fill-rule="evenodd"/></g></g><g transform="scale(.53564)" fill="${logo_fill_color_lang}"><polyline transform="translate(-167.1 -367.5)" points="205.9 424.2 193.7 405.8 204.7 389.8 196.2 389.8 186.3 405.5 186.3 389.8 179.3 389.8 179.3 424.2 186.3 424.2 186.3 406.3 196.8 424.2 205.9 424.2"/><path d="m60.7 46.1v-1.5c0-5.3-1-8.7-3.4-11.1-1.6-1.7-4.4-2.7-7.3-2.7-3.4 0-5.9 1.1-8 3.4-2.2 2.5-3.2 5.5-3.2 10.1 0 8 4.7 13.1 12 13.1 3.6 0 6.6-1.1 9.6-3.5l-2.6-4c-2 1.7-4.2 2.5-6.4 2.5-3.4 0-5.4-2.2-5.4-6.1v-0.2zm-6.9-4.8h-7.7v-0.1c0-3.5 1.4-5.5 4-5.5 1.3 0 2.3 0.5 2.9 1.5 0.6 0.9 0.8 1.9 0.8 3.8v0.3" fill-rule="evenodd"/><path d="m75.8 56.6-1.1-4c-0.3 0.1-0.5 0.1-0.7 0.1-0.5 0-1.1-0.2-1.3-0.7-0.4-0.7-0.4-1.3-0.4-5.6v-19.8c0-3.6-0.1-5.2-0.3-6.6l-6.8 1.5c0.2 2.3 0.3 4.3 0.3 7.6v18.9c0 3.6 0.1 4.4 0.6 5.7 0.8 2.1 3.1 3.5 5.9 3.5 1.3 0.1 2.7-0.1 3.8-0.6"/><path d="m99.7 54c-2.2-1.7-2.4-2.9-2.4-5.6l0.1-8.5c0-2.7-0.1-3.5-0.4-4.6-1-2.8-3.9-4.4-8.2-4.4-2.3 0-4.5 0.4-6.9 1.5-1.8 0.7-2.8 1.2-4.1 2.1l2.8 4.8c2.7-1.8 5.2-2.9 7.3-2.9 2.4 0 3 0.9 3 3.8v1h-1.5c-8.1 0-12.2 2.8-12.2 8.7 0 5.1 3.1 7.9 8.7 7.9 2.1 0 3.9-0.5 5.1-1.4 0.5-0.3 1-0.8 1.5-1.3 0.6 1.3 2 2.4 3.6 3.1zm-8.8-8.4-0.1 5.5c-1 1.1-2.2 1.7-3.5 1.7-1.7 0-2.9-1.3-2.9-3.3 0-3 1.6-3.9 6.2-3.9h0.3" fill-rule="evenodd"/></g><g transform="scale(.53564)" fill="#FFFFFF"><rect x="105.4" y="19.3" width="3.3" height="47.8" fill="#FFFFFF"/></g><g transform="scale(.53564)" fill="${logo_fill_color_lang_rev}"><polyline transform="translate(-167.1 -367.5)" points="302.3 389.8 283.7 389.8 283.7 424.2 290.6 424.2 290.6 408.9 299.4 408.9 299.4 403.3 290.6 403.3 290.6 395.4 301.5 395.4 302.3 389.8"/><path d="m159.6 43.4c0-5.8-2-9.1-4.7-11-1.4-0.9-3.2-1.5-5-1.5-2.6 0-5.1 1-6.2 2.4 0-0.8-0.2-1.5-0.4-2.4l-5.9 1c0.3 2.1 0.4 3.1 0.4 6.4v29.3l6.4-1.7v-7.9c0-0.7 0-1.5-0.1-2.1 1.4 0.8 3.3 1.3 5.3 1.3 2.8 0 5.1-1 6.8-2.9 2.5-2.7 3.4-5.5 3.4-10.9zm-7.2 0.6c0 5.8-1.3 8-4.6 8-1.3 0-2.8-0.7-3.7-1.5v-12.3c1.2-1.2 2.8-1.9 4.4-1.9s2.7 0.7 3.2 2.1c0.5 1.3 0.7 3.2 0.7 5.6" fill-rule="evenodd"/><path d="m185.5 54c-2.2-1.7-2.4-2.9-2.4-5.6l0.1-8.5c0-2.7-0.1-3.5-0.4-4.6-1-2.8-3.9-4.4-8.2-4.4-2.3 0-4.5 0.4-6.9 1.5-1.8 0.7-2.8 1.2-4.1 2.1l2.8 4.8c2.7-1.8 5.2-2.9 7.3-2.9 2.4 0 3 0.9 3 3.8v1h-1.5c-8.1 0-12.2 2.8-12.2 8.7 0 5.1 3.1 7.9 8.7 7.9 2.1 0 3.9-0.5 5.1-1.4 0.5-0.3 1-0.8 1.5-1.3 0.6 1.3 2 2.4 3.6 3.1zm-8.9-8.4-0.1 5.5c-1 1.1-2.2 1.7-3.5 1.7-1.7 0-2.9-1.3-2.9-3.3 0-3 1.6-3.9 6.2-3.9h0.3" fill-rule="evenodd"/></g><rect width="114.95" height="40.602" fill="none" stroke-width=".53564"/></svg>`


svg_logo_white = `<svg width="114.95" height="40.602" version="1.2" viewBox="0 0 114.95 40.602" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/><cc:license rdf:resource=""/></cc:Work></rdf:RDF></metadata><g transform="scale(.53564)" fill="#000000"><g fill="#ba00ff"><path d="m193.4 14.1c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zm-5.4 10.7 1.5-16.7h2.4v1h2.8v-1h2.6v1h2.8v-1h2.4l1.5 16.7h-5.3l-0.3-3.3c0-1.5-1.1-2.6-2.5-2.6s-2.5 1.2-2.5 2.6l-0.4 3.3zm-3.7-7.7c0-6.5 5.2-11.7 11.7-11.7s11.7 5.2 11.7 11.7-5.2 11.7-11.7 11.7c-6.5-0.1-11.7-5.3-11.7-11.7" fill="#FFFFFF" fill-rule="evenodd"/></g></g><g transform="scale(.53564)" fill="#FFFFFF"><polyline transform="translate(-167.1 -367.5)" points="205.9 424.2 193.7 405.8 204.7 389.8 196.2 389.8 186.3 405.5 186.3 389.8 179.3 389.8 179.3 424.2 186.3 424.2 186.3 406.3 196.8 424.2 205.9 424.2"/><path d="m60.7 46.1v-1.5c0-5.3-1-8.7-3.4-11.1-1.6-1.7-4.4-2.7-7.3-2.7-3.4 0-5.9 1.1-8 3.4-2.2 2.5-3.2 5.5-3.2 10.1 0 8 4.7 13.1 12 13.1 3.6 0 6.6-1.1 9.6-3.5l-2.6-4c-2 1.7-4.2 2.5-6.4 2.5-3.4 0-5.4-2.2-5.4-6.1v-0.2zm-6.9-4.8h-7.7v-0.1c0-3.5 1.4-5.5 4-5.5 1.3 0 2.3 0.5 2.9 1.5 0.6 0.9 0.8 1.9 0.8 3.8v0.3" fill-rule="evenodd"/><path d="m75.8 56.6-1.1-4c-0.3 0.1-0.5 0.1-0.7 0.1-0.5 0-1.1-0.2-1.3-0.7-0.4-0.7-0.4-1.3-0.4-5.6v-19.8c0-3.6-0.1-5.2-0.3-6.6l-6.8 1.5c0.2 2.3 0.3 4.3 0.3 7.6v18.9c0 3.6 0.1 4.4 0.6 5.7 0.8 2.1 3.1 3.5 5.9 3.5 1.3 0.1 2.7-0.1 3.8-0.6"/><path d="m99.7 54c-2.2-1.7-2.4-2.9-2.4-5.6l0.1-8.5c0-2.7-0.1-3.5-0.4-4.6-1-2.8-3.9-4.4-8.2-4.4-2.3 0-4.5 0.4-6.9 1.5-1.8 0.7-2.8 1.2-4.1 2.1l2.8 4.8c2.7-1.8 5.2-2.9 7.3-2.9 2.4 0 3 0.9 3 3.8v1h-1.5c-8.1 0-12.2 2.8-12.2 8.7 0 5.1 3.1 7.9 8.7 7.9 2.1 0 3.9-0.5 5.1-1.4 0.5-0.3 1-0.8 1.5-1.3 0.6 1.3 2 2.4 3.6 3.1zm-8.8-8.4-0.1 5.5c-1 1.1-2.2 1.7-3.5 1.7-1.7 0-2.9-1.3-2.9-3.3 0-3 1.6-3.9 6.2-3.9h0.3" fill-rule="evenodd"/></g><g transform="scale(.53564)" fill="#FFFFFF"><rect x="105.4" y="19.3" width="3.3" height="47.8" fill="#FFFFFF"/></g><g transform="scale(.53564)" fill="#FFFFFF"><polyline transform="translate(-167.1 -367.5)" points="302.3 389.8 283.7 389.8 283.7 424.2 290.6 424.2 290.6 408.9 299.4 408.9 299.4 403.3 290.6 403.3 290.6 395.4 301.5 395.4 302.3 389.8"/><path d="m159.6 43.4c0-5.8-2-9.1-4.7-11-1.4-0.9-3.2-1.5-5-1.5-2.6 0-5.1 1-6.2 2.4 0-0.8-0.2-1.5-0.4-2.4l-5.9 1c0.3 2.1 0.4 3.1 0.4 6.4v29.3l6.4-1.7v-7.9c0-0.7 0-1.5-0.1-2.1 1.4 0.8 3.3 1.3 5.3 1.3 2.8 0 5.1-1 6.8-2.9 2.5-2.7 3.4-5.5 3.4-10.9zm-7.2 0.6c0 5.8-1.3 8-4.6 8-1.3 0-2.8-0.7-3.7-1.5v-12.3c1.2-1.2 2.8-1.9 4.4-1.9s2.7 0.7 3.2 2.1c0.5 1.3 0.7 3.2 0.7 5.6" fill-rule="evenodd"/><path d="m185.5 54c-2.2-1.7-2.4-2.9-2.4-5.6l0.1-8.5c0-2.7-0.1-3.5-0.4-4.6-1-2.8-3.9-4.4-8.2-4.4-2.3 0-4.5 0.4-6.9 1.5-1.8 0.7-2.8 1.2-4.1 2.1l2.8 4.8c2.7-1.8 5.2-2.9 7.3-2.9 2.4 0 3 0.9 3 3.8v1h-1.5c-8.1 0-12.2 2.8-12.2 8.7 0 5.1 3.1 7.9 8.7 7.9 2.1 0 3.9-0.5 5.1-1.4 0.5-0.3 1-0.8 1.5-1.3 0.6 1.3 2 2.4 3.6 3.1zm-8.9-8.4-0.1 5.5c-1 1.1-2.2 1.7-3.5 1.7-1.7 0-2.9-1.3-2.9-3.3 0-3 1.6-3.9 6.2-3.9h0.3" fill-rule="evenodd"/></g><rect width="114.95" height="40.602" fill="none" stroke-width=".53564"/></svg>`

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: 2022, 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: "",
    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,
      //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">

  <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">
         ${kelasto01.map(d => d.haitari0)[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>

<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">
         ${kelasto01.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>
 
</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 stapelmönstret (.svg)",
    "label_data": "Spara data (.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 till 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_kelasto = [
  {
    "lang": "fi",
    "item": "para1",
    "title": "Kuntoutuspalvelujen saajat ja kustannukset kunnittain 2022",
    "haitari0": "Tiedot taulukkomuodossa",
    "haitari1": "Tietojen tallentaminen",
    "haitari2": "Kuntakohtaiset tiedot hyvinvointialueittain",
    "haitari22": "Linkit tilastotietokanta Kelaston kuntakohtaisiin tietoihin hyvinvointialueittain. Linkit avautuvat uuteen ikkunaan.",
    "haitari3": "Saavutettavuusseloste"
  },
  {
    "lang": "sv",
    "item": "para1",
    "title": "Mottagare av rehabiliteringstjänster och kostnader per välfärdsområde 2022",
    "haitari0": "Data i tabellformat",
    "haitari1": "Ladda ner filer",
    "haitari2": "Kommunspecifika uppgifter per välfärdsområde",
    "haitari22": "Länkar till närmare uppgifter i FPA:s statistikdatabas Kelasto.",
    "haitari3": "Tillgänglighet"
  }
]

kelasto01 = transl_kelasto.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";

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

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]))

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

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

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")

Plot = await import("https://esm.sh/@observablehq/plot");

import { rewind } from "@fil/rewind"

geo = require("geotoolbox@latest")

d3 = require("d3@6", "d3-geo-projection")

import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/inputs"

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;
}