@tekkare/romulus 0.1.205 → 0.1.207

package/dist/module.json

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

package/dist/module.mjs

@@ -51,6 +51,8 @@ const module = defineNuxtModule({
     if (!nuxt.options.app.head.link.some((l) => l.href === phosphorFillHref)) {
       nuxt.options.app.head.link.push({ rel: "stylesheet", href: phosphorFillHref });
     }
+    const optimizeDeps = nuxt.options.vite.optimizeDeps ||= {};
+    optimizeDeps.include = [...optimizeDeps.include || [], "@phosphor-icons/vue"];
   }
 });
 

package/dist/runtime/components/BarChart.vue

@@ -21,11 +21,17 @@ const props = withDefaults(defineProps<{
    * ce qui suffit des que les barres sont nombreuses.
    */
   labelFormatter?: RmBarLabelFormatter
+  /**
+   * Formate l'axe des valeurs et l'infobulle. Independant de `labelFormatter`,
+   * qui seul decide si les barres portent une etiquette.
+   */
+  valueFormatter?: (value: number) => string
 }>(), {
   horizontal: false,
   height: 'standard',
   description: undefined,
   labelFormatter: undefined,
+  valueFormatter: undefined,
 })
 
 const { theme, palette, decal } = useChartTheme()
@@ -39,6 +45,7 @@ const option = computed(() =>
         palette.value.cat,
         decal.value,
         props.labelFormatter,
+        props.valueFormatter,
       )
     : rmBarVerticalOption(
         props.categories,
@@ -47,6 +54,7 @@ const option = computed(() =>
         palette.value.cat,
         decal.value,
         props.labelFormatter,
+        props.valueFormatter,
       ),
 )
 </script>

package/dist/runtime/components/ChoroplethMap.vue

@@ -58,6 +58,11 @@ const props = withDefaults(
     /** Hauteur du dessin, en pixels. */
     height?: number
     lang?: 'fr' | 'en'
+    /**
+     * Formate les valeurs de l'infobulle et des bornes de la legende, a la
+     * place du format de la langue. Pour une app qui a sa regle d'arrondi.
+     */
+    valueFormatter?: (value: number) => string
   }>(),
   {
     data: () => [],
@@ -67,6 +72,7 @@ const props = withDefaults(
     compact: false,
     height: 500,
     lang: 'fr',
+    valueFormatter: undefined,
   },
 )
 
@@ -186,7 +192,11 @@ const T = computed(() =>
 /** Dégradé de la légende, dans l'ordre de lecture de l'échelle. */
 const legendGradient = computed(() => `linear-gradient(90deg, ${ramp.value.join(', ')})`)
 
-const fmt = computed(() => new Intl.NumberFormat(props.lang === 'en' ? 'en-US' : 'fr-FR'))
+const fmt = computed(() =>
+  props.valueFormatter
+    ? { format: props.valueFormatter }
+    : new Intl.NumberFormat(props.lang === 'en' ? 'en-US' : 'fr-FR'),
+)
 </script>
 
 <template>

package/dist/runtime/components/Icon.vue

@@ -9,44 +9,36 @@
   icone deja chargee : une liste de trois cents lignes posait trois cents
   attentes, et les icones apparaissaient apres le texte.
 -->
-<script setup lang="ts">
-import { computed, defineAsyncComponent, shallowRef, type Component } from 'vue'
-
-export interface RmIconProps {
-  /** Nom Phosphor sans le prefixe « Ph » (« House », « Gear », « ChartBar »). */
-  name: string
-  /** Taille en pixels. */
-  size?: number
-  /** Graisse du trait. `fill` donne la forme pleine. */
-  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
-  color?: string
-}
-
-const props = withDefaults(defineProps<RmIconProps>(), {
-  size: 20,
-  weight: 'regular',
-  color: undefined,
-})
+<script lang="ts">
+import { defineAsyncComponent, type Component } from 'vue'
 
 /**
- * Un composant asynchrone par nom d'icone, partage par toutes les instances.
- * Une fois le paquet charge, le composant garde sa resolution et se pose sans
- * attente au montage suivant.
+ * Etat partage par toutes les instances : il vit dans le module, pas dans
+ * `<script setup>` (qui le recreait a chaque instance, donc une attente par
+ * icone).
  */
 const cache = new Map<string, Component>()
-
-/** Le module, demande une seule fois quel que soit le nombre d'icones. */
-const iconModule = shallowRef<Promise<Record<string, Component>>>()
+let iconModule: Promise<Record<string, Component>> | undefined
+/** Le paquet une fois charge : les icones se posent alors sans attente. */
+let loaded: Record<string, Component> | undefined
 
 function loadIcons() {
-  if (!iconModule.value) {
-    iconModule.value = import('@phosphor-icons/vue') as unknown as Promise<Record<string, Component>>
+  if (!iconModule) {
+    iconModule = (import('@phosphor-icons/vue') as unknown as Promise<Record<string, Component>>)
+      .then((mod) => {
+        loaded = mod
+        return mod
+      })
   }
-  return iconModule.value
+  return iconModule
 }
 
+// Le paquet est demande des l'import du composant, pas au premier montage.
+if (typeof window !== 'undefined') loadIcons()
+
 function resolve(name: string) {
   const key = `Ph${name}`
+  if (loaded) return loaded[key] || loaded.PhQuestion
   let component = cache.get(key)
   if (!component) {
     component = defineAsyncComponent(() =>
@@ -56,6 +48,26 @@ function resolve(name: string) {
   }
   return component
 }
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface RmIconProps {
+  /** Nom Phosphor sans le prefixe « Ph » (« House », « Gear », « ChartBar »). */
+  name: string
+  /** Taille en pixels. */
+  size?: number
+  /** Graisse du trait. `fill` donne la forme pleine. */
+  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+  color?: string
+}
+
+const props = withDefaults(defineProps<RmIconProps>(), {
+  size: 20,
+  weight: 'regular',
+  color: undefined,
+})
 
 const iconComponent = computed(() => resolve(props.name))
 </script>

package/dist/runtime/components/LineChart.vue

@@ -52,6 +52,12 @@ const props = withDefaults(defineProps<{
    * nombre entier avec ses separateurs de milliers.
    */
   numberFormat?: 'compact' | 'plain'
+  /**
+   * Formateur de l'appelant, pour l'axe, les etiquettes ET l'infobulle. Passe
+   * avant `numberFormat` : une app qui a sa propre regle d'arrondi la veut
+   * partout, y compris au survol.
+   */
+  valueFormatter?: (value: number) => string
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
@@ -64,6 +70,7 @@ const props = withDefaults(defineProps<{
   legendPosition: 'bottom',
   startAtZero: false,
   numberFormat: undefined,
+  valueFormatter: undefined,
   height: 'standard',
   description: undefined,
 })
@@ -71,6 +78,7 @@ const props = withDefaults(defineProps<{
 const { theme, palette, decal } = useChartTheme()
 
 const formatter = computed(() => {
+  if (props.valueFormatter) return props.valueFormatter
   if (props.numberFormat === 'compact') return rmCompact
   if (props.numberFormat === 'plain') return rmNumber
   return undefined
@@ -100,6 +108,7 @@ const option = computed(() => {
     legendPosition: props.legendPosition,
     startAtZero: props.startAtZero,
     valueFormatter: formatter.value,
+    tooltipFormatter: props.valueFormatter,
   }) as Record<string, any>
   if (built.legend && Object.keys(legendSelected.value).length) {
     built.legend = { ...built.legend, selected: { ...legendSelected.value } }

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

@@ -200,8 +200,24 @@ export interface RmSeriesInput {
  * (« 1 240 (18 %) »), et c'est l'index qui la retrouve.
  */
 export type RmBarLabelFormatter = (value: number, index: number) => string;
-export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
+export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter, valueFormatter?: (value: number) => string): {
     tooltip: {
+        valueFormatter: (value: unknown) => string;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    } | {
+        valueFormatter?: undefined;
         trigger: string;
         backgroundColor: string;
         textStyle: {
@@ -270,6 +286,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
             show: boolean;
         };
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -284,6 +301,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
     yAxis: {
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -334,7 +352,38 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
 };
 /** Bar chart horizontal, avec valeur affichee en bout de barre. */
-export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter, valueFormatter?: (value: number) => string): {
+    tooltip: {
+        valueFormatter: (value: unknown) => string;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    } | {
+        valueFormatter?: undefined;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+        appendTo: string;
+        confine: boolean;
+        enterable: boolean;
+        extraCssText: string;
+    };
     grid: {
         left: number;
         right: number;
@@ -344,6 +393,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
     };
     xAxis: {
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -365,6 +415,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
             show: boolean;
         };
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;
@@ -409,21 +460,6 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
     textStyle: {
         fontFamily: string;
     };
-    tooltip: {
-        trigger: string;
-        backgroundColor: string;
-        textStyle: {
-            color: string;
-            fontFamily: string;
-            fontSize: 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. */
 /**
@@ -471,6 +507,11 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     startAtZero?: boolean;
     /** Formate les valeurs, dans les etiquettes comme dans l'infobulle. */
     valueFormatter?: (value: number) => string;
+    /**
+     * Formate l'infobulle a la place de `rmNumber`. Une app qui impose sa
+     * propre regle d'arrondi la veut aussi au survol, pas seulement sur l'axe.
+     */
+    tooltipFormatter?: (value: number) => string;
 }): {
     animation: boolean;
     tooltip: {
@@ -544,6 +585,7 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         };
         boundaryGap: boolean;
         axisLabel: {
+            formatter?: ((value: number) => string) | undefined;
             fontSize: number;
             color: string;
             fontFamily: string;

package/dist/runtime/utils/chart.js

@@ -150,21 +150,26 @@ const valueAxis = (theme, label, hidden = false, formatter) => ({
   axisTick: hidden ? { show: false } : void 0,
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-const axisCommon = (theme) => ({
-  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+const axisCommon = (theme, formatter) => ({
+  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT, ...formatter ? { formatter } : {} },
   axisLine: { lineStyle: { color: theme.axisLine } },
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter) {
+const rmTooltipValue = (formatter) => formatter ? { valueFormatter: (value) => typeof value === "number" ? formatter(value) : "" } : {};
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter, valueFormatter) {
   return {
     ...rmBaseOption(theme, decal),
-    tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
+    tooltip: {
+      ...rmBaseOption(theme, decal).tooltip,
+      trigger: rmTooltipTrigger(series.length),
+      ...rmTooltipValue(valueFormatter)
+    },
     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 },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false } },
-    yAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: { type: "value", ...axisCommon(theme, valueFormatter) },
     series: series.map((s, i) => ({
       type: "bar",
       name: s.name,
@@ -184,11 +189,12 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
     }))
   };
 }
-export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter) {
+export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter, valueFormatter) {
   return {
     ...rmBaseOption(theme, decal),
+    tooltip: { ...rmBaseOption(theme, decal).tooltip, ...rmTooltipValue(valueFormatter) },
     grid: { left: 140, right: 60, top: 16, bottom: 24, containLabel: true },
-    xAxis: { type: "value", ...axisCommon(theme) },
+    xAxis: { type: "value", ...axisCommon(theme, valueFormatter) },
     yAxis: { type: "category", data: labels, ...axisCommon(theme), splitLine: { show: false } },
     series: [{
       type: "bar",
@@ -203,7 +209,9 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
         fontSize: 11,
         color: theme.mutedColor,
         fontFamily: FONT,
-        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : void 0
+        // L'etiquette est toujours posee ici : sans formateur d'etiquette, elle
+        // suit au moins celui des valeurs plutot que le nombre brut.
+        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : valueFormatter ? (p) => valueFormatter(p.value) : void 0
       }
     }]
   };
@@ -220,7 +228,8 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     hideValueAxis = false,
     legendPosition = "bottom",
     startAtZero = false,
-    valueFormatter
+    valueFormatter,
+    tooltipFormatter
   } = options;
   const labelled = valueLabels ?? series.length <= RM_LINE_LABEL_MAX_SERIES;
   const AREA_MAX_SERIES = 10;
@@ -228,7 +237,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
   const dual = series.some((s) => s.axis === 1);
   const bottomLegend = legendPosition === "bottom";
   const format = (value) => valueFormatter ? valueFormatter(value) : String(value);
-  const tooltipFormat = (value) => valueFormatter ? rmNumber(value) : String(value);
+  const tooltipFormat = (value) => tooltipFormatter ? tooltipFormatter(value) : valueFormatter ? rmNumber(value) : String(value);
   const values = series.flatMap((s) => s.data).filter((v) => typeof v === "number");
   const floorAtZero = startAtZero && values.length > 0 && Math.min(...values) >= 0;
   const base = rmBaseOption(theme, decal);
@@ -241,7 +250,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     tooltip: {
       ...base.tooltip,
       trigger: rmTooltipTrigger(series.length),
-      ...valueFormatter ? { valueFormatter: (value) => typeof value === "number" ? tooltipFormat(value) : "" } : {}
+      ...valueFormatter || tooltipFormatter ? { valueFormatter: (value) => typeof value === "number" ? tooltipFormat(value) : "" } : {}
     },
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.

package/package.json

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