@datagouv/components-next 1.0.2-dev.52 → 1.0.2-dev.54

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 { 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,19 @@ 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.
+    forEachActiveCustomFilter(customFilterRegistry, (apiParam, value) => {
+      const existing = params[apiParam]
+      if (existing === undefined) {
+        params[apiParam] = value
+      }
+      else {
+        params[apiParam] = Array.isArray(existing) ? [...existing, value] : [existing, value]
+      }
+    })
+
     // 4. Always include q, sort (if valid for this type), page, page_size
     if (q.value) {
       params.q = q.value
@@ -66,9 +81,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/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/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,146 +1,18 @@
 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 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 with options object
- */
-export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
-  const page = options.page ?? 1
-  const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
-  console.log(options)
-  let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
-  if (options.columns) {
-    url += `&columns=${options.columns.join(',')}`
-  }
-  if (options.sort) {
-    url += `&${options.sort.column}__sort=${options.sort.type}`
-  }
-  if (options.groupBy && options.aggregation?.type) {
-    url += `&${options.groupBy}__groupby&${options.aggregation.column}__${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(`${filter.column}__isnull`)
-        }
-        else if (filter.condition === 'is_not_null') {
-          params.push(`${filter.column}__isnotnull`)
-        }
-        else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
-          params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
-        }
-      }
-    }
-  }
-  else {
-    const filter = filters
-    if (filter.condition === 'is_null') {
-      params.push(`${filter.column}__isnull`)
-    }
-    else if (filter.condition === 'is_not_null') {
-      params.push(`${filter.column}__isnotnull`)
-    }
-    else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
-      params.push(`${filter.column}__${filter.condition}=${encodeURIComponent(filter.value)}`)
-    }
-  }
-  return params.join('&')
-}
+export type { SortConfig }
 
 /**
  * Call Tabular-api to get table content
  */
-export function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
-  return fetchTabularData(config, { resourceId: id, page, sort: sortConfig })
+export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig | null) {
+  let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
+  if (sortConfig) {
+    url = url + `&${sortConfig.column}__sort=${sortConfig.direction}`
+  }
+  return await ofetch(url)
 }
 
 /**
@@ -148,5 +20,5 @@ export function getData(config: PluginConfig, id: string, page: number, sortConf
  */
 export function useGetProfile() {
   const config = useComponentsConfig()
-  return (id: string) => ofetch<TabularProfileResponse>(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }

package/src/main.ts

@@ -23,9 +23,10 @@ import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
-import type { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm } from './types/visualizations'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
+import { useSearchFilter } from './composables/useSearchFilter'
+import type { UseSearchFilterOptions } from './composables/useSearchFilter'
 
 import ActivityList from './components/ActivityList/ActivityList.vue'
 import UserActivityList from './components/ActivityList/UserActivityList.vue'
@@ -81,8 +82,6 @@ import ReuseDetails from './components/ReuseDetails.vue'
 import SchemaCard from './components/SchemaCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
 import SmallChart from './components/SmallChart.vue'
-import ChartViewer from './components/Chart/ChartViewer.vue'
-import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
 import StatBox from './components/StatBox.vue'
 import Tab from './components/Tabs/Tab.vue'
 import TabGroup from './components/Tabs/TabGroup.vue'
@@ -97,14 +96,14 @@ import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
-import Listbox from './components/Form/Listbox.vue'
+import InfiniteLoader from './components/InfiniteLoader.vue'
+import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
 export { Toaster, toast } from 'vue-sonner'
 
 export * from './composables/useActiveDescendant'
-export * from './composables/useDebouncedRef'
 export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
@@ -124,15 +123,15 @@ export * from './functions/owned'
 export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
+export * from './functions/tabular'
 export * from './functions/users'
-export * from './functions/tabularApi'
-export * from './functions/charts'
 export * from './types/access_types'
 
 export type {
   GlobalSearchConfig,
   SearchType,
   SortOption,
+  UseSearchFilterOptions,
   UseFetchFunction,
   AccessType,
   AccessAudience,
@@ -223,23 +222,6 @@ export type {
   ValidataError,
   Weight,
   WellType,
-  Chart,
-  ChartForm,
-  ChartForApi,
-  FilterCondition,
-  Filter,
-  AndFilters,
-  GenericFilter,
-  XAxisType,
-  XAxisSortBy,
-  SortDirection,
-  XAxis,
-  XAxisForm,
-  UnitPosition,
-  YAxis,
-  DataSeriesType,
-  DataSeries,
-  DataSeriesForm,
 }
 
 export {
@@ -253,6 +235,7 @@ export {
   defaultDataserviceSortOptions,
   defaultReuseSortOptions,
   defaultOrganizationSortOptions,
+  useSearchFilter,
 }
 
 // Vue Plugin
@@ -325,8 +308,6 @@ export {
   SchemaCard,
   SimpleBanner,
   SmallChart,
-  ChartViewer,
-  ChartViewerWrapper,
   StatBox,
   OpenApiViewer,
   Tab,
@@ -343,5 +324,6 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
-  Listbox,
+  InfiniteLoader,
+  TabularExplorer,
 }

package/src/components/Chart/ChartViewer.vue

@@ -1,147 +0,0 @@
-<template>
-  <VChart
-    class="w-full min-h-96"
-    :option="echartsOption"
-    autoresize
-  />
-</template>
-
-<script setup lang="ts">
-import { format, use, type ComposeOption } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart, BarChart, type BarSeriesOption, type LineSeriesOption } from 'echarts/charts'
-import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
-import VChart from 'vue-echarts'
-import { computed } from 'vue'
-import { summarize } from '../../functions/helpers'
-import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
-
-use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
-
-const props = defineProps<{
-  chart: Chart | ChartForApi
-  series: {
-    data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<string>>
-  }
-}>()
-
-function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
-  if (!xAxis) return 'category'
-  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
-}
-
-function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
-  return (value: number) => {
-    const v = summarize(value)
-    if (!yAxis.unit) return v
-    if (yAxis.unit_position === 'prefix') return `${yAxis.unit} ${v}`
-    return `${v} ${yAxis.unit}`
-  }
-}
-
-const echartsOption = computed(() => {
-  const seriesCount = props.chart.series.length
-  if (!props.chart.series || seriesCount === 0) return
-
-  const seriesData = props.chart.series.map((s) => {
-    const xColumn = s.column_x_name_override ?? props.chart.x_axis.column_x
-    const yColumn = s.aggregate_y ? `${s.column_y}__${s.aggregate_y}` : s.column_y
-    const resourceId = s.resource_id
-
-    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
-      return null
-    }
-
-    const sortedData = [...props.series.data[resourceId]]
-    let sortBy: string | null = null
-    let sortDirection: 'asc' | 'desc' = 'asc'
-    sortBy = props.chart.x_axis.sort_x_by
-    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
-      sortedData.sort((a, b) => {
-        const valA = a[sortKey] as number
-        const valB = b[sortKey] as number
-        if (valA < valB) return sortDirection === 'asc' ? -1 : 1
-        if (valA > valB) return sortDirection === 'asc' ? 1 : -1
-        return 0
-      })
-    }
-
-    return {
-      series: {
-        type: s.type === 'histogram' ? 'bar' : 'line',
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
-        name: s.column_y,
-        encode: {
-          x: xColumn,
-          y: yColumn,
-        },
-      } as LineSeriesOption | BarSeriesOption,
-      data: {
-        source: sortedData,
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
-      },
-    }
-  }).filter(Boolean).reduce((acc: { series: Array<LineSeriesOption | BarSeriesOption>, data: Array<Record<string, unknown>> }, curr) => {
-    if (curr) {
-      acc.series.push(curr.series)
-      acc.data.push(curr.data)
-    }
-    return acc
-  }, {
-    series: [],
-    data: [],
-  })
-
-  return {
-    dataset: [...seriesData.data],
-    title: {
-      text: props.chart.title,
-      left: 'center',
-    },
-    tooltip: {
-      trigger: 'axis' as const,
-      formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
-        let tooltip = ''
-        for (const param of params) {
-          const keys = Object.keys(param.value)
-          const col = keys.find(key => key.startsWith(param.seriesName))!
-          const formatter = new Intl.NumberFormat('fr-FR')
-          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[col]))}</strong><br>`
-        }
-        return tooltip
-      },
-    },
-    legend: {
-      bottom: 0,
-    },
-    grid: {
-      top: 60,
-      bottom: 40,
-      left: 20,
-      right: 20,
-      containLabel: true,
-    },
-    xAxis: {
-      type: mapXAxisType(props.chart.x_axis),
-      name: (props.chart.x_axis as XAxis).column_x,
-    },
-    yAxis: {
-      type: 'value' as const,
-      name: props.chart.y_axis.label ?? undefined,
-      min: props.chart.y_axis.min ?? undefined,
-      max: props.chart.y_axis.max ?? undefined,
-      axisLabel: {
-        formatter: buildYAxisFormatter(props.chart.y_axis),
-      },
-    },
-    series: seriesData.series,
-  } satisfies ComposeOption<
-    | BarSeriesOption
-    | LineSeriesOption
-  >
-})
-</script>