@tekkare/romulus 0.1.242 → 0.1.244

package/layer/app/utils/exportPage.ts

@@ -0,0 +1,418 @@
+/**
+ * Ce que l'ecran montre, relu dans le DOM pour le panneau d'export.
+ *
+ * Un rapport PDF doit ressembler a la page : le graphique quand la vue est un
+ * graphique, le tableau quand c'est un tableau, avec les memes titres et les
+ * memes chiffres cles. Plutot que de faire redeclarer a chaque page ce qu'elle
+ * affiche deja (et de laisser les deux diverger a la premiere retouche), on
+ * relit le rendu au moment de l'export.
+ *
+ * Trois regles communes a tout ce module :
+ *
+ * - seul le visible compte. Les onglets d'une page vivent en `v-show` : ils
+ *   restent dans le DOM, et un rapport ne doit pas porter les trois onglets que
+ *   le lecteur n'a pas ouverts ;
+ * - le titre vient de la carte qui porte le contenu, donc il porte deja les
+ *   filtres que la page a mis dans son intitule (« TOP 10 brands for ABBVIE ») ;
+ * - les valeurs sont prises telles qu'elles sont ecrites a l'ecran, mises en
+ *   forme comprises. C'est l'export Excel qui porte les nombres bruts.
+ */
+import type { RmExportCard, RmExportKpi, RmExportSheet, RmExportTag } from "@tekkare/romulus/utils/export";
+import { rmCardTags } from "@tekkare/romulus/utils/cardData";
+
+/** Une carte de graphique telle que le panneau d'export la consomme. */
+export interface PageChart {
+  title?: string;
+  el: Element;
+  /** Etiquettes de perimetre de la carte, redessinees sous le titre. */
+  tags?: RmExportTag[];
+}
+
+/** Cartes du hub qui peuvent porter un graphique ou un tableau. */
+const CARD_SELECTOR = ".chart-card, .rm-table-card";
+
+/**
+ * Ou lire : le contenu de la page, pas le cadre.
+ *
+ * Les panneaux du rail portent eux aussi des cartes et des tableaux (le
+ * tiroir de selection de produits en est un), et le panneau d'export est
+ * ouvert au moment de la lecture. Sans cette racine, un rapport sortait avec
+ * le tableau du tiroir voisin, que la page ne montre pas.
+ */
+function pageRoot(): ParentNode {
+  return document.querySelector("main.rm-shell__main") ?? document;
+}
+
+/** Texte d'un noeud, espaces normalises : le DOM en met partout. */
+function cellText(el: Element | null | undefined) {
+  return (el?.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Titre d'une carte, quel que soit le composant qui la rend.
+ *
+ * Le contexte (l'annee, le secteur) est repris avec le titre : trois cartes de
+ * classement ne different que par lui, et un rapport qui les nommerait toutes
+ * « Ranking: TOP 10 brands for ABBVIE » ne se lirait pas.
+ */
+function cardTitle(card: Element) {
+  const title =
+    cellText(card.querySelector(".chart-card-title")) ||
+    cellText(card.querySelector(".rm-table-card__title")) ||
+    "";
+  const context = cellText(card.querySelector(".chart-card-context"));
+  if (!title) return "";
+  return context ? `${title} (${context})` : title;
+}
+
+/**
+ * Une carte est-elle a l'ecran ? `offsetParent` vaut `null` des qu'un parent
+ * est en `display: none`, ce qui est exactement l'etat d'un onglet non actif.
+ */
+function isVisible(card: HTMLElement) {
+  return card.offsetParent !== null;
+}
+
+function visibleCards(root: ParentNode): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(CARD_SELECTOR)].filter(isVisible);
+}
+
+/**
+ * Le conteneur d'un graphe Romulus (RmChart pose `.rm-chart > .echart`).
+ *
+ * Viser ce noeud, et non « la carte qui contient un `<svg>` » : une carte de
+ * tableau en porte aussi (les fleches de tri, les icones d'en-tete). Le
+ * rapport sortait alors une page « Market data » avec une icone de 20 px
+ * etiree sur toute la largeur.
+ */
+const CHART_SELECTOR = ".rm-chart .echart";
+
+/**
+ * Graphiques affiches. Les charts Romulus sont rendus par ECharts en SVG : le
+ * generateur reprend le noeud tel quel, il n'y a rien a capturer.
+ */
+export function visibleExportCharts(root?: ParentNode): PageChart[] {
+  if (typeof document === "undefined") return [];
+
+  // Les memes cartes que celles que le rapport garde une a une : un graphique
+  // pris dans un bloc capture entier est deja dans l'image du bloc, et le
+  // vectoriser en plus le posait deux fois dans le document.
+  return keptCards(root ?? pageRoot()).flatMap((card) =>
+    [...card.querySelectorAll<HTMLElement>(CHART_SELECTOR)]
+      // Un graphe dessine dans une cellule (courbe de tendance d'une ligne) est
+      // une decoration du tableau : il ne fait pas une page de rapport.
+      .filter((holder) => holder.querySelector("svg") && !holder.closest("table"))
+      .map((holder) => ({ title: cardTitle(card) || undefined, el: holder as Element, tags: rmCardTags(card) })),
+  );
+}
+
+/** Une carte de l'ecran, telle que le rapport mis en page la capture. */
+export interface PageNode {
+  kind: "kpi" | "chart" | "table" | "card";
+  el: Element;
+  title?: string;
+}
+
+/** Toutes les cartes du design system sous un noeud, la plus englobante d'abord. */
+function cardsIn(root: ParentNode): HTMLElement[] {
+  const selector = `.rm-kpibar, ${CARD_SELECTOR}, ${RESULT_CARD_SELECTOR}`;
+  const found = [...root.querySelectorAll<HTMLElement>(selector)];
+  // `querySelectorAll` ne rend que les descendants : un bloc qui EST une carte
+  // ne se trouvait pas lui-meme, et sortait capture comme un bloc anonyme.
+  if (root instanceof HTMLElement && root.matches(selector)) found.unshift(root);
+  return (
+    found
+      .filter(isVisible)
+      // Une carte nichee dans une autre partirait deux fois dans le rapport.
+      .filter((el, _index, all) => !all.some((other) => other !== el && other.contains(el)))
+  );
+}
+
+/** Part de la hauteur d'un bloc occupee par ses cartes. */
+const CARDS_COVER = 0.6;
+
+/**
+ * Le bloc est-il fait de ses cartes, ou en porte-t-il seulement une ?
+ *
+ * Une page de resultats est une pile de fiches : la capturer fiche par fiche
+ * fait tomber les coupures de pages entre deux fiches. Un ecran qui pose une
+ * barre de chiffres cles au-dessus de son propre markup, lui, n'est pas cette
+ * barre : sur la page des prix, elle fait 82 px sur 675, et le rapport sortait
+ * le bandeau sans la liste.
+ */
+function mostlyCards(block: HTMLElement, cards: HTMLElement[]) {
+  if (!cards.length) return false;
+  const height = block.getBoundingClientRect().height;
+  if (!height) return false;
+  const covered = cards.reduce((total, card) => total + card.getBoundingClientRect().height, 0);
+  return covered / height >= CARDS_COVER;
+}
+
+/** Les cartes que le rapport capture une a une, blocs anonymes exclus. */
+function keptCards(root: ParentNode): HTMLElement[] {
+  const blocks = visiblePageBlocks(root);
+  // Hors d'une page du hub (un rendu de test, un autre cadre) : on s'en tient
+  // aux cartes, il n'y a pas de conteneur de page ou descendre.
+  if (!blocks.length) return cardsIn(root);
+  return blocks.flatMap((block) => {
+    const cards = cardsIn(block);
+    return mostlyCards(block, cards) ? cards : [];
+  });
+}
+
+/** Le role d'une carte, pour les cases a cocher du panneau. */
+function nodeOf(el: HTMLElement): PageNode {
+  return {
+    kind: el.matches(".rm-kpibar")
+      ? "kpi"
+      : el.matches(RESULT_CARD_SELECTOR)
+        ? "card"
+        : el.querySelector(CHART_SELECTOR)
+          ? "chart"
+          : "table",
+    el,
+    title: cardTitle(el) || undefined,
+  };
+}
+
+/**
+ * Ce que le rapport mis en page capture, dans l'ordre de la page.
+ *
+ * Il reconstruisait ses tableaux et ses fiches a partir de la donnee : colonnes
+ * ecretees, mise en forme differente de l'ecran, pages a moitie vides. Il
+ * capture desormais le rendu tel quel.
+ *
+ * Bloc par bloc, et non carte par carte : une page dont le design system ne
+ * reconnait qu'une partie (une barre de chiffres cles au-dessus d'un ecran au
+ * markup propre) sortait reduite a cette partie. Un bloc fait de ses cartes est
+ * rendu carte par carte, pour que les coupures de pages tombent entre elles ;
+ * les autres partent entiers.
+ *
+ * Les graphiques des cartes gardent leur chemin vectoriel (cf.
+ * `visibleExportCharts`), ils sont deja nets.
+ */
+export function visibleExportNodes(root?: ParentNode): PageNode[] {
+  if (typeof document === "undefined") return [];
+
+  const where = root ?? pageRoot();
+  const blocks = visiblePageBlocks(where);
+  if (!blocks.length) return cardsIn(where).map(nodeOf);
+
+  return blocks.flatMap((block) => {
+    const cards = cardsIn(block);
+    return mostlyCards(block, cards) ? cards.map(nodeOf) : [{ kind: "card" as const, el: block }];
+  });
+}
+
+/** Le composant de page du hub, pose par le layout autour de `<NuxtPage>`. */
+const PAGE_SELECTOR = ".oip_container";
+
+/**
+ * L'en-tete de page appartient au cadre, pas a l'analyse : son titre est deja
+ * sur la page de garde, et ses onglets et son bouton d'export n'ont rien a
+ * faire dans un document.
+ */
+// `.arg_header` : bandeau Auriga des pages pas encore passees sur Romulus.
+const PAGE_HEADER_SELECTOR = ".rm-page-header, .arg_header";
+
+/** Les enfants qui portent quelque chose, en-tete de page exclu. */
+function contentChildren(el: Element): HTMLElement[] {
+  return [...el.children]
+    .filter((child): child is HTMLElement => child instanceof HTMLElement)
+    .filter(isVisible)
+    .filter((child) => !child.matches(PAGE_HEADER_SELECTOR))
+    .filter((child) => cellText(child) !== "" || !!child.querySelector("svg, canvas, img"));
+}
+
+/**
+ * Les blocs de la page, pour une capture fidele.
+ *
+ * On descend tant qu'un seul enfant porte le contenu : les pages du hub
+ * s'emboitent dans deux ou trois conteneurs de mise en page avant d'arriver au
+ * niveau que le lecteur voit comme des blocs. On s'arrete au premier niveau
+ * qui en compte plusieurs de vraie hauteur : c'est la que les coupures de
+ * pages du rapport tombent au bon endroit, entre deux blocs et non au milieu
+ * d'un tableau.
+ *
+ * Un bloc plus haut qu'une page n'est pas reduit pour tenir : le generateur le
+ * pose en bandes sur les pages suivantes.
+ */
+export function visiblePageBlocks(root?: ParentNode): HTMLElement[] {
+  if (typeof document === "undefined") return [];
+
+  const page = (root ?? pageRoot()).querySelector<HTMLElement>(PAGE_SELECTOR);
+  if (!page || !isVisible(page) || cellText(page) === "") return [];
+
+  let node: HTMLElement = page;
+  for (let depth = 0; depth < 6; depth += 1) {
+    const kids = contentChildren(node);
+    if (!kids.length) break;
+    // Un titre seul au-dessus de son tableau ne fait pas deux blocs : sans ce
+    // seuil, le rapport sortait une image par ligne de texte.
+    if (kids.filter((kid) => kid.getBoundingClientRect().height > 80).length > 1) return kids;
+    if (kids.length > 1) break;
+    node = kids[0]!;
+  }
+  return [node];
+}
+
+/**
+ * Tableaux affiches, dans la forme attendue par les generateurs. Le schema est
+ * celui de l'entete du tableau, et une ligne est un tableau de chaines : les
+ * cellules sont lues dans l'ordre des colonnes, comme a l'ecran.
+ *
+ * Sert au rapport PDF, pas au classeur : Excel doit sortir la donnee complete
+ * (10 000 lignes), la page n'en montre que le haut.
+ */
+export function visibleExportSheets(root?: ParentNode): RmExportSheet[] {
+  if (typeof document === "undefined") return [];
+
+  const sheets: RmExportSheet[] = [];
+
+  visibleCards(root ?? pageRoot()).forEach((card) => {
+    const table = card.querySelector("table");
+    if (!table) return;
+
+    const head = [...table.querySelectorAll("thead th")].map((th) => cellText(th));
+    const rows = [...table.querySelectorAll("tbody tr")]
+      .map((tr) => [...tr.querySelectorAll("th, td")].map((cell) => cellText(cell)))
+      .filter((cells) => cells.some((cell) => cell !== ""));
+    if (!rows.length) return;
+
+    // Tableau sans entete (rare, mais un rapport sans nom de colonne est
+    // illisible) : on numerote plutot que de laisser des colonnes muettes.
+    const columns = head.length ? head : rows[0]!.map((_, index) => `Col. ${index + 1}`);
+
+    sheets.push({
+      name: cardTitle(card) || `Table ${sheets.length + 1}`,
+      schema: columns.map((column, index) => ({
+        column,
+        value: (row: any) => row?.[index] ?? null,
+      })),
+      data: rows,
+    });
+  });
+
+  return sheets;
+}
+
+/** Chiffres cles affiches (RmKpiBar), dans l'ordre de la barre. */
+export function visibleExportKpis(root?: ParentNode): RmExportKpi[] {
+  if (typeof document === "undefined") return [];
+
+  return [...(root ?? pageRoot()).querySelectorAll<HTMLElement>(".rm-kpibar__item")]
+    .filter(isVisible)
+    .map((item) => ({
+      label: [
+        cellText(item.querySelector(".rm-kpibar__legend")),
+        cellText(item.querySelector(".rm-kpibar__subtitle")),
+      ]
+        .filter(Boolean)
+        .join(", "),
+      value: cellText(item.querySelector(".rm-kpibar__value")),
+    }))
+    .filter((kpi) => kpi.value !== "");
+}
+
+/**
+ * Une fiche de resultat (RmResultCard). Les pages de recherche du hub empilent
+ * ces cartes : un rapport tire de ces pages doit les reprendre telles quelles,
+ * et non redecouper la donnee brute en fiches qui ne ressemblent a rien de ce
+ * qui est a l'ecran.
+ */
+// `.rm-section-card` : fiches de resultats construites sur RmSectionCard.
+const RESULT_CARD_SELECTOR = ".rm-rcard, .rm-section-card";
+
+/**
+ * Le compteur de la carte, celui qu'elle pose en gros a gauche. Absent des
+ * cartes qui n'en portent pas (une fiche de texte reglementaire).
+ */
+function cardCount(card: Element) {
+  const value = cellText(card.querySelector(".rm-rcard__count-value"));
+  if (!value) return undefined;
+  return {
+    value,
+    label: cellText(card.querySelector(".rm-rcard__count-label")) || undefined,
+    extra: cellText(card.querySelector(".rm-rcard__count-extra")) || undefined,
+  };
+}
+
+/**
+ * Corps d'une fiche : les lignes libres (dernier avis, resume, indication)
+ * puis les rangees « Personnaliser ».
+ *
+ * Les lignes libres sortent sans intitule : la carte ne leur en donne pas, et
+ * le rapport n'a pas a en inventer un. C'est aussi ce qui leur vaut toute la
+ * largeur dans le rapport, comme a l'ecran.
+ */
+function cardFields(card: Element): RmExportCard["fields"] {
+  const fields: RmExportCard["fields"] = [];
+
+  card
+    .querySelectorAll(
+      ".rm-rcard__meta > *, .rm-rcard__text, .rm-rcard__lead, .rm-rcard__desc",
+    )
+    .forEach((node) => {
+      const value = cellText(node);
+      if (!value) return;
+      // La classe dit le role de la ligne, et le rapport lui rend sa graisse :
+      // l'entete de date en petites capitales, la reference sur son fond gris,
+      // le chapo en gras. C'est la seule chose qui distingue ces lignes a
+      // l'ecran, leur texte ne le dit pas.
+      const kind = node.classList.contains("rm-rcard__ref")
+        ? "ref"
+        : node.classList.contains("rm-rcard__lead")
+          ? "lead"
+          : node.classList.contains("rm-rcard__desc")
+            ? "desc"
+            : node.closest(".rm-rcard__meta")
+              ? "meta"
+              : "text";
+      fields.push({ label: "", value, kind });
+    });
+
+  card.querySelectorAll(".pref_row").forEach((row) => {
+    // Tag par tag : lire le conteneur d'un coup colle les etiquettes entre
+    // elles (« ImportantModere »), le DOM ne mettant aucun texte entre deux
+    // elements voisins.
+    const value = [...row.querySelectorAll(".pref_row_tags > *")]
+      .map((tag) => cellText(tag))
+      .filter(Boolean)
+      .join(" · ");
+    if (value) fields.push({ label: cellText(row.querySelector(".pref_row_label")), value });
+  });
+
+  return fields;
+}
+
+/** Fiches affichees, dans l'ordre de la liste. */
+export function visibleExportCards(root?: ParentNode): RmExportCard[] {
+  if (typeof document === "undefined") return [];
+
+  return [...(root ?? pageRoot()).querySelectorAll<HTMLElement>(RESULT_CARD_SELECTOR)]
+    .filter(isVisible)
+    .map((card) => ({
+      // Une RmSectionCard n'a pas de classe de titre : son premier intitule en tient lieu.
+      title: cellText(card.querySelector(".rm-rcard__title") ?? card.querySelector("h1, h2, h3, .oip_heading")),
+      subtitle: cellText(card.querySelector(".rm-rcard__subtitle")) || undefined,
+      badges: [...card.querySelectorAll(".rm-rcard__head .badge")]
+        .map((badge) => cellText(badge))
+        .filter(Boolean),
+      count: cardCount(card),
+      fields: cardFields(card),
+    }))
+    // Une carte sans titre est une coquille en cours de chargement.
+    .filter((card) => card.title !== "");
+}
+
+/**
+ * Tout ce que l'ecran porte, en une lecture : c'est ce que `ExportSource.screen`
+ * attend, et ce que le panneau envoie aux formats mis en page.
+ */
+export function visibleExportScreen(root?: ParentNode) {
+  return {
+    sheets: visibleExportSheets(root),
+    kpi: visibleExportKpis(root),
+    cards: visibleExportCards(root),
+  };
+}

package/layer/app/utils/headerTabs.ts

@@ -0,0 +1,15 @@
+// Onglets numerotes pour RmPageHeader.
+// ---------------------------------------------------------------------------
+// `arg-header` prenait une liste de libelles et renvoyait l'indice de l'onglet
+// clique, a partir de 1. RmPageHeader travaille sur des cles. Les pages qui
+// gardent leur onglet dans un indice passent par ici plutot que de reecrire la
+// conversion a chaque fois : la cle est l'indice en toutes lettres.
+
+export type IndexedTab = { key: string; label: string; active: boolean };
+
+export const indexedTabs = (labels: readonly string[], active: number): IndexedTab[] =>
+  labels.map((label, index) => ({
+    key: String(index + 1),
+    label,
+    active: active === index + 1,
+  }));

package/layer/app/utils/hybridRows.ts

@@ -0,0 +1,22 @@
+/**
+ * hybridRows - un classement Auriga rendu par RmHybridTable.
+ *
+ * Les analyses du portail construisent leurs classements comme
+ * `arg-hybrid-chart` les attendait : des lignes `{ values: [libelle,
+ * { value, percentage }, ...colonnes de fin] }`. RmHybridTable, lui, lit des
+ * lignes nommees. La conversion est mecanique : elle vit ici plutot que
+ * recopiee dans chaque composant, et le calcul des valeurs reste ou il est.
+ */
+export function hybridRows(contents: any[]) {
+  return (Array.isArray(contents) ? contents : [])
+    .filter((row: any) => Array.isArray(row?.values))
+    .map((row: any) => {
+      const [label, measure, ...extra] = row.values;
+      return {
+        label: String(label),
+        value: Number(measure?.value ?? 0),
+        percentage: measure?.percentage,
+        extra,
+      };
+    });
+}

package/layer/app/utils/oipScopeStore.ts

@@ -0,0 +1,112 @@
+import { defineStore } from "pinia";
+
+/**
+ * Le store d'une famille de vues (portail, Hub-R, PHMEV...) : la vue
+ * appliquee, la liste, les filtres de l'app. Une fabrique : chaque famille a
+ * le sien, sous son propre id (`scopeStore`, `heart:scopeStore`...), et la
+ * forme est la meme pour toutes (cf. le middleware qui y ecrit une vue venue
+ * d'un lien partage).
+ */
+export function defineOipScopeStore(id: string) {
+  return defineStore(id, {
+    state: () => {
+      return {
+        scopeFilter: [] as Array<any>,
+        selectedScope: null as any,
+        scoped: false as boolean,
+        setState: [] as Array<any>,
+        appFilters: [] as Array<any>,
+        list: [] as any,
+        selected: null,
+        error: null,
+        loading: false,
+        selectedFilters: [],
+        isSet: false,
+      };
+    },
+    actions: {
+      setList(payload: any[]) {
+        this.list = []
+        this.list = payload;
+      },
+      setSelected(payload: null) {
+        this.selected = payload;
+      },
+      setScoped(payload: boolean) {
+        this.scoped = payload;
+      },
+      setError(payload: null) {
+        this.error = payload;
+      },
+      setLoading(payload: boolean) {
+        this.loading = payload;
+      },
+      setIsSet(payload: boolean) {
+        this.isSet = payload;
+      },
+      setScopeFilter(info: any[]) {
+        this.scopeFilter = info;
+      },
+      setSelectedScope(info: Object) {
+        this.selectedScope = info;
+      },
+      clearScope() {
+        this.selectedScope = null;
+        this.clearAppFilters()
+      },
+
+      // STORED FILTERS
+      setAppFilters(info: { filter: any; page: any; values: any }) {
+        const selectedIndex = this.appFilters.findIndex((b) => {
+          return b.filter === info.filter && b.page === info.page;
+        });
+
+        if (selectedIndex !== -1) {
+          this.appFilters[selectedIndex] = info;
+        } else {
+          this.appFilters.push(info);
+        }
+      },
+
+      resetAppFilters(query: { filter: any; page: any; info: any }) {
+        const selectedIndex = this.appFilters.findIndex((b) => {
+          return b.filter === query.filter && b.page === query.page;
+        });
+        if (selectedIndex !== -1) {
+          const index = this.appFilters[selectedIndex].values.indexOf(query.info);
+          if (index !== -1) {
+            this.appFilters[selectedIndex].values.splice(index, 1);
+          }
+        }
+      },
+
+      clearAppFilters(){
+        this.appFilters = []
+      },
+
+      resetSelectedFilters(query: { filter: any; page: any }) {
+        const selectedIndex = this.appFilters.findIndex((b) => {
+          return b.filter === query.filter && b.page === query.page;
+        });
+        if (selectedIndex !== -1) {
+          this.appFilters.splice(selectedIndex, 1);
+        }
+      },
+
+      removeAllFromPage(query: any) {
+        this.appFilters = [...this.appFilters.filter((x) => x.page !== query)];
+      },
+
+      getStoreFromPage() {
+        return this.appFilters.filter((x) => x.page === window.location.href);
+      },
+
+      findValuesStore(filter: string) {
+        return this.getStoreFromPage().find((x) => x.filter === filter)
+          ? this.getStoreFromPage().find((x) => x.filter === filter)
+          : [];
+      },
+    },
+    getters: {},
+  });
+}