Challenge Overview
Challenge Objectives
Project Background
Our client has an Angular app used by their employees to while talking to their customers. It has a complex visualization that helps demonstrate various product features. Users would like to use this screen in a their presentation material (and easily make edits) but there is no simple and effective way to do this. We will develop an Angular module that will export a treemap and a table to a powerpoint presentation.
Technology Stack
Code access
Base code is available in the project repo, develop branch. See forums for access to the repo.
Individual requirements
1. Export the table to pptx
Sample table is displayed on this screen
Data for the table is available in 2 json files: StructureOptions.json and ReinsuranceDeclarations.json (sample data files available in the forums). Same data is used to build the first slide (tree map)
Structure options json file contains an array of structures (allStructures field) - each structure should be exported to a new slide (one slide for the tree map and one for the table)
Angular module takes the two objects as inputs (reinsuranceDeclarations and structureOptions) and displays a download icon. When clicked, the module creates a pptx file with the above tree map and table and saves the file (start file download). To create pptx files PptxGenJS Javascript library is used.
All colors should be configurable.
2. Use a template pptx file as base file (available in the forums). It contains the slide master which should be used on all slides.
3. Fix the issues with the tree map shown in this example
Format the numbers to one decimal place
Last row should not overflow the tree boundaries
What To Submit
- Update a reusable Angular module
- Export a table structure to pptx
Project Background
Our client has an Angular app used by their employees to while talking to their customers. It has a complex visualization that helps demonstrate various product features. Users would like to use this screen in a their presentation material (and easily make edits) but there is no simple and effective way to do this. We will develop an Angular module that will export a treemap and a table to a powerpoint presentation.
Technology Stack
- Javascript/Typescript/Angular
- Heroku
- PptxGenJS
Code access
Base code is available in the project repo, develop branch. See forums for access to the repo.
Individual requirements
1. Export the table to pptx
Sample table is displayed on this screen
Data for the table is available in 2 json files: StructureOptions.json and ReinsuranceDeclarations.json (sample data files available in the forums). Same data is used to build the first slide (tree map)
Structure options json file contains an array of structures (allStructures field) - each structure should be exported to a new slide (one slide for the tree map and one for the table)
Angular module takes the two objects as inputs (reinsuranceDeclarations and structureOptions) and displays a download icon. When clicked, the module creates a pptx file with the above tree map and table and saves the file (start file download). To create pptx files PptxGenJS Javascript library is used.
All colors should be configurable.
2. Use a template pptx file as base file (available in the forums). It contains the slide master which should be used on all slides.
3. Fix the issues with the tree map shown in this example
Format the numbers to one decimal place
Last row should not overflow the tree boundaries
What To Submit
- Source code for the angular module and demo project
- Readme with deployment and verification instructions
- Demo video
- Heroku link
Final Submission Guidelines
- Source code for the angular module and demo project
- Readme with deployment and verification instructions
- Demo video
- Heroku link