Lottie animation of latest price on trading charts

[arealclimber]

• 定位價格最新的位置，把 Lottie 放上去，在更新價格時也要更新 Lottie 位置
• [ ] Candlestick
• [ ] Line
• [ ] Horizontal line
• [ ] 用之前的 dummy data 讓蠟燭圖跑起來

定位 svg 的方法

1. 用 element.getBoundingClientRect()
2. 用 getBBox
   • getBBox() 適用於未轉換的空間，但如果縮放和平移已應用於佈局，則它將不再準確。當平移和縮放生效時，想要將 HTML Div 元素作為標籤附加到節點，而不是使用 SVG 文本元素時，getBoundingClientRect() 較適合

• Ref
  • How to get coordinates of an svg element?
  • Getting Screen Positions of D3 Nodes After Transform
  • Get absolute coordinates of SVG path with Javascript
  • How to access and destroy the canvas using ref?
  • Sandbox - get coord along an SVG path
  • Lottie doc

[arealclimber]

taking 5 hrs

• 嘗試 useEffect + useRef + element.getBoundingClientRect() + useLottie 計算、定位、更新最新價格的光點，但 Lottie 顯示不出來，畫面也變得很奇怪

remaining 5 hrs

[arealclimber]

處理時間比預期長，暫時擱置