feat: present cleared accessible project media

src/components/ChartFigure.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ChartMediaPresentation } from '@/content/types';
+
+defineProps<{
+  presentation: Readonly<ChartMediaPresentation>;
+  src: string;
+  width: number;
+  height: number;
+}>();
+</script>
+
+<template>
+  <figure class="project-media project-media--chart" data-project-media>
+    <img
+      :src="src"
+      :alt="presentation.alt"
+      :width="width"
+      :height="height"
+      loading="lazy"
+      decoding="async"
+    />
+    <figcaption>{{ presentation.caption }}</figcaption>
+    <dl class="chart-description">
+      <dt>Variables</dt>
+      <dd data-testid="chart-variables">{{ presentation.chart.variables }}</dd>
+      <dt>Trend</dt>
+      <dd data-testid="chart-trend">{{ presentation.chart.trend }}</dd>
+      <dt>Conclusion</dt>
+      <dd data-testid="chart-conclusion">{{ presentation.chart.conclusion }}</dd>
+    </dl>
+    <table v-if="presentation.chart.table" class="chart-values">
+      <caption>{{ presentation.chart.table.caption }}</caption>
+      <thead>
+        <tr>
+          <th v-for="column in presentation.chart.table.columns" :key="column" scope="col">{{ column }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in presentation.chart.table.rows" :key="rowIndex">
+          <th scope="row">{{ row[0] }}</th>
+          <td v-for="(value, cellIndex) in row.slice(1)" :key="cellIndex">{{ value }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </figure>
+</template>