Dessiner des graphiques dans le bureau

Le bureau dessine ses graphiques et ses cartes de nombres avec les composants graphiques de frappe-ui, via l'îlot frappe.chart. frappe.ui.chart accepte une configuration frappe-charts (l'ancien format) ou une configuration frappe-ui ; une configuration frappe-charts est convertie automatiquement, les applications n'ont rien à changer.

frappe.ui.chart

const chart = frappe.ui.chart(element, config);

• Si config est une configuration frappe-charts et que la case Utiliser les graphiques classiques est cochée dans les Paramètres Système (lue avec frappe.defaults.is_enabled("use_classic_charts")), le graphique est dessiné avec frappe-charts, comme avant.
• Sinon, le bureau monte l'îlot : frappe.ui.mount_island("frappe.chart", element, { config }). Une configuration frappe-charts passe d'abord par from_legacy_config().

frappe.ui.chart renvoie tout de suite une poignée :

Avec le rendu classique, la poignée est l'instance frappe-charts elle-même.

const chart = frappe.ui.chart(wrapper, {
    type: "bar",
    data: {
        labels: ["Janv.", "Févr.", "Mars"],
        datasets: [{ name: __("Ventes"), values: [12000, 15400, 9800] }],
    },
    barOptions: { horizontal: 1 },
});

Exemple fictif : une configuration frappe-charts, convertie automatiquement.

frappe.ui.chart.is_classic(config) indique si une configuration sera dessinée avec le rendu classique.

Types de l'îlot frappe.chart

L'îlot dessine les types bar, line, area, donut, funnel, heatmap, calendar-heatmap, percentage-bar, sankey, scatter et number (carte de nombres).

Une configuration frappe-charts est convertie en :

Un type inconnu affiche un message d'erreur dans la zone du graphique.

Règles de conversion de l'ancien format

L'adaptateur (frappe/public/js/frappe/ui/island/chart/legacy_config.js) applique les comportements de frappe-charts :

• Hauteur : 240 px quand la configuration ne précise pas height, sauf pour les cartes de nombres et les barres de pourcentage, dimensionnées sur leur contenu.
• Tranches : au-delà de 20 tranches (maxSlices), les tranches restantes sont regroupées dans une tranche grise « Others » ; les couleurs sont indexées par libellé, pas par position.
• Couleurs : les noms blue, light-blue, cyan, light-cyan, green, teal, light-green, light-teal, purple, violet, light-purple, light-violet, orange, light-orange, yellow, light-yellow, red, light-red, pink, light-pink deviennent des jetons var(--chart-categorical-N) ; grey/gray et light-grey/light-gray deviennent var(--ink-gray-4) et var(--ink-gray-2). Les autres valeurs (codes couleur) sont conservées.
• Axes : data.dates (une date ISO par libellé) place le graphique sur un axe temporel — le serveur des graphiques de tableau de bord envoie dates, le premier jour de chaque période. axisOptions.xIsSeries conserve les libellés comme axe de séries ; sinon l'axe est positionnel et le libellé est affiché par position.
• Séries : chartType (ou type) par jeu de données choisit la marque ; lineOptions.regionFill dessine une aire, lineOptions.spline lisse la courbe, valuesOverPoints affiche les valeurs sur les points, data.yMarkers devient des lignes de référence, barOptions.stacked empile les barres et barOptions.horizontal les oriente à l'horizontale.
• Heatmap : les clés en secondes Unix sont lues dans le fuseau horaire du navigateur ; sans plage, l'année glissante jusqu'à aujourd'hui est dessinée ; countLabel (ou count_label) nomme la valeur ; colors devient la palette.
• Valeurs : pour un donut ou une barre de pourcentage, les jeux de données sont additionnés par libellé ; une valeur nulle reste un creux, une valeur non numérique compte pour 0.

Les valeurs sont formatées comme le bureau formate un champ : fieldtype, options, precision et currency sont pris en compte, et les graduations d'axe sont abrégées (un axe en Currency conserve son symbole).

En mode développeur, une option frappe-charts que le nouveau rendu ne dessine pas est signalée une fois par page dans la console : frappe.ui.chart: "<clé>" is a frappe-charts option the new charts do not draw.

API dépréciées

frappe.Chart, frappe.utils.make_chart et frappe.ui.RealtimeChart dessinent toujours avec frappe-charts et sont dépréciées : elles affichent un avertissement une fois par page. Préférez frappe.ui.chart.

Construction

bench build construit les îlots de page du framework, dont l'îlot frappe.chart : aucun asset supplémentaire à livrer pour dessiner un graphique dans le bureau.