Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update disclaimer #135

Merged
merged 29 commits into from
Nov 23, 2019
Merged
Changes from 1 commit
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a8ca62b
Add vote turnout for index and district pages (#132)
gayaugayau Nov 21, 2019
5e3be2a
add district turnout chart
nandiheath Nov 22, 2019
0aed93f
update turnout chart
nandiheath Nov 23, 2019
1518320
add two more testcases
nandiheath Nov 23, 2019
73c1f59
remove argument checking
nandiheath Nov 23, 2019
856dc27
UI and i18n enhancement
cswbrian Nov 23, 2019
3f781c8
Auto stash before merge of "feat/district-turnout" and "origin/feat/d…
nandiheath Nov 23, 2019
3d43d65
ignore scripts
nandiheath Nov 23, 2019
345cf23
Auto stash before merge of "feat/district-turnout" and "origin/feat/d…
nandiheath Nov 23, 2019
e40b321
Chart UI enhancment
cswbrian Nov 23, 2019
dbd4e6c
update to the latest contract
nandiheath Nov 23, 2019
26cb906
add REACT_APP_LIVE_VOTE_TURNOUT to env
cswbrian Nov 23, 2019
8a8ac3d
Merge branch 'feat/district-turnout' of https://github.com/cswbrian/d…
cswbrian Nov 23, 2019
52f9b43
add env
cswbrian Nov 23, 2019
159d9eb
add env handling for vote live update
cswbrian Nov 23, 2019
22b9c52
Update sample data for turnout
gayaugayau Nov 23, 2019
6770813
update turnout chart
nandiheath Nov 23, 2019
4b097ed
Add link to vote turnout
gayaugayau Nov 23, 2019
ed45b01
Merge remote-tracking branch 'origin/feat/district-turnout' into dev
nandiheath Nov 23, 2019
119bc54
Update styling for VoteTurnouts
gayaugayau Nov 23, 2019
5155129
fix lint
cswbrian Nov 23, 2019
b2c0385
amend landing_alert
cswbrian Nov 23, 2019
83b2d85
fix fetching election data
cswbrian Nov 23, 2019
ab25c3b
fix env logic
cswbrian Nov 23, 2019
373ca92
Update VoteTurnouts UI and style; Move it into DistrictTable
gayaugayau Nov 23, 2019
b27f0a9
support i18n for alert
cswbrian Nov 23, 2019
c49f292
Merge branch 'dev' of https://github.com/cswbrian/district-councils-d…
cswbrian Nov 23, 2019
2cb3637
fix typo
cswbrian Nov 23, 2019
05ec42e
update disclaimer
ylchan87 Nov 23, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update turnout chart
  • Loading branch information
nandiheath committed Nov 23, 2019
commit 0aed93f4b9d545ba16ab5479471a32ff3f132aee
49 changes: 21 additions & 28 deletions web/src/components/atoms/charts/DistrictTurnoutChart.js
Original file line number Diff line number Diff line change
@@ -9,9 +9,9 @@ export default props => {
const [dimensions, setDimensions] = useState({ width: 0, height: 0 })

const d3Container = useRef(null)

const drawChart = data => {
if (dimensions.width === 0) {
console.log(props)
const drawChart = (data, labels) => {
if (dimensions.width === 0 || !data.constituency[0]) {
return
}

@@ -20,19 +20,12 @@ export default props => {
startTime.add(1, 'hour').format('HH:mm')
)

const color = d3
.scaleOrdinal()
.range([
props.firstColor ? props.firstColor : '#ca0020',
props.secondColor ? props.secondColor : '#f4a582',
])

const margin = { top: 50, right: 20, bottom: 30, left: 40 }

const width = dimensions.width - margin.left - margin.right
const height = dimensions.width - margin.top - margin.bottom

const max = _.max(data.constituency)
const max = Math.max(_.max(data.constituency), 0.1)

const svg = d3
.select(d3Container.current)
@@ -57,19 +50,6 @@ export default props => {
// y axis
chart.append('g').call(d3.axisLeft(yScale).tickFormat(d3.format('.0%')))

// // draw the lines
// chart
// .append('g')
// .style('color', 'lightgrey')
// .style('stroke-opacity', '0.7')
// .call(
// d3
// .axisLeft(yScale)
// .tickSizeOuter(0)
// .tickSizeInner(-width)
// .tickFormat('')
// )

// x axis
chart
.append('g')
@@ -80,6 +60,19 @@ export default props => {
.style('text-anchor', 'end')
.style('fill', '#69a3b2')

// draw the lines
chart
.append('g')
.style('color', 'lightgrey')
.style('stroke-opacity', '0.7')
.call(
d3
.axisLeft(yScale)
.tickSizeOuter(0)
.tickSizeInner(-width)
.tickFormat('')
)

// 7. d3's line generator
const line = d3
.line()
@@ -138,13 +131,13 @@ export default props => {
.attr('opacity', 100)
}

drawLine(data.constituency, 'A01', 'black')
drawLine(data.district, 'A', 'lightgreen')
drawLine(data.total, 'HK Total', 'steelblue')
drawLine(data.constituency, labels.constituency, 'black')
drawLine(data.district, labels.district, 'lightgreen')
drawLine(data.total, labels.total, 'steelblue')
}

useEffect(() => {
drawChart(props.data)
drawChart(props.data, props.labels)
})

useLayoutEffect(() => {
9 changes: 8 additions & 1 deletion web/src/components/pages/battleground/index.js
Original file line number Diff line number Diff line change
@@ -285,7 +285,14 @@ class BattleGroundPage extends Component {
election_forum={district.meta.election_forum}
/>
</Container>
<DistrictTurnoutChartContainer turnouts />
<DistrictTurnoutChartContainer
code={code}
dname={withLanguage(
district.district.dc_name_en,
district.district.dc_name_zh
)}
cname={withLanguage(district.name_en, district.name_zh)}
/>
<DCCAOverview
year={year}
dc_code={district.district.dc_code}
55 changes: 45 additions & 10 deletions web/src/components/templates/DistrictTurnoutChartContainer.js
Original file line number Diff line number Diff line change
@@ -3,19 +3,26 @@ import axios from 'axios'
import DistrictTurnoutChart from 'components/atoms/charts/DistrictTurnoutChart'
import _ from 'lodash'
import { Grid } from '@material-ui/core'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'

const PERIOD_COUNT = 15

// returning format:
/*
{
Total: [0.0, 0.0, 0.0, null],
A01: [0.0, 0.0, 0.0, 0.0, ]
district: [0.0, 0.0, 0.0, null],
constituency: [0.0, 0.0, 0.0, 0.0, ],
totla: []
}
*/
const mapData = (turnouts, voters) => {
const result = {
total: _.times(PERIOD_COUNT, _.constant(0)),
const mapData = (turnouts, voters, cacode) => {
const final = {
constituency: _.times(PERIOD_COUNT, _.constant(null)),
district: _.times(PERIOD_COUNT, _.constant(null)),
total: _.times(PERIOD_COUNT, _.constant(null)),
}

const votersByDistrict = {
total: 0.0,
}
@@ -34,16 +41,31 @@ const mapData = (turnouts, voters) => {
const total = votersByDistrict[code]
const turnout =
turnouts[code].cumulative_turnout || _.times(PERIOD_COUNT, 0)
result[code] = turnout.map(t => (t === null ? null : t / total))
result.total = result.total.map((v, i) => (turnout[i] ? v + turnout[i] : v))

if (code === cacode) {
final.constituency = turnout.map(t => (t === null ? null : t / total))
}

if (code.charCodeAt(0) === cacode.charCodeAt(0)) {
final.district = final.district.map((v, i) =>
turnout[i] ? v + turnout[i] : v
)
}

final.total = final.total.map((v, i) => (turnout[i] ? v + turnout[i] : v))
})

result.total = result.total.map(t => (t === 0 ? null : t / totalVoters))
final.district = final.district.map(t =>
t < 0.0001 ? null : t / totalVoters
)
final.total = final.total.map(t => (t < 0.0001 ? null : t / totalVoters))

return result
return final
}

const DistrictTurnoutChartContainer = props => {
const { code, cname, dname } = props
const { t } = useTranslation()
const [turnoutsData, setTurnoutsData] = useState([])
const [votersData, setVotersData] = useState([])
const loading = turnoutsData.length > 0 && votersData.length > 0
@@ -68,10 +90,23 @@ const DistrictTurnoutChartContainer = props => {
return (
<Grid container spacing={3}>
{!loading && (
<DistrictTurnoutChart data={mapData(turnoutsData, votersData)} />
<DistrictTurnoutChart
data={mapData(turnoutsData, votersData, code)}
labels={{
constituency: cname,
district: dname,
total: t('turnont_chart.total_turnout_rate'),
}}
/>
)}
</Grid>
)
}

DistrictTurnoutChartContainer.propsType = {
code: PropTypes.string,
dname: PropTypes.string,
cname: PropTypes.string,
}

export default DistrictTurnoutChartContainer
3 changes: 2 additions & 1 deletion web/src/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -176,5 +176,6 @@
"election.seat_single": "{{n}} seat",
"election.seat_plural": "{{n}} seats",
"vote_stations.title": "Polling stations",
"vote_stations.note": "For electors who have not received their poll cards, please log in to the <a href='https://www.voterinfo.gov.hk?lang=en' target='_blank'>Online Voter Information Enquiry System</a> or call <a href='tel:+85228911001'>2891 1001</a> to check their registration status and details of their designated polling stations."
"vote_stations.note": "For electors who have not received their poll cards, please log in to the <a href='https://www.voterinfo.gov.hk?lang=en' target='_blank'>Online Voter Information Enquiry System</a> or call <a href='tel:+85228911001'>2891 1001</a> to check their registration status and details of their designated polling stations.",
"turnont_chart.total_turnout_rate": "Overall Turnout Rate"
}
3 changes: 2 additions & 1 deletion web/src/locales/zh/translation.json
Original file line number Diff line number Diff line change
@@ -176,5 +176,6 @@
"election.seat_single": "{{n}}席",
"election.seat_plural": "{{n}}席",
"vote_stations.title": "投票站",
"vote_stations.note": "尚未收到投票通知卡的選民,請登入<a href='https://www.voterinfo.gov.hk' target='_blank'>政府選民資料網上查閱系統</a>或致電<a href='tel:+85228911001'>2891 1001</a>查詢選民身分及獲編配的投票站詳情。"
"vote_stations.note": "尚未收到投票通知卡的選民,請登入<a href='https://www.voterinfo.gov.hk' target='_blank'>政府選民資料網上查閱系統</a>或致電<a href='tel:+85228911001'>2891 1001</a>查詢選民身分及獲編配的投票站詳情。",
"turnont_chart.total_turnout_rate": "全港投票率"
}
42 changes: 21 additions & 21 deletions web/src/stories/Charts.stories.js
Original file line number Diff line number Diff line change
@@ -167,13 +167,13 @@ export const DistrictTurnoutChart = props => {
<DCDistrictTurnoutChart
data={{
constituency: [
0.0,
0.1,
0.11,
0.15,
0.2,
0.3,
0.4,
0.02513136851724926,
0.028558373315055976,
0.06625542609092987,
0.13548092300662554,
null,
null,
null,
null,
null,
null,
@@ -184,13 +184,13 @@ export const DistrictTurnoutChart = props => {
null,
],
district: [
0.0,
0.08,
0.09,
0.11,
0.15,
0.22,
0.35,
0.000048149312226997636,
0.00006218278011225322,
0.00016428835679463012,
0.00026518415176276085,
0.00017227291610865484,
null,
null,
null,
null,
null,
@@ -201,13 +201,13 @@ export const DistrictTurnoutChart = props => {
null,
],
total: [
0.0,
0.11,
0.13,
0.16,
0.23,
0.35,
0.45,
0.00009629862445399527,
0.00012436556022450644,
0.00032857671358926024,
0.0005303683035255217,
0.0003445458322173097,
null,
null,
null,
null,
null,