As a user
I want to adjust the layout of my plot
So that I can have a clearly represented plot of my data.
Description
Acceptance criteria
[x] Heading with text "Layout properties".
[x] GridProperties component.
[x] RangeProperties component.
[x] LogScaleProperties component.
[x] "Next" button which stays disabled until the user has entered values in all the fields. Clicking on the button displays an alert message with text "You have selected the layout properties.".
[x] The plot gets updated with the layout properties.
Tasks
[x] Create a new feature branch "Layout-properties".
[x] Create a LayoutProperties component.
[x] Write a handleSubmit function which does event.preventDefault().
[x] Declare a handleLayoutProperties function with an alert message.
[x] Declare a notCompletedLayoutProperties function to disable the "Next" button until the user has selected values in all menus.
[x] Returns: Heading and form element.
[x] The form takes the handleSubmit function as prop to the onSubmit attribute.
[x] Inside form: GridProperties, RangeProperties, LogScaleProperties and InputTypeSubmit.
[x] The InputTypeSubmit component has "Next" as value to the value attribute, the handleLayoutProperties function as value to the onClick attribute and notCompletedLayoutProperties() function as value to the disabled attribute.
[x] In the index.js, add the LayoutProperties component to the return (before Plotting) and remove GridProperties, RangeProperties and LogScaleProperties from the return.
[x] In the Plotting component, access the grid , range,logXAxis and logYAxis variables.
[x] Use these variables in the conditional rendering.
[x] Use these variables in the layout attribute in the Plot component.
Layout Properties
Value description
As a user I want to adjust the layout of my plot So that I can have a clearly represented plot of my data.
Description
Acceptance criteria
Tasks
[x] Create a new feature branch "Layout-properties".
[x] Create a
LayoutPropertiescomponent.handleSubmit functionwhich does event.preventDefault().handleLayoutPropertiesfunction with an alert message.notCompletedLayoutPropertiesfunction to disable the "Next" button until the user has selected values in all menus.Headingandformelement.handleSubmitfunction as prop to theonSubmitattribute.form:GridProperties,RangeProperties,LogScalePropertiesandInputTypeSubmit.InputTypeSubmitcomponent has "Next" as value to the value attribute, the handleLayoutProperties function as value to theonClickattribute andnotCompletedLayoutProperties()function as value to the disabled attribute.[x] In the index.js, add the
LayoutPropertiescomponent to the return (beforePlotting) and remove GridProperties, RangeProperties and LogScaleProperties from the return.[x] In the
Plottingcomponent, access thegrid,range,logXAxisandlogYAxisvariables.layoutattribute in the Plot component.