@tekkare/romulus 0.1.25 → 0.1.26

package/dist/module.json

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

package/dist/runtime/components/LineChart.vue

@@ -6,6 +6,7 @@
 import { computed } from 'vue'
 import { useChartTheme } from '../composables/useChartTheme'
 import { rmLineOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+import { rmCompact, rmNumber } from '../utils/format'
 
 const props = withDefaults(defineProps<{
   categories: (string | number)[]
@@ -20,6 +21,29 @@ const props = withDefaults(defineProps<{
    * `axis: 1` : deux unites sur un graphe sans libelle d'axe se lisent mal.
    */
   axisLabels?: [string, string]
+  /**
+   * Etiquette chaque point de sa valeur, en pastille de la couleur de la
+   * serie. A reserver aux series courtes, sinon les pastilles se chevauchent.
+   */
+  valueLabels?: boolean
+  /**
+   * Masque la graduation de l'axe des ordonnees, lignes de fond gardees. Ne
+   * s'utilise qu'avec `valueLabels`, sinon le graphe perd tout chiffre.
+   */
+  hideValueAxis?: boolean
+  /** Position de la legende. */
+  legendPosition?: 'top' | 'bottom'
+  /**
+   * Ancre l'axe a zero quand toutes les valeurs sont positives, pour ne pas
+   * exagerer visuellement de faibles variations.
+   */
+  startAtZero?: boolean
+  /**
+   * Format des valeurs, dans les etiquettes comme dans l'infobulle.
+   * `compact` abrege ("18,8 M") quand la place manque ; `plain` garde le
+   * nombre entier avec ses separateurs de milliers.
+   */
+  numberFormat?: 'compact' | 'plain'
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
@@ -27,12 +51,23 @@ const props = withDefaults(defineProps<{
   step: false,
   smooth: true,
   axisLabels: undefined,
+  valueLabels: false,
+  hideValueAxis: false,
+  legendPosition: 'top',
+  startAtZero: false,
+  numberFormat: undefined,
   height: 'standard',
   description: undefined,
 })
 
 const { theme, palette, decal } = useChartTheme()
 
+const formatter = computed(() => {
+  if (props.numberFormat === 'compact') return rmCompact
+  if (props.numberFormat === 'plain') return rmNumber
+  return undefined
+})
+
 const option = computed(() =>
   rmLineOption(props.categories, props.series, theme.value, palette.value.cat, {
     area: props.area,
@@ -40,6 +75,11 @@ const option = computed(() =>
     smooth: props.smooth,
     decal: decal.value,
     axisLabels: props.axisLabels,
+    valueLabels: props.valueLabels,
+    hideValueAxis: props.hideValueAxis,
+    legendPosition: props.legendPosition,
+    startAtZero: props.startAtZero,
+    valueFormatter: formatter.value,
   }),
 )
 </script>

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

@@ -288,14 +288,67 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     decal?: boolean;
     /** Libelles des deux axes, requis des qu'une serie porte `axis: 1`. */
     axisLabels?: [string, string];
+    /**
+     * Etiquette la valeur de chaque point, en pastille de la couleur de sa
+     * serie. Reserve aux series courtes : au-dela d'une quinzaine de points
+     * les pastilles se chevauchent et deviennent illisibles.
+     */
+    valueLabels?: boolean;
+    /**
+     * Masque la graduation de l'axe des ordonnees, lignes de fond gardees.
+     * A n'activer qu'avec `valueLabels` : sans graduation NI etiquette, le
+     * graphe ne porte plus aucun chiffre.
+     */
+    hideValueAxis?: boolean;
+    /** Position de la legende. `bottom` degage le haut du graphe. */
+    legendPosition?: 'top' | 'bottom';
+    /**
+     * Ancre l'axe a zero quand toutes les valeurs sont positives. Sans ca
+     * ECharts cadre sur l'amplitude des donnees et exagere les variations :
+     * une serie qui oscille de 3 % occupe alors toute la hauteur.
+     * Ignore des qu'une valeur est negative, ou l'axe doit descendre plus bas.
+     */
+    startAtZero?: boolean;
+    /** Formate les valeurs, dans les etiquettes comme dans l'infobulle. */
+    valueFormatter?: (value: number) => string;
 }): {
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    } | {
+        valueFormatter: (value: unknown) => string;
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
     legend: {
-        top: number;
         textStyle: {
             color: string;
             fontSize: number;
             fontFamily: string;
         };
+        bottom: number;
+        left: string;
+    } | {
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        top: number;
     } | undefined;
     grid: {
         left: number;
@@ -322,7 +375,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         type: string;
         data: (string | number)[];
     };
-    yAxis: {
+    yAxis: ({
+        min: number | undefined;
         type: string;
         name: string | undefined;
         nameLocation: string;
@@ -334,21 +388,38 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             align: string;
         };
         axisLabel: {
+            show: boolean;
+            fontSize?: undefined;
+            color?: undefined;
+            fontFamily?: undefined;
+        } | {
             fontSize: number;
             color: string;
             fontFamily: string;
+            show?: undefined;
         };
         axisLine: {
+            show: boolean;
+            lineStyle?: undefined;
+        } | {
             lineStyle: {
                 color: string;
             };
+            show?: undefined;
         };
+        axisTick: {
+            show: boolean;
+        } | undefined;
         splitLine: {
             lineStyle: {
                 color: string;
             };
         };
-    } | ({
+    } | {
+        splitLine: {
+            show: boolean;
+        };
+        min: number | undefined;
         type: string;
         name: string | undefined;
         nameLocation: string;
@@ -360,24 +431,30 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             align: string;
         };
         axisLabel: {
+            show: boolean;
+            fontSize?: undefined;
+            color?: undefined;
+            fontFamily?: undefined;
+        } | {
             fontSize: number;
             color: string;
             fontFamily: string;
+            show?: undefined;
         };
         axisLine: {
+            show: boolean;
+            lineStyle?: undefined;
+        } | {
             lineStyle: {
                 color: string;
             };
+            show?: undefined;
         };
-        splitLine: {
-            lineStyle: {
-                color: string;
-            };
-        };
-    } | {
-        splitLine: {
+        axisTick: {
             show: boolean;
-        };
+        } | undefined;
+    })[] | {
+        min: number | undefined;
         type: string;
         name: string | undefined;
         nameLocation: string;
@@ -389,16 +466,34 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             align: string;
         };
         axisLabel: {
+            show: boolean;
+            fontSize?: undefined;
+            color?: undefined;
+            fontFamily?: undefined;
+        } | {
             fontSize: number;
             color: string;
             fontFamily: string;
+            show?: undefined;
         };
         axisLine: {
+            show: boolean;
+            lineStyle?: undefined;
+        } | {
+            lineStyle: {
+                color: string;
+            };
+            show?: undefined;
+        };
+        axisTick: {
+            show: boolean;
+        } | undefined;
+        splitLine: {
             lineStyle: {
                 color: string;
             };
         };
-    })[];
+    };
     series: {
         type: string;
         name: string | undefined;
@@ -408,6 +503,20 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         step: string | undefined;
         symbol: string;
         symbolSize: number;
+        label: {
+            show: boolean;
+            position: string;
+            distance: number;
+            fontSize: number;
+            fontFamily: string;
+            color: string;
+            backgroundColor: string;
+            padding: number[];
+            borderRadius: number;
+            formatter: (p: {
+                value: number | null;
+            }) => string;
+        } | undefined;
         lineStyle: {
             color: string;
             width: number;
@@ -440,17 +549,6 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     textStyle: {
         fontFamily: string;
     };
-    tooltip: {
-        trigger: string;
-        backgroundColor: string;
-        textStyle: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-        };
-        borderColor: string;
-        borderWidth: number;
-    };
 };
 /** Donut. Au-dela de 6 parts, regrouper le reste en "Autres". */
 export declare function rmDonutOption(data: {

package/dist/runtime/utils/chart.js

@@ -90,14 +90,15 @@ export function rmBaseOption(theme, decal = false) {
     }
   };
 }
-const valueAxis = (theme, label) => ({
+const valueAxis = (theme, label, hidden = false) => ({
   type: "value",
-  name: label,
+  name: hidden ? void 0 : label,
   nameLocation: "end",
   nameGap: 12,
   nameTextStyle: { fontSize: 10, color: theme.dimmedColor, fontFamily: FONT, align: "left" },
-  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
-  axisLine: { lineStyle: { color: theme.axisLine } },
+  axisLabel: hidden ? { show: false } : { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+  axisLine: hidden ? { show: false } : { lineStyle: { color: theme.axisLine } },
+  axisTick: hidden ? { show: false } : void 0,
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
 const axisCommon = (theme) => ({
@@ -145,21 +146,54 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
   };
 }
 export function rmLineOption(categories, series, theme, palette, options = {}) {
-  const { area = false, step = false, smooth = true, decal = false, axisLabels } = options;
+  const {
+    area = false,
+    step = false,
+    smooth = true,
+    decal = false,
+    axisLabels,
+    valueLabels = false,
+    hideValueAxis = false,
+    legendPosition = "top",
+    startAtZero = false,
+    valueFormatter
+  } = options;
   const dual = series.some((s) => s.axis === 1);
+  const bottomLegend = legendPosition === "bottom";
+  const format = (value) => valueFormatter ? valueFormatter(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);
   return {
-    ...rmBaseOption(theme, decal),
+    ...base,
+    tooltip: valueFormatter ? {
+      ...base.tooltip,
+      valueFormatter: (value) => typeof value === "number" ? format(value) : ""
+    } : base.tooltip,
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.
-    legend: series.length > 1 || dual ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
-    grid: { left: 48, right: dual ? 56 : 16, top: dual ? 40 : 24, bottom: 36, containLabel: true },
+    legend: series.length > 1 || dual ? {
+      ...bottomLegend ? { bottom: 0, left: "center" } : { top: 0 },
+      textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT }
+    } : void 0,
+    grid: {
+      // Sans graduation a gauche, la gouttiere de 48 px ne sert plus qu'a
+      // laisser depasser la premiere pastille de valeur.
+      left: hideValueAxis ? 24 : 48,
+      right: dual ? 56 : 16,
+      // Les pastilles du point le plus haut depassent la courbe : sans marge
+      // supplementaire en haut, ECharts les rogne.
+      top: dual ? 40 : valueLabels ? 32 : 24,
+      bottom: bottomLegend ? 56 : 36,
+      containLabel: true
+    },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
     yAxis: dual ? [
-      valueAxis(theme, axisLabels?.[0]),
+      { ...valueAxis(theme, axisLabels?.[0], hideValueAxis), min: floorAtZero ? 0 : void 0 },
       // Le second axe ne rejoue pas la grille : deux grilles superposees
       // rendent le fond illisible.
-      { ...valueAxis(theme, axisLabels?.[1]), splitLine: { show: false } }
-    ] : valueAxis(theme, axisLabels?.[0]),
+      { ...valueAxis(theme, axisLabels?.[1], hideValueAxis), splitLine: { show: false }, min: floorAtZero ? 0 : void 0 }
+    ] : { ...valueAxis(theme, axisLabels?.[0], hideValueAxis), min: floorAtZero ? 0 : void 0 },
     series: series.map((s, i) => {
       const color = s.color ?? palette[i % palette.length];
       return {
@@ -169,8 +203,22 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
         data: s.data,
         smooth: step ? false : smooth,
         step: step ? "end" : void 0,
-        symbol: "circle",
+        // La pastille de valeur marque deja le point : garder en plus le
+        // symbole empile deux marqueurs au meme endroit.
+        symbol: valueLabels ? "none" : "circle",
         symbolSize: 5,
+        label: valueLabels ? {
+          show: true,
+          position: "top",
+          distance: 6,
+          fontSize: 11,
+          fontFamily: FONT,
+          color: "#FFFFFF",
+          backgroundColor: color,
+          padding: [3, 5],
+          borderRadius: 2,
+          formatter: (p) => p.value === null || p.value === void 0 ? "" : format(p.value)
+        } : void 0,
         lineStyle: { color, width: 2.5 },
         itemStyle: { color },
         areaStyle: area ? {

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

@@ -25,3 +25,14 @@ export declare const rmBig: (n: number) => string;
 export declare const rmPct: (n: number, digits?: number) => string;
 /** "8,7" - decimale francaise sans unite (ratios : HR, OR, taux). */
 export declare const rmDecimal: (n: number, digits?: number) => string;
+/**
+ * "18,8 M" · "345 k" · "1,2 Md" - grands nombres abreges SANS unite, pour
+ * les etiquettes de graphe ou l'espace manque. Distinct de `rmBig`, qui colle
+ * un € et ne vaut donc que pour des montants ; ici on compte des boites, des
+ * patients, des actes.
+ *
+ * Passe par `Intl` en `fr-FR` et non par un suffixe anglais code a la main :
+ * la virgule decimale et l'espace insecable avant le suffixe sont la regle
+ * francaise, y compris sur un graphe.
+ */
+export declare const rmCompact: (n: number) => string;

package/dist/runtime/utils/format.js

@@ -5,3 +5,4 @@ export const rmPrice = (n) => n.toLocaleString("fr-FR") + " \u20AC";
 export const rmBig = (n) => n >= 1e9 ? (n / 1e9).toFixed(1).replace(".", ",") + " Md\u20AC" : n >= 1e6 ? (n / 1e6).toFixed(0) + " M\u20AC" : n >= 1e3 ? (n / 1e3).toFixed(0) + " k" : String(n);
 export const rmPct = (n, digits = 1) => (n > 0 ? "+" : "") + n.toFixed(digits).replace(".", ",") + " %";
 export const rmDecimal = (n, digits = 1) => n.toFixed(digits).replace(".", ",");
+export const rmCompact = (n) => new Intl.NumberFormat("fr-FR", { notation: "compact", maximumFractionDigits: 1 }).format(n);

package/package.json

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