Adding graphing area details

active/GraphingMode/GraphingArea.md

@@ -1,3 +1,71 @@
 ## Graphing Area
 
-TODO
+The graphing area is comprised of:
+
+* Graphing engine output, which renders equation plots
+* Button grouping in the bottom-right corner to allow for manipulation of graph surface:
+  * Zoom in/out
+  * Reset to best view
+* Button group in the top-right corner which surfaces the following functionality:
+  * Enter/exit active tracing
+  * Global graph settings (e.g., specify x-min/x-max)
+  * Share
+
+![Graphing Area](./images/graphingAreaClean.png)
+
+> Note: Graph styling in comp is slightly out-of-date; tick mark values should appear along each axis instead of along the border.
+
+#### Graphing Area Requirements
+
+##### 1) User can change the viewing window by dragging and zooming the graphing area
+
+The graphing surface viewing area can be manipulated by users with pointer input, similar to exploring a map. This includes support for panning and zooming gestures and pointer interactions:
+
+* **Panning**: Users can click or tap and drag to pan the graphing surface.
+* **Zooming**:  Users can pinch-to-zoom (touch) or use the scroll wheel (mouse) to zoom in and out of the  the graphing surface.
+
+> Open Question: Should we support keyboard shortcuts (e.g., "Ctrl + Plus" to zoom in, arrow keys to pan, etc.)
+
+##### 2) User can zoom the viewing window via onscreen buttons
+
+For a more accessible experience, we will support on-screen zoom buttons for improved keyboard input.
+
+> Note: Final font glyph assets for zoom buttons are subject to change
+
+##### 3) User can reset the viewing window to "best fit" via onscreen buttons
+
+The graphing engine automatically returns a "best fit" graph view window. If the user changes the view, this button will allow the user to instantly reset to that "best fit" view.
+
+>  Note: Final font glyph assets for "best fit" button is subject to change
+
+##### 4) User can export the graph to other applications
+
+When exporting the graph, we will generate an image made up of the current graph viewing with the list of equations rendered underneath the graph as a key.
+
+> TODO: Missing design asset
+
+##### 5) User can save the graph as an image
+
+In addition to sharing with other applications, the user should be able to save the image to disk. Supported filetypes include .png, .jpg, .jpeg, and .svg. The default file name should be prefixed with "graph".
+
+##### 6) Users can change the min and max x/y values for the graph window.
+
+![Graph Options](.\images\graphOptions.png)
+
+Users can manually specify the min and max values for x and y coordinates. A "lock aspect ratio" button allows users to quickly change these values while optimizing for a square graph area (e.g., -15 to 15).
+
+The default changes based on what equations are being plotted and is determined based on the generated "best fit" graph output from the graphing engine.
+
+> Note: Final font glyph assets for locking aspect ratio button is subject to change
+
+> Open Question: Is "lock aspect ratio" useful accelerator or should it be removed for simplicity?
+
+##### 7) Users can switch between operating in degrees and radians.
+
+When users toggle between degrees and radians, this affects all plots, as it is a global setting. The default is reset to degrees upon starting a new graphing session.
+
+##### 8) The x and y intercepts are highlighted on the graph
+
+X- and y-intercepts are highlighted on the graph by default for each plot.
+
+> TODO: Missing design asset

active/GraphingMode/Keyboard.md

@@ -1,3 +1,28 @@
 ## Keyboard
 
-TODO
+Graphing Keyboard is copied here for reference, but full details are captured by microsoft/calculator#428
+
+#### Graphing Keyboard Layout
+
+| ![Graphing Calculator](./images/graphingAfter.png) | ![Graphing Calculator Annotated Changes](./images/graphingAnnotated.png) |
+| :------------------------------------------------: | :----------------------------------------------------------: |
+|                       After                        |                          Annotated                           |
+
+**Orange Region - Operator Groups**
+
+* Graphing has following overflow operator groups
+  * Trig (same as Scientific)
+  * Inequalities (=, <, <=, >, >=)
+  * Functions (floor, ceil, and abs)
+* See overflow panel slide for more details
+
+**Red Region - Variables**
+* X and Y are special variables exposed top-level
+
+**Green Region - Equals and Submit**
+* In graphing mode, the equals button means something else, so the “submit” button is replaced with a submit/enter button to plot the equation in bottom-right corner
+* The “=“ button is exposed top-level (also included in variables operator overflow group)
+
+**Black Region - Mode-specific**
+* Space not used by common keyboard components are reserved for mode-specific buttons
+* Like operators are grouped together, when possible

active/GraphingMode/README.md

@@ -49,19 +49,19 @@ Windows calculator is built on top of the [Windows Fluent design system](https:/
 | 1 | User can enter an equation so that they can see the graphed plot. | Graphing area, Equation area, Keyboard area |
 | 2 | User can enter multiple equations so that they can compare plots against each other and see the interactions between the lines. | Equation area, Keyboard area |
 | 3 | User can edit an equation so that they can see how changes affect the plot and correct mistakes. | Equation area |
-| 4 | User can change the graph viewing window so that they can see different parts of the plot at different levels of detail. | Settings area |
+| 4 | User can change the graph viewing window so that they can see different parts of the plot at different levels of detail. | Graphing area |
 | 5 | User can export a graph so that they can share it with others or incorporate into Office/Teams. | Graphing area |
 | 6 | User can analyze equations for common features and summon key graph features in a list so that they can better understand the important features of a given function. | Equation area |
 | 7 | User can easily manipulate secondary variables in equations so that they can quickly understand how changes to equations affect the graph.  | Equation area |
-| 8 | User can change graph visuals so that they can clearly differentiate between multiple plots. | Settings area |
+| 8 | User can change graph visuals so that they can clearly differentiate between multiple plots. | Graphing area |
 | 9 | User can trace plots with a mouse or gesture so that they can better understand the relationship between variables in the equation on the graph. | Graphing area |
 | 10 | User can use their keyboard to activate a crosshair so that they can better understand the relationship between variables in the equation on the graph. | Graphing area |
 | 11 | User can see traceable key graph features as nodes/dots on the equations so that they can better understand the important features of a given function. | Graphing area |
 | Future | User can enter a set of points so that they can see the multiple points graphed. | Graphing area, Equation area, Keyboard area |
-| Future | User can bound their equations so that they can create step funtions. | Equation area |
+| Future | User can bound their equations so that they can create step functions. | Equation area |
 
 ## Feature Details and High-Fidelity Concept
-Graphing calculator can be split into four main components: (1) Graphing Area, (2) Keyboard, (3) Equation Input Area, and (4) Settings. Leveraging the [US common core standards](http://www.corestandards.org/Math/), and the key user scenarios we were able to start defining the requirements needed for each of these components.
+Graphing calculator can be split into four main components: (1) Graphing Area, (2) Keyboard, and (3) Equation Input Area. Leveraging the [US common core standards](http://www.corestandards.org/Math/), and the key user scenarios we were able to start defining the requirements needed for each of these components.
 
 ### Graphing Area
 | # | Requirement | Notes |
@@ -71,7 +71,9 @@ Graphing calculator can be split into four main components: (1) Graphing Area, (
 | 3 | User can reset the viewing window to "best fit" via onscreen buttons |  |
 | 4 | User can export the graph to other applications |  |
 | 5 | User can save the graph as an image | Default file name should be prefixed with "graph". Should support .png, .jpg, .jpeg, and .svg. |
-| 6 | The x and y intercepts are highlighted on the graph |  |
+| 6 | Users can change the min and max x/y values for the graph window. | Users  should be able to input a specific value of the min and max. |
+| 7 | Users can switch between operating in degrees and radians. |  |
+| 8 | The x and y intercepts are highlighted on the graph |  |
 
 See more details about the graphing area component [here](./GraphingArea.md).
 
@@ -96,14 +98,6 @@ See more details about the keyboard component [here](./Keyboard.md).
 
 See more details about the equation input area [here](./EquationInputArea.md).
 
-### Settings
-| # | Requirement | Notes |
-|---|:-------------|:-------|
-| 1 | Users can change the min and max x/y values for the graph window. | Users  should be able to input a specific value of the min and max. |
-| 2 | Users can switch between operating in degrees and radians. |  |
-
-See more details about settings [here](./Settings.md).
-
 ### Layout
 
 Windows Calculator is desgined to be responsive to window size changes. As such, we must support both large and small window sizes. Due to the complexity of graphing equations, we are optimizing for larger windows layouts, but graphing calcualtor should work great for smaller sized windows as well. See more details about layout [here](./Layout.md).