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

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>

package/src/components/Form/Listbox.vue

@@ -1,101 +0,0 @@
-<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/functions/charts.ts

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

package/src/types/visualizations.ts

@@ -1,89 +0,0 @@
-import type { TabularAggregateType } from '../functions/tabularApi'
-import type { Owned, OwnedWithId } from './owned'
-
-export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
-export type Filter = {
-  _cls: 'Filter'
-  column: string
-  condition: FilterCondition
-  value: string | null
-}
-
-export type AndFilters = {
-  _cls: '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 CombinedSort = '' | 'axis_x-asc' | 'axis_x-desc' | 'axis_y-asc' | 'axis_y-desc'
-
-export type XAxisForm = Omit<XAxis, 'sort_x_by' | 'sort_x_direction'> & { sort_combined: CombinedSort }
-
-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>
-  chart_type?: DataSeriesType | null
-  filter: GenericFilter | null
-}