Adjust ContributionChart coloring

components/ContributionChart.js

@@ -1,15 +1,17 @@
+import { useState, memo } from 'react';
 import { t, ngettext, msgid } from 'ttag';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from './Tooltip';
 import { Card, CardHeader, CardContent } from 'components/Card';
-import { useState } from 'react';
 
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { addDays, format } from 'date-fns';
 
 const MAX_SCALE = 4;
+const MIN_CONTRIB = 8;
+const MAX_CONTRIB = 20;
 
 const useStyles = makeStyles(theme => ({
   colorCofacts0: {
@@ -134,25 +136,30 @@ function Legend({ count }) {
   );
 }
 
-function scaleColor(count, maxContribution) {
-  const varingScalingFactor =
-    maxContribution.count < 10
-      ? 10 / MAX_SCALE
-      : maxContribution.count / MAX_SCALE;
+/**
+ *
+ * @param {number} count
+ * @param {number} maxCount
+ * @returns {number} Color scale integer (0 ~ MAX_SCALE)
+ */
+function scaleColor(count, maxCount) {
   return Math.max(
-    Math.min(Math.ceil(count / varingScalingFactor), MAX_SCALE),
-    0
+    0,
+    Math.min(Math.ceil((count / maxCount) * MAX_SCALE), MAX_SCALE)
   );
 }
 
-export default function ContributionChart({ startDate, endDate, data }) {
+function ContributionChart({ startDate, endDate, data }) {
   const [showPlot, setShowPlot] = useState(true);
   const classes = useStyles({ showPlot });
   const firstDay = new Date(startDate);
   const total = data.reduce((sum, value) => sum + value.count, 0);
-  const maxContribution = data.reduce((prev, current) => {
-    return prev.count > current.count ? prev : current;
-  });
+
+  // Max count in the data, clamped to [MIN_CONTRIB, MAX_CONTRIB]
+  const maxCount = Math.min(
+    Math.max(MIN_CONTRIB, ...data.map(({ count }) => count)),
+    MAX_CONTRIB
+  );
 
   return (
     <Card>
@@ -186,7 +193,7 @@ export default function ContributionChart({ startDate, endDate, data }) {
                 if (!value) {
                   return classes.colorCofacts0;
                 }
-                const scale = scaleColor(value.count, maxContribution);
+                const scale = scaleColor(value.count, maxCount);
                 return classes[`colorCofacts${scale}`];
               }}
               transformDayElement={(element, value, index) => {
@@ -221,3 +228,5 @@ export default function ContributionChart({ startDate, endDate, data }) {
     </Card>
   );
 }
+
+export default memo(ContributionChart);

components/ContributionChart.stories.js

@@ -343,6 +343,23 @@ const data = [
   { date: '2021-02-23', count: 2 },
 ];
 
-export const Normal = () => (
+export const Many = () => (
   <ContributionChart startDate="2020-02-22" endDate="2021-02-23" data={data} />
 );
+
+export const Few = () => (
+  <ContributionChart
+    startDate="2020-02-22"
+    endDate="2021-02-23"
+    data={[
+      { date: '2020-11-25', count: 1 },
+      { date: '2020-11-26', count: 4 },
+      { date: '2020-11-27', count: 6 },
+      { date: '2021-02-19', count: 8 },
+    ]}
+  />
+);
+
+export const Empty = () => (
+  <ContributionChart startDate="2020-02-22" endDate="2021-02-23" data={[]} />
+);

components/Infos/__snapshots__/Infos.stories.storyshot

@@ -93,10 +93,10 @@ exports[`Storyshots Infos With Reply Count Info 1`] = `
         arrow={true}
         title={
           <div
-            className="makeStyles-opinions-438"
+            className="makeStyles-opinions-582"
           >
             <span
-              className="makeStyles-opinion-439"
+              className="makeStyles-opinion-583"
             >
               <NOT_ARTICLE
                 fontSize="inherit"
@@ -106,7 +106,7 @@ exports[`Storyshots Infos With Reply Count Info 1`] = `
               </span>
             </span>
             <span
-              className="makeStyles-opinion-439"
+              className="makeStyles-opinion-583"
             >
               <OPINIONATED
                 fontSize="inherit"
@@ -116,7 +116,7 @@ exports[`Storyshots Infos With Reply Count Info 1`] = `
               </span>
             </span>
             <span
-              className="makeStyles-opinion-439"
+              className="makeStyles-opinion-583"
             >
               <NOT_RUMOR
                 fontSize="inherit"
@@ -126,7 +126,7 @@ exports[`Storyshots Infos With Reply Count Info 1`] = `
               </span>
             </span>
             <span
-              className="makeStyles-opinion-439"
+              className="makeStyles-opinion-583"
             >
               <RUMOR
                 fontSize="inherit"

components/ReportPage/__snapshots__/ActionButton.stories.storyshot

@@ -9,7 +9,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
   }
 >
   <button
-    className="MuiButtonBase-root-1173 MuiButton-root-1144 MuiButton-outlined-1149 makeStyles-button"
+    className="MuiButtonBase-root-1317 MuiButton-root-1288 MuiButton-outlined-1293 makeStyles-button"
     disabled={false}
     onBlur={[Function]}
     onDragLeave={[Function]}
@@ -31,13 +31,13 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-label-1145"
+      className="MuiButton-label-1289"
     >
       Action button text
       <Arrow>
         <svg
           aria-hidden="true"
-          className="MuiSvgIcon-root-1176"
+          className="MuiSvgIcon-root-1320"
           focusable="false"
           viewBox="0 0 14 27"
         >
@@ -52,7 +52,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
     </span>
     <NoSsr>
       <span
-        className="MuiTouchRipple-root-1185"
+        className="MuiTouchRipple-root-1329"
       >
         <TransitionGroup
           childFactory={[Function]}