@datagouv/components-next 1.0.2-dev.9 → 1.0.2-dev.90

package/dist/{tilecoord-Db24Px13.js → tilecoord-A0fLnBZr.js}

@@ -1,6 +1,6 @@
-import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-34hvypZI.js";
-import { z as Tt, g as pt } from "./common-PJfpC179.js";
-import { aC as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aS as vt, x as Yt, r as Lt, aT as Ft, ak as wt, aI as yt, az as Dt, aJ as Ot, aU as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-DsetBcW7.js";
+import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-BijNEG0p.js";
+import { z as Tt, g as pt } from "./common-BjQlan3k.js";
+import { aD as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aU as vt, x as Yt, r as Lt, aV as Ft, ak as wt, aJ as yt, aA as Dt, aK as Ot, aW as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-CsNo9yH1.js";
 class mt extends It {
   /**
    * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate.
@@ -339,7 +339,7 @@ function ut(a, t, e, s) {
   }
   return i;
 }
-function Nt(a, t, e, s) {
+function Kt(a, t, e, s) {
   const n = Yt(e);
   let i = ut(
     a,
@@ -356,7 +356,7 @@ function Nt(a, t, e, s) {
     ), isFinite(i) && i > 0;
   }), i;
 }
-function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
+function Nt(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   const r = H(
     Math.round(e * a),
     Math.round(e * t),
@@ -409,7 +409,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   return m.getTriangles().forEach(function(o, y, C) {
     const p = o.source, I = o.target;
     let v = p[0][0], Y = p[0][1], W = p[1][0], M = p[1][1], D = p[2][0], A = p[2][1];
-    const G = h((I[0][0] - u[0]) / i), N = h(
+    const G = h((I[0][0] - u[0]) / i), K = h(
       -(I[0][1] - u[1]) / i
     ), R = h((I[1][0] - u[0]) / i), k = h(
       -(I[1][1] - u[1]) / i
@@ -420,32 +420,32 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     const Et = [
       [W, M, 0, 0, R - G],
       [D, A, 0, 0, U - G],
-      [0, 0, W, M, k - N],
-      [0, 0, D, A, Q - N]
-    ], S = vt(Et);
-    if (!S)
+      [0, 0, W, M, k - K],
+      [0, 0, D, A, Q - K]
+    ], N = vt(Et);
+    if (!N)
       return;
     if (r.save(), r.beginPath(), Gt() || !x) {
       r.moveTo(R, k);
-      const O = 4, K = G - R, it = N - k;
+      const O = 4, S = G - R, it = K - k;
       for (let P = 0; P < O; P++)
         r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h(P * it / (O - 1))
         ), P != O - 1 && r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h((P + 1) * it / (O - 1))
         );
       r.lineTo(U, Q);
     } else
-      r.moveTo(R, k), r.lineTo(G, N), r.lineTo(U, Q);
+      r.moveTo(R, k), r.lineTo(G, K), r.lineTo(U, Q);
     r.clip(), r.transform(
-      S[0],
-      S[2],
-      S[1],
-      S[3],
+      N[0],
+      N[2],
+      N[1],
+      N[3],
       G,
-      N
+      K
     ), r.translate(
       E[0] - j,
       E[3] - q
@@ -454,10 +454,10 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     if (l)
       Z = l.canvas, r.scale(d, -d);
     else {
-      const O = g[0], K = O.extent;
+      const O = g[0], S = O.extent;
       Z = O.image, r.scale(
-        L(K) / Z.width,
-        -b(K) / Z.height
+        L(S) / Z.width,
+        -b(S) / Z.height
       );
     }
     r.drawImage(Z, 0, 0), r.restore();
@@ -467,7 +467,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   }), r.restore()), r.canvas;
 }
 const Zt = 10, lt = 0.25;
-class Kt {
+class St {
   /**
    * @param {import("../proj/Projection.js").default} sourceProj Source projection.
    * @param {import("../proj/Projection.js").default} targetProj Target projection.
@@ -715,7 +715,7 @@ class Vt extends mt {
     l && (h ? h = V(h, l) : h = l);
     const f = n.getResolution(
       this.wrappedTileCoord_[0]
-    ), d = Nt(
+    ), d = Kt(
       t,
       s,
       E,
@@ -726,7 +726,7 @@ class Vt extends mt {
       return;
     }
     const u = X !== void 0 ? X : bt;
-    if (this.triangulation_ = new Kt(
+    if (this.triangulation_ = new St(
       t,
       s,
       E,
@@ -806,7 +806,7 @@ class Vt extends mt {
       ), g = this.targetTileGrid_.getTileCoordExtent(
         this.wrappedTileCoord_
       );
-      this.canvas_ = St(
+      this.canvas_ = Nt(
         n,
         i,
         this.pixelRatio_,
@@ -890,13 +890,13 @@ export {
   zt as I,
   Vt as R,
   mt as T,
-  Kt as a,
+  St as a,
   Bt as b,
   ut as c,
   Jt as d,
   $t as e,
   ts as g,
   ss as h,
-  St as r,
+  Nt as r,
   es as w
 };

package/dist/{vue3-xml-viewer.common-CCOV_ohP.js → vue3-xml-viewer.common-B8dNNkOU.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-qc4CO9Kn.js";
+import { c as Ke } from "./main-Dk_66g-3.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.9",
+  "version": "1.0.2-dev.90",
   "private": false,
   "type": "module",
   "engines": {
@@ -10,22 +10,24 @@
     "yarn": "use-pnpm-instead"
   },
   "main": "./src/main.ts",
+  "sideEffects": false,
   "files": [
     "assets",
     "dist",
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.8",
-    "@types/leaflet": "^1.9.17",
+    "@floating-ui/vue": "^1.1.11",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/router": "^13.1.0",
+    "@types/leaflet": "^1.9.17",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
-    "geopf-extensions-openlayers": "^1.0.0-beta.5",
+    "echarts": "^6.0.0",
+    "geopf-extensions-openlayers": "^1.0.0-beta.10",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
@@ -45,16 +47,14 @@
     "remark-rehype": "^11.1.2",
     "strip-markdown": "^6.0.0",
     "stylefire": "^7.0.3",
-    "swagger-ui-dist": "^5.27.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
-    "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
-    "vue3-xml-viewer": "^0.0.14"
+    "vue3-xml-viewer": "^0.0.14",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@intlify/cli": "^0.13.1",
@@ -71,13 +71,20 @@
     "eslint-plugin-vue": "^10.0",
     "jiti": "^2.4.2",
     "npm-run-all2": "^8.0",
+    "openapi-types": "^12.1.3",
     "prettier": "^3.0.0",
     "tailwindcss": "^4.0.8",
-    "typescript": "^5.7.3",
+    "typescript": "^5.9.3",
     "vite": "^7.0",
     "vite-plugin-vue-devtools": "^8.0",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.4",
     "vue-tsc": "^3.0"
   },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0 || ^5.0.0"
+  },
   "scarfSettings": {
     "enabled": false
   },

package/src/components/ActivityList/ActivityList.vue

@@ -90,7 +90,6 @@
           :total-results="activities.total"
           :page-size="activities.page_size"
           :page="activities.page"
-          :link="getLink"
           @change="(newPage: number) => page = newPage"
         />
       </template>
@@ -117,7 +116,6 @@ import { useTranslation } from '../../composables/useTranslation'
 import { getActivityTranslation } from '../../functions/activities'
 import { useFetch } from '../../functions/api'
 import { useFormatDate } from '../../functions/dates'
-import { getLink } from '../../functions/pagination'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'

package/src/components/Chart/ChartViewer.vue

@@ -0,0 +1,226 @@
+<template>
+  <div
+    ref="chartContainer"
+    class="w-full min-h-96"
+  />
+</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 { init, type ECharts as EChartsType } from 'echarts'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { summarize } from '../../functions/helpers'
+import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+
+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>>
+  }
+}>()
+
+const { locale } = useTranslation()
+const chartContainer = ref<HTMLElement | null>(null)
+let echartsInstance: EChartsType | null = null
+
+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 seriesArray = 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]]
+    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]
+        const valB = b[sortKey]
+
+        const aNullish = valA === null || valA === undefined
+        const bNullish = valB === null || valB === undefined
+        if (aNullish && bNullish) return 0
+        if (aNullish) return sortDirection === 'asc' ? -1 : 1
+        if (bNullish) return sortDirection === 'asc' ? 1 : -1
+
+        if (valA instanceof Date && valB instanceof Date) {
+          const timeA = valA.getTime()
+          const timeB = valB.getTime()
+          if (timeA < timeB) return sortDirection === 'asc' ? -1 : 1
+          if (timeA > timeB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        if (typeof valA === 'boolean' && typeof valB === 'boolean') {
+          if (valA === valB) return 0
+          // false comes before true in ascending order
+          if (valB) return sortDirection === 'asc' ? -1 : 1
+          return sortDirection === 'asc' ? 1 : -1
+        }
+
+        const numA = Number(valA)
+        const numB = Number(valB)
+        const bothNumeric = !isNaN(numA) && !isNaN(numB)
+
+        if (bothNumeric) {
+          if (numA < numB) return sortDirection === 'asc' ? -1 : 1
+          if (numA > numB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        const strA = String(valA)
+        const strB = String(valB)
+        return strA.localeCompare(strB, locale, {
+          sensitivity: 'base',
+          numeric: true,
+        }) * (sortDirection === 'asc' ? 1 : -1)
+      })
+    }
+
+    return {
+      series: {
+        type: s.type === 'histogram' ? 'bar' : 'line',
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        name: yColumn,
+        encode: {
+          x: xColumn,
+          y: yColumn,
+        },
+      } as LineSeriesOption | BarSeriesOption,
+      data: {
+        source: sortedData,
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+      },
+    }
+  })
+
+  const seriesData = {
+    series: [] as Array<LineSeriesOption | BarSeriesOption>,
+    data: [] as Array<Record<string, unknown>>,
+  }
+
+  for (const curr of seriesArray) {
+    if (!curr) continue
+    seriesData.series.push(curr.series)
+    seriesData.data.push(curr.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 = ''
+        const formatter = new Intl.NumberFormat('fr-FR')
+        for (const param of params) {
+          const seriesName = param.seriesName
+          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[seriesName]))}</strong><br>`
+        }
+        return tooltip
+      },
+    },
+    legend: {
+      show: seriesData.series.length > 1,
+      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
+  >
+})
+
+onMounted(() => {
+  if (chartContainer.value) {
+    echartsInstance = init(chartContainer.value)
+    updateChart()
+  }
+})
+
+onUnmounted(() => {
+  if (echartsInstance) {
+    echartsInstance.dispose()
+    echartsInstance = null
+  }
+})
+
+watch(() => props.chart, updateChart, { deep: true })
+
+watch(() => props.series, updateChart, { deep: true })
+
+function updateChart() {
+  if (!echartsInstance) return
+  const option = echartsOption.value
+  if (option) {
+    echartsInstance.setOption(option, { notMerge: true })
+  }
+}
+
+const handleResize = () => {
+  if (echartsInstance) {
+    echartsInstance.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>

package/src/components/Chart/ChartViewerWrapper.vue

@@ -0,0 +1,170 @@
+<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">
+        {{ t('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 } from '../../functions/tabularApi'
+import type { Chart, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+
+const props = defineProps<{
+  chart: Chart | ChartForApi
+}>()
+
+const emit = defineEmits<{
+  columns: [columns: Record<string, Array<string>>]
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const getProfile = useGetProfile()
+
+const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
+const error = ref<Error | null>(null)
+
+const pendingOperations = ref(0)
+
+const series = reactive<{
+  data: Record<string, Array<Record<string, unknown>>>
+  columns: Record<string, Array<string>>
+}>({
+  data: {},
+  columns: {},
+})
+
+async function fetchSeriesProfile() {
+  pendingOperations.value++
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (props.chart.series.length === 0) {
+      status.value = 'success'
+      series.data = {}
+      series.columns = {}
+      return
+    }
+
+    const fetchPromises = props.chart.series
+      .filter(serie => serie.resource_id)
+      .map(async (serie) => {
+        return {
+          id: serie.resource_id,
+          profile: await getProfile(serie.resource_id),
+        }
+      })
+
+    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,
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
+    status.value = 'error'
+    console.error(err)
+    series.columns = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+async function fetchSeriesData() {
+  pendingOperations.value++
+  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
+      .filter((serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        return xColumn && serie.resource_id && serie.column_y
+      })
+      .map(async (serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        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,
+          }),
+        }
+      })
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    series.data = Object.fromEntries(results.map(result => [
+      result.id,
+      result.data.data,
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    status.value = 'error'
+    series.data = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+watch(() => props.chart.series, async () => {
+  await fetchSeriesProfile()
+}, { immediate: true, deep: true })
+
+watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
+  await fetchSeriesData()
+}, { immediate: true, deep: true })
+
+watch(() => series.columns, () => {
+  emit('columns', series.columns)
+})
+
+watch(pendingOperations, (count) => {
+  if (count === 0) {
+    if (error.value === null && status.value === 'pending') {
+      status.value = 'success'
+    }
+  }
+})
+</script>