feat: add budget visualization #6
Conversation
預算視覺化統計資料的載入機制問題問題描述目前在預算視覺化（Budget Visualization）組件中，統計資料是根據當前載入的資料即時計算。由於採用分頁機制（每頁 20 筆），這導致：
目前的臨時解決方案已在前端加入提示文字： 註：統計資料會隨著頁面捲動更新，請捲動至頁面底部以取得完整統計。 建議的長期解決方案考慮以下幾個方向：
討論重點
開發時遇到這個問題，請 AI 簡單描述了一下，想看看怎麼樣處理會是比較好的 practice，感謝！ |
|
你好！我是 READr 的記者 zoe～非常謝謝你的貢獻！我想到關於「通過案件分析」的呈現，在資料的解讀上可能會有個小問題，也想跟你討論一下，看是要用註記的方式提醒讀者，還是用什麼方式避免以下狀況。 這個網站裡的預算提案包含兩個過程：「委員會」和「黨團協商（二輪提案）」
所以在「黨團協商」的案子中，一般的狀況下，我們會去辨識黨團協商中提出的案子（掃描檔）有沒有蓋黨團的章，去辨識它的來源是 1 還是 2 （有蓋黨團的章就代表是 2）。如果是 1，我們就在舊案子更新它的進度，如果是 2，我們就新增一筆新資料。 但這次出現一個狀況，是 1 的案子經過修改（例如修改刪減比例、金額），也會蓋上黨團的章，導致它在我們的流程中變成新資料。這也是為什麼有些案子的狀態仍是「保留」的原因，它在後續的程序之後可能經過「修改」甚至「合併」，被當作新的案子。 所以「通過案件分析」中的「提案」統計數字中，有少數可能會是舊案被保留、但其實最後以新案的型態被通過的案子。如果「通過案件分析」是要看「提案」到「通過」的過程中有哪些案子被擋下來，這樣的統計可能不夠精確。 另外，目前平台的資料也沒有收集最原始的黨團協商新提案。這次的審查過程進到黨團協商時，各黨團其實提了幾千個新案，但因為兩天的黨團協商都沒有實質處理到提案們，最糟的情況是委員會被保留的案子、以及幾千案新案子，都要在一天的院會中被表決——但我想立委們也發現這不可能，所以在院會前撤了不少案子，我們最後人工處理的案子大概是 600 多案。此狀況也會讓「通過案件分析」的「提案」統計不夠精確。 以上兩個資料的狀況提供給您參考！ 另外是資料欄位的疑問（關於 code 的部分我們會請前端工程師確認，這只是我作為資料記者的好奇 XD），目前長條圖的欄位是吃 cost 欄位對嗎？cost 欄位其實是原預算的金額，並不是實際減列／凍結的金額。不過年假時，有志工貢獻了這兩個欄位，我們預計會在這幾天將這個資料上架到資料庫裡，可以讓你使用！ |
|
@azoezoe
|
|
@i-am-alvin 其他欄位是跟政府預算書相關的欄位，目前正在逐步補完中（已經上線三個部會），關於這些欄位的說明請參考這個 repo 的說明 再次感謝！ |
…ed UI layout - Added ActionStats type for better data structure. - Implemented statistics calculation for actions including total cases, passed cases, and percentage. - Updated UI to display total cases and total budget in a more structured format. - Enhanced chart section with clearer action representation and hover details. - Added analysis section for passed cases with detailed breakdown.
… clarity - Wrapped analysis header and note in a div for better layout. - Added explanatory note regarding statistics update on page scroll.
i-am-alvin
force-pushed
the
feat/issue-5/add-budget-visualization
branch
from
c09f210 to
af940d4
Compare
…tions and improved UI - Added helper functions to calculate deleted and frozen budget amounts - Updated sorting and filtering logic to use new amount calculation methods - Introduced budget impact tracking and sorting - Expanded top stats section to show separate deleted and frozen amounts - Added detailed explanatory notes in the analysis section - Updated type definitions to support new budget calculation fields
- Enhanced the analysis section with additional context about the budget review process - Explained potential discrepancies in case counting during committee and party negotiation stages - Clarified the scope and limitations of the current budget proposal statistics - Improved readability by using multiple paragraphs with specific details
|
Hi @azoezoe 我已經新增了兩個更新，分別是 fd135ed 和 4e0a89c。
感謝您的協助！ |
|
如果可以的話，也麻煩挑幾個案子手動檢查看看數字！ |
|
@i-am-alvin 嗨嗨！謝謝你！剛剛我們工程師有協助 review PR 並提供測試機頁面給我們確認，我覺得很棒！目前有一些想法提供給你參考：
因為目前的提案中，有很多提案是針對「同一個預算科目」去提凍結或刪減，例如交通部民航局的「5829110200空運管理業務」，可能會有多個立委針對這個科目做不同提案，部會最後其實會以大的為主（例如 A 提了減列 300 萬、B 提了減列 100 萬，就以 A 為主）。因為目前網頁的做法是全部加總，這個金額不會等於部會實際刪減的預算，我怕讀者會誤會。 這個部分我們目前正在努力把預算的科目資料補齊，來做最後的分析報導，希望這禮拜能做完，就有更多欄位的資料可以給你視覺化 😭
以上兩個問題，我在想，如果ˊ這個視覺化的區塊不要放在最上面，而是用其他方式觸發（比如說漢堡或按鈕，展開 side page 或 popup），會不會有機會解決，也讓讀者可以對照著看？ |
|
@azoezoe 感謝回覆！
關於顯示位置的建議，如果改成浮動視窗的話，會不會更適合拉動畫面的時候一起比對？ 收起 & 查看的範例如上，請參考看看 |
好奇這個部分適合直接拿掉嗎？或是有期待什麼統計值被放在上方！ |
這個我覺得直接拿掉比較好！ |
感謝回覆而且馬上就有範例可以看！ |
|
ok，我明天實作看看
因為考慮 RWD 在行動裝置上的適配性，可能會需要長一點的時間，FYI！
…On Tue, Feb 18, 2025 at 6:13 PM azoezoe ***@***.***> wrote:
@azoezoe <https://github.com/azoezoe> 感謝回覆！
顯示位置的建議
我們內部測試時發現兩個狀況：
a. 在一個 categroy+subcategory 有眾多預算案的狀態下，圖表視覺化會因為預算案過多導致效益不佳
（可以看衛福部的衛生福利部分類，並往下載入所有的預算案）
b. 同上，案子過多時，圖表會佔很大一塊，但看了圖表的案號想去看實際的提案時，就要滑動很長的區塊才能到目的
關於顯示位置的建議，如果改成浮動視窗的話，會不會更適合拉動畫面的時候一起比對？
image.png (view on web)
<https://github.com/user-attachments/assets/5fe24a10-0d18-4318-a889-ea91a5d3b89f>
image.png (view on web)
<https://github.com/user-attachments/assets/27ece0d7-e62c-49ed-82b1-c6d004c5301e>
收起 & 查看的範例如上，請參考看看
感謝回覆而且馬上就有範例可以看！
我覺得很讚！可以試試看！謝謝你～～
—
Reply to this email directly, view it on GitHub
<#6 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AUUNWLTAJQE6HLIEHNNRYUT2QMBVDAVCNFSM6AAAAABVXUJ62CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRVGE3TMMJTGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
[image: azoezoe]*azoezoe* left a comment (readr-media/2025budget#6)
<#6 (comment)>
@azoezoe <https://github.com/azoezoe> 感謝回覆！
顯示位置的建議
我們內部測試時發現兩個狀況：
a. 在一個 categroy+subcategory 有眾多預算案的狀態下，圖表視覺化會因為預算案過多導致效益不佳
（可以看衛福部的衛生福利部分類，並往下載入所有的預算案）
b. 同上，案子過多時，圖表會佔很大一塊，但看了圖表的案號想去看實際的提案時，就要滑動很長的區塊才能到目的
關於顯示位置的建議，如果改成浮動視窗的話，會不會更適合拉動畫面的時候一起比對？
image.png (view on web)
<https://github.com/user-attachments/assets/5fe24a10-0d18-4318-a889-ea91a5d3b89f>
image.png (view on web)
<https://github.com/user-attachments/assets/27ece0d7-e62c-49ed-82b1-c6d004c5301e>
收起 & 查看的範例如上，請參考看看
感謝回覆而且馬上就有範例可以看！
我覺得很讚！可以試試看！謝謝你～～
—
Reply to this email directly, view it on GitHub
<#6 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AUUNWLTAJQE6HLIEHNNRYUT2QMBVDAVCNFSM6AAAAABVXUJ62CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRVGE3TMMJTGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
辛苦了！！很期待成果 |
修改內容
在 BudgetVisualization 組件中新增、優化了分析區塊的排版與使用者體驗：
新增總預算、案件數、每案依金額長條圖
重新組織分析區塊的版面配置
新增使用者提示資訊
測試重點
相關 Issue
#5