feat(visualizations): save image on save

.github/workflows/ci.yml

@@ -137,7 +137,7 @@ jobs:
         with:
           repository: opendatateam/udata
           path: ${{ env.UDATA_WORKING_DIR }}
-          ref: main
+          ref: feat/add-file-to-charts
 
       - name: Set up uv
         uses: astral-sh/setup-uv@v6

components/Charts/ChartConfigurator.vue

@@ -36,6 +36,7 @@
             <ChartViewerWrapper
               :chart="toChartApi(form)"
               @columns="columns = $event"
+              @update="updateImage"
             />
           </ClientOnly>
         </div>
@@ -415,7 +416,7 @@ const savedResources = reactive<Record<string, Resource>>({})
 const selectedResource = ref('14dba482-41e3-4c54-b82a-d8c11d1d80eb')
 const savedChart = ref<Chart | null>(null)
 const selectedChartId = ref('')
-
+const image = ref<Blob | null>(null)
 const debounceMs = 300
 const title = ref(form.value.title)
 const desc = ref(form.value.description)
@@ -450,7 +451,7 @@ const columnDetails = computed(() => {
   return options
 })
 
-const { $api } = useNuxtApp()
+const { $api, $fileApi } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const hasTabularData = useHasTabularData()
 const getProfile = useGetProfile()
@@ -506,6 +507,11 @@ watch(columns, (columnsPerResource) => {
   }
 })
 
+async function updateImage(value: string) {
+  const i = await fetch(value)
+  image.value = await i.blob()
+}
+
 async function loadMissingResourcesForChart(resourceIds: Set<string>) {
   for (const id of resourceIds) {
     if (savedResources[id]) continue
@@ -577,6 +583,15 @@ async function saveChart() {
       })
     }
 
+    if (image.value) {
+      const formData = new FormData()
+      formData.set('file', image.value, 'image.png')
+      await $fileApi(`/api/1/visualizations/${savedChart.value.id}/image/`, {
+        method: 'POST',
+        body: formData,
+      })
+    }
+
     toast.success(update ? t('Graphique mis à jour !') : t('Graphique sauvegardé !'))
     await refresh()
     selectedChartId.value = savedChart.value.id

datagouv-components/src/components/Chart/ChartViewer.vue

@@ -26,10 +26,18 @@ const props = defineProps<{
   }
 }>()
 
+const emit = defineEmits<{
+  update: [value: string | null]
+}>()
+
 const { locale } = useTranslation()
 const chartContainer = ref<HTMLElement | null>(null)
 let echartsInstance: EChartsType | null = null
 
+const finishHandler = () => {
+  emit('update', echartsInstance?.getDataURL() ?? null)
+}
+
 function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
   return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
@@ -187,12 +195,14 @@ const echartsOption = computed(() => {
 onMounted(() => {
   if (chartContainer.value) {
     echartsInstance = init(chartContainer.value)
+    echartsInstance.on('finished', finishHandler)
     updateChart()
   }
 })
 
 onUnmounted(() => {
   if (echartsInstance) {
+    echartsInstance.off('finished', finishHandler)
     echartsInstance.dispose()
     echartsInstance = null
   }

datagouv-components/src/components/Chart/ChartViewerWrapper.vue

@@ -7,6 +7,7 @@
       <ChartViewer
         :chart="chart"
         :series="data"
+        @update="(value: string | null) => { if (value) $emit('update', value) }"
       />
     </template>
     <template #error>
@@ -32,6 +33,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   columns: [columns: Record<string, Array<string>>]
+  update: [value: string]
 }>()
 
 const { t } = useTranslation()