@tekkare/romulus 0.1.178 → 0.1.179

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.177",
+  "version": "0.1.178",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/ChartCard.vue

@@ -90,7 +90,7 @@ const emit = defineEmits<{
 const WORDS = {
   fr: {
     source: 'Source :',
-    verified: 'Vérifié le',
+    verified: 'Dernière mise à jour le',
     emptyTitle: 'Aucun résultat',
     emptyText:
       'Aucune ligne ne correspond aux filtres en cours. Élargissez votre période ou retirez une dimension.',
@@ -98,7 +98,7 @@ const WORDS = {
   },
   en: {
     source: 'Source:',
-    verified: 'Verified on',
+    verified: 'Last updated',
     emptyTitle: 'No results',
     emptyText:
       'No row matches the current filters. Widen your period or drop a dimension.',

package/dist/runtime/components/SourceLine.vue

@@ -31,8 +31,8 @@ const props = withDefaults(
 
 /** Memes mots que le pied de RmChartCard. */
 const WORDS = {
-  fr: { source: 'Source :', verified: 'Vérifié le' },
-  en: { source: 'Source:', verified: 'Verified on' },
+  fr: { source: 'Source :', verified: 'Dernière mise à jour le' },
+  en: { source: 'Source:', verified: 'Last updated' },
 } as const
 const t = computed(() => WORDS[props.lang])
 

package/dist/runtime/components/ViewPill.vue

@@ -82,6 +82,7 @@ const WORDS = {
     favorites: 'Favoris',
     actions: 'Actions',
     unsaved: 'Modifications non enregistrées',
+    modified: 'modifiée',
     applied: 'Vue appliquée',
     save: 'Sauvegarder',
     aria: 'Vue affichée',
@@ -92,6 +93,7 @@ const WORDS = {
     favorites: 'Favorites',
     actions: 'Actions',
     unsaved: 'Unsaved changes',
+    modified: 'edited',
     applied: 'View applied',
     save: 'Save',
     aria: 'Current view',
@@ -99,7 +101,15 @@ const WORDS = {
 } as const
 
 const t = computed(() => WORDS[props.lang])
-const label = computed(() => props.viewName || t.value.none)
+/**
+ * Le nom de la vue, suivi de son etat quand l'ecran ne lui correspond plus.
+ * La pastille coloree ne suffisait pas : on lisait « Vue : GLP-1 » sur un
+ * ecran qui ne montrait plus les produits de GLP-1.
+ */
+const label = computed(() => {
+  if (!props.viewName) return t.value.none
+  return props.dirty ? `${props.viewName} (${t.value.modified})` : props.viewName
+})
 
 const open = ref(false)
 const root = ref<HTMLElement | null>(null)

package/dist/runtime/composables/useRmExport.js

@@ -88,6 +88,12 @@ function download(blob, fileName) {
   setTimeout(() => URL.revokeObjectURL(url), 1e4);
   return blob.size;
 }
+function titleGap(title) {
+  return title ? 22 : 0;
+}
+function drawableCharts(payload) {
+  return (payload.charts ?? []).map((chart) => ({ title: chart.title, svg: svgOf(chart.el) })).filter((chart) => !!chart.svg);
+}
 function svgOf(el) {
   return el instanceof SVGSVGElement ? el : el.querySelector("svg");
 }
@@ -106,6 +112,21 @@ function serialize(svg) {
   if (!clone.getAttribute("viewBox")) clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
   return { markup: new XMLSerializer().serializeToString(clone), width, height };
 }
+async function capture(el) {
+  try {
+    const { default: html2canvas } = await import("html2canvas-pro");
+    const canvas = await html2canvas(el, {
+      scale: 2,
+      backgroundColor: null,
+      logging: false,
+      useCORS: true
+    });
+    if (!canvas.width || !canvas.height) return null;
+    return { data: canvas.toDataURL("image/png"), width: canvas.width, height: canvas.height };
+  } catch {
+    return null;
+  }
+}
 async function raster(markup, width, height, scale = 2) {
   const image = new Image();
   image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
@@ -292,15 +313,15 @@ export function useRmExport() {
     return { fileName, rows: rowCount, bytes: download(blob, fileName) };
   }
   async function toPng(config, payload, lang) {
-    const charts = (payload.charts ?? []).map((chart) => svgOf(chart.el)).filter(Boolean);
-    if (!charts.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
+    const drawn = drawableCharts(payload);
+    if (!drawn.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
     const scale = 2;
     const pad = 24;
     const sources = sourcesOf(config, payload);
     const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
-    const parts = charts.map((svg) => serialize(svg));
+    const parts = drawn.map((chart) => ({ ...serialize(chart.svg), title: chart.title }));
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
-    const height = parts.reduce((total, part) => total + part.height + pad, pad) + head;
+    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title), pad) + head;
     const canvas = document.createElement("canvas");
     canvas.width = width * scale;
     canvas.height = height * scale;
@@ -321,6 +342,12 @@ export function useRmExport() {
     }
     let y = head + pad;
     for (const part of parts) {
+      if (part.title) {
+        context.fillStyle = "#1A1A2E";
+        context.font = "bold 14px Figtree, Helvetica, sans-serif";
+        context.fillText(part.title, pad, y + 12);
+        y += titleGap(part.title);
+      }
       const raw = await raster(part.markup, part.width, part.height, scale);
       context.drawImage(raw, pad, y, part.width, part.height);
       y += part.height + pad;
@@ -332,19 +359,21 @@ export function useRmExport() {
     return { fileName, rows: 0, bytes: download(blob, fileName) };
   }
   async function toSvg(config, payload, lang) {
-    const charts = (payload.charts ?? []).map((chart) => svgOf(chart.el)).filter(Boolean);
-    if (!charts.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
+    const drawn = drawableCharts(payload);
+    if (!drawn.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
     const pad = 24;
     const sources = sourcesOf(config, payload);
     const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
-    const parts = charts.map((svg) => serialize(svg));
+    const parts = drawn.map((chart) => ({ ...serialize(chart.svg), title: chart.title }));
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
-    const height = parts.reduce((total, part) => total + part.height + pad, pad) + head;
+    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title), pad) + head;
     let y = head + pad;
     const nested = parts.map((part) => {
+      const label = part.title ? `<text x="${pad}" y="${y + 12}" font-family="Figtree, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="#1A1A2E">${escapeXml(part.title)}</text>` : "";
+      y += titleGap(part.title);
       const markup2 = part.markup.replace(/^<svg /, `<svg x="${pad}" y="${y}" `);
       y += part.height + pad;
-      return markup2;
+      return label + markup2;
     }).join("\n");
     const header = head ? `<text x="${pad}" y="32" font-family="Figtree, Helvetica, sans-serif" font-size="20" font-weight="bold" fill="#1A1A2E">${BRAND_TITLE}</text><text x="${pad}" y="52" font-family="Figtree, Helvetica, sans-serif" font-size="12" fill="#6C6C8A">${escapeXml(`${payload.title} \xB7 ${BRAND_LINE} \xB7 ${longDate(lang)}`)}</text>` + (sources.length ? `<text x="${pad}" y="68" font-family="Figtree, Helvetica, sans-serif" font-size="12" fill="#6C6C8A">${escapeXml(`Source${sources.length > 1 ? "s" : ""} : ${sources.map((source) => sourceLabel(source, lang)).join(" \xB7 ")}`)}</text>` : "") : "";
     const markup = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="${width}" height="${height}" fill="#FFFFFF"/>${header}${nested}</svg>`;
@@ -541,8 +570,47 @@ export function useRmExport() {
       );
       y += cardHeight + 6;
     }
+    const snapshots = (payload.nodes ?? []).filter((node) => {
+      if (node.kind === "chart") return false;
+      if (node.kind === "kpi") return config.sections.includes("kpi");
+      if (node.kind === "table") return config.sections.includes("table") || config.sections.includes("cards");
+      return config.sections.includes("cards");
+    });
+    const shots = [];
+    for (const node of snapshots) {
+      const shot = await capture(node.el);
+      if (shot) shots.push(shot);
+    }
+    const faithful = shots.length > 0;
+    if (faithful) {
+      sectionTitle(lang === "en" ? "Page" : "La page");
+      for (const shot of shots) {
+        let drawWidth = inner;
+        let drawHeight = shot.height / shot.width * drawWidth;
+        const maxHeight = bottom - margin;
+        if (drawHeight > maxHeight) {
+          drawHeight = maxHeight;
+          drawWidth = shot.width / shot.height * drawHeight;
+        }
+        if (y + drawHeight > bottom) {
+          doc.addPage();
+          y = margin;
+        }
+        doc.addImage(
+          shot.data,
+          "PNG",
+          margin + (inner - drawWidth) / 2,
+          y,
+          drawWidth,
+          drawHeight,
+          void 0,
+          "FAST"
+        );
+        y += drawHeight + 6;
+      }
+    }
     let rowCount = 0;
-    if (config.sections.includes("cards")) {
+    if (config.sections.includes("cards") && !faithful) {
       const cards = cardsOf(payload, config, lang);
       if (cards.length) {
         if (y + 12 > bottom) {
@@ -754,7 +822,7 @@ export function useRmExport() {
         y += 6;
       }
     }
-    if (config.sections.includes("table")) {
+    if (config.sections.includes("table") && !faithful) {
       const MAX_COLUMNS = landscape ? 16 : 10;
       payload.sheets.forEach((sheet) => {
         const all = columnsOf(sheet, config.columns);
@@ -838,6 +906,10 @@ export function useRmExport() {
       });
     }
     const pages = doc.getNumberOfPages();
+    const footList = sourcesOf(config, payload);
+    const footSources = footList.length ? printable(
+      `Source${footList.length > 1 ? "s" : ""} : ${footList.map((source) => sourceLabel(source, lang)).join(" \xB7 ")}`
+    ) : "";
     for (let page = 1; page <= pages; page += 1) {
       doc.setPage(page);
       const width = doc.internal.pageSize.getWidth();
@@ -854,6 +926,13 @@ export function useRmExport() {
       )[0] ?? "";
       doc.text(trail, margin, foot);
       doc.text(`${page} / ${pages}`, width - margin, foot, { align: "right" });
+      if (footSources) {
+        doc.text(
+          doc.splitTextToSize(footSources, width - margin * 2)[0] ?? "",
+          margin,
+          foot - 8.5
+        );
+      }
     }
     const fileName = `${config.fileName}.pdf`;
     const blob = doc.output("blob");

package/dist/runtime/utils/chart.d.ts

@@ -105,10 +105,14 @@ export declare function rmBaseOption(theme: RmChartTheme, decal?: boolean): {
         };
         borderColor: string;
         borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
     };
 };
 export declare const rmTooltipTrigger: (count: number) => "axis" | "item";
-export declare function rmLegend(theme: RmChartTheme, count: number, position?: 'top' | 'bottom'): {
+export declare function rmLegend(theme: RmChartTheme, count: number, position?: 'top' | 'bottom', names?: string[]): {
     pageIconSize?: number | undefined;
     pageIconColor?: string | undefined;
     pageIconInactiveColor?: string | undefined;
@@ -207,6 +211,10 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
         };
         borderColor: string;
         borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
     };
     legend: {
         pageIconSize?: number | undefined;
@@ -411,6 +419,10 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
         };
         borderColor: string;
         borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
     };
 };
 /** Line ou area chart. `step` produit la marche d'escalier des series de prix. */
@@ -472,6 +484,10 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         borderColor: string;
         borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
     };
     legend: {
         pageIconSize?: number | undefined;
@@ -729,6 +745,10 @@ export declare function rmDonutOption(data: {
         };
         borderColor: string;
         borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
     };
     legend: {
         pageIconSize?: number | undefined;

package/dist/runtime/utils/chart.js

@@ -86,7 +86,17 @@ export function rmBaseOption(theme, decal = false) {
       backgroundColor: theme.tooltipBg,
       textStyle: { color: theme.tooltipText, fontFamily: FONT, fontSize: 12 },
       borderColor: theme.tooltipBorder,
-      borderWidth: 1
+      borderWidth: 1,
+      // Posee par defaut DANS le conteneur du graphe, l'infobulle est rognee
+      // par la premiere carte a `overflow: hidden` des qu'elle en deborde :
+      // sur une colonne de quarante series il n'en reste qu'un morceau. Dans
+      // le body elle passe par-dessus la carte ; `confine` la garde ancree au
+      // cadre du graphe, et la hauteur plafonnee l'empeche de sortir de
+      // l'ecran (elle defile alors, d'ou `enterable`).
+      appendTo: "body",
+      confine: true,
+      enterable: true,
+      extraCssText: "max-height:70vh;overflow:auto;"
     }
   };
 }
@@ -96,8 +106,12 @@ const LEGEND_MAX_INLINE = 6;
 const LEGEND_NAME_MAX = 38;
 const LEGEND_NAME_TAIL = 12;
 const rmLegendName = (name) => name.length > LEGEND_NAME_MAX ? `${name.slice(0, LEGEND_NAME_MAX - LEGEND_NAME_TAIL - 1)}\u2026${name.slice(-LEGEND_NAME_TAIL)}` : name;
-export function rmLegend(theme, count, position = "bottom") {
-  const scroll = count > LEGEND_MAX_INLINE;
+const LEGEND_ITEM_PAD = 32;
+const LEGEND_CHAR_WIDTH = 6.2;
+const LEGEND_WIDTH_BUDGET = 620;
+const rmLegendWidth = (names) => names.reduce((total, name) => total + LEGEND_ITEM_PAD + rmLegendName(name).length * LEGEND_CHAR_WIDTH, 0);
+export function rmLegend(theme, count, position = "bottom", names = []) {
+  const scroll = count > LEGEND_MAX_INLINE || rmLegendWidth(names) > LEGEND_WIDTH_BUDGET;
   return {
     ...position === "bottom" ? { bottom: 0, left: "center" } : { top: 0 },
     type: scroll ? "scroll" : "plain",
@@ -144,7 +158,7 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
   return {
     ...rmBaseOption(theme, decal),
     tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
-    legend: series.length > 1 ? rmLegend(theme, series.length) : void 0,
+    legend: series.length > 1 ? rmLegend(theme, series.length, "bottom", series.map((s) => String(s.name ?? ""))) : void 0,
     // La legende passee sous le graphe prend sa place dans la gouttiere basse,
     // sinon elle recouvre les libelles de l'axe des abscisses.
     grid: { ...rmBaseOption(theme, decal).grid, bottom: series.length > 1 ? 56 : 36 },
@@ -229,7 +243,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     },
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.
-    legend: series.length > 1 || dual ? rmLegend(theme, series.length, legendPosition) : void 0,
+    legend: series.length > 1 || dual ? rmLegend(theme, series.length, legendPosition, series.map((s) => String(s.name ?? ""))) : void 0,
     grid: {
       // Sans graduation a gauche, la gouttiere de 48 px ne sert plus qu'a
       // laisser depasser la premiere pastille de valeur.

package/dist/runtime/utils/export.d.ts

@@ -258,6 +258,15 @@ export interface RmExportPayload {
         title?: string;
         el: Element;
     }[];
+    /**
+     * Cartes de l'ecran, a capturer telles quelles pour le rapport mis en page.
+     *
+     * Le rapport reconstruisait ses tableaux et ses fiches a partir de la
+     * donnee : il ne ressemblait plus a la page, colonnes et mises en forme
+     * comprises. Une page qui donne ses noeuds obtient une capture fidele ; les
+     * autres gardent le rendu reconstruit.
+     */
+    nodes?: RmExportNode[];
     /** URL a copier pour le format « Permalink ». */
     permalink?: string;
     /**
@@ -269,6 +278,15 @@ export interface RmExportPayload {
     /** Plafond de lignes par onglet, pour ne pas geler l'onglet du navigateur. */
     limit?: number;
 }
+/**
+ * Une carte de l'ecran, pour le rapport fidele. `kind` dit a quelle case du
+ * panneau elle repond (chiffres cles, graphique, tableau, fiche).
+ */
+export interface RmExportNode {
+    kind: 'kpi' | 'chart' | 'table' | 'card';
+    el: Element;
+    title?: string;
+}
 /** Extension de fichier par format. */
 export declare const RM_EXPORT_EXTENSIONS: Record<string, string>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.178",
+  "version": "0.1.179",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -33,6 +33,7 @@
     "@nuxt/kit": "^3.16.0",
     "@phosphor-icons/vue": "^2.2.1",
     "echarts": "^5.6.0",
+    "html2canvas-pro": "^1.6.7",
     "jspdf": "^4.2.0",
     "jspdf-autotable": "^5.0.7",
     "write-excel-file": "^1.4.30"