Challenge Overview
Welcome to the Status Report Generation - D3js Contest. As part of this contest, you will generate a report for our client that details their payments using the d3js library.
Contest Details
This challenge is to dynamically generate a report to be sent to customers explaining their payment stream. Historically this has been done using text but we think a graph could make everything easier to understand for our client’s customers. Developers are to use the supplied XML or JSON files (slight preference to JSON) to create Explanation of Benefits (EOBs) using the Data Driven Document (D3) JavaScript library.
Create a simple web page that allows the user to upload a JSON or XML file and generates a report in another web page that our client will then print out using the browser’s print feature.
There are multiple aspects or sections in this report. You don’t have to title each section in the document. These have been categorized only to make the understanding easier for you, the participant.
For each of the following sections, we will using the terms in the 20160519Payment.json file that will be shared in the contest forum. Please use that as reference.
Section 1: The chart
This is the important part of the report. Refer to the ExplanationOfBenefits.Lines.Line array in the JSON file. To present this information intuitively, the client wishes to display the payment information in the form of a chart. Some examples of the types of chart:
- Time Data Availability Chart
You are free to use other types of charts too. The expectation is that each block in the chart will be an element in the ExplanationOfBenefits.Lines.Line array. Each block should convey the following information:
- LineType
- Description
- DateRange.Start and DateRange.End
- MonthlyRate
You can take a look at the mockup that our client created on how this information is represented in the chart. You are free to come up with your own representation though.
Guidelines for this section are:
- You need to show all line array elements in the chart.
- The current period is present under ExplanationOfBenefits.Payment.DateRange. All line elements that are within this date range need to be highlighted. The simplest way that you can highlight them is to have two vertical lines in the chart - one line for the Payment.DateRange.Start and one for the Payment.DateRange.End. Thus, all blocks in the chart that are within the two vertical lines are considered “highlighted”. You are free to represent this differently too as long as it is clear which is the current period and which lines fall under it.
- The LineTypes aren’t restricted to the ones in the JSON file. There could be other line types too. It should be easy for our client to pass the different values and without any code modification, for these values to still show up in the chart. That is, you should not hard-code any value, your chart code should be generic and should only concern itself with displaying the lines in the chart. The customer mentions that they will have a maximum of 25 lines in a JSON file with maximum of 8 overlapping a single payment period.
- This will always be the first section in the report.
Section 2: Misc Information
Simple section. You need to show the ExplanationOfBenefits.Customer information here. Additionally, you also need to show the ExplanationOfBenefits.RequiredText here. When displaying the customer information, you need to show all attributes in the ExplanationOfBenefits.Customer object namely:
- CustomerNumber
- Name
- BirthDate
- Address
- BankAccount
The Guidelines for this section are:
- BankAccount may or may not exist. If it does exist, then it implies that the payment was direct deposited. If BankAccount does NOT exist, then Section 4 is shown. Else instead of Section 4, simply show a text “Net Amount was transferred to your back account Customer.BankAccount.AccountNumber on Payment.CheckDate (Current Date if CheckDate does not exist).
- The RequiredText field can be lengthy. Thus, make sure that you do assign plenty of space to display the text (fluid content and not fixed, that is the height of the content should not be fixed and should increase / decrease based on the content)
Section 3 - Payment
This section describes to our client’s customers how the payments have been calculated.
Refer to the attached excel file. You need to display the calculations exactly as seen in the excel file. Each row in the excel file uses the ExplanationOfBenefits.Lines.Line elements and the ExplanationOfBenefits.Payment elements.
Notice how lines with id 7, 8 and 10 are not in the excel because their dates are outside the current period (ExplanationOfBenefits.Payment.DateRange)
Section 4 - Check
This section is shown only if there is no BankAccount attribute under the Customer Object. You can use this check as reference. You need to fill up the following fields:
- Date (Current Date)
- Payee (In JSON file, this will be the Customer.Name field)
- Amount and Amount in words (In JSON file, this will be the NetAmount in the Payments object).
You need to ensure that on printing the page, the check will always exist together - that is, the check does not split into multiple pages and is always shown completely. It can be shown in a different page if the area in the previous page is not sufficient but the check should not split where one part of the check is on one page and the remaining part on the second page. This should not happen.
If the document can be printed in grayscale and the customers will still understand it, then it will be considered under section 1.1.7 of the scorecard.
Points to Note
- Make sure that the performance of the web page is good. The browser should not hang when loading the data
- There is no backend for the app. It should be possible for us to use any static HTTP web server to use your app.
Final Submission Guidelines
Upload your submission as a .zip file. Provide a non-public video of how your submission works.