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

package/dist/{vue3-xml-viewer.common-S9Mg9vGE.js → vue3-xml-viewer.common-DOIGuzsk.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-DaWGX8hL.js";
+import { c as Ke } from "./main-7DRSPyNj.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.52",
+  "version": "1.0.2-dev.53",
   "private": false,
   "type": "module",
   "engines": {
@@ -25,7 +25,6 @@
     "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
-    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
@@ -49,7 +48,6 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vue-content-loader": "^2.0.1",
-    "vue-echarts": "^8.0.1",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",

package/src/components/ResourceAccordion/Preview.vue

@@ -142,7 +142,7 @@ async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && 0 in response.data) {
+    if ('data' in response && response.data && response.data.length > 0) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')

package/src/composables/useHasTabularData.ts

@@ -1,16 +1,10 @@
 import { useComponentsConfig } from '../config'
 import type { Resource } from '../types/resources'
 
-/**
- * Composable to determine if a resource has tabular data.
- * This is used to show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure).
- *
- * @returns A function to check if a resource has tabular data.
- */
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
-  const hasTabularData = (resource: Resource) => {
+  return (resource: Resource) => {
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
@@ -18,6 +12,4 @@ export const useHasTabularData = () => {
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }
-
-  return hasTabularData
 }

package/src/functions/tabularApi.ts

@@ -1,146 +1,20 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
-import type { GenericFilter } from '../types/visualizations'
 
 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('&')
-}
-
 /**
  * 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) {
+  let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
+  if (sortConfig) {
+    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+  }
+  return await ofetch(url)
 }
 
 /**
@@ -148,5 +22,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,7 +23,6 @@ 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'
 
@@ -81,8 +80,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 +94,12 @@ 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 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'
@@ -125,8 +120,6 @@ export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
 export * from './functions/users'
-export * from './functions/tabularApi'
-export * from './functions/charts'
 export * from './types/access_types'
 
 export type {
@@ -223,23 +216,6 @@ export type {
   ValidataError,
   Weight,
   WellType,
-  Chart,
-  ChartForm,
-  ChartForApi,
-  FilterCondition,
-  Filter,
-  AndFilters,
-  GenericFilter,
-  XAxisType,
-  XAxisSortBy,
-  SortDirection,
-  XAxis,
-  XAxisForm,
-  UnitPosition,
-  YAxis,
-  DataSeriesType,
-  DataSeries,
-  DataSeriesForm,
 }
 
 export {
@@ -325,8 +301,6 @@ export {
   SchemaCard,
   SimpleBanner,
   SmallChart,
-  ChartViewer,
-  ChartViewerWrapper,
   StatBox,
   OpenApiViewer,
   Tab,
@@ -343,5 +317,4 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
-  Listbox,
 }

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>

package/src/components/Chart/ChartViewerWrapper.vue

@@ -1,224 +0,0 @@
-<template>
-  <LoadingBlock
-    :status="status"
-    :data="series"
-  >
-    <template #default="{ data }">
-      <ChartViewer
-        :chart="chart"
-        :series="data"
-      />
-    </template>
-    <template #error>
-      <div class="text-center py-8 text-gray-500">
-        Une erreur est survenue lors du chargement des données du graphique.
-      </div>
-    </template>
-  </LoadingBlock>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
-import ChartViewer from './ChartViewer.vue'
-import LoadingBlock from '../../components/LoadingBlock.vue'
-import { useComponentsConfig } from '../../config'
-import { fetchTabularData, useGetProfile, type TabularDataResponse, type TabularProfileResponse } from '../../functions/tabularApi'
-import type { Chart, ChartForApi } from '../../types/visualizations'
-
-const props = defineProps<{
-  chart: Chart | ChartForApi
-  loadAllPages?: boolean
-}>()
-
-const emit = defineEmits<{
-  columns: [columns: Record<string, Array<string>>]
-}>()
-
-const config = useComponentsConfig()
-const getProfile = useGetProfile()
-
-// Loading and error states
-const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
-const error = ref<Error | null>(null)
-
-// Dataset source for the chart
-const series = reactive<{
-  data: Record<string, Array<Record<string, unknown>>>
-  columns: Record<string, Array<string>>
-  page: Record<string, number>
-  hasNextPage: Record<string, boolean>
-}>({
-  data: {},
-  columns: {},
-  page: {},
-  hasNextPage: {},
-})
-
-async function fetchSeriesProfile() {
-  status.value = 'pending'
-  error.value = null
-
-  try {
-    if (props.chart.series.length === 0) {
-      status.value = 'success'
-      series.data = {}
-      series.columns = {}
-      return
-    }
-
-    // Fetch data for all series in parallel
-    const fetchPromises = props.chart.series.map(async (serie) => {
-      if (!serie.resource_id) return
-      return {
-        id: serie.resource_id,
-        profile: await getProfile(serie.resource_id),
-      }
-    }).filter(Boolean) as Array<Promise<{
-      id: string
-      profile: TabularProfileResponse
-    }>>
-
-    const results = (await Promise.allSettled(fetchPromises))
-      .filter(r => r.status === 'fulfilled')
-      .map(r => r.value)
-    series.columns = Object.fromEntries(results.map(result => [
-      result.id,
-      result.profile.profile.header,
-    ]))
-    status.value = 'success'
-  }
-  catch (err) {
-    error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
-    status.value = 'error'
-    console.log(err)
-    series.columns = {}
-  }
-}
-
-async function loadMorePages() {
-  for (const serie of props.chart.series) {
-    const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
-    const resourceId = serie.resource_id
-    if (!xColumn || !resourceId || !serie.column_y) continue
-
-    // Check if there's more data to load for this series
-    if (!series.hasNextPage[resourceId]) {
-      continue
-    }
-
-    // Calculate the next page to fetch
-    const nextPage = (series.page[resourceId] || 0) + 1
-
-    const response = await fetchTabularData(config, {
-      columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
-      resourceId,
-      page: nextPage,
-      pageSize: 100,
-      groupBy: xColumn,
-      aggregation: serie.column_y && serie.aggregate_y
-        ? {
-            column: serie.column_y,
-            type: serie.aggregate_y,
-          }
-        : undefined,
-      filters: serie.filters ?? undefined,
-    })
-
-    // Update the page tracker
-    series.page[resourceId] = nextPage
-
-    if (!series.data[resourceId]) {
-      series.data[resourceId] = []
-    }
-    series.data[resourceId] = [...series.data[resourceId], ...response.data]
-
-    // Update hasNextPage based on the API response
-    series.hasNextPage[resourceId] = !!response.links.next
-  }
-}
-
-async function fetchSeriesData() {
-  status.value = 'pending'
-  error.value = null
-
-  try {
-    if (props.chart.series.length === 0 || !props.chart.x_axis.column_x) {
-      status.value = 'success'
-      series.data = {}
-      return
-    }
-
-    const fetchPromises = props.chart.series.map(async (serie) => {
-      const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
-
-      if (!xColumn || !serie.resource_id || !serie.column_y) return
-      return {
-        id: serie.resource_id,
-        data: await fetchTabularData(config, {
-          columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
-          resourceId: serie.resource_id,
-          page: 1,
-          pageSize: 100,
-          groupBy: xColumn,
-          aggregation: serie.column_y && serie.aggregate_y
-            ? {
-                column: serie.column_y,
-                type: serie.aggregate_y,
-              }
-            : undefined,
-          filters: serie.filters ?? undefined,
-        }),
-      }
-    }).filter(Boolean) as Array<Promise<{
-      id: string
-      data: TabularDataResponse
-    }>>
-
-    const results = (await Promise.allSettled(fetchPromises))
-      .filter(r => r.status === 'fulfilled')
-      .map(r => r.value)
-    // Transform data into echarts format
-    series.data = Object.fromEntries(results.map(result => [
-      result.id,
-      result.data.data,
-    ]))
-
-    // Reset page tracking for each series to 0 (page 1 has been loaded)
-    // Also initialize hasNextPage based on the response
-    for (const result of results) {
-      const serie = props.chart.series.find(s => s.resource_id === result.id)
-      if (serie) {
-        series.page[result.id] = 0
-        series.hasNextPage[result.id] = !!result.data.links.next
-      }
-    }
-
-    // If loadAllPages is true, fetch the next page (loadMorePages can be called again for more)
-    // This allows progressive loading - first page loads quickly, then more can be loaded on demand
-    if (props.loadAllPages) {
-      await loadMorePages()
-    }
-
-    status.value = 'success'
-  }
-  catch (err) {
-    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
-    status.value = 'error'
-    series.data = {}
-  }
-}
-
-// Watch for changes in the chart or its series
-watch(() => props.chart.series, async () => {
-  await fetchSeriesProfile()
-}, { immediate: true, deep: true })
-
-// Watch for changes in the chart or its series
-watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
-  await fetchSeriesData()
-}, { immediate: true, deep: true })
-
-watch(() => series.columns, () => {
-  emit('columns', series.columns)
-})
-</script>