@tekkare/romulus 0.1.239 → 0.1.240

package/dist/module.json

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

package/dist/runtime/components/ChartCard.vue

@@ -125,11 +125,11 @@ const t = computed(() => WORDS[props.lang])
  */
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}/
 
-/** Nom des fichiers exportes : le titre et son perimetre, phrase ou etiquettes. */
-const exportName = computed(() => {
-  const scope = props.context || props.tags?.map(tag => (typeof tag === 'string' ? tag : tag.label)).join(', ')
-  return scope ? `${props.title} (${scope})` : props.title
-})
+/**
+ * Nom des exports : le titre et sa phrase de contexte. Les etiquettes n'y
+ * entrent pas, les exports les redessinent sous le titre (cf. `rmCardTags`).
+ */
+const exportName = computed(() => (props.context ? `${props.title} (${props.context})` : props.title))
 
 const verifiedText = computed(() => {
   if (typeof props.verified === 'string' && !ISO_DATE.test(props.verified)) return props.verified

package/dist/runtime/components/TagRow.vue

@@ -80,7 +80,7 @@ watch(() => props.tags, measure, { deep: true })
 </script>
 
 <template>
-  <div class="rm-tag-row">
+  <div class="rm-tag-row" :data-rm-tags="JSON.stringify(items)">
     <div ref="rowRef" class="rm-tag-row__items">
       <RmTag v-for="tag in shown" :key="tag.label" data-rm-tag :variant="tag.variant">{{ tag.label }}</RmTag>
     </div>

package/dist/runtime/composables/useRmCardActions.js

@@ -1,4 +1,4 @@
-import { rmCardCharts, rmCardSheets, rmCardTitle } from "../utils/cardData.js";
+import { rmCardCharts, rmCardSheets, rmCardTags, rmCardTitle } from "../utils/cardData.js";
 import { useRmExport } from "./useRmExport.js";
 import { rmExportDefaults } from "./useRmExportDefaults.js";
 const FILE_NAME_MAX = 60;
@@ -51,7 +51,7 @@ export function useRmCardActions() {
     return run(configOf(format, fileNameOf(title)), {
       ...defaults,
       title,
-      charts: rmCardCharts(card).map((el) => ({ title, el })),
+      charts: rmCardCharts(card).map((el) => ({ title, el, tags: rmCardTags(card) })),
       // Le lien de la carte, sinon celui du cadre : le permalien de la page
       // porte la vue et les filtres, la ou l'URL courante ne dit rien de ce
       // qui est affiche.

package/dist/runtime/composables/useRmExport.js

@@ -1,4 +1,4 @@
-import { RM_EXPORT_EXTENSIONS } from "../utils/export.js";
+import { RM_EXPORT_EXTENSIONS, rmExportTagColor } from "../utils/export.js";
 const BRAND_TITLE = "OIP Healthcare";
 const BRAND_LINE = "By Tekkare \u{1F49C}";
 const COVER_SHEET = "Tekkare";
@@ -92,7 +92,28 @@ 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);
+  return (payload.charts ?? []).map((chart) => ({ title: chart.title, tags: chart.tags, svg: svgOf(chart.el) })).filter((chart) => !!chart.svg);
+}
+const TAG_FONT = "500 12px Figtree, Helvetica, sans-serif";
+const TAG_HEIGHT = 22;
+const TAG_SPACE = 6;
+function layoutTags(tags, width) {
+  if (!tags?.length) return { placed: [], height: 0 };
+  const measure = document.createElement("canvas").getContext("2d");
+  measure.font = TAG_FONT;
+  let x = 0;
+  let row = 0;
+  const placed = tags.map((tag) => {
+    const w = Math.ceil(measure.measureText(tag.label).width) + 16;
+    if (x > 0 && x + w > width) {
+      x = 0;
+      row++;
+    }
+    const at = { tag, x, row, w };
+    x += w + TAG_SPACE;
+    return at;
+  });
+  return { placed, height: (row + 1) * (TAG_HEIGHT + TAG_SPACE) + 4 };
 }
 function svgOf(el) {
   return el instanceof SVGSVGElement ? el : el.querySelector("svg");
@@ -344,9 +365,12 @@ export function useRmExport() {
     const pad = 24;
     const sources = sourcesOf(config, payload);
     const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
-    const parts = drawn.map((chart) => ({ ...serialize(chart.svg), title: chart.title }));
+    const parts = drawn.map((chart) => {
+      const part = serialize(chart.svg);
+      return { ...part, title: chart.title, tags: layoutTags(chart.tags, part.width) };
+    });
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
-    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title), pad) + head;
+    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title) + part.tags.height, pad) + head;
     const canvas = document.createElement("canvas");
     canvas.width = width * scale;
     canvas.height = height * scale;
@@ -373,6 +397,18 @@ export function useRmExport() {
         context.fillText(part.title, pad, y + 12);
         y += titleGap(part.title);
       }
+      context.font = TAG_FONT;
+      for (const { tag, x, row, w } of part.tags.placed) {
+        const { fill, text } = rmExportTagColor(tag.variant);
+        const top = y + row * (TAG_HEIGHT + TAG_SPACE);
+        context.fillStyle = `rgb(${fill.join(",")})`;
+        context.beginPath();
+        context.roundRect(pad + x, top, w, TAG_HEIGHT, 4);
+        context.fill();
+        context.fillStyle = text;
+        context.fillText(tag.label, pad + x + 8, top + 15);
+      }
+      y += part.tags.height;
       const raw = await raster(part.markup, part.width, part.height, scale);
       context.drawImage(raw, pad, y, part.width, part.height);
       y += part.height + pad;
@@ -389,16 +425,25 @@ export function useRmExport() {
     const pad = 24;
     const sources = sourcesOf(config, payload);
     const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
-    const parts = drawn.map((chart) => ({ ...serialize(chart.svg), title: chart.title }));
+    const parts = drawn.map((chart) => {
+      const part = serialize(chart.svg);
+      return { ...part, title: chart.title, tags: layoutTags(chart.tags, part.width) };
+    });
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
-    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title), pad) + head;
+    const height = parts.reduce((total, part) => total + part.height + pad + titleGap(part.title) + part.tags.height, 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 tags = part.tags.placed.map(({ tag, x, row, w }) => {
+        const { fill, text } = rmExportTagColor(tag.variant);
+        const top = y + row * (TAG_HEIGHT + TAG_SPACE);
+        return `<rect x="${pad + x}" y="${top}" width="${w}" height="${TAG_HEIGHT}" rx="4" fill="rgb(${fill.join(",")})"/><text x="${pad + x + 8}" y="${top + 15}" font-family="Figtree, Helvetica, sans-serif" font-size="12" font-weight="500" fill="${text}">${escapeXml(tag.label)}</text>`;
+      }).join("");
+      y += part.tags.height;
       const markup2 = part.markup.replace(/^<svg /, `<svg x="${pad}" y="${y}" `);
       y += part.height + pad;
-      return label + markup2;
+      return label + tags + 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>`;
@@ -566,7 +611,23 @@ export function useRmExport() {
         drawWidth = part.width / part.height * drawHeight;
       }
       const titleHeight = chart.title ? 7 : 0;
-      const cardHeight = titleHeight + drawHeight + 8;
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(8);
+      let tagX = 0;
+      let tagRow = 0;
+      const tagsPlaced = (chart.tags ?? []).map((tag) => {
+        const label = printable(tag.label);
+        const w = doc.getTextWidth(label) + 3.2;
+        if (tagX > 0 && tagX + w > inner - 10) {
+          tagX = 0;
+          tagRow++;
+        }
+        const at = { tag, label, x: tagX, row: tagRow, w };
+        tagX += w + 1.5;
+        return at;
+      });
+      const tagsHeight = tagsPlaced.length ? (tagRow + 1) * 6.5 + 1 : 0;
+      const cardHeight = titleHeight + tagsHeight + drawHeight + 8;
       if (y + cardHeight > bottom) {
         doc.addPage();
         y = margin;
@@ -583,6 +644,19 @@ export function useRmExport() {
         doc.text(printable(chart.title), margin + 5, chartY + 2);
         chartY += titleHeight;
       }
+      if (tagsPlaced.length) {
+        doc.setFont("helvetica", "normal");
+        doc.setFontSize(8);
+        for (const { tag, label, x, row, w } of tagsPlaced) {
+          const { fill, text } = rmExportTagColor(tag.variant);
+          const top = chartY - 1 + row * 6.5;
+          doc.setFillColor(...fill);
+          doc.roundedRect(margin + 5 + x, top, w, 5, 1, 1, "F");
+          doc.setTextColor(text);
+          doc.text(label, margin + 5 + x + 1.6, top + 3.5);
+        }
+        chartY += tagsHeight;
+      }
       doc.addImage(
         canvas.toDataURL("image/png"),
         "PNG",

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

@@ -21,7 +21,7 @@
  * - un graphe dessine dans une cellule (courbe de tendance d'une ligne) est
  *   une decoration du tableau : il ne fait pas un export a lui seul.
  */
-import type { RmExportSheet } from './export.js';
+import type { RmExportSheet, RmExportTag } from './export.js';
 /** La carte qui contient un noeud, quel que soit le composant qui la rend. */
 export declare function rmCardOf(el: Element | null): HTMLElement | null;
 /**
@@ -30,6 +30,12 @@ export declare function rmCardOf(el: Element | null): HTMLElement | null;
  * pareil ne se distinguent plus dans un dossier de telechargement.
  */
 export declare function rmCardTitle(card: Element): string;
+/**
+ * Etiquettes de perimetre de la carte (RmTagRow sous son titre), toutes, y
+ * compris celles que la rangee replie en « +N » faute de place : la rangee
+ * les porte en entier dans `data-rm-tags`.
+ */
+export declare function rmCardTags(card: Element): RmExportTag[];
 /** Les graphes exportables d'une carte, vides tant que la donnee n'est pas rendue. */
 export declare function rmCardCharts(card: Element): HTMLElement[];
 /**

package/dist/runtime/utils/cardData.js

@@ -16,6 +16,15 @@ export function rmCardTitle(card) {
   const context = cellText(card.querySelector(".chart-card-context"));
   return context ? `${title} (${context})` : title;
 }
+export function rmCardTags(card) {
+  const row = card.querySelector(".chart-card-head [data-rm-tags], .rm-table-card__header [data-rm-tags]");
+  try {
+    const tags = JSON.parse(row?.getAttribute("data-rm-tags") ?? "[]");
+    return Array.isArray(tags) ? tags : [];
+  } catch {
+    return [];
+  }
+}
 export function rmCardCharts(card) {
   return [...card.querySelectorAll(CHART_SELECTOR)].filter(
     (holder) => holder.querySelector("svg") && !holder.closest("table")

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

@@ -263,6 +263,7 @@ export interface RmExportPayload {
     charts?: {
         title?: string;
         el: Element;
+        tags?: RmExportTag[];
     }[];
     /**
      * Cartes de l'ecran, a capturer telles quelles pour le rapport mis en page.
@@ -329,3 +330,18 @@ export declare function rmExportDuration(kb: number, rows: number): string;
  * dossier de telechargements.
  */
 export declare function rmExportFileName(...parts: (string | undefined | null)[]): string;
+/**
+ * Etiquette de perimetre d'un graphe (element, mesure, periode, lieu), posee
+ * sous son titre a l'ecran par RmTagRow. Les exports la redessinent en
+ * pastille de la meme couleur : ecrite en texte a la suite du titre, elle
+ * donnait un intitule de deux lignes ou plus rien ne se distinguait.
+ */
+export interface RmExportTag {
+    label: string;
+    /** Variante de RmTag ; `gray` a defaut. */
+    variant?: string;
+}
+export declare function rmExportTagColor(variant?: string): {
+    fill: [number, number, number];
+    text: string;
+};

package/dist/runtime/utils/export.js

@@ -101,3 +101,25 @@ export function rmExportFileName(...parts) {
   const today = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
   return `${slug || "export"}-${today}`;
 }
+const RM_EXPORT_TAG_COLORS = {
+  gray: { fill: [244, 244, 247], text: "#1A1A2E" },
+  rose: { fill: [254, 236, 239], text: "#9f1239" },
+  pink: { fill: [253, 237, 245], text: "#9d174d" },
+  fushia: { fill: [251, 236, 253], text: "#86198f" },
+  purple: { fill: [246, 238, 254], text: "#6b21a8" },
+  violet: { fill: [243, 239, 254], text: "#5b21b6" },
+  indigo: { fill: [239, 240, 254], text: "#3730a3" },
+  blue: { fill: [235, 242, 254], text: "#1e40af" },
+  sky: { fill: [231, 246, 253], text: "#075985" },
+  cyan: { fill: [230, 248, 251], text: "#155e75" },
+  teal: { fill: [232, 248, 246], text: "#115e59" },
+  emerald: { fill: [231, 248, 242], text: "#065f46" },
+  green: { fill: [233, 249, 239], text: "#166534" },
+  lime: { fill: [243, 250, 232], text: "#3f6212" },
+  yellow: { fill: [253, 247, 230], text: "#854d0e" },
+  amber: { fill: [254, 245, 231], text: "#92400e" },
+  orange: { fill: [254, 241, 232], text: "#9a3412" }
+};
+export function rmExportTagColor(variant) {
+  return RM_EXPORT_TAG_COLORS[variant ?? "gray"] ?? RM_EXPORT_TAG_COLORS.gray;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.239",
+  "version": "0.1.240",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",