Add Daily Effort X-Range Tab

atcoder-problems-frontend/src/pages/UserPage/ProgressChartBlock/DailyEffortBarChart.tsx

@@ -13,6 +13,7 @@ import { formatMomentDate, parseSecond } from "../../../utils/DateUtil";
 
 interface Props {
   dailyData: { dateSecond: number; count: number }[];
+  xRange: (number | "dataMin" | "dataMax")[];
   yRange: number | "auto";
 }
 
@@ -32,7 +33,8 @@ export const DailyEffortBarChart: React.FC<Props> = (props) => (
         <XAxis
           dataKey="dateSecond"
           type="number"
-          domain={["dataMin", "dataMax"]}
+          domain={props.xRange}
+          allowDataOverflow={true}
           tickFormatter={(dateSecond: number): string =>
             formatMomentDate(parseSecond(dateSecond))
           }

atcoder-problems-frontend/src/pages/UserPage/ProgressChartBlock/DailyEffortStackedBarChart.tsx

@@ -23,11 +23,12 @@ interface Props {
     dateSecond: number;
     countMap: Map<RatingColor, number>;
   }[];
+  xRange: (number | "dataMin" | "dataMax")[];
   yRange: number | "auto";
 }
 
 export const DailyEffortStackedBarChart: React.FC<Props> = (props) => {
-  const { dailyColorCount, yRange } = props;
+  const { dailyColorCount, xRange, yRange } = props;
 
   const dailyCount = dailyColorCount.map(({ dateSecond, countMap }) => {
     return { ...mapToObject(countMap), dateSecond };
@@ -49,7 +50,8 @@ export const DailyEffortStackedBarChart: React.FC<Props> = (props) => {
           <XAxis
             dataKey="dateSecond"
             type="number"
-            domain={["dataMin", "dataMax"]}
+            domain={xRange}
+            allowDataOverflow={true}
             tickFormatter={(dateSecond: number): string =>
               formatMomentDate(parseSecond(dateSecond))
             }

atcoder-problems-frontend/src/pages/UserPage/ProgressChartBlock/index.tsx

@@ -64,6 +64,49 @@ const ChartTypeTabButtons: React.FC<ChartTypeTabProps> = (props) => {
   );
 };
 
+type XRanges = (number | "dataMin")[];
+interface XRangeTabProps {
+  active: XRanges;
+  setActive: (next: XRanges) => void;
+}
+const XRangeTabButtons: React.FC<XRangeTabProps> = (props) => {
+  const { active, setActive } = props;
+  const yearToSeconds = 365 * 24 * 60 * 60;
+  const nowUnixTime = new Date().getTime() / 1000;
+  const RANGES: XRanges[] = [
+    [nowUnixTime - 1 * yearToSeconds, nowUnixTime],
+    [nowUnixTime - 2 * yearToSeconds, nowUnixTime],
+    [nowUnixTime - 5 * yearToSeconds, nowUnixTime],
+    [nowUnixTime - 10 * yearToSeconds, nowUnixTime],
+    ["dataMin", nowUnixTime],
+  ];
+  const RANGENAMES = [
+    "in last 1 year",
+    "in last 2 years",
+    "in last 5 years",
+    "in last 10 years",
+    "all time",
+  ];
+  return (
+    <ButtonGroup>
+      <UncontrolledDropdown>
+        <DropdownToggle caret>{"X-Range"}</DropdownToggle>
+        <DropdownMenu>
+          {RANGES.map((range, idx) => (
+            <DropdownItem
+              key={range}
+              onClick={(): void => setActive(range)}
+              active={active === range}
+            >
+              {RANGENAMES[idx]}
+            </DropdownItem>
+          ))}
+        </DropdownMenu>
+      </UncontrolledDropdown>
+    </ButtonGroup>
+  );
+};
+
 type YRanges = number | "auto";
 interface YRangeTabProps {
   active: YRanges;
@@ -101,6 +144,11 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
     dailyEffortBarChartActiveTab,
     setDailyEffortBarChartActiveTab,
   ] = useLocalStorage<ChartType>("dailyEffortBarChartActiveTab", "Simple");
+  const nowUnixTime = new Date().getTime() / 1000;
+  const [dailyEffortXRange, setDailyEffortXRange] = useLocalStorage<XRanges>(
+    "dailyEffortXRange",
+    ["dataMin", nowUnixTime]
+  );
   const [dailyEffortYRange, setDailyEffortYRange] = useLocalStorage<YRanges>(
     "dailyEffortYRange",
     "auto"
@@ -224,6 +272,10 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
           active={dailyEffortBarChartActiveTab}
           setActive={setDailyEffortBarChartActiveTab}
         />
+        <XRangeTabButtons
+          active={dailyEffortXRange}
+          setActive={setDailyEffortXRange}
+        />
         <YRangeTabButtons
           active={dailyEffortYRange}
           setActive={setDailyEffortYRange}
@@ -235,11 +287,13 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
             dateSecond: parseDateLabel(dateLabel).unix(),
             count,
           }))}
+          xRange={dailyEffortXRange}
           yRange={dailyEffortYRange}
         />
       ) : (
         <DailyEffortStackedBarChart
           dailyColorCount={dailyColorCount}
+          xRange={dailyEffortXRange}
           yRange={dailyEffortYRange}
         />
       )}

atcoder-problems-frontend/src/utils/LocalStorage.tsx

@@ -9,6 +9,7 @@ const LocalStorageKeys = [
   "showPenalties",
   "hideCompletedContest",
   "dailyEffortBarChartActiveTab",
+  "dailyEffortXRange",
   "dailyEffortYRange",
   "climbingLineChartActiveTab",
   "climbingLineChartReverseColorOrder",