@tekkare/romulus 0.1.8 → 0.1.10

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

@@ -0,0 +1,475 @@
+/**
+ * Theme et constructeurs d'option ECharts.
+ *
+ * Porte depuis le design system : palettes et resolveur de `reference.html`
+ * (`window.OIP_PALETTES` / `CHART_THEME`), constructeurs d'option de
+ * `references/charts.md`. ECharts v5 est la librairie standard de tous les
+ * dashboards Tekkare ; ne pas en introduire une seconde.
+ *
+ * Les couleurs sont ici en litteral et non en `var(--...)` : ECharts peint
+ * dans un canvas SVG qu'il genere lui-meme, il ne resout pas les variables
+ * CSS. C'est la seule raison acceptee d'ecrire un hex hors tokens.
+ */
+export interface RmPalette {
+    /** Palette categorielle, 6 couleurs maximum sans ordre. Au-dela, passer en sequentiel ou regrouper en "Autres". */
+    cat: string[];
+    primary: string;
+    accent: string;
+    neutral: string;
+    /** Palette sequentielle, du plus clair au plus fonce : heatmaps, choroplethes. */
+    seq: string[];
+}
+/**
+ * Les quatre palettes du design system. `cvdSafe` est la palette Okabe-Ito,
+ * validee pour les trois principaux types de dyschromatopsie ; le violet OIP
+ * y devient le bleu #0072B2 qui joue le role de couleur primaire.
+ */
+export declare const RM_PALETTES: Record<string, RmPalette>;
+/** Palettes par verticale produit, cf. references/charts.md. */
+export declare const RM_PRODUCT_PALETTES: Record<string, string[]>;
+/** Palette divergente : negatif vers neutre vers positif. */
+export declare const RM_DIVERGING: string[];
+export interface RmChartTheme {
+    night: boolean;
+    textColor: string;
+    mutedColor: string;
+    dimmedColor: string;
+    splitLine: string;
+    axisLine: string;
+    tooltipBg: string;
+    tooltipText: string;
+    tooltipBorder: string;
+    backgroundColor: string;
+}
+export declare const rmChartTheme: (night: boolean) => RmChartTheme;
+/**
+ * Resout la palette active. En mode nuit, la variante *Dark prend le relais
+ * quand elle existe : les teintes du mode jour ne contrastent pas assez sur
+ * #0E0E14 et une serie devient illisible, ce qui est un bug d'accessibilite
+ * et pas un choix esthetique.
+ */
+export declare function rmPalette(name?: string, night?: boolean): RmPalette;
+/** Hauteurs normalisees du design system. */
+export declare const RM_CHART_HEIGHTS: {
+    readonly sparkline: 48;
+    readonly kpi: 80;
+    readonly compact: 200;
+    readonly standard: 260;
+    readonly large: 320;
+    readonly full: 360;
+};
+/**
+ * Socle commun a tous les graphes. `decal` active le double encodage par
+ * motifs : sur un graphe multi-series, la couleur seule ne suffit pas, c'est
+ * une regle du design system et non une option.
+ */
+export declare function rmBaseOption(theme: RmChartTheme, decal?: boolean): {
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+export interface RmSeriesInput {
+    name?: string;
+    data: (number | null)[];
+    color?: string;
+    /** Cle d'empilement : deux series avec la meme cle s'empilent. */
+    stack?: string;
+}
+/** 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;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | undefined;
+    xAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: (string | number)[];
+    };
+    yAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    series: {
+        type: string;
+        name: string | undefined;
+        stack: string | undefined;
+        data: (number | null)[];
+        itemStyle: {
+            color: string;
+            borderRadius: number[];
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+/** 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): {
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    xAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    yAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: string[];
+    };
+    series: {
+        type: string;
+        data: (number | null)[];
+        itemStyle: {
+            color: (params: {
+                dataIndex: number;
+            }) => string;
+            borderRadius: number[];
+        };
+        label: {
+            show: boolean;
+            position: string;
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            formatter: ((p: {
+                value: number;
+            }) => string) | undefined;
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: 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?: {
+    area?: boolean;
+    step?: boolean;
+    smooth?: boolean;
+    decal?: boolean;
+}): {
+    legend: {
+        top: number;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | undefined;
+    xAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        boundaryGap: boolean;
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: (string | number)[];
+    };
+    yAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    series: {
+        type: string;
+        name: string | undefined;
+        data: (number | null)[];
+        smooth: boolean;
+        step: string | undefined;
+        symbol: string;
+        symbolSize: number;
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+        };
+        areaStyle: {
+            color: {
+                type: string;
+                x: number;
+                y: number;
+                x2: number;
+                y2: number;
+                colorStops: {
+                    offset: number;
+                    color: string;
+                }[];
+            };
+        } | undefined;
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    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: {
+    name: string;
+    value: number;
+}[], theme: RmChartTheme, palette: string[], decal?: boolean): {
+    grid: undefined;
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+    legend: {
+        bottom: number;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+    series: {
+        type: string;
+        radius: string[];
+        center: string[];
+        data: {
+            value: number;
+            name: string;
+            itemStyle: {
+                color: string;
+            };
+        }[];
+        label: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+};
+/** Sparkline : pas d'axes, pas de tooltip, destinee a une cellule ou une tuile KPI. */
+export declare function rmSparklineOption(values: (number | null)[], color: string): {
+    backgroundColor: string;
+    animation: boolean;
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    xAxis: {
+        type: string;
+        show: boolean;
+        data: number[];
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+    };
+    tooltip: {
+        show: boolean;
+    };
+    series: {
+        type: string;
+        data: (number | null)[];
+        smooth: boolean;
+        symbol: string;
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        areaStyle: {
+            color: string;
+        };
+    }[];
+};

package/dist/runtime/utils/chart.js

@@ -0,0 +1,209 @@
+export const RM_PALETTES = {
+  default: {
+    cat: ["#2100AD", "#00D4A8", "#F59E0B", "#4164EE", "#EC4899", "#6B3FFF"],
+    primary: "#2100AD",
+    accent: "#6B3FFF",
+    neutral: "#D6CCFF",
+    seq: ["#EEF1FE", "#D6CCFF", "#B485FF", "#8B5CF6", "#6B3FFF", "#2100AD"]
+  },
+  defaultDark: {
+    cat: ["#9B7CFF", "#3DD9B9", "#FBBF24", "#7AA0FF", "#F472B6", "#B485FF"],
+    primary: "#9B7CFF",
+    accent: "#B485FF",
+    neutral: "#4A3F70",
+    seq: ["#1A1A24", "#2D2A42", "#4A3F70", "#7C5FE6", "#9B7CFF", "#D6CCFF"]
+  },
+  cvdSafe: {
+    cat: ["#0072B2", "#E69F00", "#009E73", "#CC79A7", "#56B4E9", "#F0E442"],
+    primary: "#0072B2",
+    accent: "#E69F00",
+    neutral: "#A3C9E2",
+    seq: ["#F0F7FB", "#D5E5F0", "#A3C9E2", "#56B4E9", "#0072B2", "#003E5C"]
+  },
+  cvdSafeDark: {
+    cat: ["#4DA8E5", "#FFB84D", "#3DD9A8", "#E5A0C8", "#7DD3F5", "#F5E76A"],
+    primary: "#4DA8E5",
+    accent: "#FFB84D",
+    neutral: "#3A4A5C",
+    seq: ["#1A1A24", "#2A3A4A", "#3A5A78", "#4DA8E5", "#7DD3F5", "#B3E5FC"]
+  }
+};
+export const RM_PRODUCT_PALETTES = {
+  generic: ["#2100AD", "#4164EE", "#7B9EF5", "#B8C8F8", "#DBDEF0"],
+  healthcare: ["#4164EE", "#1A2A8F", "#00D4A8", "#7B9EF5", "#B8C8F8"],
+  pharma: ["#F7520E", "#FF8C00", "#FFD600", "#FCA982", "#DBDEF0"],
+  discovery: ["#07816F", "#2ECC71", "#56CCF2", "#0DA38D", "#DBDEF0"]
+};
+export const RM_DIVERGING = ["#E53535", "#FCA5A5", "#F9F9FA", "#86EFAC", "#16A34A"];
+const THEME_DAY = {
+  night: false,
+  textColor: "#1E293B",
+  mutedColor: "#525670",
+  dimmedColor: "#878CA6",
+  splitLine: "#F0F1F7",
+  axisLine: "#DBDEF0",
+  tooltipBg: "#1E293B",
+  tooltipText: "#FFFFFF",
+  tooltipBorder: "#344159",
+  backgroundColor: "transparent"
+};
+const THEME_NIGHT = {
+  night: true,
+  textColor: "#E5E7F0",
+  mutedColor: "#B8BCD0",
+  dimmedColor: "#7B8099",
+  splitLine: "#2F2F40",
+  axisLine: "#3A3A4E",
+  tooltipBg: "#232330",
+  tooltipText: "#E5E7F0",
+  tooltipBorder: "#3A3A4E",
+  backgroundColor: "transparent"
+};
+export const rmChartTheme = (night) => night ? THEME_NIGHT : THEME_DAY;
+export function rmPalette(name = "default", night = false) {
+  const dark = `${name}Dark`;
+  if (night && RM_PALETTES[dark]) return RM_PALETTES[dark];
+  return RM_PALETTES[name] ?? RM_PALETTES.default;
+}
+export const RM_CHART_HEIGHTS = {
+  sparkline: 48,
+  kpi: 80,
+  compact: 200,
+  standard: 260,
+  large: 320,
+  full: 360
+};
+const FONT = "Figtree, system-ui, sans-serif";
+export function rmBaseOption(theme, decal = false) {
+  return {
+    backgroundColor: theme.backgroundColor,
+    animation: true,
+    aria: { enabled: true, decal: { show: decal } },
+    textStyle: { fontFamily: FONT },
+    grid: { left: 48, right: 16, top: 24, bottom: 36, containLabel: true },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: theme.tooltipBg,
+      textStyle: { color: theme.tooltipText, fontFamily: FONT, fontSize: 12 },
+      borderColor: theme.tooltipBorder,
+      borderWidth: 1
+    }
+  };
+}
+const axisCommon = (theme) => ({
+  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+  axisLine: { lineStyle: { color: theme.axisLine } },
+  splitLine: { lineStyle: { color: theme.splitLine } }
+});
+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,
+    xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false } },
+    yAxis: { type: "value", ...axisCommon(theme) },
+    series: series.map((s, i) => ({
+      type: "bar",
+      name: s.name,
+      stack: s.stack,
+      data: s.data,
+      itemStyle: { color: s.color ?? palette[i % palette.length], borderRadius: [3, 3, 0, 0] }
+    }))
+  };
+}
+export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter) {
+  return {
+    ...rmBaseOption(theme, decal),
+    grid: { left: 140, right: 60, top: 16, bottom: 24, containLabel: true },
+    xAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: { type: "category", data: labels, ...axisCommon(theme), splitLine: { show: false } },
+    series: [{
+      type: "bar",
+      data: values,
+      itemStyle: {
+        color: (params) => palette[params.dataIndex % palette.length],
+        borderRadius: [0, 3, 3, 0]
+      },
+      label: {
+        show: true,
+        position: "right",
+        fontSize: 11,
+        color: theme.mutedColor,
+        fontFamily: FONT,
+        formatter: formatter ? (p) => formatter(p.value) : void 0
+      }
+    }]
+  };
+}
+export function rmLineOption(categories, series, theme, palette, options = {}) {
+  const { area = false, step = false, smooth = true, decal = false } = options;
+  return {
+    ...rmBaseOption(theme, decal),
+    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
+    yAxis: { type: "value", ...axisCommon(theme) },
+    series: series.map((s, i) => {
+      const color = s.color ?? palette[i % palette.length];
+      return {
+        type: "line",
+        name: s.name,
+        data: s.data,
+        smooth: step ? false : smooth,
+        step: step ? "end" : void 0,
+        symbol: "circle",
+        symbolSize: 5,
+        lineStyle: { color, width: 2.5 },
+        itemStyle: { color },
+        areaStyle: area ? {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: `${color}30` },
+              { offset: 1, color: `${color}00` }
+            ]
+          }
+        } : void 0
+      };
+    })
+  };
+}
+export function rmDonutOption(data, theme, palette, decal = false) {
+  return {
+    ...rmBaseOption(theme, decal),
+    grid: void 0,
+    tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: "item" },
+    legend: { bottom: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } },
+    series: [{
+      type: "pie",
+      radius: ["45%", "70%"],
+      center: ["50%", "46%"],
+      data: data.map((d, i) => ({
+        value: d.value,
+        name: d.name,
+        itemStyle: { color: palette[i % palette.length] }
+      })),
+      label: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT }
+    }]
+  };
+}
+export function rmSparklineOption(values, color) {
+  return {
+    backgroundColor: "transparent",
+    animation: true,
+    grid: { left: 0, right: 0, top: 2, bottom: 2 },
+    xAxis: { type: "category", show: false, data: values.map((_, i) => i) },
+    yAxis: { type: "value", show: false },
+    tooltip: { show: false },
+    series: [{
+      type: "line",
+      data: values,
+      smooth: true,
+      symbol: "none",
+      lineStyle: { color, width: 1.5 },
+      areaStyle: { color: `${color}20` }
+    }]
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.16.0",
-    "@phosphor-icons/vue": "^2.2.1"
+    "@phosphor-icons/vue": "^2.2.1",
+    "echarts": "^5.6.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",