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