& Кашидани виджетҳо ва пешнамоишҳо

1) Консепсия ва сенарияҳо

Виджетҳои Drag & Drop блокҳои интерактивӣ мебошанд (кортҳои графикӣ, ҷадвалҳо, филтрҳо, тугмаҳои амал), ки корбар озодона дар рангҳо бо истинод ба шабака ҷойгир мекунад. Пешнамоишҳо - тарҳҳо ва услубҳои захирашуда (тарҳ + мавзӯъ + параметрҳо), ки метавонанд зуд татбиқ, мубодила ва таҳрир карда шаванд.

• Маҷмӯи панели панел аз блокҳои тайёр (кортҳои KPI, графикҳо, филтрҳо).
• Зуд тағир додани тарҳ тавассути презетаҳои "Паймон", "Таҳлил", "Презентатсия".
• Таҳрир: маҳсулот виджетҳоро ҷойгир мекунад, таҳлилгар манбаъҳоро таъсис медиҳад.
• Нашри танҳо барои ҷонибҳои манфиатдор.

2) Принсипҳои меъморӣ

1. Grid-аввал: ҷойгиршавӣ дар сутунҳои мантиқӣ/сатрҳо (12/24), пикселҳо - ҳосилаҳо.
2. Таркиш ва роҳнамо: дастурҳои магнитӣ, часпидан ба торҳо ва ҳамсояҳо, ҳамоҳангсозӣ.
3. Маҳдудият-огоҳӣ: маҳдудкунандаҳои андоза/ҷанба, мин/макс, қулф-ҷанба.
4. Бехатар бо нобаёнӣ: autosave доимӣ, нашри транзаксионӣ, бекор/дубора.
5. A11y-first: DND аз клавиатура ва тағиротҳои овозӣ.
6. Вақти омода: CRDT/OT барои ҷаласаҳои мултипликатори.
7. Мавзӯъ: нишонаҳои тарроҳӣ, пешнамоиши мавзӯъ, режими сабук/торик/контраст.
8. Портативӣ: содирот/воридот JSON/YAML; версияи ноҳиявӣ.

3) Модели маълумот (соддакардашуда)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) Шабака, лаҳзаҳо ва дастурҳо

Шабака: 12 баландгӯяк барои мизи корӣ, 6 планшет, 4 телефон; 'Сатри баландӣ' барои қатори амудии устувор якхела аст.
Лағжиш: лағжиш ба кунҷҳо/марказҳо; "магнитҳо" дар 4/8 px; дастурҳои оқил ҳангоми наздик шудан ба ҳамсояҳо.
Худкори ҷараён: интиқоли худкор дар зер ҳангоми бархӯрд; алгоритми "блокҳои афтидан".
Ҷавобгӯӣ: нуқтаҳои бозист → алтернативаи 'pos' барои ҳар як нуқтаи бозист.

5) Чорабиниҳо ва давлатҳои DND

События: 'кашидан', 'кашидан', 'кашидан', 'партофтан', 'тағир додан', 'тағир додан', 'тағир додан', 'тағир додан', 'интихоб кардан', 'гурӯҳ', 'гуруҳ', 'тағир додан', 'uddo', 'redo'.

• Ghost/Пешнамоиш - Роҳи шаффоф ҳангоми кашолакунӣ.
• Ҷойгузинҳо: минтақаҳои иҷозатдодашуда (сабз), манъшуда (сурх).
• Харитаи бархӯрд - зуд ҳисоб кардани ҳуҷайраҳои ишғолшуда (дарахти битсет/фосилавӣ).

6) Баланд бардоштан, ҳамоҳанг кардан, z-индекс

Барои нигоҳ доштани таносуб дар кунҷҳо + нигоҳ доред 'Shift'.
Ҳамоҳангсозии гурӯҳ: "чап/рост", "марказ", "баробар тақсим кунед".
Сатҳҳои такрорӣ: 'z' бо маҳдудияти диапазон, тугмаҳои пеш/қафо.

7) Гурӯҳҳо, контейнерҳо ва лонаҳо

Гурӯҳҳо: интихоби сершумор, кашолакунӣ ва тарки омехта, ҳамоҳангсозии гурӯҳ.
Контейнери виджет: ҷадвалҳо, аккордеонҳо, каруселҳо - онҳо тарзи қабули виджетҳои кӯдаконро медонанд.
Қатъи контейнер: шабакаи беруна ≠ дохилӣ (сутунҳои дигар).

8) Пешнамоиш (қолабҳо) ва версияҳо

Намудҳои пешнамоиш: тарҳ, мавзӯъ, маҷмӯи виҷет, тарҳ + додаҳо.
Версия: схемаҳои "семвер" ва муҳоҷират (харитаи саҳроӣ, пешфарз).

• Прессҳои миқёсан васеъ: шахсӣ, даста, глобалӣ; ҳуқуқи хондан/таҳрир кардан.
• Содирот/воридот: JSON/YAML, имзои checksum, санҷиши мутобиқати версия.

9) Дастрасӣ (A11y) ва клавиатура

• 'Enter/Space' - интиқолро оғоз кунед; тирҳо - ҳаракат ба фосилаи шабакавӣ; 'Shift' + тирҳо - фосилаи босуръат; 'Esc' - бекор кунед.
• 'Ctrl/Cmd + G' - гурӯҳ; 'Ctrl/Cmd + Shift + G' - гурӯҳ.
• 'Alt' - муваққатан хомӯш кардани шабакаро хомӯш кунед.
• Иҷрокунандаи овоз SR: "Ба (x, y) кӯчид. Часпидан: дар. Низоъ: Бале/Не"
• Ҳалқаҳои фокусӣ, дастакҳои азнавсозӣ, минтақаҳои тарки бо тавсиф.

10) Намунаҳои ламсӣ ва мобилӣ

Матбуоти дароз (300-500 мс) барои оғози DN.
Ҳадафҳои афзоишёфта (ҳадди аққал 40-48 px).
Панели асбобҳои мутобиқшавӣ (бандари поёнӣ).
Ҳолати таҳрир: қулфи ҳаракатдиҳандаи ришта, ҳаракати амудии худкор ҳангоми гузаштан ба канор.

11) Амалҳо аз виджетҳо (Виджетҳои амалкунанда)

CTA-и дарунсохт (тугма), менюи контекстӣ, кашолакунӣ (такрори Alt-нигоҳдорӣ).
"Пешнамоишҳои зуд" барои виҷет (зичӣ, ривоят, схемаи рангӣ).
Ҳолатҳо: боркунӣ/холӣ/хатогӣ, пойгоҳҳои бехатар ("додаҳо ақиб мондаанд").

12) Ҳамкорӣ ва нашр

Вақти воқеӣ: CRDT (масалан, Yjs) ё OT (равиши Quill) - курсорҳои иштирокчиён, қулфҳои гурӯҳӣ.
Ҳуқуқҳо: 'Соҳиб', 'Муҳаррир', 'Тамошобин'; Сурати ивазнашавандаро нашр кунед.
Ҷараёнҳо: лоиҳаи → шарҳи → нашр; муқоисаи тағйирот (тарҳҳои фарқкунанда).

13) Бекор/Redo ва autosave

Автобуси фармондеҳӣ: ҳар як амалиёт фармон бо 'do/undo' аст.
Ба мизоҷ ворид шавед (дар хотира + даврӣ), маҳдудияти дарозӣ.
Захираи худкор: ҳар сония N/by 'id', бо нишондиҳандаи "Захирашуда".

14) Нишонаҳои тарроҳӣ ва тарроҳӣ

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

Гузаронидани мавзӯъҳо бе аз нав ҳисоб кардани тарҳ (танҳо аломатҳои визуалӣ).
Контрасти AA/AAA, Ҳолати контраст, мавзӯи торик бо хокистарии дуруст.

15) Иҷро

Расонидани қабатҳои (рони/вебгл барои графикҳои мураккаб, DOM барои хром).

Виртуализатсияи рӯйхат/ҷадвал, дроссели 'кашолакунӣ' (16 мс), Requist

Намоиши Diff: танҳо виҷетҳои тағирёфтаро бозсозӣ кунед.
Ҳисобкунии бархӯрдҳо ва дастурҳои кэш.

16) Амният ва ҳифзи мундариҷа

Қуттии офтобӣ барои виджетҳои HTML (iframe, CSP, парчамҳои 'sandbox').
Маҳдудияти тарки: намудҳои сафедпӯст (файлҳо, истинодҳо, пешнамоиши JSON); санҷиши андоза ва мундариҷа.
Ҳуқуқ ба пешнамоиш (RBAC/ABAC), аудити содиротӣ/воридотӣ.

17) Виҷети API (шартнома)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

Ҳодисаҳои давраи зиндагӣ 'васл', 'андоза', 'намуди зоҳирӣ' мебошанд.
Тасдиқи Props пеш аз интишор.

18) Воридот/содирот ва муҳоҷират

Содирот: 'шабака', 'виджетҳо', 'мавзӯъ', 'мета'.
Воридот: санҷиши версияҳои схема, муҳоҷирати автоматӣ (харитаи саҳроӣ/пешфарз), ҳисобот.
Қулфи файл бо ҳаш барои таъмини тамомият.

19) Калидҳои хотира (тавсияшуда)

Паймоиш: '←↑→↓' - ҳаракат; 'Shift' + тирҳо - қадами зуд.
Хулоса: 'Alt' + тирҳо.
Амалиётҳо: 'Ctrl/Cmd + D' - нусхабардорӣ; 'Ctrl/Cmd + G' - гурӯҳ; 'Ctrl/Cmd + Shift + G' - гурӯҳ.
Сатҳҳо: '['/']' - бозгашт/ба пеш дар z-индекс.
Бекор/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (ili 'Y').
Пешнамоиш: 'Ctrl/Cmd + 1.. 9 '- зуд наҷотёфтагонро татбиқ кунед.

20) Намунаҳои UX

Роҳнамои зуд дар оғози аввал (микроавтобус барои 3-5 қадам).
Ҳолати шабака: тугмаи "нишон/пинҳон кардани шабака".
Ишора ба бархӯрдҳо ("дастнорас: паҳнои ҳадди ақали виджет = 3").
Таърихи тарҳ: Бозгашт ба версияи қаблӣ.

21) Нақшаи санҷиш

Воҳид: ҳисобкунии бархӯрд, ғусса, маҳдудияти валидатор.
Интегратсия: DND муш/клавиатура/клавиатура; гурӯҳбандӣ; зарфҳо.
E2E: ҷамъ кардани панели назоратӣ аз сифр, истифодаи пешакӣ, нашр, содирот/воридот.
Бетартибӣ: таъхири таъхир, аз даст додани алоқа (вақти воқеӣ), бархӯрди ҳуқуқҳо.
A11y: скриптҳои клавиатура, амали SR-овоз, контраст.

22) Рӯйхати назорати амалисозӣ

• Нуқтаи шабака/нуқта ва буридани танзим карда шудааст
• Коркарди/гурӯҳҳо/ҳамоҳангсозӣ ва санҷидашуда
• Клавиатураи DND ва экрани маслиҳатҳо фаъол аст
• Autosave, undo/redo, таърихи тарҳ
• Пешнамоиш: версияҳо, ҳуқуқҳо, содирот/воридот
• Мавзӯъҳо ва нишонаҳои тарроҳӣ, Ҳолати контрасти баланд
• Ҳамкорӣ дар вақти воқеӣ ва ҳалли муноқишаҳо
• Маҳдудияти тарки, тасдиқи файл, қуттии қуттии HTML
• Андозагирӣ: қабул, вақт барои ҷойгиркунии аввал, хатогиҳои бархӯрд

23) Мини-FAQ

Чаро танҳо як шабака, на координатаҳои ройгон?
Шабака ҳаммарказкунӣ, коронавирус, қобилияти пешакӣ ва иҷроишро содда мекунад.

Чӣ гуна тарҳҳои гуногунро барои нуқтаҳо нигоҳ доштан мумкин аст?
Ҳар як виҷет дорои 'pos' дар нуқтаи бозист (мизи корӣ/планшет/мобилӣ) бо бозгашт ба таври худкор.

Барои ҳамкорӣ чӣ бояд интихоб кард - OT ё CRDT?
CRDT барои офлайн/муноқишаҳо осонтар аст; OT - хуб барои амалиёти матнии хатӣ. Барои тарҳ, CRDT бештар гирифта мешавад.

Ҷамъ

Виджетҳои хуби кашолакунӣ ва партофтан на танҳо "кашолакунӣ ва партофтан" мебошанд. "Инҳоянд: шабакаи қатъӣ ва ғусса, гурӯҳҳои мувофиқ ва ҳамоҳангсозӣ, дастрасии клавиатура, пешнамоишҳои устувор бо версияҳо ва содирот, нашрияҳои бехатар ва ҳамкорӣ. Инро дар атрофи модели боэътимоди маълумот, UX-и хуб андешидашуда ва нақшаи санҷиш созед - ва созанда зуд, фаҳмо ва ба афзоиши мундариҷа ва фармонҳо тобовар хоҳад буд.