@tekkare/romulus 0.1.11 → 0.1.12

package/dist/module.json

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

package/dist/runtime/components/LineChart.vue

@@ -15,12 +15,18 @@ const props = withDefaults(defineProps<{
   /** Marche d'escalier : prix, taux de remboursement, decisions datees. */
   step?: boolean
   smooth?: boolean
+  /**
+   * Libelles des axes gauche et droit. A fournir des qu'une serie porte
+   * `axis: 1` : deux unites sur un graphe sans libelle d'axe se lisent mal.
+   */
+  axisLabels?: [string, string]
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
 }>(), {
   area: false,
   step: false,
   smooth: true,
+  axisLabels: undefined,
   height: 'standard',
   description: undefined,
 })
@@ -33,6 +39,7 @@ const option = computed(() =>
     step: props.step,
     smooth: props.smooth,
     decal: decal.value,
+    axisLabels: props.axisLabels,
   }),
 )
 </script>

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

@@ -100,6 +100,13 @@ export interface RmSeriesInput {
     color?: string;
     /** Cle d'empilement : deux series avec la meme cle s'empilent. */
     stack?: string;
+    /**
+     * Axe des ordonnees, 0 a gauche et 1 a droite. A n'utiliser que pour deux
+     * series d'UNITES differentes : deux axes sur la meme unite laissent croire
+     * a un ecart qui n'existe pas. Le libelle de chaque axe est alors
+     * obligatoire, sinon le lecteur ne sait pas quelle courbe lire ou.
+     */
+    axis?: 0 | 1;
 }
 /** Bar chart vertical, une ou plusieurs series, empilable. */
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
@@ -279,6 +286,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     step?: boolean;
     smooth?: boolean;
     decal?: boolean;
+    /** Libelles des deux axes, requis des qu'une serie porte `axis: 1`. */
+    axisLabels?: [string, string];
 }): {
     legend: {
         top: number;
@@ -288,6 +297,13 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             fontFamily: string;
         };
     } | undefined;
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
     xAxis: {
         splitLine: {
             show: boolean;
@@ -307,6 +323,16 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         data: (string | number)[];
     };
     yAxis: {
+        type: string;
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
         axisLabel: {
             fontSize: number;
             color: string;
@@ -322,11 +348,61 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
                 color: string;
             };
         };
+    } | ({
         type: string;
-    };
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    } | {
+        splitLine: {
+            show: boolean;
+        };
+        type: string;
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    })[];
     series: {
         type: string;
         name: string | undefined;
+        yAxisIndex: 0 | 1 | undefined;
         data: (number | null)[];
         smooth: boolean;
         step: string | undefined;
@@ -364,13 +440,6 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     textStyle: {
         fontFamily: string;
     };
-    grid: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-        containLabel: boolean;
-    };
     tooltip: {
         trigger: string;
         backgroundColor: string;

package/dist/runtime/utils/chart.js

@@ -90,6 +90,16 @@ export function rmBaseOption(theme, decal = false) {
     }
   };
 }
+const valueAxis = (theme, label) => ({
+  type: "value",
+  name: 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 } },
+  splitLine: { lineStyle: { color: theme.splitLine } }
+});
 const axisCommon = (theme) => ({
   axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
   axisLine: { lineStyle: { color: theme.axisLine } },
@@ -135,17 +145,27 @@ 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 } = options;
+  const { area = false, step = false, smooth = true, decal = false, axisLabels } = options;
+  const dual = series.some((s) => s.axis === 1);
   return {
     ...rmBaseOption(theme, decal),
-    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    // 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 },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
-    yAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: dual ? [
+      valueAxis(theme, axisLabels?.[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]),
     series: series.map((s, i) => {
       const color = s.color ?? palette[i % palette.length];
       return {
         type: "line",
         name: s.name,
+        yAxisIndex: dual ? s.axis ?? 0 : void 0,
         data: s.data,
         smooth: step ? false : smooth,
         step: step ? "end" : void 0,

package/package.json

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