Moving avg line is not straight on 0 when there's a negative result

[FrankreedX]

[solderq35]

Research Update

Explanation

From what I can tell, the Average Trend Line (dark blue) centers slightly above zero when there are positive as well as negative values among the "current moving average data set" (the first 5 attempts, as shown in the first 2 screenshots below)

When all values in the current data set of 5 values are all negative, the Average Trend Line is centered at zero as expected.

Anyways, I'm looking for feedback on if the "positive and negatives scenario" is okay as is (will be a positive average), or should we somehow make this show a zero value if there are any negative values in the dataset?

Another potential solution is that since it seems like the Average Trend Line is calculated separately from the bar graph bars (so to speak), we can shift the x axis for the trend line farther down (if that makes sense), so that we don't get any funky business with positive and negative cancelling out

For context, see my 3rd attached screenshot. I'm also available for a voice call for the next half hour ish if that's easier

Anyways would appreciate any feedback since this is more of a design decision.

Problem Explained:

Potential Solution:

[solderq35]

Debug Instructions (for context on previous comment)

But for a basic explanation of how the graph stuff works (hard to put into words), can edit the useEffect at line 119 of components/barchart.js file to:

  useEffect(() => {
    if (sortedDrillAttempts && sortedDrillAttempts[selected])
      console.log("Selected attemptID: ", sortedDrillAttempts[selected]["id"]);
    console.log("line: " + line)
    console.log(yMin)
    console.log(yMax)
    console.log(movingAvgData)
    console.log(...data)
  }, [selected, sortedDrillAttempts]);

And then boot up the app, go to a drill, submit a few drills (like at least 5), and then check how the stats tab for that drill looks. And check the terminal console logs.

For the line value, a value of M196.364,0L246.364,0L296.364,0 (example) means "Move to (196.364, 0L246.364)", "Line between (246.364, 0) and (296.364, 0). M means "Move to", L means "Line to"

See also: https://d3js.org/d3-shape/line