geo = require("geotoolbox@latest")

data_raw = await FileAttachment("data/data_hinnat.json").json()
selite_alue = await FileAttachment("data/selite_alue.json").json()
selite_toimenpide = await FileAttachment("data/selite_toimenpide.json").json()
selite_erikoisala = await FileAttachment("data/selite_erikoisala.json").json()
alueet = await FileAttachment("data/alueet_crs_4326.geojson").json({typed: true})

trans_content = [
  {
    lang: "fi",
    title: "Yksityisen terveydenhuollon hintatiedot",
    paragraph: "Mediaanihinnat alueittain",
    valinnat: "Valitse tiedot",
    haitari_taulukko: "Tiedot taulukkomuodossa",
    haitari_taulukko_otsikko: "Alue",
    haitari_lataus: "Tietojen tallentaminen",
    haitari_selite_data: "Lisää tietoa tilastoista",
    selite_data:
      "Tiedot perustuvat Kelan sairaanhoitokorvausrekistereistä saataviin tietoihin, joten mukana ovat vain ne käynnit tai toimenpiteet, joista on maksettu sairausvakuutuskorvauksia. Tilastossa esitetyistä mediaanihinnoista ei ole vähennetty sairausvakuutuskorvausta eikä hinnoissa ole mukana palveluntuottajan mahdollisesti perimää erillistä toimistomaksua.<br/><br/>Käyvissä hinnoissa ei ole huomioitu rahan arvon tai ostovoiman muutosta. Reaalihinnat on inflaatiokorjattu kuluttajahintaindeksillä viimeiseksi saatavissa olevan tilastovuoden hintoihin.<br/><br/>Tilastossa ovat Kelan kanssa suorakorvaussopimuksen tehneet yksityisen terveydenhuollon palveluntuottajat, joiden toimintayksikön osoite on tallennettu Kelan ylläpitämään yksityisen Terveydenhuollon palveluntuottajarekisteriin. Tilastoon eivät sisälly itsenäisten ammatinharjoittajien tiedot, koska Kela ei ylläpidä rekisteriä heidän toimipaikoistaan. Kuntatason erikoisala-, toimenpide- ja vuosikohtaisista tilastoista on poistettu kunnat, joissa havaintojen määrä oli alle viisi.",
    bottom_container: {
      tietotarjotin: {
        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",
      },
      hva_tietopaketti: {
        title: "Hyvinvointialueiden tietopaketti",
        paragraph: "Kelan etuuksien tilastotietoja hyvinvointialueittain.",
        link: "https://hva-tietopaketti.kela.fi/",
        linktext: "Siirry Hyvinvointialueiden tietopakettiin",
      },
      kelasto: {
        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",
    title: "Prisuppgifter inom den privata hälso- och sjukvården",
    paragraph: "Medianpriser per region",
    valinnat: "Välj data",
    haitari_taulukko: "Data i tabellformat",
    haitari_taulukko_otsikko: "Region",
    haitari_lataus: "Ladda ner filer",
    haitari_selite_data: "Mer information om statistiken",
    selite_data:
      "Uppgifterna grundar sig på uppgifter ur FPA:s register över sjukvårdsersättningar, vilket betyder att endast de besök eller åtgärder som det har betalats sjukförsäkringsersättning för har tagits med. De medianpriser som presenteras i statistiken har inte minskats med sjukförsäkringsersättningen, och i priserna ingår inte separat expeditionsavgift som serviceproducenten eventuellt tar ut.<br/></br>Löpande priser anger ett värde eller en förändring som är påverkad av både en prisförändring och en volymförändring. Realpriserna har inflationsjusterats med konsumentprisindex till senast tillgängliga statistikår.<br/><br/>Statistiken omfattar de producenter av privata hälso- och sjukvårdstjänster som har ingått avtal om direktersättning med FPA och för vilka FPA har en verksamhetsadress i sitt register över privata hälso- och sjukvårdsproducenter. I statistiken ingår inte uppgifter om självständiga yrkesutövare eftersom FPA inte för något register över deras verksamhetsställen. På kommunnivå har man från den statistik som gäller specialitet, åtgärd eller år uteslutit sådana kommuner där antalet observationer varit under fem.",
    bottom_container: {
      tietotarjotin: {
        title: "FPA:s faktaportal",
        paragraph:
          "FPA:s faktaportal samlar den forsknings- och statiskinformation som produceras av FPA på ett och samma ställe. Informationen kan granskas på nationell, regional eller lokal nivå.",
        link: "https://tietotarjotin.fi/sv/forstasidan",
        linktext: "Till Faktaportalen",
      },
      hva_tietopaketti: {
        title: "Informationspaket om välfärdsområdena",
        paragraph: "Statistik över FPA-förmåner per välfärdsområde.",
        link: "https://hva-tietopaketti.kela.fi/",
        linktext: "Till Informationspaket om välfärdsområdena.",
      },
      kelasto: {
        title: "Statistikdatabasen Kelasto",
        paragraph:
          "Databasen Kelasto 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",
      },
    },
  },
]

trans_menu_aluetaso = [
  {
    lang: "fi",
    label: "Valitse aluetaso",
  },
  {
    lang: "sv",
    label: "Välj region",
  },
]

trans_menu_hintamuuttuja = [
  {
    lang: "fi",
    label: "Valitse hintamuuttuja",
  },
  {
    lang: "sv",
    label: "Välj prisvariabeln",
  },
]

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

trans_menu_erikoisala = [
  {
    lang: "fi",
    label: "Valitse erikoisala",
  },
  {
    lang: "sv",
    label: "Välj specialitet",
  },
]

trans_menu_toimenpide = [
  {
    lang: "fi",
    label: "Valitse toimenpide",
  },
  {
    lang: "sv",
    label: "Välj åtgärd",
  },
]

trans_menu_vuosi = [
  {
    lang: "fi",
    label: "Valitse vuosi",
  },
  {
    lang: "sv",
    label: "Välj år",
  },
]

trans_menu_alue = [
  {
    lang: "fi",
    label: "Valitse alueet aikasarjaan",
  },
  {
    lang: "sv",
    label: "Välj region för tidsserien",
  },
]

trans_menu_tabset = [
  {
    lang: "fi",
    label: ["Pylväs", "Kartta", "Aikasarja"],
  },
  {
    lang: "sv",
    label: ["Stapeldiagram", "Karta", "Tidsserie"],
  },
]

trans_menu_lataus = [
  {
    lang: "fi",
    label_data: "Tallenna data (.csv)",
    label_data_file: "data",
    label_data_aikasarja: "Tallenna aikasarjadata (.csv)",
    label_data_aikasarja_file: "aikasarjadata",
    label_kartta: "Tallenna kartta (.svg)",
    label_kartta_file: "kartta",
    label_pylvas: "Tallenna pylväskuvio (.svg)",
    label_pylvas_file: "pylvaskuvio",
    label_aikasarja: "Tallenna aikasarjakuvio (.svg)",
    label_aikasarja_file: "aikasarjakuvio",
  },
  {
    lang: "sv",
    label_data: "Ladda ner data (.csv)",
    label_data_file: "data",
    label_data_aikasarja: "Ladda ner tidsseriedata (.csv)",
    label_data_aikasarja_file: "tidsseriedata",
    label_kartta: "Ladda ner karta (.svg)",
    label_kartta_file: "karta",
    label_pylvas: "Ladda ner stapeldiagram (.svg)",
    label_pylvas_file: "stapeldiagram",
    label_aikasarja: "Ladda ner tidsseriediagram (.svg)",
    label_aikasarja_file: "tidsseriediagram",
  },
]

trans_menu_kuvio = [
  {
    lang: "fi",
    label_y: "Mediaanihinta (euroa)",
    label_x: "Vuosi",
    label_title_aikasarja: "Valitse alueet valikosta",
  },
  {
    lang: "sv",
    label_y: "Medianpris (euro)",
    label_x: "År",
    label_title_aikasarja: "Välj regioner från menyn"
  },
]

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

function serialize(svg) {
  const xmlns = "http://www.w3.org/2000/xmlns/"
  const xlinkns = "http://www.w3.org/1999/xlink"
  const svgns = "http://www.w3.org/2000/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" })
}

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

  let downloadData
  if (filename.includes(".csv")) {
    downloadData = new Blob([d3.csvFormat(data)], { type: "text/csv" })
  } else if (filename.includes(".svg")) {
    downloadData = serialize(data)
  } 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,
    `${button_label} (~${size} KB)`
  )
  return button
}

getSubset = (obj, ...keys) => keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {})

data_filtered = data_raw
  .filter(
    (d) =>
      d.aluetaso_koodi === aluetaso_selected.koodi &&
      d.erikoisala_koodi === erikoisala_koodi &&
      d.toimenpide_koodi === toimenpide_koodi
  )
  .map((a) => ({
    ...selite_alue.find(
      (p) =>
        a.aluetaso_koodi === p.aluetaso_koodi && a.region_code === p.region_code
    ),
    ...a,
  }))

// Muuttujat valikoihin
all_aluetaso = [
  ...new Map(
    selite_alue.map((d) => [
      d["aluetaso_koodi"],
      {
        koodi: d.aluetaso_koodi,
        label: d.aluetaso,
      },
    ])
  ).values(),
]
all_etuus = [
  ...new Set(selite_erikoisala.map((d) => d[[`etuus_selite_${value_lang}`]])),
].sort()
all_erikoisala = [
  ...new Set(
    selite_erikoisala
      .filter((d) => d[[`etuus_selite_${value_lang}`]] === etuus_selected)
      .map((d) => d[[`erikoisala_${value_lang}`]])
  ),
].sort()
all_toimenpide = [
  ...new Set(
    selite_toimenpide
      .filter((d) => d[[`etuus_selite_${value_lang}`]] === etuus_selected)
      .map((d) => d[[`toimenpide_selite_${value_lang}`]])
  ),
].sort()
all_vuosi = [...new Set(data_filtered.map((d) => d.kaynti_vuosi))].sort(
  (a, b) => a - b
)
all_vuosi_augmented = all_vuosi.map(x => x === 2023 ? "2023*" : x.toString())

all_alueet_yhteensa = [
  ...new Set(
    selite_alue
      .filter((d) => d.region_code === 0)
      .map((d) => d[[`region_name_${value_lang}`]])
  ),
]
all_alueet = [
  ...all_alueet_yhteensa,
  ...new Set(
    data_filtered
      .filter((d) => d.region_code !== 0)
      .map((d) => d[[`region_name_${value_lang}`]])
      .sort()
  ),
]

// Apumuuttujat datan filtterointiin
erikoisala_koodi = selite_erikoisala
  .filter((d) => d[[`erikoisala_${value_lang}`]] === erikoisala_selected)
  .map((d) => d.erikoisala_koodi)[0]
toimenpide_koodi = selite_toimenpide
  .filter((d) => d[[`toimenpide_selite_${value_lang}`]] === toimenpide_selected)
  .map((d) => d.toimenpide_koodi)[0]

// Data aikasarjaan
data_aikasarja = data_filtered
  .filter((d) => alue_selected.includes(d[[`region_name_${value_lang}`]]))
  .map((d) => ({
    ...selite_toimenpide.find((p) => d.toimenpide_koodi === p.toimenpide_koodi),
    ...d,
  }))
  .map((d) => ({
    ...selite_erikoisala.find(
      (p) =>
        d.erikoisala_koodi === p.erikoisala_koodi &&
        p[[`etuus_selite_${value_lang}`]] === etuus_selected
    ),
    ...d,
  }))

// Data pylvaskuvioon
vuosi_selected = vuosi_selected_augmented === "2023*" ? 2023 : parseInt(vuosi_selected_augmented)
data_plot = data_filtered
  .filter((d) => d.kaynti_vuosi === vuosi_selected)
  .map((d) => ({
    ...selite_toimenpide.find((p) => d.toimenpide_koodi === p.toimenpide_koodi),
    ...d,
  }))
  .map((d) => ({
    ...selite_erikoisala.find(
      (p) =>
        d.erikoisala_koodi === p.erikoisala_koodi &&
        p[[`etuus_selite_${value_lang}`]] === etuus_selected
    ),
    ...d,
  }))


// Data karttaan
geo_aluetaso = geo.filter(alueet, (d) => d.aluetaso_koodi === aluetaso_selected.koodi)
map_values = new Map(
  data_plot.map((d) => [
    d.region_code,
    d[[`${hintamuuttuja_selected.muuttuja}`]],
  ])
)

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

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

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

// Aluetason valinta
aluetasot = [
  {koodi: 0, label_fi: "Hyvinvointialue", label_sv: "Välfärdsområde"},
  {koodi: 1, label_fi: "Kunta", label_sv: "Kommun"}, 
]
label_aluetaso = [... new Set(trans_menu_aluetaso.filter(d => d.lang === value_lang).map(x => x.label))]
viewof aluetaso_selected = Inputs.radio(aluetasot, {
  format: x => x[[`label_${value_lang}`]],
  value: aluetasot.find(t => t.label_fi === "Hyvinvointialue"),
  label: label_aluetaso, 
  width: 150}) 
  
// Hintamuuttujan valinta
hintamuuttujat = [
  {muuttuja: "toimenpidekust_eur", label_fi: "Käypä hinta", label_sv: "Löpande priser"},
  {muuttuja: "toimenpidekust_eur_khi", label_fi: "Reaalihinta", label_sv: "Realpriser"}, 
]
label_hintamuuttuja = [... new Set(trans_menu_hintamuuttuja.filter(d => d.lang === value_lang).map(x => x.label))]
viewof hintamuuttuja_selected = Inputs.radio(hintamuuttujat, {
  format: x => x[[`label_${value_lang}`]],
  value: hintamuuttujat.find(t => t.label_fi === "Käypä hinta"),
  label: label_hintamuuttuja,
  width: 150})

// Etuuden valinta
label_etuus = trans_menu_etuus.filter(d => d.lang === value_lang).map(x => x.label)
viewof etuus_selected = Inputs.select(all_etuus, {
  value: all_etuus[0],
  label: label_etuus,
  width: 150})
  
// Erikoisalan valinta
label_erikoisala = trans_menu_erikoisala.filter(d => d.lang === value_lang).map(x => x.label)
viewof erikoisala_selected = Inputs.select(all_erikoisala, {
  value: all_erikoisala[0],
  label: label_erikoisala,
  width: 150})

// Toimenpiteen valinta
label_toimenpide = trans_menu_toimenpide.filter(d => d.lang === value_lang).map(x => x.label)
viewof toimenpide_selected = Inputs.select(all_toimenpide, {
  value: all_toimenpide[0],
  label: label_toimenpide,
  width: 150,
  multiple: false})

// Vuoden valinta
label_vuosi = trans_menu_vuosi.filter(d => d.lang === value_lang).map(x => x.label)
viewof vuosi_selected_augmented = Inputs.select(all_vuosi_augmented, {
  label: label_vuosi, 
  value: all_vuosi_augmented[all_vuosi_augmented.length - 1],
  width: 150, 
  <!-- format: x => d3.format('')(x) -->
  })
  
vuosi_selected_augmented === "2023*"
  ? value_lang === "fi"
    ? html`<div>
        <p style="color: red">
          * Kyseessä on vuoden ${vuosi_selected} osalta alustavat luvut, sillä
          kaikkia maksuja ei ole vielä kirjautunut.
        </p>
      </div>`
    : html`<div>
        <p style="color: red">
          * Dessa är preliminära siffror för år ${vuosi_selected}, eftersom inte
          alla besök har registrerats ännu.
        </p>
      </div>`
  : html`<div style="visibility: hidden"></div>`

label_alue = trans_menu_alue.filter(d => d.lang === value_lang).map(x => x.label)
viewof alue_selected = Inputs.select(all_alueet, {
  label: label_alue,
  multiple: true,
  value: all_alueet[0]})

mutable isResolved = 0
{
  let promise = new Promise(resolve => {
    resolve(pylvas)
  })

  promise.then(() => {
  mutable isResolved = 1;
  })
}

isResolved === 0
  ? html`<div class="loader-container"><div class="loader"></div></div>`
  : html`</br>`

pylvas = Plot.plot({
  ariaLabel: "Tiedot vaakapylväskuviossa",
  ariaHidden: "True",
  title: html`<h2>${etuus_selected} &#8212 ${erikoisala_selected} ${vuosi_selected}</h2>`,
  subtitle: html`<h3 class="h4">${toimenpide_selected}</h3>`,
  marginLeft: 180,
  marginRight: 150,
  marginTop: 10,
  marginBottom: 0,
  width: 1100,
  height: 500 + data_plot.length * 20,
  y: {
    domain: d3.sort(data_plot, d => -d[[`${hintamuuttuja_selected.muuttuja}`]]).map(d => d[[`region_name_${value_lang}`]]),
    label: "",
    tickSize: 0,
    padding: 0.15,
  },
  x: {
    label: null,
    grid: false,
    ticks: 0,
    tickSize: 0,
    tickPadding: 10,
    nice: true,
    labelOffset: 50,
    labelAnchor: "right",
    tickFormat: locale_FI.format(",")
  },
  color: {
    //type: "quantize",
    scheme: "blues", 
    range: [0.3, 1],
    legend: false,
  },
  style: {
    fontFamily: "system-ui",
    fontSize: "1rem",
    overflow: "visible"
  },
  marks: [
    Plot.barX(data_plot.filter((d) => d.region_code !== 0), {
      x: `${hintamuuttuja_selected.muuttuja}`, 
      y: `region_name_${value_lang}`, 
      title: (d) => d[[`region_name_${value_lang}`]] + " " + locale_FI.format(".1f")(d[[`${hintamuuttuja_selected.muuttuja}`]]) + " " + "€",
      fill: (d) => d[[`${hintamuuttuja_selected.muuttuja}`]],
    }),
    Plot.barX(data_plot.filter((d) => d.region_code === 0), {
      x: `${hintamuuttuja_selected.muuttuja}`, 
      y: `region_name_${value_lang}`, 
      title: (d) => d[[`region_name_${value_lang}`]] + " " + locale_FI.format(".1f")(d[[`${hintamuuttuja_selected.muuttuja}`]]) + " " + "€",
      fill: (d) => d[[`${hintamuuttuja_selected.muuttuja}`]],
      fill: "orange",
    }),
     Plot.text(data_plot, {
      x: `${hintamuuttuja_selected.muuttuja}`,
      y: `region_name_${value_lang}`,
      text: (d) => locale_FI.format(".1f")(d[[`${hintamuuttuja_selected.muuttuja}`]]) + " " + "€",
      textAnchor: "start",
      dx: 5,
      fill: "black",
    }),
  ]
})

isResolved === 0
  ? html`<div class="loader-container"><div class="loader"></div></div>`
  : html`</br>`

kartta = Plot.plot({
  ariaLabel: "Tiedot kartalla",
  title: html`<h2>${etuus_selected} &#8212 ${erikoisala_selected} ${vuosi_selected}</h2>`,
  subtitle: html`<h3 class="h4">${toimenpide_selected}</h3>`, 
  height: 900,
  marginLeft: 0,
  marginRight: 0,
  marginTop: 0,
  marginBottom: 30,
  projection: {
    type: "orthographic",
    rotate: [-27, -52],
    domain: geo_aluetaso
  },
  marks: [
    Plot.geo(geo_aluetaso,
         {stroke: "#D2D2D2"}),
    Plot.geo(geo_aluetaso,
         {stroke: "black",
          strokeWidth: 1.2,
          fill: (d) => map_values.get(d.properties.region_code),
          title: (d) => `${d.properties[[`region_name_${value_lang}`]]}\n${locale_FI.format(".1f")(map_values.get(d.properties.region_code)) + " " + "€"}`
         }),
  ],
  color: {
    //type: "quantize",
    scheme: "blues",
    unknown: "#ccc",
    range: [0.3, 1],
    nice: false,
    legend: true,
    className: "legend-font-size",
  },
  style: {
    fontFamily: "system-ui",
    overflow: "visible",
  },
})

isResolved === 0
  ? html`<div class="loader-container"><div class="loader"></div></div>`
  : html`</br>`

aikasarja = Plot.plot({
  width: 1100,
  height: 500,
  marginLeft: 40,
  marginRight: 30,
  marginTop: 30,
  marginBottom: 35,
  title: data_aikasarja.length === 0 ? html`<h2>${trans_menu_kuvio.filter(d => d.lang === value_lang)[0].label_title_aikasarja}</h2>` : html`<h2>${etuus_selected} &#8212 ${erikoisala_selected}</h2>`,
  subtitle: data_aikasarja.length === 0 ? null : html`<h3 class="h4">${toimenpide_selected}</h3>`,
  y: {
    grid: data_aikasarja.length === 0 ? null : true,
    label: data_aikasarja.length === 0 ? null : `${trans_menu_kuvio.filter(d => d.lang === value_lang)[0].label_y}`,
  },
  x: {
    tickFormat: data_aikasarja.length === 0 ? null : d3.format(""),
    labelAnchor: "center",
    domain: data_aikasarja.length === 0 ? [null] : all_vuosi,
    nice: true,
    label: data_aikasarja.length === 0 ? null : `${trans_menu_kuvio.filter(d => d.lang === value_lang)[0].label_x}`,
    labelOffset: 50,
  },  
  marks: [
    data_aikasarja.length === 0 ? null : Plot.ruleY([0]),
    Plot.lineY(data_aikasarja.filter((d) => d.region_code === 0), {
      x: "kaynti_vuosi",
      y: `${hintamuuttuja_selected.muuttuja}`,
      stroke: "orange",
      strokeWidth: 5,
    }),
    data_aikasarja.length === 0 ? null : Plot.lineY(data_aikasarja.filter((d) => d.region_code !== 0), {
      x: "kaynti_vuosi",
      y: `${hintamuuttuja_selected.muuttuja}`,
      stroke: "region_code",
      strokeWidth: 3,
    }),
    data_aikasarja.length === 0 ? null : Plot.text(data_aikasarja, Plot.selectLast({
      x: "kaynti_vuosi",
      y: `${hintamuuttuja_selected.muuttuja}`,
      z: `region_name_${value_lang}`,
      text: `region_name_${value_lang}`,
      textAnchor: "start",
      dx: 3
    })),
    data_aikasarja.length === 0 ? null : Plot.tip(data_aikasarja, Plot.pointerX({
    x: "kaynti_vuosi",
    y: `${hintamuuttuja_selected.muuttuja}`,
    title: (d) => d[[`region_name_${value_lang}`]] + "\n" + locale_FI.format("")(d.kaynti_vuosi) +  "\n" + locale_FI.format(".1f")(d[[`${hintamuuttuja_selected.muuttuja}`]]) + " " + "€",
    }))
    ],
  style: {
    fontFamily: "system-ui",
    fontSize: "1rem",
    overflow: "visible",
  }
})

html`
<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="#collapseTaulukko"
      aria-expanded="false"
      aria-controls="collapseTaulukko"
    >
      ${trans_content.filter((d) => d.lang === value_lang)[0]["haitari_taulukko"]}
    </button>
  </h3>
  <div
    id="collapseTaulukko"
    class="accordion-collapse collapse"
    aria-labelledby="flush-headingTwo"
    data-bs-parent="#accordionBottom"
  >
    <div class="accordion-body">
      <h4>${etuus_selected} &#8212 ${erikoisala_selected} ${vuosi_selected}</h4>
      <h5 style="padding-bottom: 1.25rem">${toimenpide_selected}</h5>
      <table class="table table-bordered">
        <tr>
          <th role="columnheader">
            ${trans_content.filter((d) => d.lang ===
            value_lang)[0]["haitari_taulukko_otsikko"]}
          </th>
          <th role="columnheader" style="text-align: right">€</th>
        </tr>
        <tbody>
          ${d3.sort(data_plot, d => -d[[`${hintamuuttuja_selected.muuttuja}`]]).map(d => htl.html`<tr>
            <td>${d[[`region_name_${value_lang}`]]}</td>
            <td align="right">
              ${locale_FI.format(".1f")(d[[`${hintamuuttuja_selected.muuttuja}`]])}
            </td>
          </tr>`)}
        </tbody>
      </table>
    </div>
  </div>
</div>
`

data_plot_dl = data_plot
  .map((d) => {
    return getSubset(
      d,
      `region_name_${value_lang}`,
      "kaynti_vuosi",
      `etuus_selite_${value_lang}`, 
      "toimenpide_koodi",
      `toimenpide_selite_${value_lang}`,
      `erikoisala_${value_lang}`, 
      `${hintamuuttuja_selected.muuttuja}`
    )
  })
data_aikasarja_dl = data_aikasarja.map((d) => {
  return getSubset(
    d,
    `region_name_${value_lang}`,
    "kaynti_vuosi",
    `etuus_selite_${value_lang}`,
    "toimenpide_koodi",
    `toimenpide_selite_${value_lang}`,
    `erikoisala_${value_lang}`,
    `${hintamuuttuja_selected.muuttuja}`
  )
})

csvData = button(
  data_plot_dl,
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_data_file"
  ] +
    "-" +
    hintamuuttuja_selected[[`label_${value_lang}`]] +
    "-" +
    `${aluetaso_selected[[`label_${value_lang}`]]}` +
    "-" +
    etuus_selected +
    "-" +
    erikoisala_selected +
    "-" +
    toimenpide_selected +
    "-" +
    vuosi_selected +
    ".csv",
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0]["label_data"]
)
csvAikasarja = button(
  data_aikasarja_dl,
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_data_aikasarja_file"
  ] +
    "-" +
    hintamuuttuja_selected[[`label_${value_lang}`]] +
    "-" +
    `${aluetaso_selected[[`label_${value_lang}`]]}` +
    "-" +
    etuus_selected +
    "-" +
    erikoisala_selected +
    "-" +
    toimenpide_selected +
    "-" +
    vuosi_selected +
    ".csv",
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_data_aikasarja"
  ]
)
svgPylvas = button(
  pylvas,
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_pylvas_file"
  ] +
    "-" +
    `${aluetaso_selected[[`label_${value_lang}`]]}` +
    "-" +
    etuus_selected +
    "-" +
    erikoisala_selected +
    "-" +
    toimenpide_selected +
    "-" +
    vuosi_selected +
    ".svg",
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0]["label_pylvas"]
)
svgKartta = button(
  kartta,
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_kartta_file"
  ] +
    "-" +
    `${aluetaso_selected[[`label_${value_lang}`]]}` +
    "-" +
    etuus_selected +
    "-" +
    erikoisala_selected +
    "-" +
    toimenpide_selected +
    "-" +
    vuosi_selected +
    ".svg",
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0]["label_kartta"]
)
svgAikasarja = button(
  aikasarja,
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0][
    "label_aikasarja_file"
  ] +
    "-" +
    `${aluetaso_selected[[`label_${value_lang}`]]}` +
    "-" +
    etuus_selected +
    "-" +
    erikoisala_selected +
    "-" +
    toimenpide_selected +
    "-" +
    vuosi_selected +
    ".svg",
  trans_menu_lataus.filter((d) => d.lang === value_lang)[0]["label_aikasarja"]
)

html`
<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"
    >
      ${trans_content.filter((d) => d.lang === value_lang)[0]["haitari_lataus"]}
    </button>
  </h3>
  <div
    id="collapseTallennus"
    class="accordion-collapse collapse"
    aria-labelledby="flush-headingTwo"
    data-bs-parent="#accordionBottom"
  >
    <div class="accordion-body">
      ${csvData} ${csvAikasarja} ${svgPylvas} ${svgKartta} ${svgAikasarja}
    </div>
  </div>
</div>
`

html`
<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="#collapseDataSelite"
      aria-expanded="false"
      aria-controls="collapseDataSelite"
    >
      ${trans_content.filter((d) => d.lang === value_lang)[0]["haitari_selite_data"]}
    </button>
  </h3>
  <div
    id="collapseDataSelite"
    class="accordion-collapse collapse"
    aria-labelledby="flush-headingTwo"
    data-bs-parent="#accordionBottom"
  >
    <div class="accordion-body">
      ${trans_content.filter((d) => d.lang === value_lang)[0]["selite_data"]}
    </div>
  </div>
</div>
`

html`
<div class="bottom-container">
  <h3>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "tietotarjotin"
      ]["title"]
    }
  </h3>
  <p>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "tietotarjotin"
      ]["paragraph"]
    }
  </p>
  <a
    class="link link-standalone"
    href=${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "tietotarjotin"
      ]["link"]
    }
    target="_blank"
  >
    <span class="link-text">
      ${trans_content.filter((d) => d.lang === value_lang)[0][
          "bottom_container"
        ]["tietotarjotin"]["linktext"]
      }
    </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 />
<h3>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "hva_tietopaketti"
      ]["title"]
    }
  </h3>
  <p>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "hva_tietopaketti"
      ]["paragraph"]
    }
  </p>
  <a
    class="link link-standalone"
    href=${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "hva_tietopaketti"
      ]["link"]
    }
    target="_blank"
  >
    <span class="link-text">
      ${trans_content.filter((d) => d.lang === value_lang)[0][
          "bottom_container"
        ]["hva_tietopaketti"]["linktext"]
      }
    </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 />
 <h3>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "kelasto"
      ]["title"]
    }
  </h3>
  <p>
    ${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "kelasto"
      ]["paragraph"]
    }
  </p>
  <a
    class="link link-standalone"
    href=${trans_content.filter((d) => d.lang === value_lang)[0]["bottom_container"][
        "kelasto"
      ]["link"]
    }
    target="_blank"
  >
    <span class="link-text">
      ${trans_content.filter((d) => d.lang === value_lang)[0][
          "bottom_container"
        ]["kelasto"]["linktext"]
      }
    </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>
`