[{"data":1,"prerenderedAt":935},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants_statistiques":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants_statistiques":934},{"id":4,"title":5,"body":6,"description":921,"extension":922,"meta":923,"navigation":925,"path":930,"seo":931,"stem":932,"__hash__":933},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fcomposants_statistiques.md","Carte de statistique (stat_card)",{"type":7,"value":8,"toc":911},"minimark",[9,19,31,34,72,77,251,254,258,439,446,515,518,522,590,594,600,845,852,888,892,907],[10,11,13,14,18],"h1",{"id":12},"carte-de-statistique-stat_card","Carte de statistique (",[15,16,17],"code",{},"stat_card",")",[20,21,22,25,26,30],"p",{},[15,23,24],{},"frappe.ui.stat_card"," affiche un indicateur : un libellé, une valeur en grand, puis une tendance ou une légende. La page appelante fournit la valeur déjà calculée. Contrairement à une ",[27,28,29],"strong",{},"Carte numérique"," (Number Card), la carte n'est liée à aucun document et ne lance aucune requête.",[20,32,33],{},"Le composant est disponible dans le desk. Il renvoie un élément jQuery.",[35,36,39],"callout",{"color":37,"icon":38},"info","i-lucide-info",[20,40,41,42,45,46,49,50,53,54,57,58,61,62,65,66,71],{},"Les anciens composants ",[15,43,44],{},"frappe.ui.bar_list"," et ",[15,47,48],{},"frappe.ui.donut"," n'existent plus. Pour des barres horizontales ou un anneau, utilisez ",[15,51,52],{},"frappe.ui.chart"," (type ",[15,55,56],{},"bar"," avec ",[15,59,60],{},"barOptions.horizontal",", ou type ",[15,63,64],{},"donut","). Voir ",[67,68,70],"a",{"href":69},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fgraphiques","Graphiques",".",[73,74,76],"h2",{"id":75},"afficher-une-carte","Afficher une carte",[78,79,84],"pre",{"className":80,"code":81,"language":82,"meta":83,"style":83},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const $card = frappe.ui.stat_card({\n    label: __(\"Net Sales\"),\n    value: format_currency(120000),\n    delta: { value: 12, suffix: __(\"since last year\") },\n});\n$(page.body).append($card);\n","js","",[15,85,86,122,151,172,216,227],{"__ignoreMap":83},[87,88,91,95,99,103,106,108,111,113,116,119],"span",{"class":89,"line":90},"line",1,[87,92,94],{"class":93},"spNyl","const",[87,96,98],{"class":97},"sTEyZ"," $card ",[87,100,102],{"class":101},"sMK4o","=",[87,104,105],{"class":97}," frappe",[87,107,71],{"class":101},[87,109,110],{"class":97},"ui",[87,112,71],{"class":101},[87,114,17],{"class":115},"s2Zo4",[87,117,118],{"class":97},"(",[87,120,121],{"class":101},"{\n",[87,123,125,129,132,135,137,140,144,146,148],{"class":89,"line":124},2,[87,126,128],{"class":127},"swJcz","    label",[87,130,131],{"class":101},":",[87,133,134],{"class":115}," __",[87,136,118],{"class":97},[87,138,139],{"class":101},"\"",[87,141,143],{"class":142},"sfazB","Net Sales",[87,145,139],{"class":101},[87,147,18],{"class":97},[87,149,150],{"class":101},",\n",[87,152,154,157,159,162,164,168,170],{"class":89,"line":153},3,[87,155,156],{"class":127},"    value",[87,158,131],{"class":101},[87,160,161],{"class":115}," format_currency",[87,163,118],{"class":97},[87,165,167],{"class":166},"sbssI","120000",[87,169,18],{"class":97},[87,171,150],{"class":101},[87,173,175,178,180,183,186,188,191,194,197,199,201,203,205,208,210,213],{"class":89,"line":174},4,[87,176,177],{"class":127},"    delta",[87,179,131],{"class":101},[87,181,182],{"class":101}," {",[87,184,185],{"class":127}," value",[87,187,131],{"class":101},[87,189,190],{"class":166}," 12",[87,192,193],{"class":101},",",[87,195,196],{"class":127}," suffix",[87,198,131],{"class":101},[87,200,134],{"class":115},[87,202,118],{"class":97},[87,204,139],{"class":101},[87,206,207],{"class":142},"since last year",[87,209,139],{"class":101},[87,211,212],{"class":97},") ",[87,214,215],{"class":101},"},\n",[87,217,219,222,224],{"class":89,"line":218},5,[87,220,221],{"class":101},"}",[87,223,18],{"class":97},[87,225,226],{"class":101},";\n",[87,228,230,233,236,238,241,243,246,249],{"class":89,"line":229},6,[87,231,232],{"class":115},"$",[87,234,235],{"class":97},"(page",[87,237,71],{"class":101},[87,239,240],{"class":97},"body)",[87,242,71],{"class":101},[87,244,245],{"class":115},"append",[87,247,248],{"class":97},"($card)",[87,250,226],{"class":101},[20,252,253],{},"La carte affiche « 120 000,00 € » et, en dessous, une flèche verte « +12% since last year ».",[73,255,257],{"id":256},"options","Options",[259,260,261,277],"table",{},[262,263,264],"thead",{},[265,266,267,271,274],"tr",{},[268,269,270],"th",{},"Option",[268,272,273],{},"Type",[268,275,276],{},"Rôle",[278,279,280,296,329,347,364,378,395,410,425],"tbody",{},[265,281,282,288,293],{},[283,284,285],"td",{},[15,286,287],{},"label",[283,289,290],{},[15,291,292],{},"string",[283,294,295],{},"Titre court au-dessus de la valeur. Affiché comme texte.",[265,297,298,303,318],{},[283,299,300],{},[15,301,302],{},"value",[283,304,305,307,308,307,311,314,315],{},[15,306,292],{},", ",[15,309,310],{},"number",[15,312,313],{},"Element"," ou ",[15,316,317],{},"jQuery",[283,319,320,321,324,325,328],{},"Valeur principale, déjà formatée. Avec ",[15,322,323],{},"null"," ou sans valeur, la carte affiche « — » et « Aucune donnée ». La valeur ",[15,326,327],{},"0"," est une valeur valide.",[265,330,331,336,341],{},[283,332,333],{},[15,334,335],{},"delta",[283,337,338],{},[15,339,340],{},"Object",[283,342,343,344,71],{},"Ligne de tendance sous la valeur. Elle remplace ",[15,345,346],{},"caption",[265,348,349,353,361],{},[283,350,351],{},[15,352,346],{},[283,354,355,307,357,314,359],{},[15,356,292],{},[15,358,313],{},[15,360,317],{},[283,362,363],{},"Ligne grisée sous la valeur.",[265,365,366,371,375],{},[283,367,368],{},[15,369,370],{},"dot",[283,372,373],{},[15,374,292],{},[283,376,377],{},"Couleur CSS ou jeton de couleur d'une pastille avant le libellé. Elle relie la carte à une série d'un graphique.",[265,379,380,385,389],{},[283,381,382],{},[15,383,384],{},"icon",[283,386,387],{},[15,388,292],{},[283,390,391,392,394],{},"Icône Lucide avant le libellé. Ignorée si ",[15,393,370],{}," est fourni.",[265,396,397,402,407],{},[283,398,399],{},[15,400,401],{},"loading",[283,403,404],{},[15,405,406],{},"boolean",[283,408,409],{},"Affiche des squelettes de chargement à la place de la valeur. Le libellé reste visible.",[265,411,412,417,422],{},[283,413,414],{},[15,415,416],{},"onclick",[283,418,419],{},[15,420,421],{},"function",[283,423,424],{},"Rend la carte cliquable : clic, touche Entrée ou Espace.",[265,426,427,432,436],{},[283,428,429],{},[15,430,431],{},"css_class",[283,433,434],{},[15,435,292],{},[283,437,438],{},"Classes CSS supplémentaires sur l'élément racine.",[440,441,443,444],"h3",{"id":442},"objet-delta","Objet ",[15,445,335],{},[259,447,448,459],{},[262,449,450],{},[265,451,452,455,457],{},[268,453,454],{},"Clé",[268,456,273],{},[268,458,276],{},[278,460,461,480,501],{},[265,462,463,467,471],{},[283,464,465],{},[15,466,302],{},[283,468,469],{},[15,470,310],{},[283,472,473,474,314,477,71],{},"Variation en pourcentage, avec son signe : ",[15,475,476],{},"12.5",[15,478,479],{},"-4",[265,481,482,487,491],{},[283,483,484],{},[15,485,486],{},"positive_is_good",[283,488,489],{},[15,490,406],{},[283,492,493,496,497,500],{},[15,494,495],{},"true"," par défaut. Mettez ",[15,498,499],{},"false"," quand une hausse est mauvaise (retards, résiliations) : une hausse s'affiche alors en rouge.",[265,502,503,508,512],{},[283,504,505],{},[15,506,507],{},"suffix",[283,509,510],{},[15,511,292],{},[283,513,514],{},"Texte grisé après le pourcentage, par exemple « depuis l'an dernier ».",[20,516,517],{},"Une variation nulle affiche « 0% » en ton neutre. La valeur est arrondie à une décimale.",[73,519,521],{"id":520},"états-de-la-carte","États de la carte",[259,523,524,537],{},[262,525,526],{},[265,527,528,531,534],{},[268,529,530],{},"État",[268,532,533],{},"Condition",[268,535,536],{},"Affichage",[278,538,539,558,573],{},[265,540,541,544,549],{},[283,542,543],{},"Chargement",[283,545,546],{},[15,547,548],{},"loading: true",[283,550,551,552,555,556,71],{},"Libellé et squelettes. L'attribut ",[15,553,554],{},"aria-busy"," vaut ",[15,557,495],{},[265,559,560,563,570],{},[283,561,562],{},"Vide",[283,564,565,555,567,569],{},[15,566,302],{},[15,568,323],{}," ou est absent",[283,571,572],{},"« — » et « Aucune donnée ».",[265,574,575,578,583],{},[283,576,577],{},"Données",[283,579,580,582],{},[15,581,302],{}," est fourni",[283,584,585,586,314,588,71],{},"Valeur, puis ",[15,587,335],{},[15,589,346],{},[73,591,593],{"id":592},"afficher-un-groupe-de-cartes","Afficher un groupe de cartes",[20,595,596,599],{},[15,597,598],{},"frappe.ui.stat_cards"," construit un groupe à partir d'une liste d'options.",[78,601,603],{"className":80,"code":602,"language":82,"meta":83,"style":83},"frappe.ui.stat_cards({\n    layout: \"grid\",\n    items: [\n        { label: __(\"Devis ouverts\"), value: 14, icon: \"file-text\" },\n        {\n            label: __(\"Factures en retard\"),\n            value: 3,\n            delta: { value: 50, positive_is_good: false, suffix: __(\"vs mois dernier\") },\n        },\n        { label: __(\"Chiffre d'affaires\"), loading: true },\n    ],\n});\n",[15,604,605,623,640,650,699,704,726,739,788,794,828,836],{"__ignoreMap":83},[87,606,607,610,612,614,616,619,621],{"class":89,"line":90},[87,608,609],{"class":97},"frappe",[87,611,71],{"class":101},[87,613,110],{"class":97},[87,615,71],{"class":101},[87,617,618],{"class":115},"stat_cards",[87,620,118],{"class":97},[87,622,121],{"class":101},[87,624,625,628,630,633,636,638],{"class":89,"line":124},[87,626,627],{"class":127},"    layout",[87,629,131],{"class":101},[87,631,632],{"class":101}," \"",[87,634,635],{"class":142},"grid",[87,637,139],{"class":101},[87,639,150],{"class":101},[87,641,642,645,647],{"class":89,"line":153},[87,643,644],{"class":127},"    items",[87,646,131],{"class":101},[87,648,649],{"class":97}," [\n",[87,651,652,655,658,660,662,664,666,669,671,673,675,677,679,682,684,687,689,691,694,696],{"class":89,"line":174},[87,653,654],{"class":101},"        {",[87,656,657],{"class":127}," label",[87,659,131],{"class":101},[87,661,134],{"class":115},[87,663,118],{"class":97},[87,665,139],{"class":101},[87,667,668],{"class":142},"Devis ouverts",[87,670,139],{"class":101},[87,672,18],{"class":97},[87,674,193],{"class":101},[87,676,185],{"class":127},[87,678,131],{"class":101},[87,680,681],{"class":166}," 14",[87,683,193],{"class":101},[87,685,686],{"class":127}," icon",[87,688,131],{"class":101},[87,690,632],{"class":101},[87,692,693],{"class":142},"file-text",[87,695,139],{"class":101},[87,697,698],{"class":101}," },\n",[87,700,701],{"class":89,"line":218},[87,702,703],{"class":101},"        {\n",[87,705,706,709,711,713,715,717,720,722,724],{"class":89,"line":229},[87,707,708],{"class":127},"            label",[87,710,131],{"class":101},[87,712,134],{"class":115},[87,714,118],{"class":97},[87,716,139],{"class":101},[87,718,719],{"class":142},"Factures en retard",[87,721,139],{"class":101},[87,723,18],{"class":97},[87,725,150],{"class":101},[87,727,729,732,734,737],{"class":89,"line":728},7,[87,730,731],{"class":127},"            value",[87,733,131],{"class":101},[87,735,736],{"class":166}," 3",[87,738,150],{"class":101},[87,740,742,745,747,749,751,753,756,758,761,763,767,769,771,773,775,777,779,782,784,786],{"class":89,"line":741},8,[87,743,744],{"class":127},"            delta",[87,746,131],{"class":101},[87,748,182],{"class":101},[87,750,185],{"class":127},[87,752,131],{"class":101},[87,754,755],{"class":166}," 50",[87,757,193],{"class":101},[87,759,760],{"class":127}," positive_is_good",[87,762,131],{"class":101},[87,764,766],{"class":765},"sfNiH"," false",[87,768,193],{"class":101},[87,770,196],{"class":127},[87,772,131],{"class":101},[87,774,134],{"class":115},[87,776,118],{"class":97},[87,778,139],{"class":101},[87,780,781],{"class":142},"vs mois dernier",[87,783,139],{"class":101},[87,785,212],{"class":97},[87,787,215],{"class":101},[87,789,791],{"class":89,"line":790},9,[87,792,793],{"class":101},"        },\n",[87,795,797,799,801,803,805,807,809,812,814,816,818,821,823,826],{"class":89,"line":796},10,[87,798,654],{"class":101},[87,800,657],{"class":127},[87,802,131],{"class":101},[87,804,134],{"class":115},[87,806,118],{"class":97},[87,808,139],{"class":101},[87,810,811],{"class":142},"Chiffre d'affaires",[87,813,139],{"class":101},[87,815,18],{"class":97},[87,817,193],{"class":101},[87,819,820],{"class":127}," loading",[87,822,131],{"class":101},[87,824,825],{"class":765}," true",[87,827,698],{"class":101},[87,829,831,834],{"class":89,"line":830},11,[87,832,833],{"class":97},"    ]",[87,835,150],{"class":101},[87,837,839,841,843],{"class":89,"line":838},12,[87,840,221],{"class":101},[87,842,18],{"class":97},[87,844,226],{"class":101},[20,846,847,848,555,850,71],{},"Exemple fictif. La deuxième carte affiche « +50% » en rouge, car ",[15,849,486],{},[15,851,499],{},[259,853,854,866],{},[262,855,856],{},[265,857,858,863],{},[268,859,860],{},[15,861,862],{},"layout",[268,864,865],{},"Disposition",[278,867,868,878],{},[265,869,870,875],{},[283,871,872,874],{},[15,873,635],{}," (défaut)",[283,876,877],{},"Grille de cartes de même hauteur, avec retour à la ligne.",[265,879,880,885],{},[283,881,882],{},[15,883,884],{},"stack",[283,886,887],{},"Une seule colonne.",[73,889,891],{"id":890},"prévisualiser-le-composant","Prévisualiser le composant",[20,893,894,895,898,899,902,903,71],{},"La page ",[27,896,897],{},"Component Explorer"," (",[15,900,901],{},"\u002Fdesk\u002Fcomponent-explorer",") montre la carte avec des données d'exemple. Voir ",[67,904,906],{"href":905},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Futiliser_component_explorer","Explorer les composants de Dodock",[908,909,910],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":83,"searchDepth":90,"depth":124,"links":912},[913,914,918,919,920],{"id":75,"depth":124,"text":76},{"id":256,"depth":124,"text":257,"children":915},[916],{"id":442,"depth":153,"text":917},"Objet delta",{"id":520,"depth":124,"text":521},{"id":592,"depth":124,"text":593},{"id":890,"depth":124,"text":891},"Afficher un indicateur déjà calculé, avec son libellé, sa tendance ou une légende, grâce au composant JavaScript frappe.ui.stat_card.","md",{"slug":924,"reviewed":925,"last_verified":926,"sources":927},"composants-statistiques",true,"2026-11-04",[928,929],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fui\u002Fcomponents\u002Fstat_card.js","dodock@develop:frappe\u002Fcore\u002Fpage\u002Fcomponent_explorer\u002Fcomponent_explorer.js","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants_statistiques",{"title":5,"description":921},"2.next\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fcomposants_statistiques","nQuDEYZ6lLeaLyIqv6lUCvMuM8Cm1OSzlmAX3dELvpc",{},1793871737691]