Fix/issue 10

.circleci/config.yml

@@ -77,13 +77,13 @@ workflows:
             branches:
               only:
                 - develop
+                - fix/issue-10
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.
       - "build-prod":
           context: org-global
           filters:
             branches:
-              only: 
+              only:
                 - master
-                - develop

config/dev.js

@@ -5,5 +5,6 @@ module.exports = {
   },
   URL: {
     FORUMS: "https://apps.topcoder-dev.com/forums",
+    COMMUNITY: "https://community.topcoder-dev.com",
   },
 };

config/prod.js

@@ -5,5 +5,6 @@ module.exports = {
   },
   URL: {
     FORUMS: "https://apps.topcoder.com/forums",
+    COMMUNITY: "https://community.topcoder.com",
   },
 };

package.json

@@ -34,6 +34,7 @@
     "config": "^3.3.6",
     "cross-env": "^7.0.2",
     "css-loader": "3.5.3",
+    "d3": "3.5.17",
     "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-react-important-stuff": "^2.0.0",

src/actions/profile.js

@@ -1,9 +1,7 @@
 import _ from "lodash";
 import { createActions } from "redux-actions";
+import challengesService from "../services/challenges";
 import service from "../services/profile";
-import challengesService, {
-  getMemberActiveChallenges,
-} from "../services/challenges";
 
 /**
  * Gets member profile action.
@@ -71,12 +69,37 @@ async function getActiveChallenges(memberId) {
   return challengesService.getMemberActiveChallenges(memberId);
 }
 
+/**
+ * Gets member's stats history
+ *
+ * @param {String} memberId
+ *
+ * @return {Promise} Resolves to member stats history
+ */
+async function getStatsHistory(memberId) {
+  return service.getStatsHistory(memberId);
+}
+
+/**
+ * Gets member's stats distribution
+ *
+ * @param {String} track
+ * @param {String} subTrack
+ *
+ * @return {Promise} Resolves to member stats distribution
+ */
+async function getStatsDistribution(track, subTrack) {
+  return service.getStatsDistribution(track, subTrack);
+}
+
 export default createActions({
   GET_MEMBER_PROFILE: getMemberProfile,
   GET_STATS: getStats,
   GET_SKILLS: getSkills,
   GET_EXTERNAL_LINKS: getExternalLinks,
   GET_EXTERNAL_ACCOUNTS: getExternalAccounts,
   GET_ACTIVE_CHALLENGES: getActiveChallenges,
+  GET_STATS_HISTORY: getStatsHistory,
+  GET_STATS_DISTRIBUTION: getStatsDistribution,
   CLEAR_ERROR: _.noop,
 });

src/components/ProfileAbout/index.jsx

@@ -37,17 +37,18 @@ const ProfileAbout = ({
       {_.isEmpty(skills) && _.isEmpty(activeTracks) && _.isEmpty(externals) && (
         <EmptyProfile />
       )}
+
       {!_.isEmpty(skills) && (
         <div id="profile-skills">
           <div styleName="skills">
             <h3 styleName="activity">Skills</h3>
           </div>
           <Skills skills={skills} />
-          {!_.isEmpty(stats) && (
-            <Activity stats={stats} handle={profile.handle} />
-          )}
         </div>
       )}
+      {!_.isEmpty(activeTracks) && !_.isEmpty(stats) && (
+        <Activity stats={stats} handle={profile.handle} />
+      )}
       {!_.isEmpty(externals) && <LinkedAccounts externals={externals} />}
     </div>
   );

src/components/ProfileStatsPage/ChartTooltip/index.jsx

@@ -0,0 +1,90 @@
+/**
+ * Chart tooltip.  Displays the stats of a TopCoder member.
+ */
+/* eslint-env browser */
+import React from "react";
+import PT from "prop-types";
+import { Link } from "@reach/router";
+import "./styles.scss";
+
+const ChartTooltip = ({
+  track,
+  show,
+  left,
+  top,
+  challengeName,
+  challengeData,
+  rating,
+  ratingColor,
+  link,
+}) => {
+  if (link == null) {
+    return null;
+  }
+
+  const popup = (
+    <>
+      <div styleName="tooltip-rating" style={{ backgroundColor: ratingColor }}>
+        {rating}
+      </div>
+      <div styleName="tooltip-challenge">
+        <div styleName="challenge-name">{challengeName}</div>
+        <div styleName="challenge-date">{challengeData}</div>
+      </div>
+    </>
+  );
+
+  const style = {
+    opacity: show ? 1 : 0,
+    left,
+    top,
+    pointerEvents: link ? "all" : "none",
+  };
+
+  if (track === "DEVELOP") {
+    return (
+      <Link styleName="chart-tooltip" style={style} to={link}>
+        {popup}
+      </Link>
+    );
+  }
+
+  // Show Data Science match details in Community App
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      styleName="chart-tooltip"
+      style={style}
+    >
+      {popup}
+    </a>
+  );
+};
+
+ChartTooltip.defaultProps = {
+  track: null,
+  show: false,
+  left: 0,
+  top: 0,
+  challengeName: "",
+  challengeData: "",
+  rating: 0,
+  ratingColor: "",
+  link: null,
+};
+
+ChartTooltip.propTypes = {
+  track: PT.string,
+  show: PT.bool,
+  left: PT.number,
+  top: PT.number,
+  challengeName: PT.string,
+  challengeData: PT.string,
+  rating: PT.number,
+  ratingColor: PT.string,
+  link: PT.string,
+};
+
+export default ChartTooltip;

src/components/ProfileStatsPage/ChartTooltip/styles.scss

@@ -0,0 +1,64 @@
+@import "styles/main";
+
+.chart-tooltip {
+  display: block;
+  opacity: 0;
+  position: absolute;
+  box-sizing: border-box;
+  width: 320px;
+  height: 115px;
+  padding: 15px;
+  color: $tc-white !important;
+  background-color: $tc-gray-80;
+  transform: translate(-160px, 30px);
+  border-radius: 5px;
+  transition: opacity 200ms ease;
+  transition-delay: 200ms;
+  font-family: sans-serif;
+  z-index: 3;
+
+  &:hover {
+    opacity: 1 !important;
+    color: $tc-white;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 155px;
+    top: -5px;
+    height: 10px;
+    width: 10px;
+    background-color: $tc-gray-80;
+    transform: rotate(45deg);
+  }
+
+  .tooltip-rating {
+    width: 60px;
+    height: 60px;
+    margin-right: 15px;
+    border-radius: 50%;
+    float: left;
+    text-align: center;
+    padding-top: 23px;
+    transition: background-color 200ms ease;
+  }
+
+  .tooltip-challenge {
+    height: 100%;
+    width: calc(100% - 90px);
+    float: left;
+  }
+
+  .tooltip-challenge .challenge-name {
+    white-space: normal;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .tooltip-challenge .challenge-date {
+    font-weight: normal;
+    margin-top: 13px;
+    font-size: 12px;
+  }
+}