@dnax/ui 0.0.59 → 0.0.60

package/components/QSpreadsheet.vue

@@ -3222,15 +3222,16 @@ watch(
     const prevKey = localSheets.value[sheetIdx.value]?.key
     let n = 1
     localSheets.value = v.map((s) => {
-      const key = s.key ?? "sheet-" + n
-      n++
+      // `num` capturé AVANT l'incrément : clé **et** nom par défaut partagent le même numéro
+      // (sinon le 1er onglet s'appelait « Sheet 2 »).
+      const num = n++
       // Clés injectées sur les objets du parent (comme pour `rows`) : chaque feuille est
       // identifiable avant même d'être ouverte
       ensureRowKeys(s.rows)
       return {
         ...s,
-        key,
-        name: s.name ?? sheetName(n),
+        key: s.key ?? "sheet-" + num,
+        name: s.name ?? sheetName(num),
         rows: (s.rows ?? []).map((r) => ({ ...r })),
         columns: s.columns ? canonicalColumns(s.columns) : undefined,
       }
@@ -3255,7 +3256,7 @@ watch([state, cols], () => {
 
 const activeSheetName = computed(() => {
   const s = localSheets.value[sheetIdx.value]
-  if (s) return s.name ?? "Sheet " + (sheetIdx.value + 1)
+  if (s) return s.name ?? sheetName(sheetIdx.value + 1)
   return props.sheets?.[0]?.name ?? sheetName(1)
 })
 const sheetRename = ref<{ idx: number; val: string } | null>(null)
@@ -3288,7 +3289,7 @@ const addSheet = () => {
     // premier onglet (propriété sheets vide) — devient multi
     const first: QSpreadsheetSheet = {
       key: "sheet-1",
-      name: "Sheet 1",
+      name: sheetName(1),
       columns: cols.value.map((c) => ({ ...c })),
       rows: state.value.map((r) => ({ ...r })),
     }

package/lib/chart.axis.test.ts

@@ -0,0 +1,127 @@
+// Tests du **placement des noms d'axes** de `<q-chart>` : `chartToECharts()` produit bien des
+// noms dans le cadre. Vérifié en rendant l'option en SVG via l'**SSR d'ECharts** — du JS pur,
+// aucun navigateur (cf. règle projet).
+//
+// Rappel du bug corrigé : sans `nameLocation`, le moteur place le nom **à la fin** de l'axe —
+// le nom X s'écrivait vers la droite (hors cadre) et le nom Y, centré sur la ligne d'axe,
+// débordait à gauche (rogné) dès que le libellé était large.
+import { describe, expect, it } from "bun:test"
+import * as echarts from "echarts"
+import { chartToECharts } from "./chart"
+
+const THEME = { text: "#000000", muted: "#666666", grid: "#dddddd" }
+/** Largeur approximative d'un caractère à 12px (mesure faite sur le rendu ECharts). */
+const CHAR_W = 7
+const FONT_H = 12
+
+interface Box {
+  x0: number
+  x1: number
+  y0: number
+  y1: number
+}
+
+function renderSvg(config: Record<string, any>, width: number, height: number): string {
+  const chart = echarts.init(null as any, null, {
+    renderer: "svg",
+    ssr: true,
+    width,
+    height,
+  })
+  chart.setOption(chartToECharts({ theme: THEME, ...config }))
+  const svg = chart.renderToSVGString()
+  chart.dispose()
+  return svg
+}
+
+/** Boîte approximative du `<text>` d'un nom d'axe (via `translate` + `text-anchor`). */
+function nameBox(svg: string, name: string): Box | undefined {
+  for (const line of svg.split("\n")) {
+    if (!line.includes("<text")) continue
+    const text = (line.match(/>([^<]*)<\/text>/) ?? [, ""])[1]
+    if (text !== name) continue
+    const m = line.match(/translate\(([-\d.]+) ([-\d.]+)\)/)
+    if (!m) continue
+    const x = Number(m[1])
+    const y = Number(m[2])
+    const anchor = (line.match(/text-anchor="([^"]+)"/) ?? [, "middle"])[1]
+    const w = text.length * CHAR_W
+    const x0 = anchor === "start" ? x : anchor === "end" ? x - w : x - w / 2
+    return { x0, x1: x0 + w, y0: y - FONT_H / 2, y1: y + FONT_H / 2 }
+  }
+  return undefined
+}
+
+const inside = (b: Box, w: number, h: number) =>
+  b.x0 >= 0 && b.x1 <= w && b.y0 >= 0 && b.y1 <= h
+
+const verticalConfig = {
+  marks: [
+    {
+      type: "line",
+      data: [
+        { month: "Jan", value: 1_200_000 },
+        { month: "Feb", value: 3_400_000 },
+        { month: "Mar", value: 2_600_000 },
+      ],
+      x: "month",
+      y: "value",
+    },
+  ],
+  // libellés volontairement larges (le cas qui rognait le nom Y)
+  x: { label: "Month of the year" },
+  y: { label: "Revenue in thousands" },
+}
+
+const horizontalConfig = {
+  marks: [
+    {
+      type: "bar",
+      orientation: "horizontal",
+      data: [
+        { dept: "Engineering", value: 34 },
+        { dept: "Sales", value: 26 },
+      ],
+      x: "dept",
+      y: "value",
+    },
+  ],
+  x: { label: "Headcount" },
+  y: { label: "Department" },
+}
+
+describe("noms d'axes — placement dans le cadre", () => {
+  it("X et Y restent dans le cadre (vertical, horizontal, petit canevas)", () => {
+    const cases: [Record<string, any>, number, number][] = [
+      [verticalConfig, 520, 280],
+      [horizontalConfig, 520, 280],
+      [verticalConfig, 300, 160],
+    ]
+    for (const [config, w, h] of cases) {
+      const svg = renderSvg(config, w, h)
+      const bx = nameBox(svg, config.x.label)
+      const by = nameBox(svg, config.y.label)
+      expect(bx).toBeDefined()
+      expect(by).toBeDefined()
+      expect(inside(bx!, w, h)).toBe(true)
+      expect(inside(by!, w, h)).toBe(true)
+    }
+  })
+
+  it("le nom X est centré sous l'axe, pas collé au bord droit", () => {
+    const svg = renderSvg(verticalConfig, 520, 280)
+    const bx = nameBox(svg, verticalConfig.x.label)!
+    // centré : commence bien après le bord gauche et finit bien avant le bord droit
+    expect(bx.x0).toBeGreaterThan(60)
+    expect(bx.x1).toBeLessThan(520 - 60)
+    // sous la zone de tracé
+    expect(bx.y0).toBeGreaterThan(200)
+  })
+
+  it("le nom Y est ancré à gauche sur la ligne d'axe (jamais rogné), en haut", () => {
+    const svg = renderSvg(verticalConfig, 520, 280)
+    const by = nameBox(svg, verticalConfig.y.label)!
+    expect(by.x0).toBeGreaterThan(0)
+    expect(by.y1).toBeLessThan(160)
+  })
+})

package/lib/chart.ts

@@ -1180,7 +1180,7 @@ export function chartToECharts(config: QChartConfig): Record<string, any> {
   const scaleBand = visualMaps.some((vm) => vm.show !== false) ? 30 : 0
   /** Bandeau du **nom d'axe** (nom de l'axe y au-dessus, nom de l'axe x en dessous) */
   const axisNameTop = config.y?.label ? 16 : 0
-  const axisNameBottom = config.x?.label ? 16 : 0
+  const axisNameBottom = config.x?.label ? 22 : 0
   const legendOption = !legendOn
     ? { show: false }
     : {
@@ -1241,22 +1241,36 @@ export function chartToECharts(config: QChartConfig): Record<string, any> {
     splitLine: { show: axis?.grid ?? true, lineStyle: { color: theme.grid } },
   })
 
+  // ─── Nom d'axe : placement **toujours dans le cadre** ───
+  // Axe **horizontal** : centré sous l'axe (`middle`). À la fin de l'axe (`end`, le défaut
+  // ECharts) le nom s'écrivait vers la droite, hors du cadre.
+  const axisNameX = { nameLocation: "middle" as const, nameGap: 32 }
+  // Axe **vertical** : ancré à **gauche** (`align: left`) sur la ligne d'axe, en haut.
+  // Un `nameGap` fixe ne peut pas convenir : un nom centré sur l'axe déborde à gauche, un nom
+  // rotaté au milieu recouvre/est rogné par les nombres (largeur variable : `1,000` vs
+  // `1,000,000`). Ancré à gauche, il s'étend vers la droite → jamais rogné, jamais superposé.
+  const axisNameY = {
+    nameLocation: "end" as const,
+    nameTextStyle: { ...axisLabel, align: "left" as const },
+  }
   // Orientation horizontale : catégories sur l'axe Y
   const hasBar = series.some((s) => s.type === "bar")
-  const xAxis = hasHeatmap
+  const xAxisBase = hasHeatmap
     ? categoryAxis(config.x, categories, true)
     : horizontal
       ? valueAxis(config.x, hasBar)
       : axisType === "category"
         ? categoryAxis(config.x)
         : valueAxis(config.x, false)
-  const yAxis = hasHeatmap
+  const yAxisBase = hasHeatmap
     ? categoryAxis(config.y, rowCategories, true)
     : horizontal
       ? axisType === "category"
         ? categoryAxis(config.y)
         : valueAxis(config.y, false)
       : valueAxis(config.y, hasBar)
+  const xAxis = config.x?.label ? { ...xAxisBase, ...axisNameX } : xAxisBase
+  const yAxis = config.y?.label ? { ...yAxisBase, ...axisNameY } : yAxisBase
 
   // Familles **hors axes** (`pie` seul) : ni grid ni xAxis/yAxis — sinon ECharts laisse
   // un cadre fantôme et décale le titre.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",