@datagouv/components-next 1.0.2-dev.9 → 1.0.2-dev.91

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,6 +52,22 @@ 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
@@ -66,9 +84,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/config.ts

@@ -5,6 +5,8 @@ import type { 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
@@ -18,6 +20,7 @@ export type PluginConfig = {
   schemasSiteUrl?: string
   schemasSiteName?: string
   tabularApiUrl?: string
+  chartsApiBase?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string

package/src/functions/api.ts

@@ -24,6 +24,7 @@ export async function useFetch<DataT, ErrorT = never>(
     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')
@@ -35,37 +36,39 @@ export async function useFetch<DataT, ErrorT = never>(
     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)
-          }
+      data.value = isRaw
+        ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
+        : 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,
-      })
+              if (locale) {
+                if (!options.params) {
+                  options.params = {}
+                }
+                options.params['lang'] = locale
+              }
+            },
+            onRequestError: config.onRequestError,
+            onResponse: config.onResponse,
+            onResponseError: config.onResponseError,
+          })
       status.value = 'success'
     }
     catch (e) {
@@ -90,9 +93,7 @@ export async function useFetch<DataT, ErrorT = never>(
 
   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,68 @@
+import type { Chart, ChartForm, ChartForApi, Filter } from '../types/visualizations'
+
+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,
+  }
+}

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/resources.ts

@@ -1,13 +1,15 @@
 import { readonly, type Component } from 'vue'
 
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import Documentation from '../components/Icons/Documentation.vue'
 import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
-import type { Resource } from '../types/resources'
+import type { CommunityResource, Resource } from '../types/resources'
 import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
@@ -129,3 +131,56 @@ export const detectOgcService = (resource: Resource) => {
   }
   return false
 }
+
+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
+}
+
+type CorsStatus = 'allowed' | 'blocked' | 'unknown'
+
+export const getResourceCorsStatus = (resource: Resource): CorsStatus => {
+  const extras = resource.extras
+  if (!extras || !('check:cors:allow-origin' in extras)) {
+    return 'unknown'
+  }
+
+  const allowOrigin = extras['check:cors:allow-origin'] as string | undefined
+  const rawMethods = extras['check:cors:allow-methods'] as string | undefined
+
+  // Check if allow-origin is '*' or contains one of our trusted domains
+  const config = useComponentsConfig()
+  const trustedDomains = config.trustedDomains ?? []
+  const hasPublicCors = allowOrigin === '*'
+  const hasSpecificCors = allowOrigin
+    ? trustedDomains.some((domain) => {
+        try {
+          const hostname = new URL(allowOrigin).hostname
+          return hostname === domain || hostname.endsWith(`.${domain}`)
+        }
+        catch {
+          return false
+        }
+      })
+    : false
+
+  const isOriginAllowed = hasPublicCors || hasSpecificCors
+
+  // Ensure GET method is allowed
+  const allowedMethods = rawMethods
+    ? rawMethods.split(',').map(m => m.trim().toUpperCase())
+    : []
+  const supportsGet = allowedMethods.length === 0 || allowedMethods.includes('GET')
+
+  return isOriginAllowed && supportsGet ? 'allowed' : 'blocked'
+}

package/src/functions/tabular.ts

@@ -0,0 +1,60 @@
+import type { Component } from 'vue'
+import {
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
+
+export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
+  const f = filters[column]
+  if (!f) return false
+  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
+}
+
+export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, { icon: Component, label: string }> {
+  return {
+    number: { icon: RiHashtag, label: t('Nombre') },
+    categorical: { icon: RiPriceTag3Line, label: t('Catégoriel') },
+    text: { icon: RiText, label: t('Texte') },
+    date: { icon: RiCalendarLine, label: t('Date') },
+    boolean: { icon: RiCheckboxLine, label: t('Booléen') },
+  }
+}
+
+export function useFormatTabular() {
+  const { locale } = useTranslation()
+
+  function formatNumber(value: unknown): string {
+    const num = Number(value)
+    if (Number.isNaN(num)) return String(value)
+    return num.toLocaleString(locale)
+  }
+
+  function formatCellDate(value: unknown): string {
+    if (value == null || value === '') return '–'
+    const d = new Date(String(value))
+    if (Number.isNaN(d.getTime())) return String(value)
+    return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d)
+  }
+
+  return { formatNumber, formatCellDate }
+}
+
+const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
+const FALSY_VALUES = ['false', '0', 'non', 'no']
+
+export function isTruthy(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())
+  return Boolean(value)
+}
+
+export function isFalsy(value: unknown): boolean {
+  if (typeof value === 'boolean') return !value
+  if (typeof value === 'string') return FALSY_VALUES.includes(value.toLowerCase())
+  return !value
+}

package/src/functions/tabularApi.ts

@@ -1,20 +1,147 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
+import type { GenericFilter } from '../types/visualizations'
+import type { SortConfig } from '../components/TabularExplorer/types'
 
-export type SortConfig = {
-  column: string
-  type: string
-} | null
+export type { SortConfig }
+
+export type TabularDataResponse = {
+  data: Array<Record<string, unknown>>
+  links: {
+    profile: string
+    swagger: string
+    next: string
+  }
+  meta: { total: number }
+}
+
+export type TabularAggregateType = 'avg' | 'sum' | 'count' | 'min' | 'max'
+
+export type FetchTabularDataOptions = {
+  resourceId: string
+  page?: number
+  pageSize?: number
+  columns?: Array<string> | undefined
+  sort?: SortConfig
+  groupBy?: string | undefined
+  aggregation?: {
+    column: string
+    type: TabularAggregateType
+  } | undefined
+  filters?: GenericFilter | undefined
+}
+
+export type TabularProfileResponse = {
+  profile: {
+    header: Array<string>
+    columns: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    formats: Record<string, Array<string>>
+    profile: Record<string, {
+      tops: Array<{ count: number, value: string }>
+      nb_distinct: number
+      nb_missing_values: number
+      min?: number
+      max?: number
+      std?: number
+      mean?: number
+    }>
+    encoding: string
+    separator: string
+    categorical: Array<string>
+    total_lines: number
+    nb_duplicates: number
+    columns_fields: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    columns_labels: Record<string, {
+      score: number
+      format: string
+      python_type: string
+    }>
+    header_row_idx: number
+    heading_columns: number
+    trailing_columns: number
+  }
+  deleted_at: string | null
+  dataset_id: string
+  indexes: null
+}
 
 /**
- * Call Tabular-api to get table content
+ * Call Tabular-api to get table content with options object
  */
-export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
-  let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
-  if (sortConfig) {
-    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
+  const page = options.page ?? 1
+  const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
+  let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
+  if (options.columns) {
+    url += `&columns=${options.columns.map(col => encodeURIComponent(col)).join(',')}`
+  }
+  if (options.sort) {
+    url += `&${encodeURIComponent(options.sort.column)}__sort=${encodeURIComponent(options.sort.direction)}`
   }
-  return await ofetch(url)
+  if (options.groupBy && options.aggregation?.type) {
+    url += `&${encodeURIComponent(options.groupBy)}__groupby&${encodeURIComponent(options.aggregation.column)}__${encodeURIComponent(options.aggregation.type)}`
+  }
+  if (options.filters) {
+    const filterQuery = buildFilterQuery(options.filters)
+    if (filterQuery) {
+      url += `&${filterQuery}`
+    }
+  }
+  return await ofetch<TabularDataResponse>(url)
+}
+
+function buildFilterQuery(filters: GenericFilter): string {
+  const params: Array<string> = []
+  if ('filters' in filters) {
+    for (const filter of filters.filters) {
+      if ('filters' in filter) {
+        params.push(buildFilterQuery(filter))
+      }
+      else {
+        if (filter.condition === 'is_null') {
+          params.push(`${encodeURIComponent(filter.column)}__isnull`)
+        }
+        else if (filter.condition === 'is_not_null') {
+          params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
+        }
+        else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+          params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
+        }
+      }
+    }
+  }
+  else {
+    const filter = filters
+    if (filter.condition === 'is_null') {
+      params.push(`${encodeURIComponent(filter.column)}__isnull`)
+    }
+    else if (filter.condition === 'is_not_null') {
+      params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
+    }
+    else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+      params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
+    }
+  }
+  return params.join('&')
+}
+
+/**
+ * Call Tabular-api to get table content
+ */
+export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig | null): Promise<TabularDataResponse> {
+  return fetchTabularData(config, {
+    resourceId: id,
+    page,
+    sort: sortConfig ?? undefined,
+  })
 }
 
 /**
@@ -22,5 +149,5 @@ export async function getData(config: PluginConfig, id: string, page: number, so
  */
 export function useGetProfile() {
   const config = useComponentsConfig()
-  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch<TabularProfileResponse>(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }