@datagouv/components-next 1.0.2-dev.19 → 1.0.2-dev.191

package/src/composables/useStableQueryParams.ts

@@ -1,11 +1,13 @@
-import { ref, watch, type Ref } from 'vue'
+import { computed, ref, watch, type Ref } from 'vue'
 import type { SearchTypeConfig } from '../types/search'
+import { configKey, forEachActiveCustomFilter, type CustomFilterEntry } from './useSearchFilter'
 
 type FilterRefs = Record<string, Ref<unknown>>
 
 interface StableQueryParamsOptions {
   typeConfig: SearchTypeConfig | undefined
   allFilters: FilterRefs
+  customFilterRegistry: Map<string, CustomFilterEntry>
   q: Ref<string>
   sort: Ref<string | undefined>
   page: Ref<number>
@@ -17,7 +19,7 @@ interface StableQueryParamsOptions {
  * Applies hiddenFilters first, then user filters (which can override hiddenFilters).
  */
 export function useStableQueryParams(options: StableQueryParamsOptions) {
-  const { typeConfig, allFilters, q, sort, page, pageSize } = options
+  const { typeConfig, allFilters, customFilterRegistry, q, sort, page, pageSize } = options
   const stableParams = ref<Record<string, unknown>>({})
 
   const buildParams = () => {
@@ -50,14 +52,34 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
       }
     }
 
+    // 3.5. Apply custom filter values. Concatenate into an array on collision
+    // so a custom filter mapped onto a built-in apiParam (e.g. theme → tag)
+    // combines with an existing built-in value instead of overwriting it.
+    // Pass the current type key so filters scoped to specific types are excluded
+    // from background fetches for other types.
+    const currentTypeKey = typeConfig ? configKey(typeConfig) : undefined
+    forEachActiveCustomFilter(customFilterRegistry, (apiParam, value) => {
+      const existing = params[apiParam]
+      if (existing === undefined) {
+        params[apiParam] = value
+      }
+      else {
+        params[apiParam] = Array.isArray(existing) ? [...existing, value] : [existing, value]
+      }
+    }, currentTypeKey)
+
     // 4. Always include q, sort (if valid for this type), page, page_size
     if (q.value) {
       params.q = q.value
     }
-    if (sort.value) {
+    const sortToUse = sort.value ?? typeConfig?.defaultSort
+    if (sortToUse) {
       const validSortValues = typeConfig?.sortOptions?.map(o => o.value as string) ?? []
-      if (validSortValues.includes(sort.value)) {
-        params.sort = sort.value
+      if (validSortValues.includes(sortToUse)) {
+        params.sort = sortToUse
+      }
+      else if (import.meta.env.DEV && typeConfig?.defaultSort && typeConfig?.sortOptions && sortToUse === typeConfig.defaultSort) {
+        console.warn(`[GlobalSearch] defaultSort "${typeConfig.defaultSort}" is not in sortOptions for "${typeConfig.class}". Valid values: ${validSortValues.join(', ')}`)
       }
     }
     params.page = page.value
@@ -66,9 +88,19 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
     return params
   }
 
+  // Computed that reads all custom filter values, establishing reactive dependencies
+  // on both the Map mutations (shallowReactive) and each entry's ref.value.
+  const customFilterValues = computed(() => {
+    const snapshot: Record<string, unknown> = {}
+    for (const [urlParam, entry] of customFilterRegistry) {
+      snapshot[urlParam] = entry.ref.value
+    }
+    return snapshot
+  })
+
   // Watch all dependencies and update only if content changed
   watch(
-    [q, sort, page, ...Object.values(allFilters)],
+    [q, sort, page, ...Object.values(allFilters), customFilterValues],
     () => {
       const newParams = buildParams()
       // JSON.stringify comparison is safe here because buildParams() builds the object deterministically

package/src/composables/useTabularProfile.ts

@@ -0,0 +1,70 @@
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
+  refresh: () => Promise<void>
+}
+
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const config = useComponentsConfig()
+  const ridRef = computed(() => toValue(resourceId))
+
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
+
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return await injected.state
+  }
+  return await createProfileState(resourceId)
+}

package/src/composables/useTranslation.ts

@@ -14,24 +14,39 @@ const translationModules = import.meta.glob<Record<string, string>>('../../../lo
   import: 'default',
 })
 
+const LANGUAGE_SUBTAG_REGEX = /^[a-z]{2,3}$/
+
+/**
+ * Extract the language subtag of an `accept-language` header or of
+ * `navigator.language`, and return it only if it is a well-formed one.
+ *
+ * Both are user-controlled, and the locale is handed over to `Intl` formatters,
+ * which throw a `RangeError` on anything that is not a valid language tag. The
+ * wildcard `*` is rejected here too: it means "any language", so it must fall
+ * back to the next detection step.
+ */
+function parseLanguage(value: string | undefined | null): string | null {
+  if (!value) {
+    return null
+  }
+  const language = value.split(';')[0]!.split(',')[0]!.split('-')[0]!.toLowerCase()
+  return LANGUAGE_SUBTAG_REGEX.test(language) ? language : null
+}
+
 function detectLanguage(): string {
   // Server-side (Nuxt)
   try {
-    const header = useRequestHeader?.('accept-language')
-    const acceptLanguage = header
-    if (acceptLanguage) {
-      const primaryLang = acceptLanguage.split(';')[0]!.split(',')[0]!.split('-')[0]!.toLowerCase()
-      // Ignore wildcard * language, that should fallback to client side detection or default language
-      if (primaryLang !== '*') return primaryLang
-    }
+    const language = parseLanguage(useRequestHeader?.('accept-language'))
+    if (language) return language
   }
   catch {
     // useRequestHeaders not available, continue to client-side detection
   }
 
   // Client-side
-  if (typeof window !== 'undefined' && navigator.language) {
-    return navigator.language.split('-')[0]!.toLowerCase()
+  if (typeof window !== 'undefined') {
+    const language = parseLanguage(navigator.language)
+    if (language) return language
   }
 
   return 'fr'

package/src/config.ts

@@ -1,15 +1,18 @@
 import { inject, type Component, type InjectionKey } from 'vue'
 import type { UseFetchFunction } from './functions/api.types'
-import type { FetchOptions } from 'ofetch'
+import type { $Fetch, FetchOptions } from 'ofetch'
 
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
   baseUrl: string
+  /** Hostnames allowed in Access-Control-Allow-Origin for resource preview CORS checks (e.g. data.gouv.fr). */
+  trustedDomains?: string[]
   apiBase: string
   devApiKey?: string | null
   datasetQualityGuideUrl?: string
   maxJsonPreviewCharSize?: number // Maximum size of JSON to preview in characters. JSON preview module is partly collapsed by default so we can have a preview for large files.
   maxPdfPreviewByteSize?: number // Maximum size of PDF to preview in bytes
+  maxImagePreviewByteSize?: number // Maximum size of image to preview in bytes
   maxXmlPreviewCharSize?: number // Maximum size of XML to preview in characters. XML preview module can NOT be collapsed by default so we should not have a preview for large files.
   pmtilesViewerBaseUrl?: string | null // Base URL of a pmtiles viewer (ex: https://pmtiles.io/#url=)
   metricsApiUrl?: string
@@ -18,10 +21,21 @@ export type PluginConfig = {
   schemasSiteUrl?: string
   schemasSiteName?: string
   tabularApiUrl?: string
+  chartsApiBase?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
   customUseFetch?: UseFetchFunction | null
+  /**
+   * Imperative configured fetch (auth, headers, error handling): the single source of truth for
+   * requests. The default `useFetch` uses it as its transport, and imperative helpers (metrics CSV
+   * export, …) call it directly — so they never need a `?? ofetch` fallback.
+   * Optional for consumers: when omitted, the plugin defaults it to an `ofetch` instance built from
+   * the `onRequest`/`onResponse` hooks below (see the `datagouv` plugin install). A consumer can
+   * instead provide its own (e.g. a Bearer-authenticated `$fetch`) and skip the hooks entirely.
+   */
+  $fetch?: $Fetch | null
+  /** Auth/headers/error hooks. Folded into the default `$fetch` when no `$fetch` is provided. */
   onRequest?: FetchOptions['onRequest']
   onRequestError?: FetchOptions['onRequestError']
   onResponse?: FetchOptions['onResponse']
@@ -35,8 +49,12 @@ export type PluginConfig = {
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>
 
-export function useComponentsConfig(): PluginConfig {
+// After the `datagouv` plugin install, `$fetch` is always set (defaulted to an ofetch instance), so
+// consumers of the config can rely on it without a fallback.
+export type ResolvedPluginConfig = PluginConfig & { $fetch: $Fetch }
+
+export function useComponentsConfig(): ResolvedPluginConfig {
   const config = inject(configKey)
   if (!config) throw new Error('Calling `useComponentsConfig` outside @datagouv/components')
-  return config
+  return config as ResolvedPluginConfig
 }

package/src/functions/activities.ts

@@ -11,9 +11,9 @@ export function getActivityTranslation(activity: Activity): string {
     'dataset:deleted': t('a supprimé le jeu de données'),
     'dataset:discussed': t('a discuté du jeu de données'),
     'dataset:followed': t('suit le jeu de données'),
-    'dataset:resource:added': t('a ajouté une ressource'),
-    'dataset:resource:updated': t('a mis à jour une ressource'),
-    'dataset:resource:deleted': t('a supprimé une ressource'),
+    'dataset:resource:added': t('a ajouté la ressource'),
+    'dataset:resource:updated': t('a mis à jour la ressource'),
+    'dataset:resource:deleted': t('a supprimé la ressource'),
     'dataservice:created': t('a créé le service de données'),
     'dataservice:updated': t('a mis à jour le service de données'),
     'dataservice:deleted': t('a supprimé le service de données'),

package/src/functions/api.ts

@@ -1,7 +1,6 @@
 import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
 function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
@@ -18,57 +17,34 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { locale } = useTranslation()
-
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
   }
 
+  const isRaw = options?.raw
   const data: Ref<DataT | null> = ref(null)
   const error: Ref<ErrorT | null> = ref(null)
   const status = ref<AsyncDataRequestStatus>('idle')
 
-  const execute = async () => {
+  const execute = async (signal?: AbortSignal) => {
     const urlValue = toValue(url)
     if (!urlValue) return
     const params = deepToValue(options?.params)
     const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
-      data.value = await ofetch<DataT | null>(urlValue, {
-        baseURL: config.apiBase,
-        params: params ?? query,
-        onRequest(param) {
-          if (config.onRequest) {
-            if (Array.isArray(config.onRequest)) {
-              config.onRequest.forEach(r => r(param))
-            }
-            else {
-              config.onRequest(param)
-            }
-          }
-          const { options } = param
-          options.headers.set('Content-Type', 'application/json')
-          options.headers.set('Accept', 'application/json')
-          options.credentials = 'include'
-          if (config.devApiKey) {
-            options.headers.set('X-API-KEY', config.devApiKey)
-          }
-
-          if (locale) {
-            if (!options.params) {
-              options.params = {}
-            }
-            options.params['lang'] = locale
-          }
-        },
-        onRequestError: config.onRequestError,
-        onResponse: config.onResponse,
-        onResponseError: config.onResponseError,
-      })
+      data.value = isRaw
+        // Raw targets another data.gouv service (the Tabular API in TabularExplorer) via its own
+        // absolute URL, so it must stay bare ofetch: no datagouv apiBase, no datagouv auth attached.
+        ? await ofetch<DataT | null>(urlValue, { params: params ?? query, signal })
+        // The configured `$fetch` carries baseURL + auth + headers (see the `datagouv` plugin install
+        // for the default one). We only forward the URL and params here.
+        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query, signal })
       status.value = 'success'
     }
     catch (e) {
+      // Ignore aborted requests — they're superseded by a newer call, not a real error.
+      if (signal?.aborted) return
       error.value = e as ErrorT
       status.value = 'error'
     }
@@ -77,22 +53,24 @@ export async function useFetch<DataT, ErrorT = never>(
   // When server is false, only start watching after mount (client-side only)
   if (options?.server === false) {
     onMounted(() => {
-      watchEffect(async () => {
-        await execute()
+      watchEffect((onCleanup) => {
+        const controller = new AbortController()
+        onCleanup(() => controller.abort())
+        void execute(controller.signal)
       })
     })
   }
   else {
-    watchEffect(async () => {
-      await execute()
+    watchEffect((onCleanup) => {
+      const controller = new AbortController()
+      onCleanup(() => controller.abort())
+      void execute(controller.signal)
     })
   }
 
   return {
     data,
-    refresh: async () => {
-      execute()
-    },
+    refresh: () => execute(),
     execute,
     clear: () => {
       data.value = null

package/src/functions/api.types.ts

@@ -20,6 +20,7 @@ export type UseFetchOptions<DataT> = {
   transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
   watch?: WatchSource[] | false
+  raw?: boolean
 }
 
 export type AsyncData<DataT, ErrorT> = {

package/src/functions/charts.ts

@@ -0,0 +1,99 @@
+import type { Chart, ChartForm, ChartForApi, Filter, ColumnDefinition } from '../types/visualizations'
+import type { ColumnType, TabularProfile } from '../components/TabularExplorer/types'
+import { resolveColumnType } from './tabular'
+
+export function toChartForm(chart: Chart) {
+  const seriesFilter = chart.series[0]?.filters as Filter | null
+
+  return {
+    title: chart.title,
+    description: chart.description,
+    private: chart.private,
+    owned: chart.organization ? { organization: chart.organization.id, owner: null } : { owner: chart.owner.id, organization: null },
+    x_axis: {
+      column_x: chart.x_axis.column_x,
+      type: chart.x_axis.type,
+      sort_combined: chart.x_axis.sort_x_by && chart.x_axis.sort_x_direction
+        ? `${chart.x_axis.sort_x_by}-${chart.x_axis.sort_x_direction}`
+        : '',
+    },
+    y_axis: {
+      label: chart.y_axis.label || '',
+      min: chart.y_axis.min,
+      max: chart.y_axis.max,
+      unit: chart.y_axis.unit || '',
+      unit_position: chart.y_axis.unit_position || 'suffix',
+    },
+    series: chart.series.map(serie => ({
+      ...serie,
+      aggregate_y: serie.aggregate_y || '',
+    })),
+    extras: chart.extras,
+    chart_type: chart.series[0] ? chart.series[0].type : null,
+    filter: seriesFilter ?? null,
+  } satisfies ChartForm
+}
+
+export function toChartApi(chartForm: ChartForm): ChartForApi {
+  const xAxis = {
+    column_x: chartForm.x_axis.column_x,
+    type: chartForm.x_axis.type,
+    sort_x_by: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[0] as 'axis_x' | 'axis_y')
+      : null,
+    sort_x_direction: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[1] as 'asc' | 'desc')
+      : null,
+  }
+
+  return {
+    ...chartForm.owned,
+    title: chartForm.title,
+    description: chartForm.description,
+    private: chartForm.private,
+    x_axis: xAxis,
+    y_axis: {
+      label: chartForm.y_axis.label ?? null,
+      min: chartForm.y_axis.min ?? null,
+      max: chartForm.y_axis.max ?? null,
+      unit: chartForm.y_axis.unit ?? null,
+      unit_position: chartForm.y_axis.unit_position ?? null,
+    },
+    series: chartForm.series.map((serie, index) => ({
+      ...serie,
+      type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
+      aggregate_y: serie.aggregate_y || null,
+      filters: serie.filters || (index === 0 && chartForm.filter ? chartForm.filter : null),
+    })),
+    extras: chartForm.extras,
+  }
+}
+
+export function buildColumnsFromProfile(profile: { profile: TabularProfile }): Array<ColumnDefinition> {
+  return profile.profile.header.map((name) => {
+    const colInfo = profile.profile.columns[name]
+    const isCategorical = profile.profile.categorical.includes(name)
+    // The chart stack only branches on 'number' and 'date' (continuous axis,
+    // aggregatable series, time formatting): it has no notion of a year column,
+    // and on an axis a year is a number.
+    const resolvedType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
+    const colType = resolvedType === 'year' ? 'number' : resolvedType
+    const colProfile = profile.profile.profile[name]
+    return {
+      name,
+      type: colType,
+      min: normalizeProfileNumber(colProfile?.min, colType),
+      max: normalizeProfileNumber(colProfile?.max, colType),
+    }
+  })
+}
+
+function normalizeProfileNumber(value: number | string | undefined, type: ColumnType): number | undefined {
+  if (value === undefined || value === null) return undefined
+  if (type === 'date' && typeof value === 'string') {
+    const timestamp = new Date(value).getTime()
+    return Number.isNaN(timestamp) ? undefined : timestamp
+  }
+  const parsed = Number(value)
+  return Number.isNaN(parsed) ? undefined : parsed
+}

package/src/functions/datasets.ts

@@ -1,6 +1,4 @@
 import { useComponentsConfig } from '../config'
-import type { Dataset, DatasetV2 } from '../types/datasets'
-import type { CommunityResource, Resource } from '../types/resources'
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -14,18 +12,3 @@ export function getDatasetOEmbedHtml(type: string, id: string): string {
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
   return `<div data-udata-${type}="${id}"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
 }
-
-export function isCommunityResource(resource: Resource | CommunityResource): boolean {
-  return 'organization' in resource || 'owner' in resource
-}
-
-export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
-  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
-}
-
-export function getResourceFilesize(resource: Resource): null | number {
-  if (resource.filesize) return resource.filesize
-  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
-
-  return null
-}

package/src/functions/dates.ts

@@ -77,8 +77,9 @@ export function useFormatDate() {
     dateWithoutTime.setHours(0)
     dateWithoutTime.setMinutes(0)
     dateWithoutTime.setSeconds(0)
-    const diff = Math.abs(dateWithoutTime.getTime() - today.getTime())
-    if (Math.round(diff / (SECONDS_IN_A_DAY * 30)) >= 1) {
+    // `getTime()` returns milliseconds, `SECONDS_IN_A_DAY` is in seconds
+    const diffInSeconds = Math.abs(dateWithoutTime.getTime() - today.getTime()) / 1000
+    if (diffInSeconds >= SECONDS_IN_A_DAY * 30) {
       return t('le {date}', { date: formatDate(date, options) })
     }
     return formatFromNow(date)

package/src/functions/helpers.ts

@@ -38,6 +38,21 @@ export const summarize = (val: number, fractionDigits = 0) => {
   return `${toFixedIfNotZero(val)}Y`
 }
 
+// Guards any value that ends up in an `href`: only absolute http(s) URLs are allowed.
+// Some of these URLs come from resource extras, which are freely writable by the
+// resource owner, so an unguarded value could carry a `javascript:` or `data:` scheme
+// and execute in the platform origin when a visitor clicks the link.
+export const isSafeHttpUrl = (value: unknown): value is string => {
+  if (typeof value !== 'string') return false
+  try {
+    const { protocol } = new URL(value)
+    return protocol === 'http:' || protocol === 'https:'
+  }
+  catch {
+    return false
+  }
+}
+
 export const escapeCsvValue = (value: string | number | null | undefined): string => {
   if (value === null || value === undefined || value === '') {
     return ''