[{"data":1,"prerenderedAt":277},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fstat-card":3,"component-meta:UiStatCard":178},{"id":4,"title":5,"body":6,"component":164,"dependsOn":165,"description":167,"emitDescriptions":168,"extension":169,"meta":170,"navigation":171,"order":172,"path":173,"seo":174,"status":175,"stem":176,"__hash__":177},"docs\u002Fdocs\u002Fcomponents\u002Fstat-card.md","StatCard",{"type":7,"value":8,"toc":155},"minimark",[9,13,18,23,31,42,64,67,71,74,78,89,93,115,119,134,148],[10,11,12],"p",{},"Одна метрика на дашборді: назва, число, зміна за період. Компонент нічого\nне рахує й не форматує — він показує те, що йому дали, і відповідає за\nєдину нетривіальну річ: як пофарбувати зміну.",[14,15],"component-preview",{"name":16,"stage":17},"stat-card-basic","min-h-48",[19,20,22],"h2",{"id":21},"зростання-не-завжди-добре","Зростання не завжди добре",[10,24,25,26,30],{},"Найпоширеніша помилка такої плитки — фарбувати все зростання зеленим.\nДля виторгу це правильно, для відтоку клієнтів — навпаки: ",[27,28,29],"code",{},"+0,4 %"," відтоку\nце погана новина, пофарбована в зелене.",[10,32,33,34,37,38,41],{},"Тому знак і колір розведені. Знак ",[27,35,36],{},"delta"," дає стрілку, ",[27,39,40],{},"deltaGood"," каже,\nякий напрям вважати добрим:",[43,44,45,52,58],"ul",{},[46,47,48,51],"li",{},[27,49,50],{},"deltaGood=\"up\""," — більше краще (виторг, конверсія);",[46,53,54,57],{},[27,55,56],{},"deltaGood=\"down\""," — менше краще (відтік, час відповіді, відмови);",[46,59,60,63],{},[27,61,62],{},"deltaGood=\"none\""," — «краще» не визначено: стрілка лишається, кольору немає.",[14,65],{"name":66,"stage":17},"stat-card-deltas",[19,68,70],{"id":69},"api","API",[72,73],"component-api",{},[19,75,77],{"id":76},"коли-використовувати","Коли використовувати",[43,79,80,83,86],{},[46,81,82],{},"Рядок KPI над дашбордом або звітом.",[46,84,85],{},"Підсумок над таблицею: скільки записів, на яку суму, як змінилось.",[46,87,88],{},"Будь-де, де число важливіше за графік.",[19,90,92],{"id":91},"коли-не-використовувати","Коли НЕ використовувати",[43,94,95,105,112],{},[46,96,97,98,100,101,104],{},"Для показника без контексту порівняння: без ",[27,99,36],{}," і ",[27,102,103],{},"hint"," це просто\nчисло, і звичайний абзац упорається дешевше.",[46,106,107,108,111],{},"Як кнопку дії. Плитка з ",[27,109,110],{},"to"," — це посилання на звіт, а не спосіб щось\nзапустити.",[46,113,114],{},"Для рядів даних: п'ять плиток поспіль з тією самою метрикою за різні\nмісяці — це таблиця або графік.",[19,116,118],{"id":117},"доступність","Доступність",[10,120,121,122,125,126,129,130,133],{},"Стрілка ",[27,123,124],{},"▲","\u002F",[27,127,128],{},"▼"," має ",[27,131,132],{},"aria-hidden",", а поруч стоїть словесний еквівалент:\n«зростання на 12 відсотків». Без цього скрінрідер зачитує назву символа —\n«чорний трикутник вгору 12».",[10,135,136,137,140,141,144,145,147],{},"Коли видиме значення скорочене («1,2 млн»), передайте повне в ",[27,138,139],{},"valueLabel",":\nвоно піде в ",[27,142,143],{},"sr-only",", а видиме отримає ",[27,146,132],{},", щоб число не\nпрозвучало двічі.",[10,149,150,151,154],{},"Стан ",[27,152,153],{},"loading"," показує скелетони, зберігаючи висоту плитки — сітка\nдашборда не перебудовується в момент приходу даних.",{"title":156,"searchDepth":157,"depth":157,"links":158},"",2,[159,160,161,162,163],{"id":21,"depth":157,"text":22},{"id":69,"depth":157,"text":70},{"id":76,"depth":157,"text":77},{"id":91,"depth":157,"text":92},{"id":117,"depth":157,"text":118},"UiStatCard",[166],"app\u002Fcomponents\u002Fui\u002FUiSkeleton.vue","Плитка ключової метрики зі зміною за період і власним напрямом «краще».",{},"md",{},true,54,"\u002Fdocs\u002Fcomponents\u002Fstat-card",{"title":5,"description":167},"stable","docs\u002Fcomponents\u002Fstat-card","GWnFiHbsLLJ0zfZr1XlUXiH6khiEhCcb67j7Z1Ds1H0",{"mode":179,"prefetch":180,"preload":180,"filePath":181,"declarationPath":182,"pascalName":164,"kebabName":183,"chunkName":184,"priority":185,"_scanned":171,"meta":186},"all",false,"app\u002Fcomponents\u002Fui\u002FUiStatCard.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiStatCard.vue","ui-stat-card","components\u002Fui-stat-card",1,{"type":185,"props":187,"slots":249,"events":274,"exposed":275,"hash":276},[188,193,202,205,214,223,226,229,232,241],{"name":189,"global":180,"description":190,"tags":191,"required":171,"type":192,"schema":192},"label","Назва метрики. Коротка іменна група: «Замовлення», не «Скільки замовлень».",[],"string",{"name":194,"global":180,"description":195,"tags":196,"required":180,"type":197,"schema":198},"value","Головне число. Форматування — на боці споживача, компонент друкує рядок як є.",[],"string | number",{"kind":199,"type":197,"schema":200},"enum",{"0":192,"1":201},"number",{"name":36,"global":180,"description":203,"tags":204,"required":180,"type":201,"schema":201},"Зміна відносно попереднього періоду. ЗНАК визначає стрілку, а тон —\r\n`deltaGood`, і розводити їх обов'язково: для «Відмов» падіння зелене,\r\nдля «Виручки» — червоне.",[],{"name":206,"global":180,"default":207,"description":208,"tags":209,"required":180,"type":210,"schema":211},"deltaFormat","\"percent\"","Як друкувати `delta`: `12` → «+12 %» або «+12».",[],"\"percent\" | \"absolute\"",{"kind":199,"type":210,"schema":212},{"0":207,"1":213},"\"absolute\"",{"name":40,"global":180,"default":215,"description":216,"tags":217,"required":180,"type":218,"schema":219},"\"up\"","Який напрям вважати добрим. `none` лишає стрілку, але прибирає колір:\r\nметрика змінилась, а «краще» для неї не визначено.",[],"\"up\" | \"down\" | \"none\"",{"kind":199,"type":218,"schema":220},{"0":215,"1":221,"2":222},"\"down\"","\"none\"",{"name":103,"global":180,"description":224,"tags":225,"required":180,"type":192,"schema":192},"Підпис під дельтою: «проти минулого тижня».",[],{"name":139,"global":180,"description":227,"tags":228,"required":180,"type":192,"schema":192},"Повне значення для скрінрідера, коли видиме скорочене («1,2 млн»).\r\nБез нього буде зачитано саме скорочення.",[],{"name":110,"global":180,"description":230,"tags":231,"required":180,"type":192,"schema":192},"Робить плитку посиланням. Зберігає Ctrl+клік і середній клік.",[],{"name":233,"global":180,"default":234,"description":235,"tags":236,"required":180,"type":237,"schema":238},"size","\"md\"","Щільність плитки.",[],"\"md\" | \"sm\"",{"kind":199,"type":237,"schema":239},{"0":234,"1":240},"\"sm\"",{"name":153,"global":180,"description":242,"tags":243,"required":180,"type":244,"schema":245},"Показує скелетони, зберігаючи висоту плитки — сітка не перебудовується.",[],"boolean",{"kind":199,"type":244,"schema":246},{"0":247,"1":248},"false","true",[250,255,259,270],{"name":251,"type":252,"description":253,"tags":254,"schema":252},"icon","any","Іконка у верхньому правому куті плитки.",[],{"name":256,"type":252,"description":257,"tags":258,"schema":252},"trend","Спарклайн або міні-графік під значенням. Компонент нічого не малює сам.",[],{"name":194,"type":260,"description":261,"tags":262,"schema":263},"{ value: string | number; }","Власний рендер значення: чип, посилання, дві величини поруч.",[],{"kind":264,"type":260,"schema":265},"object",{"value":266},{"name":194,"global":180,"description":156,"tags":267,"required":171,"type":197,"schema":268},[],{"kind":199,"type":197,"schema":269},{"0":192,"1":201},{"name":271,"type":252,"description":272,"tags":273,"schema":252},"footer","Рядок під дельтою замість `hint`.",[],[],[],"SSXXZ4vrKddQ7uzwyIvPSv4cYnty-Mpm-pP0jjaXefI",1788072641125]