Improve pages of variables.

src/lib/variables.ts

+export interface Formula {
+  content: string
+  documentation?: string
+  source: string
+}
+
+export interface Variable {
+  defaultValue: boolean | number | string
+  definitionPeriod: "ETERNITY" | "MONTH" | "YEAR"
+  description: string | null
+  entity: "famille" | "foyer_fiscal" | "individu" | "menage"
+  formulas?: { [date: string]: Formula }
+  id: string
+  possibleValues?: { [id: string]: string }
+  references?: string[]
+  source: string
+  valueType: "Boolean" | "Date" | "Float" | "Int" | "String"
+}
+
+export interface VariableSummary {
+  description: string | null
+  href: string
+}
+
+export interface VariableSummaryById {
+  [id: string]: VariableSummary
+}

src/routes/variables/[variable].svelte

+<script context="module" lang="ts">
+  import type { LoadInput, LoadOutput } from "@sveltejs/kit/types.internal"
+
+  export async function load({ fetch, page }: LoadInput): Promise<LoadOutput> {
+    const { variable: id } = page.params
+    const url = `https://fr.openfisca.org/api/latest/variable/${id}`
+    const res = await fetch(url)
+    if (!res.ok) {
+      return {
+        status: res.status,
+        error: new Error(`Could not load ${url}`),
+      }
+    }
+    return {
+      props: {
+        variable: await res.json(),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { Variable } from "$lib/variables"
+
+  export let variable: Variable
+</script>
+
+<h1>
+  Variable
+  <var>{variable.id}</var>
+  {#if variable.description != null}
+    : {variable.description}
+  {/if}
+</h1>
+{#if variable.formulas != null}
+  <dl>
+    {#each Object.entries(variable.formulas) as [date, formula]}
+      <dt>{date}</dt>
+      <dd>
+        {#if formula.documentation != null}
+          <div class="whitespace-pre-line">
+            {formula.documentation.replace(/^\n+/, "").replace(/\n+$/, "")}
+          </div>
+        {/if}
+        <p><a href={formula.source}>Source</a></p>
+        <pre>{formula.content}</pre>
+      </dd>
+    {/each}
+  </dl>
+{/if}
+
+<hr class="my-4" />
+
+<h2>JSON</h2>
+<pre>{JSON.stringify(variable, null, 2)}</pre>

src/routes/variables/index.svelte

@@ -4,24 +4,35 @@
   export async function load({ fetch }: LoadInput): Promise<LoadOutput> {
     const url = "https://fr.openfisca.org/api/latest/variables"
     const res = await fetch(url)
-
-    if (res.ok) {
+    if (!res.ok) {
       return {
-        props: {
-          variableById: await res.json(),
-        },
+        status: res.status,
+        error: new Error(`Could not load ${url}`),
       }
     }
-
     return {
-      status: res.status,
-      error: new Error(`Could not load ${url}`),
+      props: {
+        variableById: await res.json(),
+      },
     }
   }
 </script>
 
 <script lang="ts">
-  export let variableById: unknown
+  import type { VariableSummaryById } from "$lib/variables"
+
+  export let variableById: VariableSummaryById
 </script>
 
-<pre>{JSON.stringify(variableById, null, 2)}</pre>
+<ul class="list-disc list-inside">
+  {#each Object.entries(variableById) as [id, variable]}
+    <li>
+      <a href="variables/{id}">
+        <var>{id}</var>
+        {#if variable.description !== null}
+          : {variable.description}
+        {/if}
+      </a>
+    </li>
+  {/each}
+</ul>