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

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

@@ -1,4 +1,4 @@
-import { b5 as Ke } from "./main-BOGKXwyT.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.127",
+  "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/TabularCellPopover.vue

@@ -38,7 +38,7 @@
             class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
             @click="filterByValue"
           >
-            <RiFilter2Line
+            <RiFilterLine
               class="size-4"
               aria-hidden="true"
             />
@@ -71,7 +71,7 @@ import { computed, ref, useTemplateRef, watch } from 'vue'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { onClickOutside } from '@vueuse/core'
 import {
-  RiFilter2Line,
+  RiFilterLine,
   RiFileCopyLine,
   RiCheckLine,
 } from '@remixicon/vue'