The task in this challenge is to build an advanced calculator. The calculator should be able to take input in the form of a free text formula and then visualize the evaluation tree with the ultimate goal of executing the formula.
The language which we want to execute is fairly simple as it is oriented at the excel syntax.
The language is built using the following rules (note that those are not formally correct but just an illustration):
EXPR = BINARY_EXPR
| FUNCTION
| UNARY_EXPR
| NUMBER
| STRING
| PARAMETER
| PI
| "(" EXPR ")"
BINARY_EXPR = EXPR + EXPR
| EXPR - EXPR
| EXPR * EXPR
| EXPR / EXPR
FUNCTION = <FunctionName>"(" (EXPR ("," EXPR)*)? ")"
UNARY_EXPR = "-" EXPR
NUMBER = [Float or Integer Number]
STRING = "'"[String]"'"
PARAMETER = "$"[PARAMETER_NAME]
PI = "PI"
The following examples are valid queries
PI * SQR($r)
($b + SQRT (SQR($b) - 4 * $a)) / (2 * $a)
Based on this, the following questions should be answered and tasks implemented:
In order to eventually execute a formula, we need to analyze it and generate a model describing the different operations. Please describe the steps and software components you would need to implement in order to analyze a formula. Please also describe, what kind of data structure you would use as a result of the analysis and why you would choose this data structure.
Note that you do not have to implement your proposed solution.
Data visualization is one of the key aspects of Celonis' Software Products. In this task you should implement an interactive visualization of the formula entered.
As a starting point, in the src/ folder you can find a parser as well as AST classes and a small function library implemented for demostration purposes.
- Describe the architecture and component structure you are planning to use in order to visualize the formula hierarchy. Note that also adding and deleting nodes should be considered here (see examples below).
- Generate a formula string from the tree. (Visualized Syntax Tree => Formula)
- Visualize a syntax tree / parse tree in a component. It should be easy for the user to distinguish between functions, constants etc. (Formula => Visualized Syntax Tree)
- Allow deletion of nodes from the tree
- Allow adding nodes to the tree
Someone has entered the following formula for calculating the area of a circle: PI * SQR(4) for a circle with a radius of 4.
Now the user wants to change the static value 4 to a parameter $r. However, instead of editing it in the formula directly, it should be possible to do this visually as the user is not familiar with the language.
Examples of how it could work:
- Adding a block to the formula
- Removing a block from the formula(click to select, x button to remove)
- Changing the type of a block
Please describe the components which you want to create in order to do the flexible rendering of the tree, describe how you implement the interactions and how you implement the to-string-conversion of the formula.
There are some test cases there which you can use as a reference or extend.
This project was generated with Angular CLI version 13.0.2.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.