@datagouv/components-next 1.0.2-dev.2 → 1.0.2-dev.4

package/dist/{vue3-xml-viewer.common-BRxsqI9j.js → vue3-xml-viewer.common-DFrGHXJC.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-B2kXxWRG.js";
+import { b as Ke } from "./main-ByqZlhiZ.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.2",
+  "version": "1.0.2-dev.4",
   "private": false,
   "type": "module",
   "engines": {
@@ -17,14 +17,15 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@types/leaflet": "^1.9.17",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
+    "@types/leaflet": "^1.9.17",
     "@vueuse/core": "^13.1.0",
     "@vueuse/router": "^13.1.0",
     "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",
@@ -50,6 +51,7 @@
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
+    "vue-echarts": "^8.0.1",
     "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",

package/src/components/Chart/ChartViewer.vue

@@ -0,0 +1,152 @@
+<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, DataSeries, XAxis, YAxis, ChartForm, XAxisForm } from '../../types/visualizations'
+
+use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
+
+const props = defineProps<{
+  chart: Chart | ChartForm
+  series: {
+    data: Record<string, Array<Record<string, unknown>>>
+    columns: Record<string, Array<string>>
+  }
+}>()
+
+function mapSeriesType(type: DataSeries['type']): 'line' | 'bar' {
+  return (type ?? 'line') === 'histogram' ? 'bar' : 'line'
+}
+
+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
+
+  // Create series configuration with data mapping
+  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
+    const seriesType = s.type
+
+    if (!xColumn || !yColumn || !resourceId || !seriesType || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+      return null
+    }
+
+    // Sort data before passing to ECharts to avoid transform issues
+    const sortedData = [...props.series.data[resourceId]]
+    const sortBy = props.chart.x_axis.sort_x_by
+    const 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: mapSeriesType(seriesType),
+        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,194 @@
+<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, ChartForm } from '../../types/visualizations'
+
+const chart = defineModel<Chart | ChartForm>({ required: true })
+
+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>>
+}>({
+  data: {},
+  columns: {},
+})
+
+async function fetchSeriesProfile() {
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (chart.value.series.length === 0) {
+      status.value = 'success'
+      series.data = {}
+      series.columns = {}
+      return
+    }
+
+    // Fetch data for all series in parallel
+    const fetchPromises = chart.value.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,
+    ]))
+    if (results.length > 0) {
+      const columns = results[0]?.profile.profile.header ?? []
+      const firstColumn = columns.filter(c => c !== '__id')[0]
+      if (!chart.value.x_axis.column_x && firstColumn) {
+        chart.value.x_axis.column_x = firstColumn
+      }
+    }
+    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 fetchSeriesData() {
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (chart.value.series.length === 0 || !chart.value.x_axis.column_x) {
+      status.value = 'success'
+      series.data = {}
+      return
+    }
+
+    // Fetch data for all series in parallel
+    const fetchPromises = chart.value.series.map(async (serie) => {
+      const xColumn = serie.column_x_name_override ?? chart.value.x_axis.column_x
+      if (!xColumn || !serie.resource_id || !serie.column_y) return
+      return {
+        id: serie.resource_id,
+        profile: await getProfile(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,
+        }),
+      }
+    }).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,
+    ]))
+    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(() => chart.value.series, async () => {
+  await fetchSeriesProfile()
+}, { immediate: true, deep: true })
+
+// Watch for changes in the chart or its series
+watch([() => chart.value.series, () => chart.value.x_axis.column_x], async () => {
+  await fetchSeriesData()
+}, { immediate: true, deep: true })
+
+watch(() => series.columns, () => {
+  emit('columns', series.columns)
+})
+
+/**
+ * Combines data from multiple series into a single echarts dataset source
+ */
+// function combineSeriesData(seriesData: Array<TabularDataResponse | null>): Array<Array<unknown>> {
+//   if (!seriesData.length || seriesData.every(data => !data || !data.data || data.data.length === 0)) {
+//     return []
+//   }
+
+//   // Get all unique columns from all series
+//   const allColumns = Array.from(new Set(seriesData.flatMap(data =>
+//     data?.data?.flatMap(Object.keys) || []
+//   )))
+
+//   // Build the source array with headers
+//   const source: Array<Array<unknown>> = [allColumns]
+
+//   // Add data rows - for simplicity, we'll use data from the first series
+//   // In a real implementation, you'd want to merge/combine the data appropriately
+//   const firstData = seriesData.find(data => data?.data?.length)?.data
+//   if (firstData) {
+//     firstData.forEach(row => {
+//       const rowValues = allColumns.map(column => row[column])
+//       source.push(rowValues)
+//     })
+//   }
+
+//   return source
+// }
+</script>

package/src/components/ResourceAccordion/Preview.vue

@@ -147,7 +147,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/functions/tabularApi.ts

@@ -6,15 +6,92 @@ export type SortConfig = {
   type: string
 } | null
 
+export type TabularDataResponse = {
+  data: Array<Record<string, unknown>>
+  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
+}
+
+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
+ * Call Tabular-api to get table content with options object
  */
-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}`
+export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
+  const page = options.page ?? 1
+  const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
+  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}`
   }
-  return await ofetch(url)
+  if (options.groupBy && options.aggregation?.type) {
+    url += `&${options.groupBy}__groupby&${options.aggregation.column}__${options.aggregation.type}`
+  }
+  return await ofetch<TabularDataResponse>(url)
+}
+
+/**
+ * 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 })
 }
 
 /**
@@ -22,5 +99,5 @@ export async function getData(config: PluginConfig, id: string, page: number, so
  */
 export function useGetProfile() {
   const config = useComponentsConfig()
-  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch<TabularProfileResponse>(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }

package/src/main.ts

@@ -23,6 +23,7 @@ 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, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 
@@ -100,6 +101,7 @@ 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'
@@ -121,6 +123,7 @@ export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
 export * from './functions/users'
+export * from './functions/tabularApi'
 export * from './types/access_types'
 
 export type {
@@ -218,6 +221,23 @@ export type {
   ValidataError,
   Weight,
   WellType,
+  Chart,
+  ChartForm,
+  ChartForApi,
+  FilterCondition,
+  Filter,
+  AndFilters,
+  GenericFilter,
+  XAxisType,
+  XAxisSortBy,
+  SortDirection,
+  XAxis,
+  XAxisForm,
+  UnitPosition,
+  YAxis,
+  DataSeriesType,
+  DataSeries,
+  DataSeriesForm,
 }
 
 export {

package/src/types/visualizations.ts

@@ -0,0 +1,84 @@
+import type { TabularAggregateType } from '../functions/tabularApi'
+import type { Owned, OwnedWithId } from './owned'
+
+export type FilterCondition = 'equal' | 'greater'
+
+export type Filter = {
+  column: string
+  condition: FilterCondition
+  value?: string
+}
+
+export type AndFilters = {
+  filters: Array<Filter | AndFilters>
+}
+
+export type GenericFilter = Filter | AndFilters
+
+export type XAxisType = 'discrete' | 'continuous'
+
+export type XAxisSortBy = 'axis_x' | 'axis_y'
+
+export type SortDirection = 'asc' | 'desc'
+
+export type XAxis = {
+  column_x: string
+  sort_x_by: XAxisSortBy | null
+  sort_x_direction: SortDirection | null
+  type: XAxisType
+}
+
+export type XAxisForm = Omit<XAxis, 'sort_x_by'> & { sort_x_by: XAxisSortBy | '' | null }
+
+export type UnitPosition = 'prefix' | 'suffix'
+
+export type YAxis = {
+  min: number | null
+  max: number | null
+  label: string | null
+  unit: string | null
+  unit_position: UnitPosition | null
+}
+
+export type DataSeriesType = 'line' | 'histogram'
+
+export type DataSeries = {
+  type: DataSeriesType
+  column_y: string
+  aggregate_y: TabularAggregateType | null
+  resource_id: string
+  column_x_name_override: string | null
+  filters: GenericFilter | null
+}
+
+// Type for form where aggregate_y can be empty string for select binding
+export type DataSeriesForm = Omit<DataSeries, 'aggregate_y'> & { aggregate_y: TabularAggregateType | '' | null }
+
+export type Chart = Owned & {
+  id: string
+  title: string
+  slug: string
+  description: string
+  private: boolean
+  created_at: string
+  last_modified: string
+  deleted_at: string | null
+  uri: string
+  page: string
+  x_axis: XAxis
+  y_axis: YAxis
+  series: Array<DataSeries>
+  extras: Record<string, unknown>
+  permissions: { delete: boolean, edit: boolean, read: boolean }
+  metrics: {
+    views: number
+  }
+}
+
+export type ChartForApi = OwnedWithId & Pick<Chart, 'title' | 'description' | 'private' | 'x_axis' | 'y_axis' | 'series' | 'extras'>
+
+export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organization'> & {
+  owned: OwnedWithId
+  x_axis: XAxisForm
+  series: Array<DataSeriesForm>
+}

package/dist/Swagger.client-D4-F6yEf.js

@@ -1,4 +0,0 @@
-import { i as f } from "./main-B2kXxWRG.js";
-export {
-  f as default
-};