Panel Graph

GraphPreview

Fa'aalia graph fa'amalosi o le tafe o tupe i le va o teugatupe ma vaega. O node e fa'aalia teugatupe ma vaega tupe fa'aalu; o ala e fa'aalia le tafe o fefa'ataua'iga i lo latou va.

Ituaiga Ata

Meatotino	Tau
Faleaoga	Apache ECharts (fa'aogaina le echarts.init())
Ituaiga fa'asologa	graph ma le layout: 'force'
Fa'aalia	Canvas, fa'aoso tuusa'o (E LE O le BaseChart)
Fa'aogaina le suiga tele	ResizeObserver i le lima i le pusa
Faila alagaoa	src/components/panels/GraphPanel.tsx

E le fa'aogaina e le panel le BaseChart e aloese ai mai fa'afitauli toe-fa'apipi'i ma le fa'atulagaga force. E faia se fa'aoso echarts.init() tuusa'o i se pusa div, ma se ResizeObserver fa'apitoa mo le suiga tele tali.

O Le A Le Mea E Fa'aali

• Node — teugatupe faletupe ma vaega fa'aaluga, tele e tusa ma le tafe fefa'ataua'iga
• Ala — tafe fefa'ataua'iga i le va o teugatupe ma vaega, lautele e fa'atusa ma le aofa'i tafe
• Fa'ailogaina lata — o le fa'apaepaeina o se node e fa'ailogaina ai ala feso'ota'i i le lanu o lena node

Lanu Node

Ituaiga Teugatupe	Lanu
CHECKING	Accent (#00d4aa)
SAVINGS	Accent (#00d4aa)
CREDIT	Mataʻutia (mumu)
INVESTMENT	Lapatai (lanumoli)
Vaega	Lanu fa'apitoa vaega mai le CATEGORY_COLORS

O vaega lanu fa'apitoa e suitulaga ai fa'aletonu pe a fetaui le igoa node ma le su'esu'ega o le vaega.

Fa'afesoota'iga

Toso ma Fa'alautele i le Lau Atoa

O le roam fausia a ECharts e tape'a. E suitulaga, o fa'aoga lima fa'apitoa e tu'uina atu le fa'agaioia e leai se tapula'a:

• Toso-fa'agaioia — kiliki ma toso i so'o se mea i le lau e fa'agaioia ai
• Fa'alautele uili-scroll — fa'alautele atu i le tulaga o le cursor (vaega: 0.1x i le 15x)
• Fetaui-i-le-tapula'a — fa'afetaui otometi le graph i le uluai utaina; toe-fa'anofo e ala i le fa'amau ulutala

Fa'ailogaina Lata i le Lima

O le focus: 'adjacency' fa'amafanafana fausia e fa'aopoopo i se fa'atinoga i le lima e:

1. Fausia se fa'afanua lata o node-i-ala fa'ailoga i fa'afouga filifili ta'itasi
2. I le mouseover, fa'aoso gaioiga fa'ailogaina mo le node fa'apaepae, ona tuaoi, ma ala feso'ota'i
3. Suitulaga le lanu o le ala e fetaui ma le lanu o le node fa'apaepae
4. I le mouseout, fa'aoso downplay ma fa'amalosi se zrender fa'afou

Toso Node

O node ta'itasi e mafai ona toso (draggable: true) i totonu o le fa'atulagaga force. O le fa'ata'ita'iga force e galue ma le animation: false mo le fa'atulagaga vave.

Fa'atulagaina i le Itu

O se itu fa'apipi'i 220px (sui e ala i le ata fa'atulagaina i le ulutala) ma 5 vaega:

1. Fa'amama

Fa'aoga	Fa'amatalaga
Fa'amama tusitusiga	Fa'amama node e ala i le igoa vaega
Sui teugatupe	Fa'aali/natia node teugatupe
Sui vaega	Fa'aali/natia node vaega
Sui tuto'atasi	Fa'aali/natia node e leai ni feso'ota'iga

2. Vaega

Fa'aoga	Filifili
Tulaga fa'avasega	E ala i le Ituaiga, E ala i le Faletupe, E ala i le Ituaiga Vaega, Leai
Vaega lanu	Fa'afetaui su'esu'ega-i-le-lanu fa'apitoa ma le fa'aopoopo/aveese

3. Fa'aali

Fa'aoga	Vaega
Fa'ailoga	Tatala/Tapuni
Fa'aaau	Tatala/Tapuni (fa'ailoga fa'aaau ala)
Tele Node	5 — 80
Mafiafia Ala	1 — 10
Tele Fa'ailoga	6 — 18
Opacity Fa'ailoga	0% — 100%
Opacity Node	0.1 — 1.0
Ituaiga Ala	Sa'o, Fa'apio, Pupuni
Foliga Node	Lapotopoto, Fa'avasega, Fa'avasega Fa'apotopoto, Taimane

4. Malosi

Fa'aoga	Vaega
Malosi Ogatotonu (gravity)	0 — 0.5
Malosi Tuliesea	5 — 500
Va Ala Pito i Lalo	1 — 200
Va Ala Pito i Luga	5 — 400
Friction	0 — 1

5. Toe Fa'afo'i Fa'aletonu

Toe fa'afo'i fa'atulagaina uma i o latou tau amata e ala i le useGraphStore.resetToDefaults().

Alagaoa Fa'amaumauga

Teuina	Vaega
useFinanceStore	accounts, transactions, categories
useGraphStore	Fa'atulagaina fa'atulagaga/fa'aali/malosi uma, settingsOpen
useChartTheme	Lanu fa'ailoga mo tooltips, fa'ailoga, tapula'a

Tulaga Gaogao

E fa'aali "E leai se fa'amaumauga fefa'ataua'iga" fa'anofo i le panel pe a transactions.length === 0.