US-9-Marker-properties

[MariaAdner]

Markers-properties

Value proposition

As a user I want to set the properties of the markers in my plot so that I can change the visual display.

Description

Acceptance Criteria

• [x] The component is displayed only if the user chose line-markers-plot or scatter-plot.
• [x] Heading with text: "Marker properties".
• [x] Paragraph with text "Marker color".
• [x] The user can choose from a dropdown menu the color of the markers, options: red, blue, green, yellow, orange, pink, purple, maroon, black, grey.
  • [x] Paragraph with text "Marker symbol".
  • [x] The user can choose from a dropdown menu the symbol of the markers, options: filled-circle, open-circle, filled-square, open-square, filled-diamond, open-diamond, cross, x, filled-triangle-up, open-triangle-up, filled-triangle-down, open-triangle-down.
  • [x] Paragraph with text "Marker size (in pixels)".
  • [x] The user can choose from a dropdown menu the size of the markers, options: 6, 7, 8, 9, 10, 11.
  • [x] "Next" button which stays disabled until the user has selected a value in all dropdown menus.
  • [x] When the user clicks on the "Next" button, an alert message is displayed "You chose the marker properties.".
  • [x] The plot gets updated with the marker properties (only if the user chose line-markers-plot or scatter-plot).

Tasks

• [x] Create a new feature branch "Marker-properties".

• [x] In the lib folder create a listOfMarkerProperties.js file.

  • [x] Declare a markerColorArray, a markerSymbolArray and a markerSizeArray arrays.
  • [x] markerColorArray / markerSymbolArray / markerSizeArray contain the options for the color, the symbol and the size.

• [x] Create a MarkerProperties component.

  • [x] Access titleLabel.
  • [x] useState for the markerColor / markerSymbol / markerSize variable with initial value set to "" / "" / 0.
  • [x] Declare a handleMarkerColorChange / handleMarkerSymbolChange / handleMarkerSizeChange function which declares a choice variable set to event.target.value.
  • [x] Declare a completedMarkerProperties function to disable the "Next" button until the user has selected values in all dropdown menus.
  • [x] Declare a handleMarkerProperties function with an alert message.
  • [x] Write a handleSubmit function which does event.preventDefault().
  • [x] The function returns the Heading component and a form.
  • [x] The form takes the handleSubmit function as prop to the onSubmit attribute.
  • [x] Inside the form is nested the Container component, and inside of it, 3 instances of the Paragraph component, 3 instances of the DropDownMenu component and the StyledInputTypeSubmit component.
  • [x] The Container component has the $centered attribute set to "center".
  • [x] The first / second / third render of DropDownMenu has "Marker color" / "Marker symbol" / "Marker size" as prop to the idString attribute and the handleMarkerColorChange / handleMarkerSymbolChange / handleMarkerSizeChange function as prop to the onChange attribute and markerColorArray / markerSymbolArray / markerSizeArray as prop to the arrayOfOptions attribute.
  • [x] The StyleInputTypeSubmit component has "Next" as value to the value attribute, the handleMarkerProperties function as value to the onClick attribute and and completedMarkerProperties() function as value to the disabled attribute.
  • [x] Use conditional rendering in the return to display the output only if titleLabel.length > 0 and if clickedChartType = "line+markers-plot" or if clickedChartType = "scatter-plot".

• [x] In the index.js file, add the MarkerProperties component (before the Plotting component).

• [x] In the Plotting component, access the markerColor, markerSymbol and markerSize variables.

  • [x] If clickedChartType="line-markers-plot" or if clickedChartType="scatter-plot", declare as var a dataOptions variable like dataOptions = { x: xVariable, y: yVariable, mode: selectedMode, type: selectedType, marker: { color: markerColor, symbol: markerSymbol, size: Number(markerSize), }, }.
  • [x] In the return of the function, add a conditional expression with ternary operator between : and null, like X ? Y : , where X is a copy of the conditional statement and Y is a copy of the Plot render.
  • [x] In the first render of Plot replace the value of the data attribute by {[dataOptions]} and in the first conditional expression add markerColor.length > 0 as additional condition.

[NikRoe]

Hi there,

nice user story.

You can shorten your value proposition to something like this: As a user I want to set the properties of the markers my plot to have the option to change the visual display of my data.

Apart from that, nicely done 👏

--> please change the value proposition to something similar to my suggestion. (US is approved)