@datagouv/components-next 1.0.2-dev.127 → 1.0.2-dev.129

package/src/components/TabularExplorer/types.ts

@@ -1,5 +1,5 @@
 /** Response from /api/resources/{rid}/data/ */
-export interface TabularDataResponse {
+export type TabularDataResponse = {
   data: TabularRow[]
   meta: {
     page: number
@@ -17,11 +17,14 @@ export interface TabularDataResponse {
 export type TabularRow = Record<string, unknown> & { __id: number }
 
 /** Response from /api/resources/{rid}/profile/ */
-export interface TabularProfileResponse {
+export type TabularProfileResponse = {
   profile: TabularProfile
+  deleted_at: string | null
+  dataset_id: string
+  indexes: null
 }
 
-export interface TabularProfile {
+export type TabularProfile = {
   header: string[]
   columns: Record<string, TabularColumnInfo>
   formats: Record<string, string[]>
@@ -31,20 +34,20 @@ export interface TabularProfile {
   categorical: string[]
   total_lines: number
   nb_duplicates: number
-  columns_fields: unknown
-  columns_labels: unknown
+  columns_fields: Record<string, TabularColumnInfo>
+  columns_labels: Record<string, TabularColumnInfo>
   header_row_idx: number
   heading_columns: number
   trailing_columns: number
 }
 
-export interface TabularColumnInfo {
+export type TabularColumnInfo = {
   score: number
   format: string
   python_type: string
 }
 
-export interface TabularColumnProfile {
+export type TabularColumnProfile = {
   tops: TabularTopValue[]
   nb_distinct: number
   nb_missing_values: number
@@ -54,14 +57,14 @@ export interface TabularColumnProfile {
   mean?: number
 }
 
-export interface TabularTopValue {
+export type TabularTopValue = {
   value: string
   count: number
 }
 
 export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
 
-export interface ColumnFilters {
+export type ColumnFilters = {
   in?: string[]
   exact?: string
   min?: number
@@ -72,12 +75,12 @@ export interface ColumnFilters {
 
 export type SortDirection = 'asc' | 'desc'
 
-export interface SortConfig {
+export type SortConfig = {
   column: string
   direction: SortDirection
 }
 
-export interface BadgeStyle {
+export type BadgeStyle = {
   backgroundColor: string
   color: string
 }

package/src/functions/charts.ts

@@ -1,4 +1,6 @@
-import type { Chart, ChartForm, ChartForApi, Filter } from '../types/visualizations'
+import type { Chart, ChartForm, ChartForApi, Filter, ColumnDefinition } from '../types/visualizations'
+import type { TabularProfile } from '../components/TabularExplorer/types'
+import { resolveColumnType } from './tabular'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
@@ -66,3 +68,12 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
     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)
+    const colType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
+    return { name, type: colType }
+  })
+}

package/src/functions/tabular.ts

@@ -4,9 +4,24 @@ import {
   RiPriceTag3Line,
   RiText,
   RiCalendarLine,
+  RiCalendarEventLine,
+  RiTimeLine,
   RiCheckboxLine,
+  RiMapPin2Line,
+  RiGlobalLine,
+  RiFocus3Line,
+  RiFingerprintLine,
+  RiMailLine,
+  RiLinksLine,
+  RiPhoneLine,
+  RiUserLine,
+  RiMoneyEuroCircleLine,
+  RiPercentLine,
+  RiBracesLine,
+  RiCodeLine,
 } from '@remixicon/vue'
 import { useTranslation } from '../composables/useTranslation'
+import type { TranslationFunction } from '../composables/useTranslation'
 import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
 
 export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
@@ -15,7 +30,12 @@ export function hasFilterForColumn(filters: Record<string, ColumnFilters>, colum
   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 }> {
+export type TypeDisplay = {
+  icon: Component
+  label: string
+}
+
+export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, TypeDisplay> {
   return {
     number: { icon: RiHashtag, label: t('Nombre') },
     categorical: { icon: RiPriceTag3Line, label: t('Catégoriel') },
@@ -25,6 +45,97 @@ export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, {
   }
 }
 
+export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (colInfo.format === 'year') return 'date'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (isCategorical) return 'categorical'
+  return 'text'
+}
+
+// csv-detective formats that carry no semantic meaning beyond the generic
+// display type already resolved by `ColumnType` — these fall back to
+// `buildTypeConfig` (Texte / Nombre / Date / Booléen) in the header.
+export const GENERIC_FORMATS = new Set(['string', 'int', 'float', 'date', 'bool', 'booleen'])
+
+// Semantic types detected by csv-detective (see ../../../csv-detective/csv_detective/formats).
+// The list is intentionally exhaustive, but unknown formats are tolerated:
+// `getColumnDisplay` humanizes any format missing from this map.
+export function buildFormatConfig(t: TranslationFunction): Record<string, TypeDisplay> {
+  return {
+    // Geo — territories & addresses
+    adresse: { icon: RiMapPin2Line, label: t('Adresse') },
+    commune: { icon: RiMapPin2Line, label: t('Commune') },
+    code_commune: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    code_commune_insee: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    departement: { icon: RiMapPin2Line, label: t('Département') },
+    code_departement: { icon: RiMapPin2Line, label: t('Code département') },
+    region: { icon: RiMapPin2Line, label: t('Région') },
+    code_region: { icon: RiMapPin2Line, label: t('Code région') },
+    code_epci: { icon: RiMapPin2Line, label: t('Code EPCI') },
+    code_postal: { icon: RiMapPin2Line, label: t('Code postal') },
+    insee_canton: { icon: RiMapPin2Line, label: t('Canton') },
+    code_fantoir: { icon: RiMapPin2Line, label: t('Code FANTOIR') },
+    id_rnb: { icon: RiMapPin2Line, label: t('Identifiant RNB') },
+    // Geo — countries
+    pays: { icon: RiGlobalLine, label: t('Pays') },
+    iso_country_code_alpha2: { icon: RiGlobalLine, label: t('Code pays (ISO α-2)') },
+    iso_country_code_alpha3: { icon: RiGlobalLine, label: t('Code pays (ISO α-3)') },
+    iso_country_code_numeric: { icon: RiGlobalLine, label: t('Code pays (ISO num.)') },
+    // Geo — coordinates
+    latitude_wgs: { icon: RiFocus3Line, label: t('Latitude') },
+    latitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Latitude') },
+    longitude_wgs: { icon: RiFocus3Line, label: t('Longitude') },
+    longitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Longitude') },
+    latitude_l93: { icon: RiFocus3Line, label: t('Latitude (Lambert 93)') },
+    longitude_l93: { icon: RiFocus3Line, label: t('Longitude (Lambert 93)') },
+    latlon_wgs: { icon: RiFocus3Line, label: t('Latitude / longitude') },
+    lonlat_wgs: { icon: RiFocus3Line, label: t('Longitude / latitude') },
+    // Identifiers
+    siren: { icon: RiFingerprintLine, label: t('SIREN') },
+    siret: { icon: RiFingerprintLine, label: t('SIRET') },
+    code_rna: { icon: RiFingerprintLine, label: t('Identifiant RNA') },
+    code_waldec: { icon: RiFingerprintLine, label: t('Identifiant WALDEC') },
+    code_import: { icon: RiFingerprintLine, label: t('Code Import') },
+    uai: { icon: RiFingerprintLine, label: t('UAI') },
+    insee_ape700: { icon: RiFingerprintLine, label: t('Code APE') },
+    code_csp_insee: { icon: RiFingerprintLine, label: t('Code CSP') },
+    uuid: { icon: RiFingerprintLine, label: t('UUID') },
+    mongo_object_id: { icon: RiFingerprintLine, label: t('Identifiant Mongo') },
+    // Contact
+    email: { icon: RiMailLine, label: t('Email') },
+    url: { icon: RiLinksLine, label: t('URL') },
+    tel_fr: { icon: RiPhoneLine, label: t('Téléphone') },
+    username: { icon: RiUserLine, label: t('Nom d\'utilisateur') },
+    // People
+    sexe: { icon: RiUserLine, label: t('Sexe') },
+    csp_insee: { icon: RiUserLine, label: t('Catégorie socio-pro.') },
+    // Quantities
+    money: { icon: RiMoneyEuroCircleLine, label: t('Montant') },
+    percent: { icon: RiPercentLine, label: t('Pourcentage') },
+    // Temporal
+    year: { icon: RiCalendarLine, label: t('Année') },
+    date_fr: { icon: RiCalendarLine, label: t('Date') },
+    jour_de_la_semaine: { icon: RiCalendarEventLine, label: t('Jour de la semaine') },
+    mois_de_lannee: { icon: RiCalendarEventLine, label: t('Mois de l\'année') },
+    datetime_naive: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_aware: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_rfc822: { icon: RiTimeLine, label: t('Date et heure') },
+    // Structured
+    json: { icon: RiBracesLine, label: t('JSON') },
+    geojson: { icon: RiBracesLine, label: t('GeoJSON') },
+    binary: { icon: RiCodeLine, label: t('Binaire') },
+  }
+}
+
+// Tolerant fallback for a semantic format we don't explicitly know about:
+// "code_truc_machin" -> "Code truc machin".
+export function humanizeFormat(format: string): string {
+  const spaced = format.replace(/_/g, ' ').trim()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
 export function useFormatTabular() {
   const { locale } = useTranslation()
 

package/src/functions/tabularApi.ts

@@ -1,7 +1,7 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
 import type { GenericFilter } from '../types/visualizations'
-import type { SortConfig } from '../components/TabularExplorer/types'
+import type { SortConfig, TabularProfileResponse } from '../components/TabularExplorer/types'
 
 export type { SortConfig }
 
@@ -31,48 +31,6 @@ export type FetchTabularDataOptions = {
   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
  */

package/src/main.ts

@@ -23,7 +23,8 @@ 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 { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm, CombinedSort, ColumnDefinition, ColumnsDefinition } from './types/visualizations'
+import type { ColumnType } from './components/TabularExplorer/types'
 import type { GlobalSearchConfig, SearchType, SearchTypeConfig, SortOption, HiddenFilter, BuiltInFilterKey, DatasetSearchConfig, DatasetSearchFilters, DataserviceSearchConfig, DataserviceSearchFilters, ReuseSearchConfig, ReuseSearchFilters, OrganizationSearchConfig, OrganizationSearchFilters, TopicSearchConfig, TopicSearchFilters } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 import { useSearchFilter } from './composables/useSearchFilter'
@@ -251,6 +252,10 @@ export type {
   Chart,
   ChartForm,
   ChartForApi,
+  CombinedSort,
+  ColumnDefinition,
+  ColumnType,
+  ColumnsDefinition,
   FilterCondition,
   Filter,
   AndFilters,

package/src/types/visualizations.ts

@@ -1,5 +1,6 @@
 import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
+import type { ColumnType } from '../components/TabularExplorer/types'
 
 export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
 export type Filter = {
@@ -87,3 +88,6 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   chart_type?: DataSeriesType | null
   filter: GenericFilter | null
 }
+
+export type ColumnDefinition = { name: string, type: ColumnType }
+export type ColumnsDefinition = Record<string, Array<ColumnDefinition>>