diff --git a/components/ContributionChart.js b/components/ContributionChart.js index 2f77b06d..50d2f385 100644 --- a/components/ContributionChart.js +++ b/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 ( @@ -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 }) { ); } + +export default memo(ContributionChart); diff --git a/components/ContributionChart.stories.js b/components/ContributionChart.stories.js index a09bd6f2..808e950a 100644 --- a/components/ContributionChart.stories.js +++ b/components/ContributionChart.stories.js @@ -343,6 +343,23 @@ const data = [ { date: '2021-02-23', count: 2 }, ]; -export const Normal = () => ( +export const Many = () => ( ); + +export const Few = () => ( + +); + +export const Empty = () => ( + +); diff --git a/components/Infos/__snapshots__/Infos.stories.storyshot b/components/Infos/__snapshots__/Infos.stories.storyshot index 110cc9d4..93108f0b 100644 --- a/components/Infos/__snapshots__/Infos.stories.storyshot +++ b/components/Infos/__snapshots__/Infos.stories.storyshot @@ -93,10 +93,10 @@ exports[`Storyshots Infos With Reply Count Info 1`] = ` arrow={true} title={