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

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <!-- Sort -->
+    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-black/10 text-xs">
+      <span class="text-gray-plain">{{ t('Trier') }}</span>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'asc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowUpLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('asc')"
+      >
+        {{ t('Croissant') }}
+      </BrandedButton>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'desc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowDownLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('desc')"
+      >
+        {{ t('Décroissant') }}
+      </BrandedButton>
+    </div>
+
+    <!-- Null filter with progress bar -->
+    <div
+      v-if="columnProfile && columnProfile.nb_missing_values > 0"
+      class="flex items-center gap-2 px-3 py-2 border-b border-black/10"
+    >
+      <span class="text-xs text-gray-plain whitespace-nowrap">
+        <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
+        null
+        <span class="text-gray-low">({{ nullPercent }})</span>
+      </span>
+      <ProgressBar
+        :value="columnProfile.nb_missing_values"
+        :max="totalLines"
+        bar-class="bg-gray-low"
+        class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
+      />
+      <div class="flex items-center gap-0.5">
+        <BrandedButton
+          :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('only')"
+        >
+          {{ t('seul.') }}
+        </BrandedButton>
+        <BrandedButton
+          :color="nullFilter === 'exclude' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('exclude')"
+        >
+          {{ t('exclure') }}
+        </BrandedButton>
+      </div>
+    </div>
+
+    <!-- Search (contains) -->
+    <div class="px-3 py-2 border-b border-black/10">
+      <div class="relative">
+        <RiSearchLine
+          class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
+          aria-hidden="true"
+        />
+        <input
+          v-model="search"
+          type="text"
+          class="w-full h-8 text-sm border border-transparent rounded-lg py-1 pl-8 pr-3 bg-[#f3f3f5] focus:outline-none focus:border-new-primary"
+          :placeholder="t('Rechercher...')"
+        >
+      </div>
+    </div>
+
+    <!-- Categorical values -->
+    <div
+      v-if="columnType === 'categorical' && columnProfile?.tops && filteredTops.length"
+      class="max-h-56 overflow-auto p-1"
+    >
+      <button
+        v-for="top in filteredTops"
+        :key="top.value"
+        class="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer text-xs select-none"
+        :class="isValueSelected(top.value) && 'bg-gray-50'"
+        @click="toggleValue(top.value)"
+      >
+        <span
+          class="flex size-4 shrink-0 items-center justify-center rounded border"
+          :class="isValueSelected(top.value) ? 'border-new-primary bg-new-primary text-white' : 'border-gray-low'"
+        >
+          <RiCheckLine
+            v-if="isValueSelected(top.value)"
+            class="size-3"
+            aria-hidden="true"
+          />
+        </span>
+        <span class="flex-1 truncate text-left text-xs">
+          <span
+            v-if="categoryBadgeStyles?.[top.value]"
+            class="inline-block rounded font-medium px-2 py-0.5 text-xs"
+            :style="{ backgroundColor: categoryBadgeStyles![top.value]!.backgroundColor, color: categoryBadgeStyles![top.value]!.color }"
+          >{{ top.value }}</span>
+          <template v-else>
+            {{ top.value ?? 'null' }}
+          </template>
+        </span>
+        <span class="font-mono text-xs text-gray-low tabular-nums shrink-0">{{ top.count }}</span>
+      </button>
+    </div>
+
+    <!-- Boolean filter -->
+    <div
+      v-if="columnType === 'boolean'"
+      class="px-3 py-3 space-y-1.5"
+    >
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === true ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(true)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === true ? 'bg-new-success-light' : 'bg-new-success'"
+        />
+        <span class="flex-1 text-left">{{ t('Vrai') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === true ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.trueCount }}</span>
+      </button>
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === false ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(false)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === false ? 'bg-new-warning-light' : 'bg-new-error'"
+        />
+        <span class="flex-1 text-left">{{ t('Faux') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === false ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.falseCount }}</span>
+      </button>
+    </div>
+
+    <!-- Number range -->
+    <form
+      v-if="columnType === 'number' && columnProfile"
+      class="px-3 py-2 border-b border-black/10 space-y-2"
+      @submit.prevent="applyRange"
+    >
+      <div class="flex items-center gap-2 text-xs text-gray-plain">
+        <span class="tabular-nums">{{ formatNumber(profileMin) }}</span>
+        <span class="text-gray-medium">—</span>
+        <span class="tabular-nums">{{ formatNumber(profileMax) }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <input
+          v-model.number="rangeMin"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMin)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+        <span class="text-gray-medium text-xs">–</span>
+        <input
+          v-model.number="rangeMax"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMax)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
+        <BrandedButton
+          color="tertiary"
+          size="2xs"
+          type="button"
+          keep-margins-even-without-borders
+          @click="clearRange"
+        >
+          {{ t('Effacer') }}
+        </BrandedButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import {
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiSearchLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ProgressBar from '../ProgressBar.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+const { formatNumber } = useFormatTabular()
+
+const search = ref('')
+
+watchDebounced(search, (q) => {
+  const existing = filters.value[props.column] ?? {}
+  if (q) {
+    filters.value = { ...filters.value, [props.column]: { ...existing, contains: q } }
+  }
+  else {
+    const { contains: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}, { debounce: 300 })
+
+// Null filter helpers
+const nullFilter = computed(() => filters.value[props.column]?.null ?? null)
+
+function toggleNullFilter(mode: 'only' | 'exclude') {
+  const existing = filters.value[props.column] ?? {}
+  if (existing.null === mode) {
+    const { null: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, null: mode } }
+  }
+}
+
+// Categorical filter helpers
+const selectedValues = computed(() => filters.value[props.column]?.in ?? [])
+
+const filteredTops = computed(() => {
+  if (!props.columnProfile?.tops) return []
+  if (!search.value) return props.columnProfile.tops
+  const q = search.value.toLowerCase()
+  return props.columnProfile.tops.filter(top =>
+    (top.value ?? '').toLowerCase().includes(q),
+  )
+})
+
+function isValueSelected(value: string) {
+  return selectedValues.value.includes(value)
+}
+
+function toggleValue(value: string) {
+  const current = selectedValues.value
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+  const existing = filters.value[props.column] ?? {}
+  filters.value = { ...filters.value, [props.column]: { ...existing, in: next } }
+}
+
+// Number range filter helpers
+const profileMin = computed(() => props.columnProfile?.min ?? 0)
+const profileMax = computed(() => props.columnProfile?.max ?? 100)
+const rangeMin = ref<number | undefined>(undefined)
+const rangeMax = ref<number | undefined>(undefined)
+
+function applyRange() {
+  const existing = filters.value[props.column] ?? {}
+  const next = { ...existing }
+  if (Number.isFinite(rangeMin.value)) {
+    next.min = rangeMin.value
+  }
+  else {
+    delete next.min
+  }
+  if (Number.isFinite(rangeMax.value)) {
+    next.max = rangeMax.value
+  }
+  else {
+    delete next.max
+  }
+  filters.value = { ...filters.value, [props.column]: next }
+}
+
+function clearRange() {
+  rangeMin.value = undefined
+  rangeMax.value = undefined
+  const existing = filters.value[props.column]
+  if (existing) {
+    const { min: _min, max: _max, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}
+
+// Boolean filter helpers
+const booleanFilter = computed<boolean | null>(() => {
+  const f = filters.value[props.column]
+  if (!f || f.exact == null) return null
+  return f.exact === 'true'
+})
+
+function toggleBooleanFilter(value: boolean) {
+  const existing = filters.value[props.column] ?? {}
+  const strValue = String(value)
+  if (existing.exact === strValue) {
+    const { exact: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, exact: strValue } }
+  }
+}
+
+function toggleSort(direction: SortDirection) {
+  if (sort.value?.column === props.column && sort.value.direction === direction) {
+    sort.value = null
+  }
+  else {
+    sort.value = { column: props.column, direction }
+  }
+}
+</script>

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="anchor"
+    class="relative shrink-0"
+  >
+    <button
+      class="p-0.5 rounded focus:outline-none"
+      :class="hasColumnFilter ? 'bg-primary text-white' : 'hover:bg-gray-100'"
+      @click.stop="togglePopover"
+    >
+      <RiFilter2Line
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
+    </button>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <div
+          v-show="isOpen"
+          ref="panel"
+          class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
+          :style="floatingStyles"
+        >
+          <!-- Title -->
+          <div class="flex items-center justify-between px-3 py-2 border-b border-black/10">
+            <p class="text-sm font-medium mb-0">
+              {{ t('Filtrer') }} : {{ column }}
+            </p>
+            <BrandedButton
+              v-if="hasColumnFilter"
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearColumnFilter"
+            >
+              {{ t('Effacer') }}
+            </BrandedButton>
+          </div>
+
+          <TabularFilterContent
+            v-model:sort="sort"
+            v-model:filters="filters"
+            :column="column"
+            :column-type="columnType"
+            :column-profile="columnProfile"
+            :null-percent="nullPercent"
+            :total-lines="totalLines"
+            :category-badge-styles="categoryBadgeStyles"
+            :boolean-counts="booleanCounts"
+          />
+        </div>
+      </Teleport>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import { RiFilter2Line, RiCloseLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { hasFilterForColumn as _hasFilterForColumn } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import TabularFilterContent from './TabularFilterContent.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const isOpen = ref(false)
+
+function togglePopover() {
+  isOpen.value = !isOpen.value
+}
+
+const anchorRef = useTemplateRef<HTMLElement>('anchor')
+const panelRef = useTemplateRef<HTMLElement>('panel')
+
+onClickOutside(panelRef, () => {
+  isOpen.value = false
+}, { ignore: [anchorRef] })
+
+const hasColumnFilter = computed(() => _hasFilterForColumn(filters.value, props.column))
+
+function clearColumnFilter() {
+  const { [props.column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/TabularExplorer/types.ts

@@ -0,0 +1,83 @@
+/** Response from /api/resources/{rid}/data/ */
+export interface TabularDataResponse {
+  data: TabularRow[]
+  meta: {
+    page: number
+    page_size: number
+    total: number
+  }
+  links: {
+    profile: string
+    swagger: string
+    next: string | null
+    prev: string | null
+  }
+}
+
+export type TabularRow = Record<string, unknown> & { __id: number }
+
+/** Response from /api/resources/{rid}/profile/ */
+export interface TabularProfileResponse {
+  profile: TabularProfile
+}
+
+export interface TabularProfile {
+  header: string[]
+  columns: Record<string, TabularColumnInfo>
+  formats: Record<string, string[]>
+  profile: Record<string, TabularColumnProfile>
+  encoding: string
+  separator: string
+  categorical: string[]
+  total_lines: number
+  nb_duplicates: number
+  columns_fields: unknown
+  columns_labels: unknown
+  header_row_idx: number
+  heading_columns: number
+  trailing_columns: number
+}
+
+export interface TabularColumnInfo {
+  score: number
+  format: string
+  python_type: string
+}
+
+export interface TabularColumnProfile {
+  tops: TabularTopValue[]
+  nb_distinct: number
+  nb_missing_values: number
+  min?: number
+  max?: number
+  std?: number
+  mean?: number
+}
+
+export interface TabularTopValue {
+  value: string
+  count: number
+}
+
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
+
+export interface ColumnFilters {
+  in?: string[]
+  exact?: string
+  min?: number
+  max?: number
+  contains?: string
+  null?: 'only' | 'exclude'
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortConfig {
+  column: string
+  direction: SortDirection
+}
+
+export interface BadgeStyle {
+  backgroundColor: string
+  color: string
+}

package/src/composables/useSearchFilter.ts

@@ -0,0 +1,90 @@
+import { type InjectionKey, type Ref, inject, onMounted, onScopeDispose } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+
+export interface CustomFilterEntry {
+  apiParam: string
+  ref: Ref<string | undefined>
+  defaultValue: string | undefined
+}
+
+export interface SearchFilterContext {
+  register(urlParam: string, entry: CustomFilterEntry): void
+  unregister(urlParam: string): void
+}
+
+export function isCustomFilterActive(entry: CustomFilterEntry): boolean {
+  const v = entry.ref.value
+  return v !== undefined && v !== null && v !== '' && v !== entry.defaultValue
+}
+
+export function forEachActiveCustomFilter(
+  registry: Map<string, CustomFilterEntry>,
+  apply: (apiParam: string, value: string) => void,
+): void {
+  for (const entry of registry.values()) {
+    if (!isCustomFilterActive(entry)) continue
+    apply(entry.apiParam, String(entry.ref.value))
+  }
+}
+
+export const searchFilterContextKey: InjectionKey<SearchFilterContext>
+  = Symbol('SearchFilterContext')
+
+export interface UseSearchFilterOptions {
+  /** The API parameter name to map this filter to. Defaults to the urlParam. */
+  apiParam?: string
+  /** Default value when not present in URL. Defaults to undefined. */
+  defaultValue?: string
+}
+
+/**
+ * Registers a custom filter with the parent GlobalSearch component.
+ *
+ * Must be called inside a component rendered within GlobalSearch's
+ * `#custom-filters-top` or `#custom-filters-bottom` slot.
+ *
+ * @param urlParam - The URL query parameter name (e.g. 'theme' → `?theme=value`)
+ * @param options  - Optional: `apiParam` to map to a different API param (e.g. 'tag'), `defaultValue`
+ * @returns A reactive ref bound to the URL parameter, suitable for v-model
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useSearchFilter } from '@datagouv/components-next'
+ * // URL: ?theme=environment → API: ?tag=environment
+ * const value = useSearchFilter('theme', { apiParam: 'tag' })
+ * </script>
+ * ```
+ */
+export function useSearchFilter(
+  urlParam: string,
+  options: UseSearchFilterOptions = {},
+): Ref<string | undefined> {
+  const context = inject(searchFilterContextKey)
+  if (!context) {
+    throw new Error(
+      `useSearchFilter("${urlParam}") must be used inside a <GlobalSearch> component.`,
+    )
+  }
+
+  const { apiParam = urlParam, defaultValue = undefined } = options
+
+  const value = useRouteQuery<string | undefined>(urlParam, defaultValue)
+
+  // Register in onMounted to avoid SSR/hydration mismatch: the registry must be
+  // empty during SSR so server and client produce the same initial HTML.
+  onMounted(() => {
+    context.register(urlParam, { apiParam, ref: value, defaultValue })
+  })
+
+  onScopeDispose(() => {
+    // Clear the URL param when the scope ends. This mirrors GlobalSearch's
+    // own `watch(currentType)` logic that drops built-in filters which don't
+    // apply to the new type: a custom filter's applicability is signalled
+    // by the consumer via `v-if`, so its unmount is the equivalent signal.
+    value.value = defaultValue
+    context.unregister(urlParam)
+  })
+
+  return value
+}

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