67 |
68 | {
69 | typeof this.props.result.progress === 'number' ? (
70 |
71 | {result.name}
72 |
79 |
80 | ) : (
81 | this.collapse()}>
82 | {this.state.collapseOpen ?
95 | {typeof result.progress !== 'number' && (
96 |
130 |
131 | );
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/okr-dashboard/src/components/Label.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Label = ({ children, type = 'default' }) => (
4 | {children}
5 | );
6 |
7 | export default Label;
8 |
--------------------------------------------------------------------------------
/okr-dashboard/src/components/Objective.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import KeyResult from './KeyResult';
3 | import Label from './Label';
4 |
5 | export default class extends React.Component {
6 | static displayName = 'Objective';
7 |
8 | render() {
9 | const { title, keyResults, goals } = this.props;
10 | let abs = 0;
11 | let length = keyResults.length;
12 | const totalScore = Math.round(100 * ((keyResults.reduce((score, keyResult) => {
13 | if (!keyResult.score) {
14 | return score;
15 | }
16 |
17 | if (keyResult.score.startsWith('+')) {
18 | abs += parseFloat(keyResult.score);
19 | length -= 1;
20 | return score;
21 | }
22 |
23 | return score + parseFloat(keyResult.score);
24 | }, 0) / length) + abs)) / 100;
25 |
26 | return (
27 |
68 | {
69 | typeof this.props.result.progress === 'number' ? (
70 |
71 | {result.name}
72 |
79 |
80 | ) : (
81 | this.collapse()}>
82 | {this.state.collapseOpen ?
95 | {typeof result.progress !== 'number' && (
96 |
97 | {
98 | Object
99 | .keys(result.progress)
100 | .map((item, key) => {
101 | const value = result.progress[item] * 100;
102 |
103 | return (
104 |
118 | )}
119 |
105 |
112 | {item}
113 |
114 | );
115 | })
116 | }
117 |
120 | {scores.map((score, key) => (
121 |
129 | 130 |
28 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/okr-dashboard/src/components/Score.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip } from 'reactstrap';
3 |
4 | export default class extends React.Component {
5 | static displayName = 'Score';
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = { tooltipOpen: false };
10 | }
11 |
12 | toggle() {
13 | this.setState({ tooltipOpen: !this.state.tooltipOpen });
14 | }
15 |
16 | render() {
17 | const { id, achieved, score, description } = this.props;
18 |
19 | return (
20 |
29 |
37 | {keyResults.map((keyResult, key) => ( 38 |
43 | 30 | 31 | {title} 32 |
33 | {goals.map((goal, key) => ( 34 | 35 | ))} 36 |37 | {keyResults.map((keyResult, key) => ( 38 |
39 |
41 | ))}
42 |
21 | this.toggle()}>
30 | {description}
31 |
32 | )}
33 |
34 | );
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/okr-dashboard/src/global.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Work+Sans:100,300,700");
2 |
3 | html, body {
4 | height: 100%;
5 | width: 100%;
6 | font-family: 'Work Sans';
7 | font-weight: 100;
8 | /*background-attachment: fixed !important;
9 | background: linear-gradient(to bottom, rgb(187, 20, 36) 80%, rgb(225, 54, 51) 100%);*/
10 | /*background-color: rgb(187, 20, 36);*/
11 | background-color: black;
12 | color: #fff;
13 | text-rendering: optimizeLegibility;
14 | }
15 |
16 | hr {
17 | border-top: 1px dotted rgba(255, 255, 255, .1);
18 | }
19 |
20 | .logo {
21 | vertical-align: middle;
22 | margin: 15px 0;
23 | max-height: 70px;
24 | }
25 |
26 | .inline {
27 | display: inline-block;
28 | }
29 |
30 | .inline logo {
31 | display: inline;
32 | }
33 |
34 | .inline h1 {
35 | margin-left: 50px;
36 | padding-top: 10px;
37 | display: inline;
38 | }
39 |
40 | @media screen and (max-width: 767px) {
41 | .logo {
42 | margin-bottom: 0;
43 | }
44 | }
45 |
46 | h2, .h2 {
47 | font-size: 1.3rem;
48 | font-weight: 100;
49 | margin-bottom: 0;
50 | }
51 |
52 | h3, .h3 {
53 | font-size: 1rem;
54 | font-weight: 100;
55 | margin-bottom: 5px;
56 | text-align: center;
57 | }
58 |
59 | .objective > .row:last-of-type > .col-xs > hr {
60 | display: none;
61 | }
62 |
63 | .scoring {
64 | height: 50px;
65 | border: 1px solid rgb(187, 20, 36);;
66 | border-radius: 25px;
67 | padding: 2px;
68 | margin: 0 0 20px;
69 | align-items: stretch;
70 | }
71 |
72 | .scoring.empty {
73 | border: 1px solid rgb(187, 20, 36);;
74 | }
75 |
76 | .scoring.in-progress {
77 | border: 1px solid rgba(240, 173, 78, 1);
78 | }
79 |
80 | .scoring.achieved {
81 | border: 1px solid rgba(92, 184, 92, 1);
82 | }
83 |
84 | .score {
85 | flex: 1;
86 | height: 44px;
87 | text-align: center;
88 | font-size: 1.2rem;
89 | border-radius: 0;
90 | margin-right: 2px;
91 | border: 1px solid rgba(255, 255, 255, .2);
92 | background-color: rgba(255, 255, 255, .1);
93 | transition:
94 | background-color 0.3s ease,
95 | color 0.3s ease;
96 | cursor: pointer;
97 | color: rgba(255, 255, 255, .7);
98 | font-weight: bold;
99 | }
100 |
101 | .score > div {
102 | padding-top: 8px;
103 | width: 100%;
104 | height: 100%;
105 | text-shadow: 0 0 2px rgba(0, 0, 0, .7);
106 | }
107 |
108 | .score.achieved {
109 | background-color: rgba(92, 184, 92, .75);
110 | }
111 |
112 | .score:hover {
113 | background-color: rgba(255, 255, 255, .25);
114 | color: rgba(255, 255, 255, 1);
115 | }
116 |
117 | .score:first-child {
118 | border-radius: 22px;
119 | border-bottom-right-radius: 0;
120 | border-top-right-radius: 0;
121 | }
122 |
123 | .score:last-child {
124 | margin-right: 0;
125 | border-radius: 22px;
126 | border-top-left-radius: 0;
127 | border-bottom-left-radius: 0;
128 | }
129 |
130 | .tooltip-inner {
131 | background-color: #111;
132 | font-family: 'Work Sans';
133 | font-size: .75rem;
134 | }
135 |
136 | .icon {
137 | vertical-align: middle;
138 | display: inline-block;
139 | }
140 |
141 | .icon-info {
142 | cursor: pointer;
143 | opacity: .4;
144 | transition: opacity .3s ease;
145 | }
146 |
147 | .icon-info:hover {
148 | opacity: 1;
149 | }
150 |
151 | .icon svg {
152 | width: 16px;
153 | height: 16px;
154 | }
155 |
156 | .tag {
157 | font-size: 65%;
158 | border-radius: .1rem;
159 | margin-right: 3px;
160 | text-shadow: 0 0 2px rgba(0, 0, 0, .7);
161 | }
162 |
163 | .progress-list .tag {
164 | width: 2.25rem;
165 | }
166 |
167 | .objective > .tag-default {
168 | font-weight: 300;
169 | }
170 |
171 | h2 .tag {
172 | border-radius: 1rem;
173 | vertical-align: middle;
174 | margin-top: -1px;
175 | font-weight: bold;
176 | padding: .3rem .4rem;
177 | margin-left: 1rem;
178 | margin-bottom: .5rem;
179 | float: right;
180 | }
181 |
182 | h3 .tag {
183 | font-size: 80%;
184 | margin-top: -2px;
185 | vertical-align: middle;
186 | }
187 |
188 | h3 .collapser {
189 | cursor: pointer;
190 | }
191 |
192 | @media (min-width: 768px) {
193 | .objective {
194 | padding: 15px;
195 | border: 1px dotted rgba(255, 255, 255, .1);
196 | border-radius: 4px;
197 | width: 100%;
198 | height: 100%;
199 | }
200 | }
201 |
--------------------------------------------------------------------------------
/okr-dashboard/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import Objective from './components/Objective';
4 | import data from './okrs.json';
5 | import 'bootstrap/dist/css/bootstrap-flex.min.css';
6 | import './global.css';
7 | import logoUrl from './remo_logo.png';
8 |
9 | render((
10 | {score}
22 | {description && (
23 |
11 |
27 | ), document.getElementById('root'));
28 |
--------------------------------------------------------------------------------
/okr-dashboard/src/okrs.json:
--------------------------------------------------------------------------------
1 | {
2 | "objectives": [
3 | {
4 | "name": "The Reps program continues to grow its process maturity",
5 | "okrs": ["RepsNext", "Coaching", "Resources"],
6 | "results": [
7 | {
8 | "name": "20 Reps have been trained with the Resource training",
9 | "description": "",
10 | "progress": 0.8,
11 | "score": "0.6",
12 | "scoring": {
13 | "0.3": "Achieved 30%",
14 | "0.6": "Achieved 60%",
15 | "1.0": "Achieved 100%"
16 | }
17 | }, {
18 | "name": "100% of the budget requests of new Reps are filed by Resource Track Reps",
19 | "description": "",
20 | "progress": 0.0,
21 | "score": "0.0",
22 | "scoring": {
23 | "0.3": "Achieved 30%",
24 | "0.6": "Achieved 60%",
25 | "1.0": "Achieved 100%"
26 | }
27 | }, {
28 | "name": "30 Reps complete the coaching training",
29 | "description": "",
30 | "progress": 0.0,
31 | "score": "0.0",
32 | "scoring": {
33 | "0.3": "Achieved 30%",
34 | "0.6": "Achieved 60%",
35 | "1.0": "Achieved 100%"
36 | }
37 | }, {
38 | "name": "The amount of mentor-less Reps is reduced by 50%",
39 | "description": "",
40 | "progress": 0.0,
41 | "score": "0.0",
42 | "scoring": {
43 | "0.3": "Achieved 30%",
44 | "0.6": "Achieved 60%",
45 | "1.0": "Achieved 100%"
46 | }
47 | }, {
48 | "name": "Increase number of authors for Reps tweets to 10 people",
49 | "description": "",
50 | "progress": 0.5,
51 | "score": "0.0",
52 | "scoring": {
53 | "0.3": "Achieved 30%",
54 | "0.6": "Achieved 60%",
55 | "1.0": "Achieved 100%"
56 | }
57 | }
58 | ]
59 | },
60 | {
61 | "name": "The Reps program is the backbone for any mobilizing needs",
62 | "okrs": ["Mobilizers"],
63 | "results": [
64 | {
65 | "name": "We documented what mobilizing Reps are focusing on",
66 | "description": "",
67 | "progress": 0.0,
68 | "score": "0.0",
69 | "scoring": {
70 | "0.3": "Achieved 30%",
71 | "0.6": "Achieved 60%",
72 | "1.0": "Achieved 100%"
73 | }
74 | }, {
75 | "name": "An implementation roadmap for mobilizers’ recommendations is in place.",
76 | "description": "",
77 | "progress": 1.0,
78 | "score": "1.0",
79 | "scoring": {
80 | "0.3": "Achieved 30%",
81 | "0.6": "Achieved 60%",
82 | "1.0": "Achieved 100%"
83 | }
84 | }, {
85 | "name": "Identified 1 key measures that is defining how our Mobilizers add value to the coding and Non-Coding/Enthusiast communities",
86 | "description": "",
87 | "progress": 0.8,
88 | "score": "0.6",
89 | "scoring": {
90 | "0.3": "Achieved 30%",
91 | "0.6": "Achieved 60%",
92 | "1.0": "Achieved 100%"
93 | }
94 | }
95 | ]
96 | },
97 | {
98 | "name": "The Activate Portal is improved for Mobilizer Reps and Functional Areas",
99 | "okrs": ["Activate", "Mobilizers"],
100 | "results": [
101 | {
102 | "name": "The Rust activity is updated",
103 | "description": "",
104 | "progress": 0.5,
105 | "score": "0.3",
106 | "scoring": {
107 | "0.3": "Achieved 30%",
108 | "0.6": "Achieved 60%",
109 | "1.0": "Achieved 100%"
110 | }
111 | }, {
112 | "name": "The WebExtensions activity update has been tested in 3 pilot events in 3 different countries",
113 | "description": "",
114 | "progress": 0.2,
115 | "score": "0.0",
116 | "scoring": {
117 | "0.3": "Achieved 30%",
118 | "0.6": "Achieved 60%",
119 | "1.0": "Achieved 100%"
120 | }
121 | }, {
122 | "name": "60 unique Reps have run a MozActivate event",
123 | "description": "",
124 | "progress": 0.8,
125 | "score": "0.6",
126 | "scoring": {
127 | "0.3": "Achieved 30%",
128 | "0.6": "Achieved 60%",
129 | "1.0": "Achieved 100%"
130 | }
131 | }, {
132 | "name": "The website is updated to the new branding",
133 | "description": "",
134 | "progress": 0.9,
135 | "score": "0.6",
136 | "scoring": {
137 | "0.3": "Achieved 30%",
138 | "0.6": "Achieved 60%",
139 | "1.0": "Achieved 100%"
140 | }
141 | }
142 | ]
143 | }
144 | ]
145 | }
146 |
--------------------------------------------------------------------------------
/okr-dashboard/src/remo_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/Reps/5a50be83b8f0f28f2d1a5cca259932b0f5a33cfe/okr-dashboard/src/remo_logo.png
--------------------------------------------------------------------------------
/okr-dashboard/src/shortcut.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/Reps/5a50be83b8f0f28f2d1a5cca259932b0f5a33cfe/okr-dashboard/src/shortcut.ico
--------------------------------------------------------------------------------
/okr-dashboard/src/template.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
12 |
17 |
13 | 
14 |
16 | Mozilla Reps OKR Dashboard - Q3 2017
15 |
18 | {data.objectives.map((objective, key) => (
19 |
26 |