@datagouv/components-next 1.0.2-dev.16 → 1.0.2-dev.161

package/dist/{vue3-json-viewer-BXwup7nO.js → vue3-json-viewer-CJLQFzXZ.js}

@@ -1,4 +1,4 @@
-import { defineComponent as T, ref as k, onMounted as J, h as g, watch as F, computed as O, inject as $, provide as q, createElementBlock as _, openBlock as N, normalizeClass as S, toDisplayString as A, resolveComponent as ie, createCommentVNode as Y, createElementVNode as z, renderSlot as ce, createTextVNode as pe, createVNode as fe, nextTick as de } from "vue";
+import { defineComponent as T, ref as k, onMounted as J, h as g, watch as F, computed as O, inject as $, provide as q, openBlock as _, createElementBlock as N, toDisplayString as A, normalizeClass as S, resolveComponent as ie, createElementVNode as z, renderSlot as ce, createTextVNode as pe, createCommentVNode as Y, createVNode as fe, nextTick as de } from "vue";
 const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/, X = T({
   name: "JsonString",
   props: {
@@ -66,7 +66,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = O(() => y.jsonValue === null ? "null" : "undefined");
-    return (p, d) => (N(), _("span", ye, A(c.value), 1));
+    return (p, d) => (_(), N("span", ye, A(c.value), 1));
   }
 }), he = /* @__PURE__ */ T({
   __name: "json-number",
@@ -79,7 +79,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = O(() => Number.isInteger(y.jsonValue));
-    return (p, d) => (N(), _("span", {
+    return (p, d) => (_(), N("span", {
       class: S(["jv-item", "jv-number", c.value ? "jv-number-integer" : "jv-number-float"])
     }, A(e.jsonValue.toString()), 3));
   }
@@ -95,7 +95,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", ge, A(e.jsonValue.toString()), 1));
+    return (y, c) => (_(), N("span", ge, A(e.jsonValue.toString()), 1));
   }
 }), je = T({
   name: "JsonObject",
@@ -277,7 +277,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", {
+    return (y, c) => (_(), N("span", {
       class: S(["jv-item", "jv-function"]),
       title: e.jsonValue.toString()
     }, " <function> ", 8, Ee));
@@ -295,7 +295,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = $("timeformat", (d) => d.toLocaleString()), p = O(() => c(y.jsonValue));
-    return (d, i) => (N(), _("span", ke, ' "' + A(p.value) + '" ', 1));
+    return (d, i) => (_(), N("span", ke, ' "' + A(p.value) + '" ', 1));
   }
 }), Te = {
   class: /* @__PURE__ */ S(["jv-item", "jv-regexp"])
@@ -309,7 +309,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", Te, A(e.jsonValue.toString()), 1));
+    return (y, c) => (_(), N("span", Te, A(e.jsonValue.toString()), 1));
   }
 }), I = T({
   name: "JsonBox",
@@ -421,12 +421,6 @@ function _e(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var H = { exports: {} };
-/*!
- * clipboard.js v2.0.11
- * https://clipboardjs.com/
- *
- * Licensed MIT © Zeno Rocha
- */
 var Ne = H.exports, Z;
 function Oe() {
   return Z || (Z = 1, (function(e, y) {
@@ -1041,10 +1035,10 @@ const Me = /* @__PURE__ */ _e(Ae), Ve = function(e, y) {
 };
 function Re(e, y, c, p, d, i) {
   const n = ie("json-box");
-  return N(), _("div", {
+  return _(), N("div", {
     class: S(e.jvClass)
   }, [
-    e.copyable ? (N(), _("div", {
+    e.copyable ? (_(), N("div", {
       key: 0,
       class: S(`jv-tooltip ${e.copyText.align || "right"}`)
     }, [
@@ -1067,7 +1061,7 @@ function Re(e, y, c, p, d, i) {
         "preview-mode": e.previewMode
       }, null, 8, ["value", "sort", "preview-mode"])
     ], 2),
-    e.expandableCode && e.boxed ? (N(), _("div", {
+    e.expandableCode && e.boxed ? (_(), N("div", {
       key: 1,
       class: "jv-more",
       onClick: y[0] || (y[0] = (...t) => e.toggleExpandCode && e.toggleExpandCode(...t))

package/dist/{vue3-xml-viewer.common-CJXShyPB.js → vue3-xml-viewer.common-H2czi46-.js}

@@ -1,24 +1,24 @@
-import { b as Ke } from "./main-D70Xt4a7.js";
+import { g as Ke } from "./main-Cmq8fQdM.js";
 import We from "vue";
-function Fe(I, K) {
+function Fe($, K) {
   for (var V = 0; V < K.length; V++) {
     const p = K[V];
     if (typeof p != "string" && !Array.isArray(p)) {
       for (const X in p)
-        if (X !== "default" && !(X in I)) {
+        if (X !== "default" && !(X in $)) {
           const _ = Object.getOwnPropertyDescriptor(p, X);
-          _ && Object.defineProperty(I, X, _.get ? _ : {
+          _ && Object.defineProperty($, X, _.get ? _ : {
             enumerable: !0,
             get: () => p[X]
           });
         }
     }
   }
-  return Object.freeze(Object.defineProperty(I, Symbol.toStringTag, { value: "Module" }));
+  return Object.freeze(Object.defineProperty($, Symbol.toStringTag, { value: "Module" }));
 }
 var Y = { exports: {} }, ee;
 function ze() {
-  return ee || (ee = 1, (function(I) {
+  return ee || (ee = 1, (function($) {
     (function() {
       var K = {
         /***/
@@ -426,7 +426,7 @@ function ze() {
           default: function() {
             return (
               /* binding */
-              Ie
+              $e
             );
           }
         }), typeof window < "u") {
@@ -466,7 +466,7 @@ function ze() {
           class: "bracket"
         }, ">", -1));
         function G(o, v, g, E, h, b) {
-          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), $ = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
+          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), I = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
           return (0, e.openBlock)(), (0, e.createElementBlock)("div", r, [(0, e.createElementVNode)("div", null, [o.selfClosing ? (0, e.createCommentVNode)("", !0) : ((0, e.openBlock)(), (0, e.createElementBlock)(e.Fragment, {
             key: 0
           }, [o.collapsed ? ((0, e.openBlock)(), (0, e.createBlock)(S, {
@@ -477,7 +477,7 @@ function ze() {
             key: 0,
             class: "caret",
             onClick: o.toggleCollapsed
-          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)($, {
+          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)(I, {
             class: "clickable",
             name: o.name,
             onClick: o.toggleCollapsed
@@ -496,7 +496,7 @@ function ze() {
           }, null, 8, ["cdataSection"]))), 128)), ((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.remarks, (L, N) => ((0, e.openBlock)(), (0, e.createBlock)(Ue, {
             key: `r${N}`,
             remark: L
-          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)($, {
+          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)(I, {
             name: o.name,
             closing: !0
           }, null, 8, ["name"]), f])) : (0, e.createCommentVNode)("", !0)]);
@@ -549,8 +549,8 @@ function ze() {
         var c = /* @__PURE__ */ (0, M.A)(d, [["render", m], ["__scopeId", "data-v-75f773a5"]]);
         function D(o, v, g, E, h, b) {
           const y = (0, e.resolveComponent)("XmlAttribute");
-          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, $) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
-            key: $,
+          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, I) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
+            key: I,
             attribute: S
           }, null, 8, ["attribute"]))), 128))]);
         }
@@ -705,12 +705,12 @@ function ze() {
             node: Element
           },
           setup(o) {
-            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), $ = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
+            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), I = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
             return {
               name: g,
               childElements: h,
               childContents: b,
-              attributes: $,
+              attributes: I,
               cdataSections: y,
               remarks: S,
               selfClosing: Q,
@@ -744,8 +744,8 @@ function ze() {
               rootNode: g
             };
           }
-        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), $e = Ve, Ie = $e;
-      })(), I.exports = X;
+        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), Ie = Ve, $e = Ie;
+      })(), $.exports = X;
     })();
   })(Y)), Y.exports;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.16",
+  "version": "1.0.2-dev.161",
   "private": false,
   "type": "module",
   "engines": {
@@ -10,29 +10,37 @@
     "yarn": "use-pnpm-instead"
   },
   "main": "./src/main.ts",
+  "exports": {
+    ".": "./src/main.ts",
+    "./chart": "./src/chart.ts",
+    "./assets/*": "./assets/*",
+    "./dist/*": "./dist/*"
+  },
+  "sideEffects": false,
   "files": [
     "assets",
     "dist",
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.8",
-    "@types/leaflet": "^1.9.17",
+    "@floating-ui/vue": "^2.0.1",
     "@headlessui/vue": "^1.7.23",
-    "@remixicon/vue": "^4.5.0",
+    "@remixicon/vue": "^4.9.0",
     "@types/hast": "^3.0.4",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/router": "^13.1.0",
-    "chart.js": "^4.4.8",
-    "dompurify": "^3.2.5",
-    "geopf-extensions-openlayers": "^1.0.0-beta.5",
+    "@types/leaflet": "^1.9.21",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
+    "chart.js": "^4.5.1",
+    "dompurify": "^3.4.11",
+    "echarts": "^6.1.0",
+    "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",
-    "maplibre-gl": "^5.6.2",
-    "ofetch": "^1.4.1",
-    "ol": "^10.6.1",
+    "maplibre-gl": "^5.24.0",
+    "ofetch": "^1.5.1",
+    "ol": "^10.9.0",
     "pdfjs-dist": "^4.10.38",
-    "pmtiles": "^4.3.0",
-    "popmotion": "^11.0",
+    "pmtiles": "^4.4.1",
+    "popmotion": "^11.0.5",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -45,38 +53,43 @@
     "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",
+    "unist-util-visit": "^5.1.0",
     "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.9.0"
   },
   "devDependencies": {
-    "@intlify/cli": "^0.13.1",
-    "@tailwindcss/cli": "^4.0.8",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tsconfig/node22": "^22.0.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tsconfig/node22": "^22.0.5",
     "@types/geojson": "^7946.0.16",
-    "@types/node": "^22.13.1",
-    "@vitejs/plugin-vue": "^6.0",
+    "@types/node": "^22.19.19",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
-    "@vue/tsconfig": "^0.8.0",
-    "eslint": "^9.18.0",
-    "eslint-plugin-vue": "^10.0",
-    "jiti": "^2.4.2",
-    "npm-run-all2": "^8.0",
-    "prettier": "^3.0.0",
-    "tailwindcss": "^4.0.8",
-    "typescript": "^5.7.3",
-    "vite": "^7.0",
-    "vite-plugin-vue-devtools": "^8.0",
-    "vue-tsc": "^3.0"
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-vue": "^10.9.1",
+    "jiti": "^2.7.0",
+    "npm-run-all2": "^8.0.4",
+    "openapi-types": "^12.1.3",
+    "prettier": "^3.8.3",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.3",
+    "vite-plugin-vue-devtools": "^8.1.2",
+    "vue": "^3.5.40",
+    "vue-router": "^5.0.7",
+    "vue-tsc": "^3.3.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0 || ^5.0.0",
+    "echarts": "^6.0.0"
   },
   "scarfSettings": {
     "enabled": false

package/src/chart.ts

@@ -0,0 +1,5 @@
+import ChartViewer from './components/Chart/ChartViewer.vue'
+import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
+import SmallChart from './components/SmallChart.vue'
+
+export { ChartViewer, ChartViewerWrapper, SmallChart }

package/src/components/ActivityList/ActivityList.vue

@@ -77,6 +77,9 @@
                     v-bind="{ class: '', activity }"
                   >
                     {{ getActivityTranslation(activity) }}
+                    <template v-if="'resource_id' in activity.extras">
+                      {{ activity.extras.resource_id }}
+                    </template>
                   </slot>
                 </p>
                 <p class="m-0 flex-none text-xs text-gray-medium">
@@ -90,7 +93,6 @@
           :total-results="activities.total"
           :page-size="activities.page_size"
           :page="activities.page"
-          :link="getLink"
           @change="(newPage: number) => page = newPage"
         />
       </template>
@@ -117,7 +119,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,320 @@
+<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 { useFormatDate } from '../../functions/dates'
+import type { Chart, ColumnDefinition, ColumnsDefinition, 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: ColumnsDefinition
+  }
+}>()
+
+const { locale } = useTranslation()
+const { formatDate } = useFormatDate()
+const chartContainer = ref<HTMLElement | null>(null)
+let echartsInstance: EChartsType | null = null
+
+function capture(): string | null {
+  return echartsInstance?.getDataURL() ?? null
+}
+
+defineExpose({ capture })
+
+// ECharts has a dedicated 'time' axis type for continuous date values.
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' | 'time' {
+  if (!xAxis) return 'category'
+  if (xAxis.type !== 'continuous') return 'category'
+  return isDateAxis.value ? 'time' : 'value'
+}
+
+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}`
+  }
+}
+
+function buildXAxisFormatter(column: ColumnDefinition | null, options?: Intl.DateTimeFormatOptions): ((value: string | number | Date) => string) | undefined {
+  if (column?.type !== 'date') return undefined
+  return (value: string | number | Date) => {
+    if (value === null || value === undefined) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return String(value)
+    return formatDate(date, options ?? { dateStyle: 'short' })
+  }
+}
+
+function parseXValueAsDate(row: Record<string, unknown>, xColumn: string): Record<string, unknown> {
+  const value = row[xColumn]
+  if (value === null || value === undefined || value instanceof Date) return row
+  if (typeof value === 'string') {
+    const date = new Date(value)
+    if (!Number.isNaN(date.getTime())) {
+      return { ...row, [xColumn]: date }
+    }
+  }
+  return row
+}
+
+const xAxisColumn = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return null
+  for (const columns of Object.values(props.series.columns)) {
+    const column = columns.find(c => c.name === columnName)
+    if (column) return column
+  }
+  return null
+})
+
+const isDateAxis = computed(() => xAxisColumn.value?.type === 'date')
+
+const xAxisBounds = computed(() => {
+  const columnName = props.chart.x_axis.column_x
+  if (!columnName) return { min: undefined, max: undefined }
+
+  let min: number | undefined
+  let max: number | undefined
+
+  for (const s of props.chart.series) {
+    const xColumn = s.column_x_name_override ?? columnName
+    const data = props.series.data[s.resource_id]
+    if (!data) continue
+
+    for (const row of data) {
+      const value = row[xColumn]
+      if (value === null || value === undefined) continue
+
+      let numericValue: number | undefined
+      if (value instanceof Date) {
+        numericValue = value.getTime()
+      }
+      else if (isDateAxis.value && typeof value === 'string') {
+        numericValue = new Date(value).getTime()
+      }
+      else {
+        numericValue = Number(value)
+      }
+
+      if (numericValue === undefined || Number.isNaN(numericValue)) continue
+
+      if (min === undefined || numericValue < min) min = numericValue
+      if (max === undefined || numericValue > max) max = numericValue
+    }
+  }
+
+  return { min, max }
+})
+
+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
+
+    const resourceColumns = props.series.columns[resourceId]
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !resourceColumns) {
+      return null
+    }
+
+    const rawData = props.series.data[resourceId]
+    const sortedData = isDateAxis.value
+      ? rawData.map(row => parseXValueAsDate(row, xColumn))
+      : [...rawData]
+    const sortBy = props.chart.x_axis.sort_x_by ?? (isDateAxis.value ? 'axis_x' : null)
+    const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
+
+    if (sortBy && sortDirection && props.chart.x_axis.column_x) {
+      const sortKey = sortBy === 'axis_y' ? yColumn : xColumn
+      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] : resourceColumns.map(c => c.name),
+        name: yColumn,
+        encode: {
+          x: xColumn,
+          y: yColumn,
+        },
+      } as LineSeriesOption | BarSeriesOption,
+      data: {
+        source: sortedData,
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : resourceColumns.map(c => c.name),
+      },
+    }
+  })
+
+  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)
+  }
+
+  const xAxisType = mapXAxisType(props.chart.x_axis)
+
+  return {
+    dataset: [...seriesData.data],
+    textStyle: {
+      fontFamily: 'Marianne, arial, sans-serif',
+    },
+    color: '#000091',
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
+        let tooltip = ''
+        const valueFormatter = new Intl.NumberFormat(locale)
+        const xAxisFormatter = buildXAxisFormatter(xAxisColumn.value, { dateStyle: 'medium' })
+        for (const param of params) {
+          const seriesName = param.seriesName
+          const axisLabel = xAxisFormatter ? xAxisFormatter(param.axisValueLabel) : param.axisValueLabel
+          tooltip += `${format.encodeHTML(String(axisLabel))}: <strong>${valueFormatter.format(Number(param.value[seriesName]))}</strong><br>`
+        }
+        return tooltip
+      },
+    },
+    legend: {
+      show: false,
+      bottom: 0,
+    },
+    grid: {
+      top: 60,
+      bottom: 40,
+      left: 20,
+      right: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: xAxisType,
+      name: (props.chart.x_axis as XAxis).column_x,
+      min: xAxisType !== 'category' ? xAxisColumn.value?.min ?? xAxisBounds.value.min ?? undefined : undefined,
+      max: xAxisType !== 'category' ? xAxisColumn.value?.max ?? xAxisBounds.value.max ?? undefined : undefined,
+      axisLabel: xAxisType === 'time'
+        ? { formatter: buildXAxisFormatter(xAxisColumn.value) }
+        : undefined,
+    },
+    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>