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
We’re starting from scratch.
Individual requirements
1. Export the tree map to pptx
Sample tree map is displayed on this screen
Data for the tree map is available in 2 json files: StructureOptions.json and ReinsuranceDeclarations.json (sample data files available in the forums)
There are 3 layers in the tree map: fronting, reinsurance and placements. Fronting and reinsurance are fixed width columns, placements are the boxes on the right. Width for placements is proportional to placement.share*frontingLayer.ourShare. Height for all boxes is calculated from attachmentPoint (0 is bottom), and groundUpLimit (so height is proportional to groundUpLimit-attachmentPoint). “Remaining” boxes, shown in blue are not in the input data - they are added to fill up the remaining space for the fronting layer share.
Structure options json file contains an array of structures (allStructures field) - each structure should be exported to a new slide. Placement.reinsuranceDeclarationDocumentId should be used to connect a placement to reinsurance declaration and display the reinsurer.shortName as title
Angular module should take the two objects as inputs (reinsuranceDeclarations and structureOptions) and display a download icon (sample icon available in the forums). When clicked, the module will create a pptx file with the above tree map and save the file (start file download). To create pptx files use PptxGenJS Javascript library.
All colors should be configurable.
2. Demo project to use the angular module
Create a simple demo project that will showcase the above module. Use the provided sample json files and allow the user to select different reinsuranceDeclarations and structureOptions files.
What To Submit
- Develop a reusable Angular module
- Export a treemap 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
We’re starting from scratch.
Individual requirements
1. Export the tree map to pptx
Sample tree map is displayed on this screen
Data for the tree map is available in 2 json files: StructureOptions.json and ReinsuranceDeclarations.json (sample data files available in the forums)
There are 3 layers in the tree map: fronting, reinsurance and placements. Fronting and reinsurance are fixed width columns, placements are the boxes on the right. Width for placements is proportional to placement.share*frontingLayer.ourShare. Height for all boxes is calculated from attachmentPoint (0 is bottom), and groundUpLimit (so height is proportional to groundUpLimit-attachmentPoint). “Remaining” boxes, shown in blue are not in the input data - they are added to fill up the remaining space for the fronting layer share.
Structure options json file contains an array of structures (allStructures field) - each structure should be exported to a new slide. Placement.reinsuranceDeclarationDocumentId should be used to connect a placement to reinsurance declaration and display the reinsurer.shortName as title
Angular module should take the two objects as inputs (reinsuranceDeclarations and structureOptions) and display a download icon (sample icon available in the forums). When clicked, the module will create a pptx file with the above tree map and save the file (start file download). To create pptx files use PptxGenJS Javascript library.
All colors should be configurable.
2. Demo project to use the angular module
Create a simple demo project that will showcase the above module. Use the provided sample json files and allow the user to select different reinsuranceDeclarations and structureOptions files.
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