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

package/src/components/Chart/ChartViewer.vue

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

@@ -1,194 +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, 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/functions/pagination.ts

@@ -1,9 +0,0 @@
-import { useRoute } from 'vue-router'
-
-export function getLink(page: number): string {
-  const route = useRoute()
-  const routePath = route.path
-  const search = new URLSearchParams(route.query as Record<string, string>)
-  search.set('page', page.toFixed(0))
-  return `${routePath}?${search.toString()}`
-}

package/src/types/visualizations.ts

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