47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<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>
|