feat: new tabular explore

components/GristTableViewer/GristTableViewer.vue

@@ -97,7 +97,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
-import { AnimatedLoader } from '@datagouv/components-next'
+import { AnimatedLoader, useFormatTabular } from '@datagouv/components-next'
 
 interface GristRecord {
   id: number
@@ -136,18 +136,7 @@ const total = computed(() => {
   return sum
 })
 
-function formatNumber(value: string | number | boolean | null | undefined): string {
-  if (value === null || value === undefined) {
-    return '-'
-  }
-
-  const num = Number(value)
-  if (isNaN(num)) {
-    return String(value)
-  }
-
-  return num.toLocaleString('fr-FR')
-}
+const { formatNumber } = useFormatTabular()
 
 function getFieldValue(record: GristRecord, column: string): string {
   const value = record.fields[column]

datagouv-components/eslint.config.ts

@@ -26,6 +26,7 @@ export default defineConfigWithVueTs(
       // which are required for proper typography (e.g., spaces before punctuation marks like ?, !, :)
       'no-irregular-whitespace': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     },
   },
   skipFormatting,

datagouv-components/src/components/InfiniteLoader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="sentinel">
+    <slot>
+      <div class="flex items-center justify-center p-4">
+        <span class="inline-flex items-center gap-2 text-xs text-gray-medium">
+          <RiLoader4Line
+            class="size-4 animate-spin"
+            aria-hidden="true"
+          />
+          {{ t('Chargement…') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { RiLoader4Line } from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+
+const props = defineProps<{
+  root?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const { t } = useTranslation()
+
+const sentinelRef = useTemplateRef<HTMLElement>('sentinel')
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  const el = sentinelRef.value
+  if (!el) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting) {
+        emit('intersect')
+      }
+    },
+    { root: props.root ?? null, rootMargin: '200px' },
+  )
+  observer.observe(el)
+}
+
+onMounted(setupObserver)
+watch([sentinelRef, () => props.root], setupObserver)
+onUnmounted(() => observer?.disconnect())
+</script>

datagouv-components/src/components/ResourceAccordion/Preview.vue

@@ -48,15 +48,15 @@
               >
                 <BrandedButton
                   color="tertiary"
-                  :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
+                  :icon="isSortedBy(col) && sortConfig && sortConfig.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
                   icon-right
                   size="xs"
                   @click="sortByField(col)"
                 >
                   <!-- There is a weird bug with `sr-only`, I needed to add a relative parent to avoid full page x scrolling into the void…  -->
                   <span class="relative">
                     {{ col }}
-                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
+                    <span class="sr-only">{{ sortConfig && sortConfig.direction === 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
                   </span>
                 </BrandedButton>
               </th>
@@ -122,7 +122,7 @@ const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
 const loading = ref(true)
 const hasError = ref(false)
-const sortConfig = ref<SortConfig>(null)
+const sortConfig = ref<SortConfig | null>(null)
 const rowCount = ref(0)
 const config = useComponentsConfig()
 const pageSize = computed(() => config.tabularApiPageSize || 15)
@@ -138,7 +138,7 @@ function isSortedBy(col: string) {
 /**
  * Retrieve preview necessary infos
  */
-async function getTableInfos(page: number, sortConfig?: SortConfig) {
+async function getTableInfos(page: number, sortConfig?: SortConfig | null) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
@@ -172,24 +172,24 @@ function changePage(page: number) {
  * Sort by a specific column
  */
 function sortByField(col: string) {
-  if (sortConfig.value && sortConfig.value.column == col) {
-    if (sortConfig.value.type == 'asc') {
-      sortConfig.value.type = 'desc'
+  if (sortConfig.value && sortConfig.value.column === col) {
+    if (sortConfig.value.direction === 'asc') {
+      sortConfig.value.direction = 'desc'
     }
     else {
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   else {
     if (!sortConfig.value) {
       sortConfig.value = {
         column: col,
-        type: 'asc',
+        direction: 'asc',
       }
     }
     else {
       sortConfig.value.column = col
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   currentPage.value = 1

datagouv-components/src/components/TabularExplorer/TabularCell.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="value == null || value === ''"
+    class="font-[Inconsolata,monospace] text-gray-low italic"
+    :class="compact ? 'text-xs' : 'text-sm'"
+  >null</span>
+  <span
+    v-else-if="columnType === 'boolean'"
+    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs"
+    :class="isTruthy(value) ? 'bg-new-success-light text-new-success' : 'bg-new-warning-light text-new-error'"
+  >
+    <span
+      class="size-2 rounded-full"
+      :class="isTruthy(value) ? 'bg-new-success' : 'bg-new-error'"
+    />
+    {{ isTruthy(value) ? t('Vrai') : t('Faux') }}
+  </span>
+  <span
+    v-else-if="columnType === 'categorical'"
+    class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
+    :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
+  >{{ value }}</span>
+  <span
+    v-else-if="columnType === 'number'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatNumber(value) }}</span>
+  <span
+    v-else-if="columnType === 'date'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatCellDate(value) }}</span>
+  <span
+    v-else
+    class="text-gray-title truncate block text-xs"
+  >{{ typeof value === 'object' ? JSON.stringify(value) : value }}</span>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular, isTruthy } from '../../functions/tabular'
+import type { ColumnType, BadgeStyle } from './types'
+
+defineProps<{
+  value: unknown
+  columnType: ColumnType
+  categoryBadgeStyle?: BadgeStyle
+  compact?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatNumber, formatCellDate } = useFormatTabular()
+</script>

datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue

@@ -0,0 +1,170 @@
+<template>
+  <ClientOnly>
+    <Teleport to="#tooltips">
+      <div
+        v-if="cell"
+        ref="panel"
+        class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
+        :style="floatingStyles"
+      >
+        <!-- Value -->
+        <div class="px-3 pt-3 pb-2 border-b border-gray-default">
+          <p class="text-[10px] text-gray-plain mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-gray-title mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-gray-default">
+          <span class="text-[10px] text-gray-plain">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-gray-some rounded px-1.5 py-0.5 text-xs text-gray-plain">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-gray-plain shrink-0">·</span>
+          <span class="text-[10px] text-gray-plain truncate min-w-0">{{ cell.column }}</span>
+        </div>
+
+        <!-- Actions -->
+        <div class="p-1">
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="filterByValue"
+          >
+            <RiFilter2Line
+              class="size-4"
+              aria-hidden="true"
+            />
+            {{ t('Filtrer par cette valeur') }}
+          </button>
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="copyValue"
+          >
+            <RiCheckLine
+              v-if="copied"
+              class="size-4 text-green-500"
+              aria-hidden="true"
+            />
+            <RiFileCopyLine
+              v-else
+              class="size-4 text-gray-plain"
+              aria-hidden="true"
+            />
+            {{ copied ? t('Copié !') : t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import {
+  RiFilter2Line,
+  RiFileCopyLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import { useTranslation } from '../../composables/useTranslation'
+import { buildTypeConfig } from '../../functions/tabular'
+import ClientOnly from '../ClientOnly.vue'
+import type { ColumnType, ColumnFilters } from './types'
+
+export interface CellInfo {
+  column: string
+  columnType: ColumnType
+  value: unknown
+  element: HTMLElement
+}
+
+const cell = defineModel<CellInfo | null>('cell', { default: null })
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const panelRef = useTemplateRef<HTMLElement>('panel')
+const anchorRef = ref<HTMLElement | null>(null)
+
+watch(cell, (c) => {
+  anchorRef.value = c?.element ?? null
+})
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+
+const displayValue = computed(() => {
+  if (!cell.value) return ''
+  const v = cell.value.value
+  if (v == null || v === '') return '–'
+  if (typeof v === 'object') return JSON.stringify(v)
+  return String(v)
+})
+
+const typeConfig = buildTypeConfig(t)
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : typeConfig.text.icon)
+const typeLabel = computed(() => cell.value ? typeConfig[cell.value.columnType].label : '')
+
+function close() {
+  cell.value = null
+}
+
+function filterByValue() {
+  if (!cell.value) return
+  const val = String(cell.value.value ?? '')
+  const col = cell.value.column
+  const existing = filters.value[col] ?? {}
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date') {
+    const current = existing.in ?? []
+    if (!current.includes(val)) {
+      filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }
+    }
+  }
+  else if (cell.value.columnType === 'number') {
+    const num = Number(cell.value.value)
+    if (Number.isFinite(num)) {
+      filters.value = { ...filters.value, [col]: { ...existing, min: num, max: num } }
+    }
+  }
+  else if (cell.value.columnType === 'boolean') {
+    filters.value = { ...filters.value, [col]: { ...existing, exact: val } }
+  }
+  close()
+}
+
+const copied = ref(false)
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+onClickOutside(panelRef, (e) => {
+  if (!cell.value) return
+  const clickedCell = (e.target as HTMLElement).closest('[data-cell]')
+  if (clickedCell && clickedCell === cell.value.element) return
+  close()
+})
+</script>