@datagouv/components-next 1.0.2-dev.128 → 1.0.2-dev.129

package/dist/{vue3-xml-viewer.common-BIaEIFYG.js → vue3-xml-viewer.common-d08lX8ER.js}

@@ -1,4 +1,4 @@
-import { b7 as Ke } from "./main-DKu5SOAl.js";
+import { b8 as Ke } from "./main-CQREzlRN.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.128",
+  "version": "1.0.2-dev.129",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/Chart/ChartViewer.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: Record<string, Array<string>>
+    columns: Record<string, Array<{ name: string, type: string }>>
   }
 }>()
 
@@ -32,7 +32,7 @@ let echartsInstance: EChartsType | null = null
 
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
-  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
+  return xAxis.type === 'continuous' ? 'value' : 'category'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -53,7 +53,8 @@ const echartsOption = computed(() => {
     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]) {
+    const resourceColumns = props.series.columns[resourceId]
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !resourceColumns) {
       return null
     }
 
@@ -110,7 +111,7 @@ const echartsOption = computed(() => {
     return {
       series: {
         type: s.type === 'histogram' ? 'bar' : 'line',
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
         name: yColumn,
         encode: {
           x: xColumn,
@@ -119,7 +120,7 @@ const echartsOption = computed(() => {
       } as LineSeriesOption | BarSeriesOption,
       data: {
         source: sortedData,
-        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
       },
     }
   })
@@ -137,10 +138,10 @@ const echartsOption = computed(() => {
 
   return {
     dataset: [...seriesData.data],
-    title: {
-      text: props.chart.title,
-      left: 'center',
+    textStyle: {
+      fontFamily: 'Marianne, arial, sans-serif',
     },
+    color: '#000091',
     tooltip: {
       trigger: 'axis' as const,
       formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
@@ -154,7 +155,7 @@ const echartsOption = computed(() => {
       },
     },
     legend: {
-      show: seriesData.series.length > 1,
+      show: false,
       bottom: 0,
     },
     grid: {

package/src/components/Chart/ChartViewerWrapper.vue

@@ -18,22 +18,20 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import ChartViewer from './ChartViewer.vue'
 import LoadingBlock from '../../components/LoadingBlock.vue'
 import { useComponentsConfig } from '../../config'
 import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
-import type { Chart, ChartForApi } from '../../types/visualizations'
+import type { Chart, ChartForApi, ColumnsDefinition } from '../../types/visualizations'
 import { useTranslation } from '../../composables/useTranslation'
+import { watchDebounced } from '@vueuse/shared'
+import { buildColumnsFromProfile } from '../../functions/charts'
 
 const props = defineProps<{
   chart: Chart | ChartForApi
 }>()
 
-const emit = defineEmits<{
-  columns: [columns: Record<string, Array<string>>]
-}>()
-
 const { t } = useTranslation()
 const config = useComponentsConfig()
 const getProfile = useGetProfile()
@@ -45,12 +43,18 @@ const pendingOperations = ref(0)
 
 const series = reactive<{
   data: Record<string, Array<Record<string, unknown>>>
-  columns: Record<string, Array<string>>
+  columns: ColumnsDefinition
 }>({
   data: {},
   columns: {},
 })
 
+const resourceIds = computed(() => {
+  return props.chart.series
+    .filter(s => s.resource_id)
+    .map(s => s.resource_id)
+})
+
 async function fetchSeriesProfile() {
   pendingOperations.value++
   status.value = 'pending'
@@ -78,7 +82,7 @@ async function fetchSeriesProfile() {
       .map(r => r.value)
     series.columns = Object.fromEntries(results.map(result => [
       result.id,
-      result.profile.profile.header,
+      buildColumnsFromProfile(result.profile),
     ]))
   }
   catch (err) {
@@ -86,6 +90,7 @@ async function fetchSeriesProfile() {
     status.value = 'error'
     console.error(err)
     series.columns = {}
+    series.data = {}
   }
   finally {
     pendingOperations.value--
@@ -148,17 +153,16 @@ async function fetchSeriesData() {
   }
 }
 
-watch(() => props.chart.series, async () => {
+watch(resourceIds, async () => {
   await fetchSeriesProfile()
-}, { immediate: true, deep: true })
+}, { immediate: true })
 
-watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
+watchDebounced([
+  () => props.chart.series,
+  () => props.chart.x_axis.column_x,
+], async () => {
   await fetchSeriesData()
-}, { immediate: true, deep: true })
-
-watch(() => series.columns, () => {
-  emit('columns', series.columns)
-})
+}, { debounce: config.searchDebounce ?? 300, immediate: true, deep: true })
 
 watch(pendingOperations, (count) => {
   if (count === 0) {

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -613,7 +613,7 @@ import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -999,23 +999,18 @@ function toggleMobileFilterColumn(col: string) {
 }
 
 // Column type helpers
-function resolveColumnType(col: string): ColumnType {
+function getColumnTypeFromName(col: string): ColumnType {
   const profile = profileData.value?.profile
   if (!profile) return 'text'
   const colInfo = profile.columns[col]
   if (!colInfo) return 'text'
-  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
-  if (colInfo.format === 'year') return 'date'
-  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
-  if (colInfo.python_type === 'bool') return 'boolean'
-  if (profile.categorical.includes(col)) return 'categorical'
-  return 'text'
+  return resolveColumnType(colInfo, profile.categorical.includes(col))
 }
 
 const columnTypesMap = computed(() => {
   const map: Record<string, ColumnType> = {}
   for (const col of allColumns.value) {
-    map[col] = resolveColumnType(col)
+    map[col] = getColumnTypeFromName(col)
   }
   return map
 })

package/src/components/TabularExplorer/types.ts

@@ -19,6 +19,9 @@ export type TabularRow = Record<string, unknown> & { __id: number }
 /** Response from /api/resources/{rid}/profile/ */
 export type TabularProfileResponse = {
   profile: TabularProfile
+  deleted_at: string | null
+  dataset_id: string
+  indexes: null
 }
 
 export type TabularProfile = {
@@ -31,8 +34,8 @@ export type TabularProfile = {
   categorical: string[]
   total_lines: number
   nb_duplicates: number
-  columns_fields: unknown
-  columns_labels: unknown
+  columns_fields: Record<string, TabularColumnInfo>
+  columns_labels: Record<string, TabularColumnInfo>
   header_row_idx: number
   heading_columns: number
   trailing_columns: number

package/src/functions/charts.ts

@@ -1,4 +1,6 @@
-import type { Chart, ChartForm, ChartForApi, Filter } from '../types/visualizations'
+import type { Chart, ChartForm, ChartForApi, Filter, ColumnDefinition } from '../types/visualizations'
+import type { TabularProfile } from '../components/TabularExplorer/types'
+import { resolveColumnType } from './tabular'
 
 export function toChartForm(chart: Chart) {
   const seriesFilter = chart.series[0]?.filters as Filter | null
@@ -66,3 +68,12 @@ export function toChartApi(chartForm: ChartForm): ChartForApi {
     extras: chartForm.extras,
   }
 }
+
+export function buildColumnsFromProfile(profile: { profile: TabularProfile }): Array<ColumnDefinition> {
+  return profile.profile.header.map((name) => {
+    const colInfo = profile.profile.columns[name]
+    const isCategorical = profile.profile.categorical.includes(name)
+    const colType = resolveColumnType(colInfo ?? { python_type: 'unknown', format: undefined }, isCategorical)
+    return { name, type: colType }
+  })
+}

package/src/functions/tabular.ts

@@ -45,6 +45,15 @@ export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, Type
   }
 }
 
+export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (colInfo.format === 'year') return 'date'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (isCategorical) return 'categorical'
+  return 'text'
+}
+
 // csv-detective formats that carry no semantic meaning beyond the generic
 // display type already resolved by `ColumnType` — these fall back to
 // `buildTypeConfig` (Texte / Nombre / Date / Booléen) in the header.

package/src/functions/tabularApi.ts

@@ -1,7 +1,7 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
 import type { GenericFilter } from '../types/visualizations'
-import type { SortConfig } from '../components/TabularExplorer/types'
+import type { SortConfig, TabularProfileResponse } from '../components/TabularExplorer/types'
 
 export type { SortConfig }
 
@@ -31,48 +31,6 @@ export type FetchTabularDataOptions = {
   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
  */

package/src/main.ts

@@ -23,7 +23,8 @@ 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 { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm, CombinedSort, ColumnDefinition, ColumnsDefinition } from './types/visualizations'
+import type { ColumnType } from './components/TabularExplorer/types'
 import type { GlobalSearchConfig, SearchType, SearchTypeConfig, SortOption, HiddenFilter, BuiltInFilterKey, DatasetSearchConfig, DatasetSearchFilters, DataserviceSearchConfig, DataserviceSearchFilters, ReuseSearchConfig, ReuseSearchFilters, OrganizationSearchConfig, OrganizationSearchFilters, TopicSearchConfig, TopicSearchFilters } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 import { useSearchFilter } from './composables/useSearchFilter'
@@ -251,6 +252,10 @@ export type {
   Chart,
   ChartForm,
   ChartForApi,
+  CombinedSort,
+  ColumnDefinition,
+  ColumnType,
+  ColumnsDefinition,
   FilterCondition,
   Filter,
   AndFilters,

package/src/types/visualizations.ts

@@ -1,5 +1,6 @@
 import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
+import type { ColumnType } from '../components/TabularExplorer/types'
 
 export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
 export type Filter = {
@@ -87,3 +88,6 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   chart_type?: DataSeriesType | null
   filter: GenericFilter | null
 }
+
+export type ColumnDefinition = { name: string, type: ColumnType }
+export type ColumnsDefinition = Record<string, Array<ColumnDefinition>>