Merge pull request #103 from ranger-ross/upcoming-reviews-dropdown

Upcoming reviews dropdown refactoring
ranger-ross · Feb 10, 2022 · 0821c0e · 0821c0e
2 parents 830a946 + b11dcd8
commit 0821c0e
Show file tree

Hide file tree

Showing 15 changed files with 218 additions and 296 deletions.
diff --git a/src/anki/components/AnkiReviewsChart.jsx b/src/anki/components/AnkiReviewsChart.jsx
@@ -9,7 +9,7 @@ import {daysToMillis, millisToDays, truncDate} from "../../util/DateUtils.js";
 import AnkiApiService from "../service/AnkiApiService.js";
 import {scaleBand} from 'd3-scale';
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 
 function DataPoint(date, previousDataPoint) {
     let dp = {
@@ -146,9 +146,9 @@ function AnkiReviewsChart({deckNames, showTotals}) {
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector days={daysToLookBack}
-                                      setDays={setDaysToLookBack}
-                                      options={[
+                        <PeriodSelector period={daysToLookBack}
+                                        setPeriod={setDaysToLookBack}
+                                        options={[
                                           {value: 30, text: '1 Mon'},
                                           {value: 60, text: '2 Mon'},
                                           {value: 90, text: '3 Mon'},

diff --git a/src/anki/components/AnkiTotalCardsHistoryChart.jsx b/src/anki/components/AnkiTotalCardsHistoryChart.jsx
@@ -1,5 +1,5 @@
 import {Card, CardContent, CircularProgress, Grid, Typography} from "@mui/material";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import {daysToMillis, millisToDays, truncDate} from "../../util/DateUtils.js";
 import {ArgumentAxis, Chart, Legend, Tooltip, ValueAxis} from "@devexpress/dx-react-chart-material-ui";
 import {ArgumentScale, EventTracker, LineSeries} from "@devexpress/dx-react-chart";
@@ -153,19 +153,19 @@ function AnkiTotalCardsHistoryChart({deckNames}) {
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector days={daysToLookBack}
-                                      setDays={setDaysToLookBack}
-                                      options={[
-                                          {value: 30, text: '1 Mon'},
-                                          {value: 60, text: '2 Mon'},
-                                          {value: 90, text: '3 Mon'},
-                                          {value: 180, text: '6 Mon'},
-                                          {value: 365, text: '1 Yr'},
-                                          !!cardData ? {
-                                              value: millisToDays(Date.now() - cardData[0].date),
-                                              text: 'All'
-                                          } : null
-                                      ]}
+                        <PeriodSelector period={daysToLookBack}
+                                        setPeriod={setDaysToLookBack}
+                                        options={[
+                                            {value: 30, text: '1 Mon'},
+                                            {value: 60, text: '2 Mon'},
+                                            {value: 90, text: '3 Mon'},
+                                            {value: 180, text: '6 Mon'},
+                                            {value: 365, text: '1 Yr'},
+                                            !!cardData ? {
+                                                value: millisToDays(Date.now() - cardData[0].date),
+                                                text: 'All'
+                                            } : null
+                                        ]}
                         />
                     </Grid>
                 </Grid>

diff --git a/src/anki/components/AnkiUpcomingReviewsChart.jsx b/src/anki/components/AnkiUpcomingReviewsChart.jsx
@@ -10,7 +10,7 @@ import {scaleBand} from 'd3-scale';
 import {useSelectedAnkiDecks} from "../../hooks/useSelectedAnkiDecks.jsx";
 import {truncDate} from "../../util/DateUtils.js";
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import {createAnkiCardsDueQuery} from "../service/AnkiDataUtil.js";
 
 function DataPoint(day) {
@@ -120,16 +120,16 @@ function AnkiUpcomingReviewsChart() {
                     </Grid>
 
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector
+                        <PeriodSelector
+                            period={days}
+                            setPeriod={setDays}
                             options={[
                                 {value: 7, text: '7'},
                                 {value: 14, text: '14'},
                                 {value: 30, text: '30'},
                                 {value: 60, text: '60'},
                                 {value: 90, text: '90'},
                             ]}
-                            days={days}
-                            setDays={setDays}
                         />
                     </Grid>
 

diff --git a/src/bunpro/components/BunProReviewsHistoryChart.jsx b/src/bunpro/components/BunProReviewsHistoryChart.jsx
@@ -5,7 +5,7 @@ import {ArgumentScale, BarSeries, EventTracker, Stack} from "@devexpress/dx-reac
 import {daysToMillis, getMonthName, millisToDays, truncDate, truncMonth, truncWeek} from "../../util/DateUtils.js";
 import {scaleBand} from 'd3-scale';
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import {fetchAllBunProReviews} from "../service/BunProDataUtil.js";
 import useWindowDimensions from "../../hooks/useWindowDimensions.jsx";
 import ToolTipLabel from "../../shared/ToolTipLabel.jsx";
@@ -190,19 +190,19 @@ function BunProReviewsHistoryChart() {
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector days={daysToLookBack}
-                                      setDays={setDaysToLookBack}
-                                      options={[
-                                          {value: 30, text: '1 Mon'},
-                                          {value: 60, text: '2 Mon'},
-                                          {value: 90, text: '3 Mon'},
-                                          {value: 180, text: '6 Mon'},
-                                          {value: 365, text: '1 Yr'},
-                                          !!rawData && rawData.length > 0 ? {
-                                              value: millisToDays(Date.now() - new Date(rawData[0]['created_at'])),
-                                              text: 'All'
-                                          } : null
-                                      ]}
+                        <PeriodSelector period={daysToLookBack}
+                                        setPeriod={setDaysToLookBack}
+                                        options={[
+                                            {value: 30, text: '1 Mon'},
+                                            {value: 60, text: '2 Mon'},
+                                            {value: 90, text: '3 Mon'},
+                                            {value: 180, text: '6 Mon'},
+                                            {value: 365, text: '1 Yr'},
+                                            !!rawData && rawData.length > 0 ? {
+                                                value: millisToDays(Date.now() - new Date(rawData[0]['created_at'])),
+                                                text: 'All'
+                                            } : null
+                                        ]}
                         />
                     </Grid>
                 </Grid>

diff --git a/src/bunpro/components/BunProTotalGrammarPointsChart.jsx b/src/bunpro/components/BunProTotalGrammarPointsChart.jsx
@@ -6,7 +6,7 @@ import {ArgumentScale, EventTracker, LineSeries} from "@devexpress/dx-react-char
 import {daysToMillis, millisToDays, truncDate} from "../../util/DateUtils.js";
 import {scaleBand} from 'd3-scale';
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import useWindowDimensions from "../../hooks/useWindowDimensions.jsx";
 import BunProApiService from "../service/BunProApiService.js";
 import {createGrammarPointsLookupMap} from "../service/BunProDataUtil.js";
@@ -157,19 +157,19 @@ function BunProTotalGrammarPointsChart() {
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector days={daysToLookBack}
-                                      setDays={setDaysToLookBack}
-                                      options={[
-                                          {value: 30, text: '1 Mon'},
-                                          {value: 60, text: '2 Mon'},
-                                          {value: 90, text: '3 Mon'},
-                                          {value: 180, text: '6 Mon'},
-                                          {value: 365, text: '1 Yr'},
-                                          !!rawData ? {
-                                              value: millisToDays(Date.now() - rawData[0].date),
-                                              text: 'All'
-                                          } : null
-                                      ]}
+                        <PeriodSelector period={daysToLookBack}
+                                        setPeriod={setDaysToLookBack}
+                                        options={[
+                                            {value: 30, text: '1 Mon'},
+                                            {value: 60, text: '2 Mon'},
+                                            {value: 90, text: '3 Mon'},
+                                            {value: 180, text: '6 Mon'},
+                                            {value: 365, text: '1 Yr'},
+                                            !!rawData ? {
+                                                value: millisToDays(Date.now() - rawData[0].date),
+                                                text: 'All'
+                                            } : null
+                                        ]}
                         />
                     </Grid>
                 </Grid>

diff --git a/src/bunpro/components/BunProTotalReviewsChart.jsx b/src/bunpro/components/BunProTotalReviewsChart.jsx
@@ -6,7 +6,7 @@ import {ArgumentScale, EventTracker, LineSeries} from "@devexpress/dx-react-char
 import {daysToMillis, millisToDays, truncDate} from "../../util/DateUtils.js";
 import {scaleBand} from 'd3-scale';
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import {fetchAllBunProReviews} from "../service/BunProDataUtil.js";
 import useWindowDimensions from "../../hooks/useWindowDimensions.jsx";
 
@@ -139,19 +139,19 @@ function BunProTotalReviewsChart() {
                         </Typography>
                     </Grid>
                     <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                        <DaysSelector days={daysToLookBack}
-                                      setDays={setDaysToLookBack}
-                                      options={[
-                                          {value: 30, text: '1 Mon'},
-                                          {value: 60, text: '2 Mon'},
-                                          {value: 90, text: '3 Mon'},
-                                          {value: 180, text: '6 Mon'},
-                                          {value: 365, text: '1 Yr'},
-                                          !!rawData ? {
-                                              value: millisToDays(Date.now() - rawData[0].date),
-                                              text: 'All'
-                                          } : null
-                                      ]}
+                        <PeriodSelector period={daysToLookBack}
+                                        setPeriod={setDaysToLookBack}
+                                        options={[
+                                            {value: 30, text: '1 Mon'},
+                                            {value: 60, text: '2 Mon'},
+                                            {value: 90, text: '3 Mon'},
+                                            {value: 180, text: '6 Mon'},
+                                            {value: 365, text: '1 Yr'},
+                                            !!rawData ? {
+                                                value: millisToDays(Date.now() - rawData[0].date),
+                                                text: 'All'
+                                            } : null
+                                        ]}
                         />
                     </Grid>
                 </Grid>

diff --git a/src/bunpro/components/BunProUpcomingReviewsChart.jsx b/src/bunpro/components/BunProUpcomingReviewsChart.jsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useState} from "react";
-import {Card, CardContent, Checkbox, CircularProgress, Typography} from "@mui/material";
+import {Card, CardContent, CircularProgress, Typography} from "@mui/material";
 import {addHours, truncMinutes} from '../../util/DateUtils.js';
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import {scaleBand} from 'd3-scale';
 import BunProApiService from "../service/BunProApiService.js";
 import {createGrammarPointsLookupMap, filterDeadGhostReviews} from "../service/BunProDataUtil.js";
@@ -10,7 +10,7 @@ import {ArgumentScale, BarSeries, EventTracker, LineSeries, Stack, ValueScale} f
 import FilterableLegend from "../../shared/FilterableLegend.jsx";
 import {
     addTimeToDate, createUpcomingReviewsChartBarLabel,
-    createUpcomingReviewsChartLabel, formatTimeUnitLabelText,
+    createUpcomingReviewsChartLabel, formatTimeUnitLabelText, UnitSelector,
     UpcomingReviewPeriods,
     UpcomingReviewUnits
 } from "../../util/UpcomingReviewChartUtils.jsx";
@@ -178,29 +178,26 @@ function BunProUpcomingReviewsChart() {
                 <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
                     <div style={{display: 'flex', justifyContent: 'space-between'}}>
 
-                        <div>
-                            <Checkbox value={unit.key === UpcomingReviewUnits.days.key}
-                                      onChange={e => {
-                                          if (e.target.checked) {
-                                              setPeriod(UpcomingReviewUnits.days.default);
-                                              setUnit(UpcomingReviewUnits.days);
-                                          } else {
-                                              setPeriod(UpcomingReviewUnits.hours.default);
-                                              setUnit(UpcomingReviewUnits.hours);
-                                          }
-                                      }}
-                            />
-                            Show Days
-                        </div>
+                        <UnitSelector
+                            unit={unit}
+                            onChange={unit => {
+                                setPeriod(unit.default);
+                                setUnit(unit);
+                            }}
+                            options={[
+                                UpcomingReviewUnits.hours,
+                                UpcomingReviewUnits.days,
+                            ]}
+                        />
 
                         <Typography variant={'h5'}>
                             Upcoming Reviews
                         </Typography>
 
-                        <DaysSelector days={period}
-                                      setDays={setPeriod}
-                                      options={unit === UpcomingReviewUnits.days ?
-                                          UpcomingReviewPeriods.days : UpcomingReviewPeriods.hours}
+                        <PeriodSelector period={period}
+                                        setPeriod={setPeriod}
+                                        options={unit === UpcomingReviewUnits.days ?
+                                            UpcomingReviewPeriods.days : UpcomingReviewPeriods.hours}
                         />
                     </div>
 

diff --git a/src/overview/components/OverviewReviewHistoryChart.jsx b/src/overview/components/OverviewReviewHistoryChart.jsx
@@ -12,7 +12,7 @@ import {EventTracker} from "@devexpress/dx-react-chart";
 import {scaleBand} from 'd3-scale';
 import React from 'react';
 import {getVisibleLabelIndices} from "../../util/ChartUtils.js";
-import DaysSelector from "../../shared/DaysSelector.jsx";
+import PeriodSelector from "../../shared/PeriodSelector.jsx";
 import WanikaniApiService from "../../wanikani/service/WanikaniApiService.js";
 import {daysToMillis, truncDate} from "../../util/DateUtils.js";
 import AnkiApiService from "../../anki/service/AnkiApiService.js";
@@ -277,17 +277,17 @@ function OverviewReviewsHistoryChart() {
                             </Grid>
                         ) : (
                             <Grid item xs={12} md={4} style={{textAlign: 'end'}}>
-                                <DaysSelector days={daysToLookBack}
-                                              setDays={setDaysToLookBack}
-                                              options={[
-                                                  {value: 7, text: '7'},
-                                                  {value: 14, text: '14'},
-                                                  {value: 30, text: '30'},
-                                                  {value: 90, text: '3 Mon'},
-                                                  {value: 180, text: '6 Mon'},
-                                                  {value: 365, text: '1 Yr'},
-                                                  {value: 10_000, text: 'All'},
-                                              ]}
+                                <PeriodSelector period={daysToLookBack}
+                                                setPeriod={setDaysToLookBack}
+                                                options={[
+                                                    {value: 7, text: '7'},
+                                                    {value: 14, text: '14'},
+                                                    {value: 30, text: '30'},
+                                                    {value: 90, text: '3 Mon'},
+                                                    {value: 180, text: '6 Mon'},
+                                                    {value: 365, text: '1 Yr'},
+                                                    {value: 10_000, text: 'All'},
+                                                ]}
                                 />
                             </Grid>
                         )}