Update graph in leaderboard (#70)

* Update graph in leaderboard

* Fix leaderboard graphs UI

* Hide Extra markers/Show total points only

* Remove markers in X-Axis

* Alphabetize code, Change var to let

* Aligned leaderboard elements and added winning streak

* Change color of Graph, Icons

* Aligned name coloumn to left and made page more responsive

* Update package.json

* Update config.yml

* Update Register.tsx

* fixed react-flags-select

* Update config.yml

* Fix react-flags-select package related errors

Co-authored-by: Sriram <sriram01201@gmail.com>
Co-authored-by: Bestin B Thomas <Bestinbthomas@gmail.com>

Author: 3 people

.circleci/config.yml

@@ -51,7 +51,7 @@ jobs:
           command: cp ./src/config/config.example.ts ./src/config/config.ts
       - run:
           name: build
-          command: npm run build
+          command: mkdir build && npm run build
 
 workflows:
   version: 2

package.json

@@ -152,7 +152,7 @@
     "react-bootstrap": "^0.32.4",
     "react-country-flag": "^1.0.1",
     "react-dom": "^16.5.2",
-    "react-flags-select": "^1.1.10",
+    "react-flags-select": "2.1.2",
     "react-ga": "^2.7.0",
     "react-google-recaptcha": "^1.0.5",
     "react-joyride": "^2.2.1",

src/app/components/Authentication/Register.tsx

@@ -13,7 +13,6 @@ import * as React from 'react';
 import { Col, Row } from 'react-bootstrap';
 // tslint:disable-next-line:import-name
 import ReactFlagsSelect from 'react-flags-select';
-import 'react-flags-select/css/react-flags-select.css';
 // tslint:disable-next-line:import-name
 import ReCAPTCHA from 'react-google-recaptcha';
 import { NavLink, Redirect } from 'react-router-dom';
@@ -350,10 +349,10 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
                   <div className={classnames(authStyles['login-label'])}> Your country </div>
                   <div className={classnames(registerStyles['input-group'])}>
                     <ReactFlagsSelect
+                      selected="IN"
                       searchable={true}
                       placeholder="Search for a country"
                       className={classnames(authStyles.customFlag)}
-                      defaultCountry="IN"
                       onSelect={this.onSelectFlag}
                     />
 

src/app/components/Leaderboard/IconElement.tsx

@@ -12,14 +12,15 @@ import * as React from 'react';
 // tslint:disable-next-line
 export const IconsComponent = ({ player }: any) => {
   return (
-    <div style={{ fontSize: '1.5rem' }}>
+    <div style={{ fontSize: '1.5rem', color: 'light-gray' }}>
       <div
         className={classnames(styles['leader-score_title'])}
         style={{
-          color: 'gray',
+          color: 'light-gray',
           display: 'block',
           fontSize: '26px',
           left: '35%',
+          lineHeight: '2',
           marginTop: '5px',
           position: 'absolute',
           textAlign: 'center',
@@ -41,26 +42,29 @@ export const IconsComponent = ({ player }: any) => {
           icon={faTrophy}
           className={classnames(styles.trophy)}
           aria-hidden="true"
+          color="#00e396"
         />
-        <p style={{ color: 'grey' }}>{player.wins}</p>
+        <p style={{ color: 'light-gray' }}>{player.wins}</p>
       </div>
       <div style={{ position: 'absolute', left: '68%', top: '15px', textAlign: 'center' }}>
         <FontAwesomeIcon
           title="Tied"
           icon={faHandshake}
           className={classnames(styles.handshake)}
           aria-hidden="true"
+          color="#008ffb"
         />
-        <p style={{ color: 'grey' }}>{player.ties}</p>
+        <p style={{ color: 'light-gray' }}>{player.ties}</p>
       </div>
       <div style={{ position: 'absolute', left: '85%', top: '15px', textAlign: 'center' }}>
         <FontAwesomeIcon
           title="Lost"
           icon={faThumbsDown}
           className={classnames(styles.thumbdown)}
           aria-hidden="true"
+          color="#feb019"
         />
-        <p style={{ color: 'grey' }}>{player.losses}</p>
+        <p style={{ color: 'light-gray' }}>{player.losses}</p>
       </div>
     </div>
   );

src/app/components/Leaderboard/LeaderboardElement.tsx

@@ -6,6 +6,7 @@ import { Avatar, avatarName } from 'app/types/Authentication/Register';
 import { Request } from 'app/types/code/Submission';
 import * as LeaderboardInterfaces from 'app/types/Leaderboard';
 import classnames from 'classnames';
+// import { type } from 'os';
 import * as React from 'react';
 /* tslint:disable-next-line:import-name */
 import Chart from 'react-apexcharts';
@@ -22,8 +23,6 @@ export class LeaderboardElement extends React.Component<
     isModelOpen: boolean;
     onHover: boolean;
     optionsPie: object;
-    optionsLine: object;
-    series: object;
   }
 > {
   // tslint:disable-next-line
@@ -32,41 +31,7 @@ export class LeaderboardElement extends React.Component<
     this.state = {
       isModelOpen: false,
       onHover: false,
-      optionsLine: {
-        chart: {
-          foreColor: 'gray',
-          height: 40,
-          id: 'basic-bar',
-          toolbar: {
-            show: false,
-          },
-          zoom: {
-            enabled: false,
-          },
-        },
-        dataLabels: {
-          enabled: false,
-          markers: {
-            colors: ['rgb(0, 143, 251)', 'rgb(0, 227, 150)', 'rgb(254, 176, 25)'],
-          },
-          style: {
-            colors: ['#000000', '#000000', '#000000'],
-          },
-        },
-        markers: {
-          hover: {
-            size: '5',
-            sizeOffset: '0',
-          },
-          size: '5',
-        },
-        stroke: {
-          curve: 'smooth',
-        },
-        xaxis: {
-          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
-        },
-      },
+
       optionsPie: {
         chart: {
           foreColor: 'gray',
@@ -98,33 +63,9 @@ export class LeaderboardElement extends React.Component<
           },
         },
       },
-      series: {
-        data: [30, 40, 45, 50, 49, 60, 70, 91],
-        name: 'series-1',
-      },
     };
   }
 
-  public componentDidMount() {
-    const { player } = this.props;
-    const ratingArray: number[] = [];
-    const labelArray: string[] = [];
-    player.rating.forEach((element) => {
-      ratingArray.push(Math.round(element.rating * 100) / 100);
-      const dateobj = new Date(element.validFrom);
-      labelArray.push(dateobj.toLocaleDateString('en-GB').substr(0, 5));
-    });
-    this.setState((prevState) => ({ series: { ...prevState.series, data: ratingArray } }));
-    this.setState((prevState) => ({
-      optionsLine: {
-        ...prevState.optionsLine,
-        xaxis: {
-          categories: labelArray,
-        },
-      },
-    }));
-  }
-
   public handleOnClick = () => {
     this.setState((prevState, props) => ({
       isModelOpen: !prevState.isModelOpen,
@@ -152,6 +93,92 @@ export class LeaderboardElement extends React.Component<
       updatePlayerId2,
       updateRequest,
     } = this.props;
+    const ratingArray: number[] = [];
+    const labelArray: string[] = [];
+    let tempDate = '';
+    let prevRate = 0;
+    let maxWinningStreak = 0;
+    let curWinningStreak = 0;
+    let currentRate = 0;
+    player.rating.forEach((element) => {
+      currentRate = Math.round(element.rating * 100) / 100;
+      ratingArray.push(currentRate);
+
+      if (currentRate > prevRate) {
+        curWinningStreak += 1;
+      } else {
+        if (curWinningStreak > maxWinningStreak) {
+          maxWinningStreak = curWinningStreak;
+          curWinningStreak = 0;
+        }
+      }
+      prevRate = currentRate;
+
+      let realDate = '';
+      const dateobj = new Date(element.validFrom);
+      realDate = dateobj.toLocaleDateString('en-GB').substr(0, 5);
+      if (realDate === tempDate) {
+        labelArray.push(' ');
+      } else {
+        tempDate = realDate;
+        labelArray.push(realDate);
+      }
+    });
+    const series = { data: ratingArray, name: 'Points' };
+    const optionsLine = {
+      chart: {
+        foreColor: 'gray',
+        height: 40,
+        id: 'basic-bar',
+        toolbar: {
+          show: false,
+        },
+        zoom: {
+          enabled: false,
+        },
+      },
+      dataLabels: {
+        enabled: false,
+        markers: {
+          colors: ['rgb(0, 143, 251)', 'rgb(0, 227, 150)', 'rgb(254, 176, 25)'],
+        },
+        style: {
+          colors: ['#000000', '#000000', '#000000'],
+        },
+      },
+      markers: {
+        hover: {
+          size: '0',
+          sizeOffset: '0',
+        },
+        size: '0',
+      },
+      stroke: {
+        curve: 'smooth',
+      },
+      xaxis: {
+        axisBorder: {
+          color: '#000',
+          show: true,
+        },
+        axisTicks: {
+          show: false,
+        },
+        categories: labelArray,
+        labels: {
+          style: {
+            colors: 'rgb(255,255,255)',
+          },
+        },
+      },
+      yaxis: {
+        labels: {
+          style: {
+            colors: 'rgb(255,255,255)',
+          },
+        },
+      },
+    };
     return (
       <Col
         md={26}
@@ -193,6 +220,7 @@ export class LeaderboardElement extends React.Component<
                 style={{
                   color: colors[player.rank],
                   marginLeft: '4px',
+                  marginRight: '0px',
                   position: 'relative',
                   top: '20%',
                 }}
@@ -210,7 +238,7 @@ export class LeaderboardElement extends React.Component<
                   marginLeft: '4px',
                 }}
                 className={classnames(
-                  player.rank <= 10 ? styles['leader-ava'] : styles['leader-ava-l'],
+                  player.rank <= 9 ? styles['leader-ava'] : styles['leader-ava-l'],
                 )}
               >
                 {player.rank}
@@ -279,6 +307,10 @@ export class LeaderboardElement extends React.Component<
                   width={30}
                   height={30}
                   className="mr-3"
+                  style={{
+                    filter:
+                      ' invert(14%) sepia(3%) saturate(68960%) hue-rotate(320deg) brightness(102%) contrast(110%)',
+                  }}
                   onClickCapture={async (e) => {
                     // hello
                     e.stopPropagation();
@@ -303,26 +335,24 @@ export class LeaderboardElement extends React.Component<
         >
           {this.state.isModelOpen ? (
             <div
-              className="row justify-content-center"
+              className={classnames(styles.chart_holder, 'row', 'justify-content-center')}
               onClick={(event) => {
                 event.stopPropagation();
               }}
             >
-              <div className={classnames(styles.chart_div, 'col col-lg-5')}>
+              <div className={classnames(styles.chart_div, styles.pie_chart)}>
                 <Chart
                   options={this.state.optionsPie}
                   series={[player.ties, player.wins, player.losses]}
                   type="donut"
-                  width="380"
+                  width="400"
                 />
+                <div className={classnames(styles.winning_streak)}>
+                  Highest winning streak: {maxWinningStreak}
+                </div>
               </div>
-              <div className={classnames(styles.chart_div, 'col-lg-5')}>
-                <Chart
-                  options={this.state.optionsLine}
-                  series={[this.state.series]}
-                  type="line"
-                  width="500"
-                />
+              <div className={classnames(styles.chart_div)}>
+                <Chart options={optionsLine} series={[series]} type="line" width="760" />
               </div>
             </div>
           ) : null}