@tekkare/romulus 0.1.155 → 0.1.156

package/dist/module.json

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

package/dist/runtime/components/BarChart.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useChartTheme } from '../composables/useChartTheme'
-import { rmBarHorizontalOption, rmBarVerticalOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+import { rmBarHorizontalOption, rmBarVerticalOption, type RmBarLabelFormatter, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
 
 const props = withDefaults(defineProps<{
   /** Categories de l'axe : annees, libelles d'indicateur. */
@@ -15,8 +15,12 @@ const props = withDefaults(defineProps<{
   horizontal?: boolean
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
-  /** Formatage de la valeur en bout de barre (horizontal uniquement). */
-  labelFormatter?: (value: number) => string
+  /**
+   * Etiquette de chaque barre : en bout de barre a l'horizontale, au-dessus a
+   * la verticale. Sans elle, la valeur se lit sur l'axe et dans l'infobulle,
+   * ce qui suffit des que les barres sont nombreuses.
+   */
+  labelFormatter?: RmBarLabelFormatter
 }>(), {
   horizontal: false,
   height: 'standard',
@@ -36,7 +40,14 @@ const option = computed(() =>
         decal.value,
         props.labelFormatter,
       )
-    : rmBarVerticalOption(props.categories, props.series, theme.value, palette.value.cat, decal.value),
+    : rmBarVerticalOption(
+        props.categories,
+        props.series,
+        theme.value,
+        palette.value.cat,
+        decal.value,
+        props.labelFormatter,
+      ),
 )
 </script>
 

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

@@ -177,7 +177,13 @@ export interface RmSeriesInput {
     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): {
+/**
+ * Etiquette d'une barre. L'index est donne parce que la valeur seule ne suffit
+ * pas toujours : une part se lit contre un total que l'appelant tient a cote
+ * (« 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): {
     tooltip: {
         trigger: string;
         backgroundColor: string;
@@ -282,6 +288,17 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
             color: string;
             borderRadius: number[];
         };
+        label: {
+            show: boolean;
+            position: string;
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            formatter: (p: {
+                value: number;
+                dataIndex: number;
+            }) => string;
+        } | undefined;
     }[];
     backgroundColor: string;
     animation: boolean;
@@ -296,7 +313,7 @@ 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?: (value: number) => string): {
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
     grid: {
         left: number;
         right: number;
@@ -356,6 +373,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
             fontFamily: string;
             formatter: ((p: {
                 value: number;
+                dataIndex: number;
             }) => string) | undefined;
         };
     }[];

package/dist/runtime/utils/chart.js

@@ -140,7 +140,7 @@ const axisCommon = (theme) => ({
   axisLine: { lineStyle: { color: theme.axisLine } },
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter) {
   return {
     ...rmBaseOption(theme, decal),
     tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
@@ -155,7 +155,17 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
       name: s.name,
       stack: s.stack,
       data: s.data,
-      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] }
+      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] },
+      // L'etiquette ne se pose que si l'appelant la demande : sur une serie
+      // longue elle se chevaucherait, et l'axe dit deja la valeur.
+      label: formatter ? {
+        show: true,
+        position: "top",
+        fontSize: 11,
+        color: theme.mutedColor,
+        fontFamily: FONT,
+        formatter: (p) => formatter(p.value, p.dataIndex)
+      } : void 0
     }))
   };
 }
@@ -178,7 +188,7 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
         fontSize: 11,
         color: theme.mutedColor,
         fontFamily: FONT,
-        formatter: formatter ? (p) => formatter(p.value) : void 0
+        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : void 0
       }
     }]
   };

package/package.json

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