@tekkare/romulus 0.1.40 → 0.1.42

package/dist/module.json

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

package/dist/runtime/components/LineChart.vue

@@ -11,7 +11,11 @@ import { rmCompact, rmNumber } from '../utils/format'
 const props = withDefaults(defineProps<{
   categories: (string | number)[]
   series: RmSeriesInput[]
-  /** Remplissage degrade sous la courbe. */
+  /**
+   * Remplissage degrade sous la courbe. Laisse libre, il se pose tout seul
+   * jusqu'a cinq courbes et se retire au-dela, ou les zones se recouvrent.
+   * `true` ou `false` tranche a la place de la regle.
+   */
   area?: boolean
   /** Marche d'escalier : prix, taux de remboursement, decisions datees. */
   step?: boolean
@@ -47,13 +51,13 @@ const props = withDefaults(defineProps<{
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
-  area: false,
+  area: undefined,
   step: false,
   smooth: true,
   axisLabels: undefined,
   valueLabels: false,
   hideValueAxis: false,
-  legendPosition: 'top',
+  legendPosition: 'bottom',
   startAtZero: false,
   numberFormat: undefined,
   height: 'standard',

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

@@ -136,13 +136,21 @@ export interface RmSeriesInput {
 /** Bar chart vertical, une ou plusieurs series, empilable. */
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
     legend: {
-        top: number;
+        bottom: number;
+        left: string;
         textStyle: {
             color: string;
             fontSize: number;
             fontFamily: string;
         };
     } | undefined;
+    grid: {
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+        containLabel: boolean;
+    };
     xAxis: {
         splitLine: {
             show: boolean;
@@ -199,13 +207,6 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     textStyle: {
         fontFamily: string;
     };
-    grid: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-        containLabel: boolean;
-    };
     tooltip: {
         trigger: string;
         backgroundColor: string;
@@ -307,6 +308,10 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
 };
 /** Line ou area chart. `step` produit la marche d'escalier des series de prix. */
 export declare function rmLineOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], options?: {
+    /**
+     * Remplissage degrade sous la courbe. Non precise : automatique jusqu'a
+     * AREA_MAX_SERIES courbes.
+     */
     area?: boolean;
     step?: boolean;
     smooth?: boolean;
@@ -325,7 +330,12 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
      * graphe ne porte plus aucun chiffre.
      */
     hideValueAxis?: boolean;
-    /** Position de la legende. `bottom` degage le haut du graphe. */
+    /**
+     * Position de la legende. Par defaut sous le graphe : la carte porte deja
+     * son titre en haut, et une legende juste dessous se lit comme un
+     * sous-titre. En bas, elle se lit comme ce qu'elle est, la cle des
+     * couleurs, une fois la courbe regardee.
+     */
     legendPosition?: 'top' | 'bottom';
     /**
      * Ancre l'axe a zero quand toutes les valeurs sont positives. Sans ca

package/dist/runtime/utils/chart.js

@@ -120,7 +120,10 @@ const axisCommon = (theme) => ({
 export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
   return {
     ...rmBaseOption(theme, decal),
-    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    legend: series.length > 1 ? { bottom: 0, left: "center", textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : 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) },
     series: series.map((s, i) => ({
@@ -158,17 +161,19 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
 }
 export function rmLineOption(categories, series, theme, palette, options = {}) {
   const {
-    area = false,
+    area,
     step = false,
     smooth = true,
     decal = false,
     axisLabels,
     valueLabels = false,
     hideValueAxis = false,
-    legendPosition = "top",
+    legendPosition = "bottom",
     startAtZero = false,
     valueFormatter
   } = options;
+  const AREA_MAX_SERIES = 5;
+  const filled = area ?? series.length <= AREA_MAX_SERIES;
   const dual = series.some((s) => s.axis === 1);
   const bottomLegend = legendPosition === "bottom";
   const format = (value) => valueFormatter ? valueFormatter(value) : String(value);
@@ -222,7 +227,9 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
         // second marqueur au meme endroit. On l'annule par sa taille et non
         // par `symbol: 'none'` : ECharts accroche les etiquettes aux
         // symboles, les supprimer supprime aussi les etiquettes.
-        symbolSize: valueLabels ? 0 : 5,
+        // Le point est la cible de survol : trop petit, l'infobulle se derobe
+        // et les series courtes n'ont plus de reperes lisibles.
+        symbolSize: valueLabels ? 0 : 8,
         label: valueLabels ? {
           show: true,
           position: "top",
@@ -237,7 +244,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
         } : void 0,
         lineStyle: { color, width: 2.5 },
         itemStyle: { color },
-        areaStyle: area ? {
+        areaStyle: filled ? {
           color: {
             type: "linear",
             x: 0,

package/package.json

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