diff --git a/calc-backend/graph-gen/graph-deriv.py b/calc-backend/graph-gen/graph-deriv.py index a484024..26379e5 100644 --- a/calc-backend/graph-gen/graph-deriv.py +++ b/calc-backend/graph-gen/graph-deriv.py @@ -38,7 +38,7 @@ def derivative(func, x, h=1e-5): return (func(x + h) - func(x - h)) / (2 * h) # Create an array of x values and evaluate f(x) for these values. -x_vals = np.arange(x_range[0], x_range[1] + 0.05, 0.05) +x_vals = np.linspace(x_range[0], x_range[1], num=51) f_vals = f(x_vals) # Initialize the Plotly figure and plot the original function. @@ -57,20 +57,24 @@ def derivative(func, x, h=1e-5): name='Point')) # Set the initial layout title with the slope at the starting point. -fig.update_layout(title=f"Slope Value = {derivative(f, x0):.2f}") +fig.update_layout(title=(f'Slope Value = {derivative(f, x0):.4f}'), title_font_size=16) + +# Get the initial y-axis range +initial_yaxis= fig.layout['yaxis_range'] # Create frames for the animation slider. frames = [] for slider_val in x_vals: # Compute the tangent line at each slider value using our numerical derivative. - tan_y = derivative(f, slider_val) * (x_vals - slider_val) + f(slider_val) + save_deriv = derivative(f, slider_val) + tan_y = save_deriv * (x_vals - slider_val) + f(slider_val) frames.append(go.Frame( data=[ go.Scatter(), # Placeholder for the function trace (remains unchanged). go.Scatter(x=x_vals, y=tan_y), # Tangent line. go.Scatter(x=[slider_val], y=[f(slider_val)]) # Point of tangency. ], - layout=go.Layout(title={'text': f"Slope Value = {derivative(f, slider_val):.2f}"}), + layout=go.Layout(title=(f'Slope Value = {save_deriv:.4f}'), yaxis_range= initial_yaxis, yaxis={'autorange':False}), name=str(slider_val) )) fig.frames = frames @@ -78,7 +82,7 @@ def derivative(func, x, h=1e-5): # Create a slider to control the animation. sliders = [dict( active=0, - currentvalue={"visible": False}, + currentvalue=dict(prefix= "Slider", font={'size':14}), ticklen=0, # Hides the line ticks (not enough alone) len=1.0, y=-0.05, @@ -88,14 +92,16 @@ def derivative(func, x, h=1e-5): args=[ [frame.name], dict(mode='immediate', - frame=dict(duration=40, redraw=True), - transition=dict(duration=0)) + frame=dict(duration=0, redraw=True), + ) ], label="", # Hides numbers ) for frame in frames ], tickcolor='rgba(0,0,0,0)', + bordercolor='#949fb3', + pad={"t": 10, "b": 10}, )] # Adjust padding and final layout settings. @@ -106,7 +112,8 @@ def derivative(func, x, h=1e-5): xaxis=dict(range=[x_range[0], x_range[1]], fixedrange=True), yaxis=dict(range=[np.min(f_vals) - pad, np.max(f_vals) + pad], fixedrange=True), sliders=sliders, - uirevision='static' + uirevision='static', + margin=dict(t=50, r=0,l=60), ) fig_json = fig.to_json(pretty=True) diff --git a/calc-backend/graph-gen/graph-integral.py b/calc-backend/graph-gen/graph-integral.py index 685c55f..e18ae9c 100644 --- a/calc-backend/graph-gen/graph-integral.py +++ b/calc-backend/graph-gen/graph-integral.py @@ -123,8 +123,9 @@ def generate_bars(n_bars): sliders = [dict( active=0, - currentvalue={"prefix": "n = "}, + currentvalue={"prefix": "n = ", "font":{'size':14}}, pad={"t": 30}, + bordercolor='#949fb3', steps=steps )] diff --git a/calc-backend/src/controllers/graph.controller.ts b/calc-backend/src/controllers/graph.controller.ts index 54c1f5d..6e75654 100644 --- a/calc-backend/src/controllers/graph.controller.ts +++ b/calc-backend/src/controllers/graph.controller.ts @@ -78,6 +78,6 @@ export function createDerivGraph(req: Request, res: Response, next: NextFunction res.status(200).send(prettyStr); } }) - - setTimeout(function(){ process.kill()}, 7500); + // timeout if graph takes longer than 10 seconds + setTimeout(function(){ process.kill()}, 10000); } diff --git a/calc-frontend/src/components/Cosine/IntCosineGraph.tsx b/calc-frontend/src/components/Cosine/IntCosineGraph.tsx index 30281a1..7325346 100644 --- a/calc-frontend/src/components/Cosine/IntCosineGraph.tsx +++ b/calc-frontend/src/components/Cosine/IntCosineGraph.tsx @@ -212,8 +212,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Cubic/IntCubicGraph.tsx b/calc-frontend/src/components/Cubic/IntCubicGraph.tsx index 26d0d80..29b7a64 100644 --- a/calc-frontend/src/components/Cubic/IntCubicGraph.tsx +++ b/calc-frontend/src/components/Cubic/IntCubicGraph.tsx @@ -225,8 +225,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Euler/IntEulerGraph.tsx b/calc-frontend/src/components/Euler/IntEulerGraph.tsx index 4c7dbc0..df6a258 100644 --- a/calc-frontend/src/components/Euler/IntEulerGraph.tsx +++ b/calc-frontend/src/components/Euler/IntEulerGraph.tsx @@ -211,8 +211,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Line/IntLineGraph.tsx b/calc-frontend/src/components/Line/IntLineGraph.tsx index 06a1e4a..9573cd9 100644 --- a/calc-frontend/src/components/Line/IntLineGraph.tsx +++ b/calc-frontend/src/components/Line/IntLineGraph.tsx @@ -211,8 +211,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/NatLog/IntNatLogGraph.tsx b/calc-frontend/src/components/NatLog/IntNatLogGraph.tsx index bb0bdb0..80c46bd 100644 --- a/calc-frontend/src/components/NatLog/IntNatLogGraph.tsx +++ b/calc-frontend/src/components/NatLog/IntNatLogGraph.tsx @@ -212,8 +212,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Quadratic/IntQuadraticGraph.tsx b/calc-frontend/src/components/Quadratic/IntQuadraticGraph.tsx index afc4c85..a28cc92 100644 --- a/calc-frontend/src/components/Quadratic/IntQuadraticGraph.tsx +++ b/calc-frontend/src/components/Quadratic/IntQuadraticGraph.tsx @@ -224,8 +224,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Sine/IntSineGraph.tsx b/calc-frontend/src/components/Sine/IntSineGraph.tsx index 2edd778..a51439e 100644 --- a/calc-frontend/src/components/Sine/IntSineGraph.tsx +++ b/calc-frontend/src/components/Sine/IntSineGraph.tsx @@ -212,8 +212,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 }, diff --git a/calc-frontend/src/components/Tangent/IntTangentGraph.tsx b/calc-frontend/src/components/Tangent/IntTangentGraph.tsx index c9ef35b..baa38ab 100644 --- a/calc-frontend/src/components/Tangent/IntTangentGraph.tsx +++ b/calc-frontend/src/components/Tangent/IntTangentGraph.tsx @@ -213,8 +213,10 @@ useLayoutEffect(() => { "sliders": [{ "active": 0, "currentvalue": { - "prefix": "n = " + "prefix": "n = ", + "font":{'size':14} }, + "bordercolor":'#949fb3', "pad": { "t": 30 },