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

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

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-7DRSPyNj.js";
+import { c as Ke } from "./main-DaWGX8hL.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.51",
+  "version": "1.0.2-dev.52",
   "private": false,
   "type": "module",
   "engines": {
@@ -25,6 +25,7 @@
     "@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",
@@ -48,6 +49,7 @@
     "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/Chart/ChartViewer.vue

@@ -0,0 +1,147 @@
+<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

@@ -0,0 +1,224 @@
+<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>

package/src/components/Form/Listbox.vue

@@ -0,0 +1,101 @@
+<template>
+  <Listbox v-model="model">
+    <div class="relative min-w-0">
+      <div
+        ref="floatingReference"
+        class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
+          <slot name="button">
+            <div class="w-full flex items-center justify-between gap-2">
+              <div
+                class="truncate"
+                :class="{ 'text-new-disabled-text': isDisabled(model) }"
+              >
+                {{ displayValue(model) }}
+              </div>
+              <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+            </div>
+          </slot>
+        </ListboxButton>
+      </div>
+
+      <ListboxOptions
+        ref="popover"
+        :style="floatingStyles"
+        class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="getOptionId(toValue(option))"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="option"
+        >
+          <li
+            class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+            :class="{
+              'bg-gray-lower': active && !isDisabled(toValue(option)),
+              'text-new-disabled-text': isDisabled(toValue(option)),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4"
+                :class="isDisabled(toValue(option)) ?' text-new-disabled-text' : 'text-new-primary'"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active }"
+            >
+              {{ displayValue(option) }}
+            </slot>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object">
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { toValue, useTemplateRef } from 'vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
+
+withDefaults(defineProps<{
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T | null) => string
+  isDisabled?: (option: T | null) => boolean
+}>(), {
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
+
+    throw new Error('Please set getOptionId()')
+  },
+  isDisabled: (option: T | null): boolean => {
+    if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+
+    return false
+  },
+})
+
+const model = defineModel<T | null>({ required: true })
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

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 && response.data.length > 0) {
+    if ('data' in response && response.data && 0 in response.data) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')

package/src/composables/useHasTabularData.ts

@@ -1,10 +1,16 @@
 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()
 
-  return (resource: Resource) => {
+  const hasTabularData = (resource: Resource) => {
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
@@ -12,4 +18,6 @@ export const useHasTabularData = () => {
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }
+
+  return hasTabularData
 }

package/src/functions/charts.ts

@@ -0,0 +1,68 @@
+import type { Chart, ChartForm, ChartForApi, Filter } from '../types/visualizations'
+
+export function toChartForm(chart: Chart) {
+  const seriesFilter = chart.series[0]?.filters as Filter | null
+
+  return {
+    title: chart.title,
+    description: chart.description,
+    private: chart.private,
+    owned: chart.organization ? { organization: chart.organization.id, owner: null } : { owner: chart.owner.id, organization: null },
+    x_axis: {
+      column_x: chart.x_axis.column_x,
+      type: chart.x_axis.type,
+      sort_combined: chart.x_axis.sort_x_by && chart.x_axis.sort_x_direction
+        ? `${chart.x_axis.sort_x_by}-${chart.x_axis.sort_x_direction}`
+        : '',
+    },
+    y_axis: {
+      label: chart.y_axis.label || '',
+      min: chart.y_axis.min,
+      max: chart.y_axis.max,
+      unit: chart.y_axis.unit || '',
+      unit_position: chart.y_axis.unit_position || 'suffix',
+    },
+    series: chart.series.map(serie => ({
+      ...serie,
+      aggregate_y: serie.aggregate_y || '',
+    })),
+    extras: chart.extras,
+    chart_type: chart.series[0] ? chart.series[0].type : null,
+    filter: seriesFilter ?? null,
+  } satisfies ChartForm
+}
+
+export function toChartApi(chartForm: ChartForm): ChartForApi {
+  const xAxis = {
+    column_x: chartForm.x_axis.column_x,
+    type: chartForm.x_axis.type,
+    sort_x_by: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[0] as 'axis_x' | 'axis_y')
+      : null,
+    sort_x_direction: chartForm.x_axis.sort_combined
+      ? (chartForm.x_axis.sort_combined.split('-')[1] as 'asc' | 'desc')
+      : null,
+  }
+
+  return {
+    ...chartForm.owned,
+    title: chartForm.title,
+    description: chartForm.description,
+    private: chartForm.private,
+    x_axis: xAxis,
+    y_axis: {
+      label: chartForm.y_axis.label ?? null,
+      min: chartForm.y_axis.min ?? null,
+      max: chartForm.y_axis.max ?? null,
+      unit: chartForm.y_axis.unit ?? null,
+      unit_position: chartForm.y_axis.unit_position ?? null,
+    },
+    series: chartForm.series.map((serie, index) => ({
+      ...serie,
+      type: index === 0 && chartForm.chart_type ? chartForm.chart_type : serie.type,
+      aggregate_y: serie.aggregate_y || null,
+      filters: serie.filters || (index === 0 && chartForm.filter ? chartForm.filter : null),
+    })),
+    extras: chartForm.extras,
+  }
+}