[Frontend Component] Graph Customization

[guojasonliu]

• Create a sub-component that is basically a textbox preceded by a text. Something like “Title: [textbox]”
• Create a sub-component that is a multi-select list. Look at the Python dictionary named “data” in this file: https://github.com/bruinformula/data-analysis/blob/main/data_parser.py. Have the elements of this list be the names (e.g. Acceleration Magnitude) and when an element is selected, have the list record all selected elements’ keys (e.g. accm) for later purposes.
• Create a sub-component that is a dropdown list. Right now only have the list only contain “mk-8-data-parser”.
• Create a sub-component that is a button called “Graph” and a button called “Download Graph”
• Using the sub-components created, have this component be a list of:
  • the multi-select list of data types sub-component
  • a textbox called Title
  • a textbox called X-Axis Title
  • a textbox called Y-Axis Title
  • a textbox called X-Axis Units
  • a textbox called Y-Axis Units
  • the dropdown list sub-component
  • a textbox called Extra Options
  • the two button sub-components, placed at the bottom of the component (they can be placed vertically or horizontally together, however you see fit)
• Note that this list of sub-components may grow or shrink in the future, so try to use something like a flexbox and don’t make positions absolute for future convenience