Skip to content
This repository was archived by the owner on Mar 19, 2023. It is now read-only.

Commit 29ce722

Browse files
mdurbanmdurban
committed
add truth-o-meter pie chart to display truth level
1 parent 5a37a0c commit 29ce722

File tree

4 files changed

+220
-82
lines changed

4 files changed

+220
-82
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"license": "WTFPL",
1616
"dependencies": {
1717
"@babel/core": "7.1.0",
18+
"@nivo/pie": "^0.51.0",
1819
"@svgr/webpack": "2.4.1",
1920
"babel-core": "7.0.0-bridge.0",
2021
"babel-eslint": "9.0.0",

‎src/components/presenters/ProfilePage.js

+158-26
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,144 @@ import React from 'react'
22
import './profile-page.scss'
33
import capitolSvg from "../../assets/capitol.svg";
44
import Img from "react-image";
5+
import { Pie } from '@nivo/pie'
6+
7+
8+
const TOTAL_COUNT_OF_VERIFIED_COMMENTS = 650
9+
10+
const averageRating = () => {
11+
const absoluteLie = (0 * 92) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
12+
const completelyFalse = (1 * 212) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
13+
const barelyTrue = (2.5 * 135) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
14+
const halfTrue = (5 * 93) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
15+
const mostlyTrue = (7.5 * 72) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
16+
const completelyTrue = (10 * 29) / TOTAL_COUNT_OF_VERIFIED_COMMENTS
17+
18+
return ((
19+
absoluteLie +
20+
completelyFalse +
21+
barelyTrue +
22+
halfTrue +
23+
mostlyTrue +
24+
completelyTrue
25+
) * 10).toFixed(2)
26+
}
27+
28+
const percentage = (number) => {
29+
return ((number / TOTAL_COUNT_OF_VERIFIED_COMMENTS) * 100).toFixed(2)
30+
}
31+
32+
const pie = () => (
33+
<Pie
34+
width={500}
35+
height={500}
36+
data={[
37+
{
38+
"id": "Absolute Lie",
39+
"label": "Absolute Lie",
40+
"value": percentage(92),
41+
"color": "hsl(17, 70%, 50%)"
42+
},
43+
{
44+
"id": "Completely False",
45+
"label": "Completely False",
46+
"value": percentage(212),
47+
"color": "hsl(195, 70%, 50%)"
48+
},
49+
{
50+
"id": "Barely True",
51+
"label": "Barely True",
52+
"value": percentage(135),
53+
"color": "hsl(229, 70%, 50%)"
54+
},
55+
{
56+
"id": "Half True",
57+
"label": "Half True",
58+
"value": percentage(93),
59+
"color": "hsl(72, 70%, 50%)"
60+
},
61+
{
62+
"id": "Mostly True",
63+
"label": "Mostly True",
64+
"value": percentage(72),
65+
"color": "hsl(73, 70%, 50%)"
66+
},
67+
{
68+
"id": "Completely True",
69+
"label": "Completely True",
70+
"value": percentage(29),
71+
"color": "hsl(229, 70%, 50%)"
72+
}
73+
]}
74+
margin={{
75+
"top": 0,
76+
"right": 125,
77+
"bottom": 125,
78+
"left": 100
79+
}}
80+
innerRadius={0.5}
81+
padAngle={0.7}
82+
cornerRadius={3}
83+
colors="set1"
84+
colorBy="id"
85+
borderWidth={1}
86+
borderColor="inherit:darker(0.2)"
87+
radialLabel={'id'}
88+
radialLabelsSkipAngle={10}
89+
radialLabelsTextXOffset={6}
90+
radialLabelsTextColor="#333333"
91+
radialLabelsLinkOffset={3}//
92+
radialLabelsLinkDiagonalLength={16}
93+
radialLabelsLinkHorizontalLength={0}//
94+
radialLabelsLinkStrokeWidth={1}
95+
radialLabelsLinkColor="inherit"
96+
slicesLabelsSkipAngle={10}
97+
slicesLabelsTextColor="#333333"
98+
animate={true}
99+
motionStiffness={90}
100+
motionDamping={15}
101+
defs={[
102+
{
103+
"id": "dots",
104+
"type": "patternDots",
105+
"background": "inherit",
106+
"color": "rgba(255, 255, 255, 0.3)",
107+
"size": 4,
108+
"padding": 1,
109+
"stagger": true
110+
},
111+
{
112+
"id": "lines",
113+
"type": "patternLines",
114+
"background": "inherit",
115+
"color": "rgba(255, 255, 255, 0.3)",
116+
"rotation": -45,
117+
"lineWidth": 6,
118+
"spacing": 10
119+
}
120+
]}
121+
// legends={[
122+
// {
123+
// "anchor": "bottom",
124+
// "direction": "row",
125+
// "translateY": 56,
126+
// "itemWidth": 100,
127+
// "itemHeight": 18,
128+
// "itemTextColor": "#999",
129+
// "symbolSize": 18,
130+
// "symbolShape": "circle",
131+
// "effects": [
132+
// {
133+
// "on": "hover",
134+
// "style": {
135+
// "itemTextColor": "#000"
136+
// }
137+
// }
138+
// ]
139+
// }
140+
// ]}
141+
/>
142+
)
5143

6144
class ProfilePage extends React.Component {
7145

@@ -15,36 +153,30 @@ class ProfilePage extends React.Component {
15153
}
16154

17155
return <div className={classes.join(' ')}>
18-
<div className='top-banner'>
19-
<div className='info'>
20-
<Img
21-
src={[this.props.representativeInfo.photoUrl, capitolSvg]}
22-
loader={<img src={capitolSvg} alt={this.props.representativeInfo.name}/>}
23-
/>
24-
<div className='name'>{this.props.representativeInfo.name}</div>
25-
<div className='office'>
26-
{this.props.representativeInfo.office} - {this.props.representativeInfo.party} Party
27-
</div>
156+
<div className='top-banner'>
157+
<div className='info'>
158+
<Img
159+
src={[this.props.representativeInfo.photoUrl, capitolSvg]}
160+
loader={<img src={capitolSvg} alt={this.props.representativeInfo.name}/>}
161+
/>
162+
<div className='name'>{this.props.representativeInfo.name}</div>
163+
<div className='office'>
164+
{this.props.representativeInfo.office} - {this.props.representativeInfo.party} Party
28165
</div>
29166
</div>
30-
<div className='carousel-container'>
31-
<div className='carousel-header'>Recent Tweets</div>
32-
<Carousel>
33-
<div>
34-
<img src={require("../../assets/twitter-placeholder.png")} alt={''} />
35-
</div>
36-
<div>
37-
<img src={require("../../assets/twitter-placeholder.png")} alt={''} />
38-
</div>
39-
<div>
40-
<img src={require("../../assets/twitter-placeholder.png")} alt={''} />
41-
</div>
42-
<div>
43-
<img src={require("../../assets/twitter-placeholder.png")} alt={''} />
44-
</div>
45-
</Carousel>
167+
</div>
168+
169+
<div className='truthiness'>
170+
<div className='pie-title'>
171+
{this.props.representativeInfo.name}'s Truthfulness Rating:
172+
</div>
173+
<div className={'truth-rating'}>
174+
{averageRating()}%
175+
</div>
176+
{pie()}
46177
</div>
47178
</div>
179+
48180
}
49181
}
50182

‎src/components/presenters/profile-page.scss

+58-53
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,75 @@
1-
.profile-modal {
2-
width: 98vw;
3-
height: 98vh;
4-
background-color: #F4F7F6;
5-
position: fixed;
6-
top: 50%;
7-
left: 50%;
8-
transform: translate(-50%, -50%);
9-
z-index: 1;
1+
@import '../../styles/main.scss';
102

11-
//display: flex;
12-
//flex-direction: column;
3+
.profile-modal {
4+
width: 98vw;
5+
height: 98vh;
6+
background-color: #F4F7F6;
7+
position: fixed;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%, -50%);
11+
z-index: 1;
12+
overflow-y: scroll;
1313

14-
.top-banner {
15-
background-color: #1D2731;//#1D1D1D;
16-
height: 50vh;
17-
border-bottom: 4px solid #cacaca;
18-
display: flex;
19-
flex-direction: column-reverse;
20-
align-items: center;
14+
//display: flex;
15+
//flex-direction: column;
2116

22-
.info {
23-
text-align: center;
17+
.top-banner {
18+
background-color: $dark-gray;
19+
height: 50vh;
20+
border-bottom: 4px solid $textPrimary;
21+
display: flex;
22+
flex-direction: column-reverse;
23+
align-items: center;
2424

25-
img {
26-
max-width: 100%;
27-
max-height: 100%;
28-
height: 25vh;
29-
border-radius: 50%;
30-
vertical-align: top;
31-
border: 4px solid #cacaca;
32-
//background-color: $primary-gray;
33-
}
25+
.info {
26+
text-align: center;
3427

35-
.name {
36-
font-size: 36px;
37-
color: #D9B310;//5c848e
38-
padding: 10px;
39-
}
40-
41-
.office {
42-
font-size: 18px;
43-
color: #cacaca;
44-
padding-bottom: 10px;
45-
}
28+
img {
29+
max-width: 100%;
30+
max-height: 100%;
31+
height: 25vh;
32+
border-radius: 50%;
33+
vertical-align: top;
34+
border: 4px solid $textPrimary;
4635
}
47-
}
4836

49-
.carousel-container {
50-
padding-top: 20px;
51-
width: 50%;
52-
margin-left: auto;
53-
margin-right: auto;
54-
55-
.carousel-header {
56-
font-size: 28px;
57-
color: #1D2731;
37+
.name {
38+
font-size: 36px;
39+
color: $textPrimary; //5c848e
5840
padding: 10px;
5941
}
6042

61-
img {
62-
max-width: 100%;
63-
height: auto;
43+
.office {
44+
font-size: 18px;
45+
color: $textPrimary;
46+
padding-bottom: 10px;
6447
}
6548
}
49+
}
50+
51+
.truthiness {
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
56+
.pie-title {
57+
margin-top: 20px;
58+
margin-bottom: 10px;
59+
font-size: 28px;
60+
color: $dark-gray;
61+
}
6662

63+
.truth-rating {
64+
font-size: 24px;
65+
color: crimson;
66+
}
67+
68+
g text {
69+
font-size: 14px !important;
70+
}
6771
}
72+
}
6873

6974
.hidden {
7075
display: none;

‎src/styles/colors.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
$white: #ffffff;
22
$primary-gray: #929292;
3-
$dark-gray: #1D2731; //242424
4-
$textPrimary: #cacaca;//d3d3d3
5-
$textSecondary: #d3d3d3; //E39150
3+
$dark-gray: #242424; //#1D2731
4+
$textPrimary: #cacaca;
5+
$textSecondary: #d3d3d3;

0 commit comments

Comments
 (0)