toggles

frontend-react/src/components/analyzer/BuildAnalyzerPage.tsx

@@ -9,6 +9,8 @@ import WeaponSelector from "../common/WeaponSelector"
 import BuildStats from "./BuildStats"
 import EditableBuilds from "./EditableBuilds"
 import MyThemeContext from "../../themeContext"
+import { FaWrench } from "react-icons/fa"
+import Button from "../elements/Button"
 
 const defaultBuild: Partial<Build> = {
   weapon: "Splattershot Jr.",
@@ -22,8 +24,11 @@ const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
   const [build, setBuild] = useState<Partial<Build>>(defaultBuild)
   const [otherBuild, setOtherBuild] = useState<Partial<Build>>(defaultBuild)
   const [showOther, setShowOther] = useState(false)
+  const [showNotActualProgress, setShowNotActualProgress] = useState(false)
+  const [startChartsAtZero, setStartChartsAtZero] = useState(false)
   const [otherFocused, setOtherFocused] = useState(false)
   const [hideExtra, setHideExtra] = useState(true)
+  const [showSettings, setShowSettings] = useState(false)
 
   const explanations = useAbilityEffects(build)
   const otherExplanations = useAbilityEffects(otherBuild)
@@ -57,21 +62,54 @@ const BuildAnalyzerPage: React.FC<RouteComponentProps> = () => {
         }}
         otherFocused={otherFocused}
       />
-      <Box my="1em">
-        <FormLabel htmlFor="show-all">Hide stats at base value</FormLabel>
-        <Switch
-          id="show-all"
-          color={themeColor}
-          isChecked={hideExtra}
-          onChange={() => setHideExtra(!hideExtra)}
-        />
-      </Box>
+      <Button icon={FaWrench} onClick={() => setShowSettings(!showSettings)}>
+        {showSettings ? "Hide settings" : "Show settings"}
+      </Button>
+      {showSettings && (
+        <Box my="1em">
+          <Switch
+            id="show-all"
+            color={themeColor}
+            isChecked={hideExtra}
+            onChange={() => setHideExtra(!hideExtra)}
+            mr="0.5em"
+          />
+          <FormLabel htmlFor="show-all">Hide stats at base value</FormLabel>
+
+          <Box>
+            <Switch
+              id="show-not-actual"
+              color={themeColor}
+              isChecked={showNotActualProgress}
+              onChange={() => setShowNotActualProgress(!showNotActualProgress)}
+              mr="0.5em"
+            />
+            <FormLabel htmlFor="show-not-actual">
+              Progress bars show progress to max value
+            </FormLabel>
+          </Box>
+          <Box>
+            <Switch
+              id="charts-zero"
+              color={themeColor}
+              isChecked={startChartsAtZero}
+              onChange={() => setStartChartsAtZero(!startChartsAtZero)}
+              mr="0.5em"
+            />
+            <FormLabel htmlFor="charts-zero">
+              Start charts Y axis from zero
+            </FormLabel>
+          </Box>
+        </Box>
+      )}
       <Box my="1em">
         <BuildStats
           build={build}
           explanations={explanations}
           otherExplanations={showOther ? otherExplanations : undefined}
           hideExtra={hideExtra}
+          showNotActualProgress={showNotActualProgress}
+          startChartsAtZero={startChartsAtZero}
         />
       </Box>
     </>

frontend-react/src/components/analyzer/BuildStats.tsx

@@ -21,6 +21,8 @@ interface BuildStatsProps {
   otherExplanations?: Explanation[]
   build: Partial<Build>
   hideExtra: boolean
+  showNotActualProgress: boolean
+  startChartsAtZero: boolean
 }
 
 const BuildStats: React.FC<BuildStatsProps> = ({
@@ -28,6 +30,8 @@ const BuildStats: React.FC<BuildStatsProps> = ({
   otherExplanations,
   build,
   hideExtra,
+  showNotActualProgress,
+  startChartsAtZero,
 }) => {
   const { colorMode } = useContext(MyThemeContext)
   const [expandedCharts, setExpandedCharts] = useState<Set<string>>(new Set())
@@ -157,6 +161,7 @@ const BuildStats: React.FC<BuildStatsProps> = ({
               otherAp={otherAp}
               getEffect={getEffect}
               ability={ability}
+              startChartsAtZero={startChartsAtZero}
             />
           </Box>
         )}
@@ -187,12 +192,15 @@ const BuildStats: React.FC<BuildStatsProps> = ({
               ability={explanation.ability}
               effect={explanation.effect}
               progressBarValue={
-                explanation.effectFromMaxActual ?? explanation.effectFromMax
+                showNotActualProgress
+                  ? explanation.effectFromMax
+                  : explanation.effectFromMaxActual
               }
               otherEffect={otherExplanation?.effect}
               otherProgressBarValue={
-                otherExplanation?.effectFromMaxActual ??
-                otherExplanation?.effectFromMax
+                showNotActualProgress
+                  ? otherExplanation?.effectFromMax
+                  : otherExplanation?.effectFromMaxActual
               }
               getEffect={explanation.getEffect}
               info={explanation.info}

frontend-react/src/components/analyzer/StatChart.tsx

@@ -19,6 +19,7 @@ interface StatChartProps {
   ap: number
   otherAp?: number
   ability: Ability
+  startChartsAtZero: boolean
 }
 
 const StatChart: React.FC<StatChartProps> = ({
@@ -27,6 +28,7 @@ const StatChart: React.FC<StatChartProps> = ({
   otherAp,
   getEffect,
   ability,
+  startChartsAtZero,
 }) => {
   const { themeColorHex, darkerBgColor } = useContext(MyThemeContext)
 
@@ -101,7 +103,9 @@ const StatChart: React.FC<StatChartProps> = ({
       <LineChart data={getData()}>
         <CartesianGrid strokeDasharray="3 3" color="#000" />
         <XAxis dataKey="name" />
-        <YAxis domain={["dataMin", "dataMax"]} />
+        <YAxis
+          domain={startChartsAtZero ? undefined : ["dataMin", "dataMax"]}
+        />
         <Tooltip
           contentStyle={{
             background: darkerBgColor,

frontend-react/src/hooks/useAbilityEffects.ts

@@ -8,10 +8,10 @@ export interface Explanation {
   title: string
   effect: string
   effectFromMax: number
-  effectFromMaxActual?: number
+  effectFromMaxActual: number
   ability: Ability
   info?: string
-  getEffect?: (ap: number) => number
+  getEffect: (ap: number) => number
   ap: number
 }
 
@@ -1363,6 +1363,7 @@ export default function useAbilityEffects(build: Partial<Build>) {
     })
 
     setExplanations(newExplanations)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [build])
 
   return explanations