@datagouv/components-next 1.0.2-dev.163 → 1.0.2-dev.165

package/dist/{vue3-xml-viewer.common-Cpui-Yi9.js → vue3-xml-viewer.common-Cp7Cu5ME.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-BU6kP4dE.js";
+import { g as Ke } from "./main-DNoYWfit.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.163",
+  "version": "1.0.2-dev.165",
   "private": false,
   "type": "module",
   "engines": {
@@ -23,7 +23,7 @@
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.11",
+    "@floating-ui/vue": "^2.0.1",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.9.0",
     "@types/hast": "^3.0.4",
@@ -31,7 +31,7 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/router": "^14.3.0",
     "chart.js": "^4.5.1",
-    "dompurify": "^3.4.7",
+    "dompurify": "^3.4.11",
     "echarts": "^6.1.0",
     "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",
@@ -63,7 +63,6 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@intlify/cli": "^0.13.1",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tsconfig/node22": "^22.0.5",
@@ -83,7 +82,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.3",
     "vite-plugin-vue-devtools": "^8.1.2",
-    "vue": "^3.5.35",
+    "vue": "^3.5.40",
     "vue-router": "^5.0.7",
     "vue-tsc": "^3.3.2"
   },

package/src/components/Chart/ChartViewer.vue

@@ -13,7 +13,8 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import { init, type ECharts as EChartsType } from 'echarts'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { summarize } from '../../functions/helpers'
-import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import { useFormatDate } from '../../functions/dates'
+import type { Chart, ColumnDefinition, ColumnsDefinition, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
 import { useTranslation } from '../../composables/useTranslation'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
@@ -22,17 +23,26 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<{ name: string, type: string }>>
+    columns: ColumnsDefinition
   }
 }>()
 
 const { locale } = useTranslation()
+const { formatDate } = useFormatDate()
 const chartContainer = ref<HTMLElement | null>(null)
 let echartsInstance: EChartsType | null = null
 
-function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
+function capture(): string | null {
+  return echartsInstance?.getDataURL() ?? null
+}
+
+defineExpose({ capture })
+
+// ECharts has a dedicated 'time' axis type for continuous date values.
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' | 'time' {
   if (!xAxis) return 'category'
-  return xAxis.type === 'continuous' ? 'value' : 'category'
+  if (xAxis.type !== 'continuous') return 'category'
+  return isDateAxis.value ? 'time' : 'value'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -44,6 +54,77 @@ function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefi
   }
 }
 
+function buildXAxisFormatter(column: ColumnDefinition | null, options?: Intl.DateTimeFormatOptions): ((value: string | number | Date) => string) | undefined {
+  if (column?.type !== 'date') return undefined
+  return (value: string | number | Date) => {
+    if (value === null || value === undefined) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return String(value)
+    return formatDate(date, options ?? { dateStyle: 'short' })
+  }
+}
+
+function parseXValueAsDate(row: Record<string, unknown>, xColumn: string): Record<string, unknown> {
+  const value = row[xColumn]
+  if (value === null || value === undefined || value instanceof Date) return row
+  if (typeof value === 'string') {
+    const date = new Date(value)
+    if (!Number.isNaN(date.getTime())) {
+      return { ...row, [xColumn]: date }
+    }
+  }
+  return row
+}
+
+const xAxisColumn = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return null
+  for (const columns of Object.values(props.series.columns)) {
+    const column = columns.find(c => c.name === columnName)
+    if (column) return column
+  }
+  return null
+})
+
+const isDateAxis = computed(() => xAxisColumn.value?.type === 'date')
+
+const xAxisBounds = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return { min: undefined, max: undefined }
+
+  let min: number | undefined
+  let max: number | undefined
+
+  for (const s of props.chart.series) {
+    const xColumn = s.column_x_name_override ?? columnName
+    const data = props.series.data[s.resource_id]
+    if (!data) continue
+
+    for (const row of data) {
+      const value = row[xColumn]
+      if (value === null || value === undefined) continue
+
+      let numericValue: number | undefined
+      if (value instanceof Date) {
+        numericValue = value.getTime()
+      }
+      else if (isDateAxis.value && typeof value === 'string') {
+        numericValue = new Date(value).getTime()
+      }
+      else {
+        numericValue = Number(value)
+      }
+
+      if (numericValue === undefined || Number.isNaN(numericValue)) continue
+
+      if (min === undefined || numericValue < min) min = numericValue
+      if (max === undefined || numericValue > max) max = numericValue
+    }
+  }
+
+  return { min, max }
+})
+
 const echartsOption = computed(() => {
   const seriesCount = props.chart.series.length
   if (!props.chart.series || seriesCount === 0) return
@@ -58,12 +139,15 @@ const echartsOption = computed(() => {
       return null
     }
 
-    const sortedData = [...props.series.data[resourceId]]
-    const sortBy = props.chart.x_axis.sort_x_by
+    const rawData = props.series.data[resourceId]
+    const sortedData = isDateAxis.value
+      ? rawData.map(row => parseXValueAsDate(row, xColumn))
+      : [...rawData]
+    const sortBy = props.chart.x_axis.sort_x_by ?? (isDateAxis.value ? 'axis_x' : null)
     const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
 
     if (sortBy && sortDirection && props.chart.x_axis.column_x) {
-      const sortKey = sortBy === 'axis_x' ? xColumn : yColumn
+      const sortKey = sortBy === 'axis_y' ? yColumn : xColumn
       sortedData.sort((a, b) => {
         const valA = a[sortKey]
         const valB = b[sortKey]
@@ -136,6 +220,8 @@ const echartsOption = computed(() => {
     seriesData.data.push(curr.data)
   }
 
+  const xAxisType = mapXAxisType(props.chart.x_axis)
+
   return {
     dataset: [...seriesData.data],
     textStyle: {
@@ -146,10 +232,12 @@ const echartsOption = computed(() => {
       trigger: 'axis' as const,
       formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
         let tooltip = ''
-        const formatter = new Intl.NumberFormat('fr-FR')
+        const valueFormatter = new Intl.NumberFormat(locale)
+        const xAxisFormatter = buildXAxisFormatter(xAxisColumn.value, { dateStyle: 'medium' })
         for (const param of params) {
           const seriesName = param.seriesName
-          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[seriesName]))}</strong><br>`
+          const axisLabel = xAxisFormatter ? xAxisFormatter(param.axisValueLabel) : param.axisValueLabel
+          tooltip += `${format.encodeHTML(String(axisLabel))}: <strong>${valueFormatter.format(Number(param.value[seriesName]))}</strong><br>`
         }
         return tooltip
       },
@@ -166,8 +254,13 @@ const echartsOption = computed(() => {
       containLabel: true,
     },
     xAxis: {
-      type: mapXAxisType(props.chart.x_axis),
+      type: xAxisType,
       name: (props.chart.x_axis as XAxis).column_x,
+      min: xAxisType !== 'category' ? xAxisColumn.value?.min ?? xAxisBounds.value.min ?? undefined : undefined,
+      max: xAxisType !== 'category' ? xAxisColumn.value?.max ?? xAxisBounds.value.max ?? undefined : undefined,
+      axisLabel: xAxisType === 'time'
+        ? { formatter: buildXAxisFormatter(xAxisColumn.value) }
+        : undefined,
     },
     yAxis: {
       type: 'value' as const,

package/src/components/Chart/ChartViewerWrapper.vue

@@ -5,6 +5,7 @@
   >
     <template #default="{ data }">
       <ChartViewer
+        ref="chartViewerRef"
         :chart="chart"
         :series="data"
       />
@@ -33,6 +34,13 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
+const chartViewerRef = ref<InstanceType<typeof ChartViewer> | null>(null)
+
+function capture(): string | null {
+  return chartViewerRef.value?.capture() ?? null
+}
+
+defineExpose({ capture })
 const config = useComponentsConfig()
 const getProfile = useGetProfile()
 

package/src/components/DataserviceCard.vue

@@ -99,6 +99,11 @@
         </p>
       </div>
     </div>
+    <DataserviceQualityInline
+      v-if="dataservice.quality"
+      :quality="dataservice.quality"
+    />
+
     <ObjectCardShortDescription
       v-if="showDescription"
       :text="dataservice.description"
@@ -126,6 +131,7 @@ import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import DataserviceQualityInline from './DataserviceQualityInline.vue'
 
 type Props = {
   dataservice: Dataservice

package/src/components/DataserviceQuality.vue

@@ -0,0 +1,82 @@
+<template>
+  <Toggletip
+    :styled-button="false"
+    button-class="flex items-center gap-1 rounded-sm p-1.5 -m-1.5 border-transparent -outline-offset-2 hover:bg-gray-some transition-colors w-full text-left"
+    :button-props="{ title: t('Qualité des métadonnées') }"
+  >
+    <QualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <RiInformationLine
+      class="size-5 shrink-0"
+      aria-hidden="true"
+    />
+    <template #toggletip>
+      <DataserviceQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
+  <template v-if="!hideWarnings">
+    <ul class="list-none pl-0">
+      <QualityItemWarning
+        :quality-item="quality.has_description"
+        :message="t('Description non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_machine_documentation"
+        :message="t('Documentation machine (OpenAPI) manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_technical_documentation"
+        :message="t('Documentation technique manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_business_documentation"
+        :message="t('Documentation métier manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.license"
+        :message="t('Licence non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_contact_point"
+        :message="t('Point de contact non renseigné')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_base_api_url"
+        :message="t(`URL de base de l'API non renseignée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.availability_documented"
+        :message="t('Disponibilité non documentée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.rate_limiting_documented"
+        :message="t(`Limite d'appels non documentée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.access_conditions_clear"
+        :message="t(`Conditions d'accès non précisées`)"
+      />
+    </ul>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+withDefaults(defineProps<{
+  quality: DataserviceQuality
+  hideWarnings?: boolean
+}>(), {
+  hideWarnings: false,
+})
+
+const { t } = useTranslation()
+</script>

package/src/components/DataserviceQualityInline.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="m-0 text-sm text-gray-medium">
+    <Toggletip
+      :styled-button="false"
+      button-class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-lower transition-colors"
+      :button-props="{ class: 'relative z-2 gap-1 rounded-sm px-1 -mx-1 group/quality', title: t('Qualité des métadonnées') }"
+    >
+      <RiInformationLine class="size-3.5 shrink-0" />
+      <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
+      <QualityScore :score="quality.score" />
+      <template #toggletip>
+        <DataserviceQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DataserviceQualityTooltipContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <p class="text-sm text-gray-plain font-bold mb-0">
+    {{ t("Qualité des métadonnées :") }}
+  </p>
+  <ul class="list-none pl-0 space-y-2">
+    <QualityItem
+      :passed="quality.has_description"
+      :message-passed="t('Description renseignée')"
+      :message-failed="t('Description non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_machine_documentation"
+      :message-passed="t('Documentation machine (OpenAPI) disponible')"
+      :message-failed="t('Documentation machine (OpenAPI) manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_technical_documentation"
+      :message-passed="t('Documentation technique renseignée')"
+      :message-failed="t('Documentation technique manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_business_documentation"
+      :message-passed="t('Documentation métier renseignée')"
+      :message-failed="t('Documentation métier manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.license"
+      :message-passed="t('Licence renseignée')"
+      :message-failed="t('Licence non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_contact_point"
+      :message-passed="t('Point de contact renseigné')"
+      :message-failed="t('Point de contact non renseigné')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_base_api_url"
+      :message-passed="t(`URL de base de l'API renseignée`)"
+      :message-failed="t(`URL de base de l'API non renseignée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.availability_documented"
+      :message-passed="t('Disponibilité documentée')"
+      :message-failed="t('Disponibilité non documentée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.rate_limiting_documented"
+      :message-passed="t(`Limite d'appels documentée`)"
+      :message-failed="t(`Limite d'appels non documentée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.access_conditions_clear"
+      :message-passed="t(`Conditions d'accès claires`)"
+      :message-failed="t(`Conditions d'accès non précisées`)"
+      class="pb-0"
+    />
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { DataserviceQuality } from '../types/dataservices'
+import { useTranslation } from '../composables/useTranslation'
+import QualityItem from './QualityItem.vue'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DatasetQuality.vue

@@ -13,7 +13,7 @@
         {{ t('Qualité des métadonnées:') }}
       </span>
     </span>
-    <DatasetQualityScore
+    <QualityScore
       :score="quality.score"
       class="w-full"
     />
@@ -23,35 +23,35 @@
   </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.dataset_description_quality"
         :message="t('Description des données non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.resources_documentation"
         :message="t('Documentation des fichiers manquante')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.license"
         :message="t('Licence non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
         :message="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.has_open_format"
         :message="t('Formats de fichiers non standards')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.temporal_coverage"
         :message="t('Couverture temporelle non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.spatial"
         :message="t('Couverture spatiale non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.all_resources_available"
         :message="t('Certains fichiers ne sont pas disponibles')"
       />
@@ -62,8 +62,8 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import QualityScore from './QualityScore.vue'
 import Toggletip from './Toggletip.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityInline.vue

@@ -7,7 +7,7 @@
     >
       <RiInformationLine class="size-3.5 shrink-0" />
       <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
-      <DatasetQualityScore :score="quality.score" />
+      <QualityScore :score="quality.score" />
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityScore from './QualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import Toggletip from './Toggletip.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityTooltipContent.vue

@@ -68,7 +68,7 @@
 import type { Quality } from '../types/datasets'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
-import DatasetQualityItem from './DatasetQualityItem.vue'
+import DatasetQualityItem from './QualityItem.vue'
 
 defineProps<{
   quality: Quality

package/src/components/ResourceAccordion/ImagePreview.client.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="text-xs">
+    <PreviewUnavailable v-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <img
+      v-else
+      :src="resource.url"
+      alt=""
+      class="block w-full h-auto max-w-[800px]"
+      @error="hasError = true"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const hasError = ref(false)
+
+const fileType = computed(() => props.resource.format?.toUpperCase() ?? t('Fichier'))
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = config.maxImagePreviewByteSize
+  if (!size || !max) return false
+  return size <= max
+})
+</script>

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -224,6 +224,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <!-- Show Datafair embedded preview (koumoul) -->
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
@@ -309,7 +313,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -344,6 +348,7 @@ const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
+const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vue'))
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
@@ -351,11 +356,11 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
-  // For JSON, PDF, and XML files, show preview.
+  // For JSON, PDF, XML, and image files, show preview.
   // We cannot check for CORS issues here because we cannot use an async component here.
   // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
   const format = props.resource.format?.toLowerCase()
-  return format === 'json' || format === 'pdf' || format === 'xml'
+  return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
 })
 
 const hasTabularData = computed(() => checkTabularData(props.resource))