US-3_Choose-variables

[YavorLalev]

Choose-variable

Value Proposition

As a user I want to select which variable is plotted on the x- and y-axis to finally generate a nice plot of my data.

Description

Acceptance Criteria

• [x] Title at the top with the name of the website and a logo.
• [x] Heading with text "Step 3: Choose the variables you want to plot".
• [x] Paragraph with text "Variable for the x-axis:".
• [x] Dropdown menu for the x-axis.
• [x] Paragraph with text "Variable for the y-axis:".
• [x] Dropdown menu for the y-axis.
• [x] If the user selects the same option for the y variable as the x variable then an alert message is displayed.
• [x] A "Next" button that submits the selected options for x- and y-axes and stays disabled until the user has made a choice in both dropdown menus.
• [x] When the user clicks on the "Next" button then the values for the x and y variables get assigned and a corresponding alert message is displayed.
• [x] The plot gets updated with the values for the x variable and y variable.

Tasks

• [x] Create a feature branch "Choose-variables".

• [x] Create a DropDownMenu component.

  • [x] It takes as props: idString, onChange and arrayOfOptions.
  • [x] The function returns, within a fragment, a menu of options (label, select and option elements).
  • [x] The select element takes the required attribute and takes onChange as prop to the onChange attribute.
  • [x] Write an option element with "Select" as text and "" for the value attribute.
  • [x] Inside curly braces map over the arrayOfOptions array to render an option element.
  • [x] The option element has both for the text and for the value attribute the string in arrayOfOptions.
  • [x] The label element and the select element have both the idString prop as value for text and attributes.

• [x] Create a ChooseVariables component

  • [x] Access the keynames array.
  • [x] useState for the xVariable variable with default value set to [].
  • [x] useState for the yVariable variable with default value set to [].
  • [x] useState for the xKey variable with initial value set to "".
  • [x] useState for the yKey variable with initial value set to "".
  • [x] Write a handleSubmit function which does event.preventDefault().
  • [x] Write a handleXChange function which declares a choice variable set to event.target.value and sets setXKey to choice.
  • [x] Write a handleYChange function which declares a choice variable set to event.target.value and sets setYKey to choice.
  • [x] Write a completedXandYKeys function to disable the "Next" button until the user has selected values for both x and y variables.
  • [x] Write a handleAssignVariables function which accesses the vals array and declares a tempXArray variable and a tempYArray variable. These variables are arrays with the number of columns equal to the number of objects in vals.
  • [x] In tempXArray fill in with the values associated to the key in vals corresponding to the XKey value.
  • [x] In tempYArray fill in with the values associated to the key in vals corresponding to the YKey value.
  • [x] Set setXvariable to tempXArray and set setYVariable to tempYArray.
  • [x] Use an alert message with text "Data for the x and y variables are assigned.".
  • [x] if xKey !=="" && xKey==yKey then use an alert message with the text "Are you sure you want to use the same variable for x as y? It would give a meaningless plot."
  • [x] ChooseVariables returns, within a fragment, the Heading component and a form element.
  • [x] The Heading takes "Step 3: Choose the variables you want to plot." for text.
  • [x] The form element contains the CenteredDiv component and inside of it are nested one time the Paragraph component and the DropDownMenu component (for the x axis), then again these 2 components (for the y-axis) and the StyledInputTypeSubmit component.
  • [x] The form takes the handleSubmit function as prop to the onSubmit attribute.
  • [x] The first render of Paragraph has for text "Variable for the x-axis:".
  • [x] The second render of Paragraph has for text "Variable for the y-axis:".
  • [x] The first render of DropDownMenu takes "x" as prop to the idString attribute and the handleXChange function as prop to the onChange attribute and keynames as prop to the arrayOfOptions attribute.
  • [x] The second render of DropDownMenu takes "y" as prop to the idString attribute and the handleYChange function as prop to the onChange attribute and keynames as prop to the arrayOfOptions attribute
  • [x] The StyledInputTypeSubmit takes "Next" as value for the value attribute and completedXandYKeys() as prop for the disabled attribute and the handleAssignVariables as prop to the onClick attribute.

• [x] In the index.js file add the ChooseVariables component after the ListOfCharts component.

[MerleMak]

Hi! The tasks are too detailed again. You don't need to specifiy every single detail about implementation, because that costs too much time!

You don't need to add things like "inside the curly braces" or specify all the props names already or the default values of all the states.

You want to generally think about how to implement a feature and what things to watch out for, but not get super specific.

Check this US for reference on how a Userstory should be structures :) https://github.com/itsmyrice/gamedalf/issues/22 That level of detail in the tasks is enough. Also it give freedom to the developer on how to implement the feature.

Leave the US like this for now, to not loose more time on it, but please keep this in mind for the future!!!!