added an option to disable graphs starting at zero

public/index.html

@@ -1907,21 +1907,6 @@
                 </div>
               </div>
             </div>
-            <div class="section alwaysShowDecimalPlaces">
-              <h1>always show decimal places</h1>
-              <div class="text">
-                Always shows decimal places for values on the result page,
-                without the need to hover over the stats.
-              </div>
-              <div class="buttons">
-                <div class="button off" tabindex="0" onclick="this.blur();">
-                  off
-                </div>
-                <div class="button on" tabindex="0" onclick="this.blur();">
-                  on
-                </div>
-              </div>
-            </div>
             <div class="section smoothLineScroll">
               <h1>smooth line scroll</h1>
               <div class="text">
@@ -1953,6 +1938,35 @@
                 </div>
               </div>
             </div>
+            <div class="section alwaysShowDecimalPlaces">
+              <h1>always show decimal places</h1>
+              <div class="text">
+                Always shows decimal places for values on the result page,
+                without the need to hover over the stats.
+              </div>
+              <div class="buttons">
+                <div class="button off" tabindex="0" onclick="this.blur();">
+                  off
+                </div>
+                <div class="button on" tabindex="0" onclick="this.blur();">
+                  on
+                </div>
+              </div>
+            </div>
+            <div class="section startGraphsAtZero">
+              <h1>start graphs at zero</h1>
+              <div class="text">
+                Force graph axis to always start at zero, no matter what the data is. Turning this off may exaggerate the value chages.
+              </div>
+              <div class="buttons">
+                <div class="button off" tabindex="0" onclick="this.blur();">
+                  off
+                </div>
+                <div class="button on" tabindex="0" onclick="this.blur();">
+                  on
+                </div>
+              </div>
+            </div>
             <div class="section keymapMode">
               <h1>keymap</h1>
               <div class="text">

public/js/account.js

@@ -464,6 +464,7 @@ var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
           ticks: {
             fontFamily: "Roboto Mono",
             beginAtZero: true,
+            min: 0
           },
           display: true,
           scaleLabel: {
@@ -720,10 +721,17 @@ function updateHoverChart(filteredId) {
   hoverChart.options.annotation.annotations[0].label.fontColor = themeColors.bg;
 
   let maxChartVal = Math.max(...[Math.max(...data.wpm), Math.max(...data.raw)]);
-
+  let minChartVal = Math.min(
+    ...[Math.min(...data.wpm), Math.min(...data.raw)]
+  );
   hoverChart.options.scales.yAxes[0].ticks.max = Math.round(maxChartVal);
   hoverChart.options.scales.yAxes[1].ticks.max = Math.round(maxChartVal);
 
+  if (!config.startGraphsAtZero) {
+    hoverChart.options.scales.yAxes[0].ticks.min = Math.round(minChartVal);
+    hoverChart.options.scales.yAxes[1].ticks.min = Math.round(minChartVal);
+  }
+
   hoverChart.update({ duration: 0 });
 }
 
@@ -1415,6 +1423,7 @@ function refreshAccountPage() {
     refreshGlobalStats();
 
     let chartData = [];
+    let wpmChartData = [];
     let accChartData = [];
     visibleTableLines = 0;
 
@@ -1648,6 +1657,8 @@ function refreshAccountPage() {
         difficulty: result.difficulty,
       });
 
+      wpmChartData.push(result.wpm);
+
       // accChartData.push({
       //   x: result.timestamp,
       //   y: result.acc,
@@ -1686,6 +1697,13 @@ function refreshAccountPage() {
     resultHistoryChart.data.datasets[0].data = chartData;
     resultHistoryChart.data.datasets[1].data = accChartData;
 
+    let minChartVal = Math.min(...wpmChartData);
+
+    if (!config.startGraphsAtZero) {
+      resultHistoryChart.options.scales.yAxes[0].ticks.min = Math.round(minChartVal);
+      resultHistoryChart.options.scales.yAxes[1].ticks.min = Math.round(minChartVal);
+    }
+
 
     if (chartData == [] || chartData.length == 0) {
       $(".pageAccount .group.noDataError").removeClass("hidden");

public/js/script.js

@@ -1748,6 +1748,11 @@ function showResult(difficultyFailed = false) {
     ...[Math.min(...rawWpmPerSecond), Math.min(...wpmHistory)]
   );
 
+  if (!config.startGraphsAtZero) {
+    wpmOverTimeChart.options.scales.yAxes[0].ticks.min = minChartVal;
+    wpmOverTimeChart.options.scales.yAxes[1].ticks.min = minChartVal;
+  }
+
   // wpmOverTimeChart.options.scales.yAxes[0].ticks.min = Math.round(minChartVal);
   // wpmOverTimeChart.options.scales.yAxes[1].ticks.min = Math.round(minChartVal);
 

public/js/settings.js

@@ -154,6 +154,10 @@ settingsGroups.colorfulMode = new SettingsGroup(
   "colorfulMode",
   setColorfulMode
 );
+settingsGroups.startGraphsAtZero = new SettingsGroup(
+  "startGraphsAtZero",
+  setStartGraphsAtZero
+);
 settingsGroups.randomTheme = new SettingsGroup("randomTheme", setRandomTheme);
 settingsGroups.stopOnError = new SettingsGroup(
   "stopOnError",

public/js/userconfig.js

@@ -52,6 +52,7 @@ let defaultConfig = {
   alwaysShowWordsHistory: false,
   playSoundOnError: false,
   playSoundOnClick: "off",
+  startGraphsAtZero: true
 };
 
 let cookieConfig = null;
@@ -552,6 +553,17 @@ function toggleSmoothCaret() {
   saveConfigToCookie();
 }
 
+//startgraphsatzero
+function setStartGraphsAtZero(mode, nosave) {
+  config.startGraphsAtZero = mode;
+  if (!nosave) saveConfigToCookie();
+}
+
+// function toggleSmoothCaret() {
+//   config.smoothCaret = !config.smoothCaret;
+//   saveConfigToCookie();
+// }
+
 //linescroll
 function setSmoothLineScroll(mode, nosave) {
   config.smoothLineScroll = mode;