US-11-Layout-Grid-Properties

[MariaAdner]

Layout Properties

Value description

As a user, I want to customise the appearance of charts by enabling grids on the x and y axes, So that I can enhance the readability and precision of data visualisation in my charts.

Description

Acceptance Criteria

• [x] Paragraph with text "Show grid (helper lines) for axes:".
• [x] User can decide to have a grid separately for the x- and y-axis by using radio-buttons ("yes"/"no").
• [x] Only when the user clicked yes on at least one of the radio buttons above:
  • [x] Paragraph with text "Grid linestyle:".
  • [x] User can choose from two dropdown-menus the grid linestyle for the x- and y-axis (if applicable), options are: solid, dash, dot, longdash, dashdot.

Tasks

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

• [x] Create a component InputTypeRadio

  • [x] function with props idString, labelString, valueString ,checked and onChange
  • [x] returns label and input

• [x] Create a component GridProperties

  • [x] Store the values (states) for gridXAxis , gridYAxis, gridLineStyleXAxis and gridLineStyleYAxis into an object

  • [x] Create a useState called grid and use the object as initial state

  • [x] Return: Paragraph, InputTypeRadio , DropDownMenu in the appropriate order and text described in the acceptance criteria.

• [x] In the index.js, add the GridProperties component to the return (before Plotting).

[JessicaLoers]

Well done, Team 🎉 Just a small note regarding the value proposition_

Consider to refine the value proposition to focused on the user's need and the action. As a user [role] I want to [action] So that I can [value / user benefit]

Example

As a user, I want to customise the appearance of charts by enabling grids on the x and y axes, So that I can enhance the readability and precision of data visualisation in my charts.