ychi / fire-elect Goto Github PK

Hard code some data in firebase, and construct a component that reads from it.

To start simple, let's not worry about redux or useReducer etc. Just a component reading one data row from firebase in a useEffect().

Let's try if non-websocket is possible on firebase.

Search for and play a bit with map visualisation tools that works with react, for example:
https://react-leaflet.js.org
https://uber.github.io/react-map-gl/#/
https://deck.gl/#/
https://www.mapbox.com (paid)

Can it register hover and click callback or fire event when user clicks some area? We probably need this for interactive charts.

「大膽預測」頁面的框架和圖

Linting before commit?
A CI job to fill-in firebase credentials and deploy?

現在整個網站的文字 by default 都是 #000000 ，需要找到 material ui 控制文字預設顏色的設定，需更改如下：

1. 目前看起來深色字 #273A3C
   2.深色元件中的白色文字都是 #F2EDE9 ( 例如這邊的拉bar內數字：
   ）

incorporate material UI and add some basic layout

Mobile or small screen: burger icon, tabs menu expands on click.
Desktop: normal tabs

• 有一個 state 知道是否送出過表單
• 負責跟 firebase 溝通

Discuss with Designers about fonts (English, Chinese, Title, Content), and set it at app level

需請 YK 提供過往資料

目前觀察到有兩個 bug，不確定要怎麼解

1. 戰情室的字比較小

2. 收合的時候網站名稱被隱藏

• 隱私條款部分請把連結設在「隱私條款」4個字上而非checkbox上
• 隱私條款4個字default- 請underline，大家才知道可以外連
• 表單填寫的立委名請存入資料庫

• section title位置跟上方icon的距離能否縮小，且一致
• 身是在何方的圖表大小請調整，現在跑掉了
• svg圖檔更新（拿掉陰影） (edited)

昨天忘記討論到這個咯！

Design schema to store realtime statistics. Roughly:
For each constituency: vote counts for each candidate, number of polling stations, number of polling station that completed counting.

What is collection and what is document? How to update data?

我會在 Page/Warroom 下面直接開始串接 firebase，讓 warroom 數字和 firebase 資料連動

切版後讓 @missmoss 填內容，會有地方讓使用者選縣市，然後顯示相對應的圖片

@ponan 許願要可以分享預測結果在臉書上

立委席次邏輯改整數

上線時間拿掉，連結改認同請分享頁
文字更新：
Title->認同請分享
description->藍綠版圖大探索！來看看過去十年，你鄰居投給誰？
button->快長知識

Hard code some data in firebase, and construct a component that reads from it.

To start simple, let's not worry about redux or useReducer etc. Just a component reading one data row from firebase in a useEffect().

Let's try web socket in this task (=> when data in firebase changes, we want web page to change automatically)

Footer 連往我要發聲的連結漏字

tooltip hover秀小黨名

placeholder旁加tooltip hover秀小黨名

發生在 firefox 無痕視窗

Google analytics is integrated with firebase:
https://firebase.google.com/docs/analytics

This might be a good way to log and analyse how people use the site and what they fill after playing predict game (it automatically distinguish user session for us)

Some questions:

• What data will look like if a user played the game multiple times?
• Can we export data from GA? Do we need to export?

1. maintain state, 表單送出過後就顯示為灰色
2. 負責跟 firestore 溝通

會在不同頁面共用

這個Legend：

Try different options, ex:
https://github.com/react-d3-library/react-d3-library (no longer maintained)
https://www.npmjs.com/package/react-d3-graph
https://github.com/uber/react-vis

And then we can have a better idea how to build interactive chart

To support different section of contents

筆記: 每個欄位都只能單選

數字和圖連動，理想上先選的政黨先畫，
可能要 useReducer 來避免數字加總超過席次上限
最後state需要 lift 到上層 component 以便跟送出表單一起連動
可能可以用 highcharts

不好意思早上我打錯字了嗚嗚，求幫忙將目前的圖檔更改成新圖 ，感恩！
previous_years.svg.zip

• 立委席次填選歸零後，不要顯示0，改為顯示上次立委席次
• 總統預測slider的數字會壓到候選人名字