import { aq, op } from "@uwdata/arquero"

bucket_base = "https://isithot-data.s3.fr-par.scw.cloud/www/"

FA = FileAttachment

mutable myLocation = null
mutable geolocateStatus = "default"

getLocation = {
  yield null

  yield navigator.geolocation.getCurrentPosition(
    pos => {
      mutable myLocation = {
        lat: pos.coords.latitude,
        lon: pos.coords.longitude
      }
      mutable geolocateStatus = "granted"
    },
    e => {
      console.log("Geolocation error", e),
      mutable geolocateStatus = "error"
    },
    {
      enableHighAccuracy: false
    })
}

geolocateStatus == "default" ?
  md`Allow location to see local station` :
    geolocateStatus == "error" ?
      md`Problem getting location` :
      md``

myLocation != null ?
  md`Location is lat: ${myLocation.lat}, lon: ${myLocation.lon}` :
  md`Location permission not granted`

// on the home page, get station id from:
//   * _geolocator.qmd's myLocation, plus
//   * _map.qmd's statsAll

stationId = {
  
  // fallback to berlin?
  if (myLocation == null) {
    return "00400"
  }

  // otherwise, find closest station on statsAll
  const closestStation = aq.from(statsAll)
    .params({
      currentLat: myLocation.lat,
      currentLon: myLocation.lon,
    })
    .derive({
      dist: (d, $) => Math.sqrt(
        ($.currentLat - d.isit_lat) ** 2 + ($.currentLon - d.isit_lon) ** 2)
    })
    .orderby("dist")
    .slice(0, 1)
    .array("id")

  return closestStation[0]
}

statsPlace = FA(bucket_base + "stats/stats_" + stationId + ".json").json()

Ist es heute zu heiß in ?

answers = ({
  "Auf gar keinen Fall!":   {color: "white",   fill1: "#5287d1", fill2: "#2166ac" },
  "Nein!":        {color: "white",   fill1: "#a2cdeb", fill2: "#67a9cf" },
  "Nee":       {color: "#333333", fill1: "#f5f8fa", fill2: "#d1e5f0" },
  "Nicht wirklich": {color: "#333333", fill1: "#f7f7f7", fill2: "#ebebeb" },
  "Jepp":        {color: "#333333", fill1: "#fddcca", fill2: "#f7cfb7" },
  "Ziemlich!":      {color: "white",   fill1: "#de7b49", fill2: "#fc946a" },
  "Absolut!": {color: "white",   fill1: "#d1231d", fill2: "#b2182b" }
})

html`
<div class="answer-icon-and-label">
  <span class="answer-icon" style="background-color: ${answers[statsPlace.isit_answer].fill2};">
  </span>
  <span>${statsPlace.isit_answer}</span>
</div>`

md`${statsPlace.isit_comment}`

So sieht es heute im Vergleich aus…

datefns = import("https://cdn.skypack.dev/date-fns@3.3.1?min")
tmaxWhen = new Date(Date.parse(statsPlace.isit_maximum_dt || null))
tminWhen = new Date(Date.parse(statsPlace.isit_minimum_dt || null))

tmaxWhenFriendly = isFinite(tmaxWhen) ?
  datefns.formatRelative(tmaxWhen, new Date()) : ""
tminWhenFriendly = isFinite(tminWhen) ?
  datefns.formatRelative(tminWhen, new Date()) : ""

percentRating = statsPlace.isit_average.toFixed(1) + "%"

md`${statsPlace.isit_minimum} °C  `

md`${tminWhenFriendly}`

md`${statsPlace.isit_maximum} °C  `

md`${tmaxWhenFriendly}`

html`
<div class="answer-icon-and-label">
  <span class="answer-icon" style="background-color: ${answers[statsPlace.isit_answer].fill2};"></span>
  <span>${statsPlace.isit_current.toFixed(1)} °C</span>
</div>`

md`Durchschnitt bisher<br>heißer als **${percentRating}** der Tage für diese Zeit im Jahr.`

md`![](${bucket_base + "plots/timeseries/timeseries-" + stationId + ".png"})`

Dies ist die Verteilung der für diese Jahreszeit typischen Temperaturen, die wir als ein Fenster von sieben Tagen beiderseits des heutigen Tages definiert haben. Wie bei einer Glockenkurve ist die Kurve bei häufigeren Temperaturen höher und bei seltenen Temperaturen niedriger.

md`![](${bucket_base + "plots/distribution/distribution-" + stationId + ".png"})`

… und der Rest vom Jahr.

Wir haben jeden Tag in diesem Jahr in mit ähnlichen Zeiten in der Vergangenheit verglichen. Rote Tage waren im Vergleich zu den Aufzeichnungen heiß, blaue Tage waren kalt.

heatmapYear = (new Date()).toLocaleString("en-US", {timeZone: "Europe/Berlin", year: "numeric"})
md`![](${bucket_base + "plots/heatmap/heatmap-" + stationId + "-" + heatmapYear + ".png"})`

So sieht der Rest von Deutschland heute bisher aus.

nowHour = (new Date()).getUTCHours()
nowHour >= 10 && nowHour <= 22 ?
  md`Mancherorts kann es im Laufe der Nacht noch abkühlen.` :
  md`Mancherorts kann es im Laufe des Tages noch wärmer werden.`

statsAllRaw = FA(bucket_base + "stats/stats_all.json").json()

// statsAllRaw is an object with keys by station id, but we
// need an array with an id field. let's move the ids in
statsAll = {
  const statsArray = []
  Object.keys(statsAllRaw).map(k => statsArray.push({...statsAllRaw[k], id: k}))
  const tidiedStats = aq.from(statsArray)
    .derive({
      lat: d => op.parse_float(d.isit_lat),
      lon: d => op.parse_float(d.isit_lon),
      isit_average: d => op.parse_float(d.isit_average),
      // current? (that's the actual avg temp)
      isit_maximum: d => op.parse_float(d.isit_maximum),
      isit_minimum: d => op.parse_float(d.isit_minimum),
      max_when: d => op.parse_date(d.isit_maximum_dt),
      min_when: d => op.parse_date(d.isit_minimum_dt),
      slug: d =>
        op.replace(
          op.replace(
            op.replace(
              op.lower(d.isit_label),
              /\s-\s/g, "-"),
            /\s/g, "-"),
          /[()]/g, "")
    })
    // mark as stale if latest obs are > 24 hours old
    .derive({
      max_stale:
        d => ((d.max_when - op.now()) / (1000 * 60)) / (24 * 60) > 1,
      min_stale:
        d => ((d.min_when - op.now()) / (1000 * 60)) / (24 * 60) > 1
    })
    .objects()
  return(tidiedStats)
}

currentStats = statsAll.filter(d => (!d.max_stale) && (!d.min_stale))
staleStats = statsAll.filter(d => d.max_stale || d.min_stale)

germany = FileAttachment("/assets/germany.geojson").json()
Plot = import("https://esm.run/@observablehq/plot")

answer_domain = [
         "Auf gar keinen Fall!",
         "Nein!",
         "Nee",
         "Nicht wirklich",
         "Jepp",
         "Ziemlich!",
         "Absolut!"]

Plot.plot({
  projection: {
    type: "equirectangular",
    rotate: [-10.4515,  -51.1657],
    domain: d3.geoCircle().center([10.4515, 51.1657]).radius(4.25)(),
  },
  marks: [
    // Plot.graticule(),
    Plot.geo(germany, {
      fill: "#00000009",
      stroke: "#dddddd"
    }),
    // replace stale locations with crosses
    Plot.dot(staleStats, {
      x: "lon",
      y: "lat",
      stroke: "lightgrey",
      r: 6,
      symbol: "times"
    }),
    Plot.dot(currentStats, {
      x: "lon",
      y: "lat",
      fill: "isit_answer",
      stroke: d =>
        d.isit_answer == "Auf gar keinen Fall!" || d.isit_answer == "Verdammt viel!" ?
        "black" :
        "#00000099",
      strokeWidth: 0.75,
      r: 6,
    }),
    Plot.tip(currentStats, tipTemplate),
    // enlarge dot you're pointing to
    Plot.dot(currentStats, Plot.pointer({
      x: "lon",
      y: "lat",
      fill: "isit_answer",
      stroke: d =>
        d.isit_answer == "Auf gar keinen Fall!" || d.isit_answer == "Verdammt viel!" ?
        "black" :
        "#00000099",
      strokeWidth: 0.75,
      r: 12,
    })),
    // enlargen clickable areas with invisible voronoi polys
    Plot.voronoi(currentStats, {
      x: "lon",
      y: "lat",
      fill: "transparent",
      stroke: "transparent",
      href: d => "/places/" + d.slug,
    }),

  ],
  color: {
    type: "ordinal",
    domain: answer_domain,
    range: ["#2166acff",
            "#67a9cfff",
            "#d1e5f0ff",
            "#f7f7f7ff",
            "#fddbc7ff",
            "#ef8a62ff",
            "#b2182bff"]
  },
  height: 600,
})

// breaking out the pointer layer for readability
// (and in case we decide to customise it later)
tipTemplate = Plot.pointer({
  x: "lon",
  y: "lat",
  channels: {
    place: {
      label: "",
      value: d => d.isit_label,
    },
    label: {
      label: "",
      value: d => d.isit_comment
    },
    separator: {
      label: "",
      value: d => ""
    },
    isit_maximum: {
      label: "Max:",
      value: d => d.isit_maximum + "°C"
    },
    isit_minimum: {
      label: "Min:",
      value: d => d.isit_minimum + "°C"
    }
  },
  fontSize: 20,
  fontFamily: "Roboto Condensed",
  format: {
    x: null,
    y: null
  },
  lineWidth: 20,
  lineHeight: 1.25,
  pointerSize: 0,
  fillOpacity: 0.8,
  strokeOpacity: 0
})

Dieses Projekt gibt es auch für andere Länder

• Australien
• Spanien
• UK
• Bochum