Client: replace select with radio buttons on statistics

fittrackee_client/src/components/App.css

@@ -329,6 +329,36 @@ label {
   max-height: 45px;
 }
 
+.time-frames {
+  align-items: center;
+  display: inline-flex;
+}
+
+.time-frame label {
+  float: left;
+  padding: 0 5px;
+  width: 4em;
+}
+
+.time-frame label input {
+  display: none;
+}
+
+.time-frame label span {
+  border: #a9a9a9 solid 1px;
+  border-radius: 9%;
+  color: #7b7b7b;
+  display: block;
+  font-size: 0.9em;
+  padding: 2px 0;
+  text-align: center;
+}
+
+.time-frame input:checked + span {
+  background-color: #a9a9a9;
+  color: #ffffff;
+}
+
 .timezone-custom-height {
   height: calc(2.25rem + 14px);
 }

fittrackee_client/src/components/Statistics/index.jsx

@@ -48,7 +48,8 @@ class Statistics extends React.Component {
   }
 
   handleOnChangeDuration(e) {
-    const duration = e.target.value
+    const duration = e.target.name
+
     const date = new Date()
     const start = duration === 'year'
       ? startOfYear(subYears(date, 9))
@@ -131,19 +132,21 @@ class Statistics extends React.Component {
                     />
                   </p>
                 </div>
-                <div className="col-md-3">
-                  <select
-                    className="form-control input-lg"
-                    name="duration"
-                    defaultValue={statsParams.duration}
-                    onChange={e => this.handleOnChangeDuration(e)}
-                  >
+                <div className="col-md-3 time-frames justify-content-around">
                   {durations.map(d => (
-                      <option key={d} value={d}>
-                        {d}
-                      </option>
+                    <div className="time-frame" key={d}>
+                      <label >
+                        <input
+                          type="radio"
+                          id={d}
+                          name={d}
+                          checked={d === statsParams.duration}
+                          onChange={e => this.handleOnChangeDuration(e)}
+                        />
+                        <span>{ d }</span>
+                      </label>
+                    </div>
                   ))}
-                  </select>
                 </div>
                 <div className="col chart-arrows">
                   <p className="text-center">