add stats customizations, rename StatsRankSection

frontend/frontend/src/components/Home/StatsRankSection.js

@@ -11,7 +11,7 @@ export const DEFAULT_OPTION = {
   value: 'default',
 };
 
-const StatsLayoutSection = ({ selectedOption, setSelectedOption }) => {
+const StatsRankSection = ({ selectedOption, setSelectedOption }) => {
   const options = [
     DEFAULT_OPTION,
     { id: 2, label: 'Percentile', disabled: false, value: 'percentile' },
@@ -31,9 +31,9 @@ const StatsLayoutSection = ({ selectedOption, setSelectedOption }) => {
   );
 };
 
-StatsLayoutSection.propTypes = {
+StatsRankSection.propTypes = {
   selectedOption: PropTypes.object.isRequired,
   setSelectedOption: PropTypes.func.isRequired,
 };
 
-export default StatsLayoutSection;
+export default StatsRankSection;

frontend/frontend/src/pages/Home/Home.js

@@ -15,7 +15,7 @@ import { authenticate } from '../../api';
 import { login as _login } from '../../redux/actions/userActions';
 import { HOST } from '../../constants';
 import { CardTypes } from '../../utils';
-import { DEFAULT_OPTION as STATS_DEFAULT_LAYOUT } from '../../components/Home/StatsLayoutSection';
+import { DEFAULT_OPTION as STATS_DEFAULT_RANK } from '../../components/Home/StatsRankSection';
 import { DEFAULT_OPTION as LANGUAGES_DEFAULT_LAYOUT } from '../../components/Home/LanguagesLayoutSection';
 import { DEFAULT_OPTION as WAKATIME_DEFAULT_LAYOUT } from '../../components/Home/WakatimeLayoutSection';
 
@@ -39,8 +39,8 @@ const HomeScreen = () => {
   const [imageSrc, setImageSrc] = useState(`?&username=${userId}`);
 
   // for stage two
-  const [selectedStatsLayout, setSelectedStatsLayout] =
-    useState(STATS_DEFAULT_LAYOUT);
+  const [selectedStatsRank, setSelectedStatsRank] =
+    useState(STATS_DEFAULT_RANK);
   const [selectedLanguagesLayout, setSelectedLanguagesLayout] = useState(
     LANGUAGES_DEFAULT_LAYOUT,
   );
@@ -53,7 +53,9 @@ const HomeScreen = () => {
   const [descriptionLines, setDescriptionLines] = useState();
   const [customTitle, setCustomTitle] = useState('');
   const [langsCount, setLangsCount] = useState();
+  const [showAllStats, setShowAllStats] = useState(false);
   const [showIcons, setShowIcons] = useState(false);
+  const [includeAllCommits, setIncludeAllCommits] = useState(false);
   const [enableAnimations, setEnableAnimations] = useState(true);
   const [usePercent, setUsePercent] = useState(false);
 
@@ -84,8 +86,8 @@ const HomeScreen = () => {
 
   let fullSuffix = `${imageSrc}`;
 
-  if (selectedStatsLayout !== STATS_DEFAULT_LAYOUT) {
-    fullSuffix += `&rank_icon=${selectedStatsLayout.value}`;
+  if (selectedStatsRank !== STATS_DEFAULT_RANK) {
+    fullSuffix += `&rank_icon=${selectedStatsRank.value}`;
   }
 
   if (selectedLanguagesLayout !== LANGUAGES_DEFAULT_LAYOUT) {
@@ -117,10 +119,18 @@ const HomeScreen = () => {
     fullSuffix += `&langs_count=${langsCount}`;
   }
 
+  if (showAllStats) {
+    fullSuffix += `&show=reviews,discussions_started,discussions_answered,prs_merged,prs_merged_percentage,prs_commented,prs_reviewed,issues_commented`;
+  }
+
   if (showIcons) {
     fullSuffix += `&show_icons=true`;
   }
 
+  if (includeAllCommits) {
+    fullSuffix += `&include_all_commits=true`;
+  }
+
   if (!enableAnimations) {
     fullSuffix += `&disable_animations=${!enableAnimations}`;
   }
@@ -226,8 +236,8 @@ const HomeScreen = () => {
             <CustomizeStage
               selectedCard={selectedCard || CardTypes.STATS}
               imageSrc={imageSrc}
-              selectedStatsLayout={selectedStatsLayout}
-              setSelectedStatsLayout={setSelectedStatsLayout}
+              selectedStatsRank={selectedStatsRank}
+              setSelectedStatsRank={setSelectedStatsRank}
               selectedLanguagesLayout={selectedLanguagesLayout}
               setSelectedLanguagesLayout={setSelectedLanguagesLayout}
               selectedWakatimeLayout={selectedWakatimeLayout}
@@ -242,8 +252,12 @@ const HomeScreen = () => {
               setCustomTitle={setCustomTitle}
               langsCount={langsCount}
               setLangsCount={setLangsCount}
+              showAllStats={showAllStats}
+              setShowAllStats={setShowAllStats}
               showIcons={showIcons}
               setShowIcons={setShowIcons}
+              includeAllCommits={includeAllCommits}
+              setIncludeAllCommits={setIncludeAllCommits}
               enableAnimations={enableAnimations}
               setEnableAnimations={setEnableAnimations}
               usePercent={usePercent}

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -5,14 +5,14 @@ import { CheckboxSection, Image } from '../../../components';
 import { CardTypes } from '../../../utils';
 import TextSection from '../../../components/Home/TextSection';
 import NumericSection from '../../../components/Home/NumericSection';
-import StatsLayoutSection from '../../../components/Home/StatsLayoutSection';
+import StatsRankSection from '../../../components/Home/StatsRankSection';
 import LanguagesLayoutSection from '../../../components/Home/LanguagesLayoutSection';
 import WakatimeLayoutSection from '../../../components/Home/WakatimeLayoutSection';
 
 const CustomizeStage = ({
   selectedCard,
-  selectedStatsLayout,
-  setSelectedStatsLayout,
+  selectedStatsRank,
+  setSelectedStatsRank,
   selectedLanguagesLayout,
   setSelectedLanguagesLayout,
   selectedWakatimeLayout,
@@ -29,6 +29,10 @@ const CustomizeStage = ({
   setLangsCount,
   showIcons,
   setShowIcons,
+  showAllStats,
+  setShowAllStats,
+  includeAllCommits,
+  setIncludeAllCommits,
   enableAnimations,
   setEnableAnimations,
   usePercent,
@@ -71,9 +75,9 @@ const CustomizeStage = ({
           />
         )}
         {cardType === CardTypes.STATS && (
-          <StatsLayoutSection
-            selectedOption={selectedStatsLayout}
-            setSelectedOption={setSelectedStatsLayout}
+          <StatsRankSection
+            selectedOption={selectedStatsRank}
+            setSelectedOption={setSelectedStatsRank}
           />
         )}
         {cardType === CardTypes.TOP_LANGS && (
@@ -136,6 +140,24 @@ const CustomizeStage = ({
             setVariable={setShowIcons}
           />
         )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Show All Stats?"
+            text="Show all available statistics."
+            question="Show all stats?"
+            variable={showAllStats}
+            setVariable={setShowAllStats}
+          />
+        )}
+        {cardType === CardTypes.STATS && (
+          <CheckboxSection
+            title="Include All Commits?"
+            text="Count total commits or just commits of the last 365 days."
+            question="Include all commits?"
+            variable={includeAllCommits}
+            setVariable={setIncludeAllCommits}
+          />
+        )}
       </div>
       <div className="w-full lg:w-3/5 md:w-1/2 object-center pt-5 md:pt-0 pl-0 md:pl-5 lg:pl-0">
         <div className="w-full lg:w-3/5 mx-auto flex flex-col justify-center">
@@ -148,8 +170,8 @@ const CustomizeStage = ({
 
 CustomizeStage.propTypes = {
   selectedCard: PropTypes.string.isRequired,
-  selectedStatsLayout: PropTypes.object.isRequired,
-  setSelectedStatsLayout: PropTypes.func.isRequired,
+  selectedStatsRank: PropTypes.object.isRequired,
+  setSelectedStatsRank: PropTypes.func.isRequired,
   selectedLanguagesLayout: PropTypes.object.isRequired,
   setSelectedLanguagesLayout: PropTypes.func.isRequired,
   selectedWakatimeLayout: PropTypes.object.isRequired,
@@ -166,6 +188,10 @@ CustomizeStage.propTypes = {
   setLangsCount: PropTypes.func.isRequired,
   showIcons: PropTypes.bool.isRequired,
   setShowIcons: PropTypes.func.isRequired,
+  showAllStats: PropTypes.bool.isRequired,
+  setShowAllStats: PropTypes.func.isRequired,
+  includeAllCommits: PropTypes.bool.isRequired,
+  setIncludeAllCommits: PropTypes.func.isRequired,
   enableAnimations: PropTypes.bool.isRequired,
   setEnableAnimations: PropTypes.func.isRequired,
   usePercent: PropTypes.bool.isRequired,