Hydrographischer Dienst Tirol

README.md

@@ -2,7 +2,8 @@
 
 A visual explorer tool for the ZAMG Data Hub (aka. GeoSphere Austria Data Hub).
 
-https://zamg-explorer.legner.me/
+- https://zamg-explorer.legner.me/
+- https://zamg-explorer.legner.me/hydro/
 
 ## Links
 

src/components/HydroCharts.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="response && response.headers" class="mb-5">
+    Datenstand:
+    {{ formatDateTime(new Date(response.headers.get("Last-Modified") || "")) }}
+  </div>
+  <div
+    v-for="{ metadata, station, parameter, timestamps } of hydro"
+    class="mb-5"
+  >
+    <h2>
+      {{ metadata.name }}
+      <small>
+        <a :href="web + metadata.id" target="_blank" ref="external noopener">
+          {{ metadata.id }}
+        </a>
+      </small>
+    </h2>
+    <TimeseriesChart
+      :stations="[metadata]"
+      :stationParameters="[{ station, parameter }]"
+      :timestamps="timestamps"
+      :height="250"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "@vue/reactivity";
+import { useFetch } from "@vueuse/core";
+import TimeseriesChart from "./TimeseriesChart.vue";
+import type { StationMetadata, GeoJSONFeatureParameter } from "./openapi";
+import { formatDateTime } from "../util/formatters";
+
+const web = "https://hydro.tirol.gv.at/#/Wasserstand?station=";
+const url = "https://corsproxy.io/?https://hydro.tirol.gv.at/ogd/OGD_W.csv";
+const { data, response } = useFetch(url).arrayBuffer();
+
+const hydro = computed(() => {
+  if (!data.value) return;
+  const result: Record<
+    string,
+    {
+      metadata: StationMetadata;
+      station: string;
+      parameter: GeoJSONFeatureParameter;
+      timestamps: number[];
+    }
+  > = {};
+  const decoder = new TextDecoder("iso-8859-1");
+  const lines = decoder.decode(data.value).split("\n");
+  const header = lines[0].trim().split(";") as (
+    | "Stationsname"
+    | "Stationsnummer"
+    | "Gewässer"
+    | "Parameter"
+    | "Zeitstempel in ISO8601"
+    | "Wert"
+    | "Einheit"
+    | "Seehöhe"
+    | "Rechtswert"
+    | "Hochwert"
+    | "EPSG-Code"
+  )[];
+  lines?.slice(1).forEach((line) => {
+    const cells = line.trim().split(";");
+    const river = cells[header.indexOf("Gewässer")];
+    if (river !== "Inn") return;
+    const value: StationMetadata = {
+      name: cells[header.indexOf("Stationsname")],
+      id: cells[header.indexOf("Stationsnummer")],
+      altitude: +cells[header.indexOf("Seehöhe")],
+    } as StationMetadata;
+    const station = value.id!;
+    const parameter = {
+      data: [],
+      name: cells[header.indexOf("Parameter")],
+      unit: cells[header.indexOf("Einheit")],
+    } as GeoJSONFeatureParameter;
+    result[station] ??= { metadata: value, station, parameter, timestamps: [] };
+    result[station].timestamps.push(
+      Date.parse(cells[header.indexOf("Zeitstempel in ISO8601")]) / 1000
+    );
+    const v = +(cells[header.indexOf("Wert")] || "").replace(",", ".");
+    result[station].parameter.data.push(v === -777 ? NaN : v);
+  });
+  return Object.values(result).sort((h1, h2) =>
+    h1.station.localeCompare(h2.station)
+  );
+});
+//
+</script>

src/components/Station.vue

@@ -203,7 +203,7 @@ const stationParameters = computed(
   () =>
     data.value?.features?.flatMap((station) =>
       Object.values(station.properties.parameters).map((parameter) => ({
-        station,
+        station: station.properties.station,
         parameter,
       })),
     ) ?? [],

src/components/TimeseriesChart.vue

@@ -7,21 +7,18 @@ import { onMounted, onUnmounted, ref, watch } from "vue";
 import uPlot from "uplot";
 import "uplot/dist/uPlot.min.css";
 
-import type {
-  GeoJSONFeatureParameter,
-  StationGeoJSONFeature,
-  StationMetadata,
-} from "./openapi";
+import type { GeoJSONFeatureParameter, StationMetadata } from "./openapi";
 import { formatNumber } from "../util/formatters";
 import { useElementSize } from "@vueuse/core";
 
 const props = defineProps<{
   stations: StationMetadata[];
   stationParameters: {
-    station: StationGeoJSONFeature;
+    station: string;
     parameter: GeoJSONFeatureParameter;
   }[];
   timestamps: number[];
+  height?: number;
 }>();
 // https://colorbrewer2.org/?type=qualitative&scheme=Set1&n=7
 const colors = [
@@ -45,7 +42,7 @@ const { width } = useElementSize(chartRef);
 onMounted(() => {
   const config: uPlot.Options = {
     width: 1200,
-    height: 600,
+    height: props.height ?? 600,
     cursor: { sync: { key: "Uy1ru6de9eisha7EireiV5pooM8chaic" } },
     axes: [
       {
@@ -77,7 +74,7 @@ onMounted(() => {
           .join(", "),
         values: (_, values) =>
           values.map((v) =>
-            formatNumber(v, props.stationParameters[0].parameter.unit),
+            formatNumber(v, props.stationParameters[0].parameter.unit)
           ),
       },
     ],
@@ -89,8 +86,7 @@ onMounted(() => {
       ...props.stationParameters.map(
         ({ station, parameter }, index): uPlot.Series => {
           const stationName =
-            props.stations.find((s) => s.id === station.properties.station)
-              ?.name || station.properties.station;
+            props.stations.find((s) => s.id === station)?.name || station;
           return {
             label: `${stationName}: ${parameter.name} `,
             value: (_, v) => formatNumber(v, parameter.unit),
@@ -107,7 +103,7 @@ onMounted(() => {
   const chart = new uPlot(config, data, chartRef.value!);
   onUnmounted(() => chart.destroy());
 
-  watch(width, (w) => chart.setSize({ width: w, height: 600 }), {
+  watch(width, (w) => chart.setSize({ width: w, height: chart.height }), {
     immediate: true,
   });
 });

src/layouts/ExplorerLayout.astro

@@ -29,6 +29,10 @@ const menuItems = [
       label: dataset,
     })),
   },
+  {
+    href: "/hydro/",
+    label: "Hydro",
+  },
 ];
 
 function isActive(href: string): boolean {

src/pages/hydro.mdx

@@ -0,0 +1,14 @@
+---
+layout: ../layouts/ExplorerLayout.astro
+---
+
+import HydroCharts from "../components/HydroCharts.vue";
+
+# Hydrographischer Dienst Tirol
+
+- https://hydro.tirol.gv.at/
+- https://hydro.tirol.gv.at/ogd/OGD_W.csv
+- https://www.tirol.gv.at/umwelt/wasserwirtschaft/wasserkreislauf/
+- https://www.data.gv.at/katalog/dataset/6772e22a-a364-47df-9cf7-0590fdde1757#resources
+
+<HydroCharts client:only="vue" />