- ๐๏ธ Interactive Chart with Pan & Zoom: Use your mouse wheel to easily navigate and explore data.
- ๐ Tooltips for Profit or Loss Information: Hover over points on the chart to instantly see profit or loss details.
- ๐ฑ๏ธ Clickable Detail Sections: Clickable actions to indicate break-even and strike price points for a more intuitive experience.
- ๐ Accordion for Detailed Information: Expandable accordion sections to view all relevant information neatly organized.
- ๐ป Accessible Navigation: Elements are navigable and actionable via keyboard.
- ๐ง Structured Headers: Headers are structured according to a11y standards for screen reader navigation.
- ๐ท Vue 2
- ๐จ Tailwind CSS
- ๐ Apache ECharts
- ๐ก TypeScript
- ๐ Bun
- ๐งช Vitest
- ๐ React Testing Library
- ๐ง Lodash
- 100% code coverage on the source code ๐ฅณ
- Improved DevX with Typescript ๐ค
Design and implement a front-end for options strategy risk and reward analysis using Vue.
Your challenge is to create a Vue component that can generate a risk & reward graph for options strategies. The component should accept an input of up to four options contracts and output the following:
- A risk & reward graph where X is the price of the underlying at the time of expiry and Y is the profit/loss at that price.
- Max profit, max loss, and all break even points.
- Completeness of the logic
- Usability of the graph
- Aesthetics of the UI
- Readability and code structure
Please organize, design, test, and document your code as if it were going into production - then push your changes to the main branch.
Reply to the invitation e-mail with your github username to notify of completion.
Have fun coding! ๐ The Aries Financial Team