Hello Kind Helpers. I am relatively new to angular2 and I have a specific requirement where I need to show a two-colored div that represents the ratio-percentage difference between incoming and outgoing call data for different cities. This will be based on the disparity between the values in two columns of an HTML table. The table structure is as follows:
City | Incoming Calls | Outgoing Calls | Ratio In\Out calls
New York | 4500 | 5600 | divs two colored bar- red\blue -- showcasing the percentage difference in inbound and outbound calls for New York with values 4500 and 5600 respectively.
Boston | 8800 | 1200 | divs two colored bar> red\blue depicting the percentage discrepancy in inbound and outbound call figures, being 8800 and 1200 for Boston.
LA | 3400 | 8800 | divs two colored bar> red\blue indicating the percentage difference in incoming and outgoing call numbers (3400 and 8800) for LA.
Seattle | 1200 | 790 | divs two colored bar> red\blue showing the percentage variation in inbound and outbound calls, representing 1200 and 790 for Seattle.
I hope this explanation makes sense...
.two-colour-bar {
width: 60px; height: 10px; color: #fff;
background: -webkit-linear-gradient(left, orange, orange 30%, black 70%, black);
The percentages in the gradient above will adjust according to the input values from the table columns such as Incoming and Outgoing calls. For instance, the proportions 30% and 70% would change based on respective values like 4500 and 5600 from incoming and outgoing calls.
City | Incoming Calls | Outgoing Calls | Ratio In\Out calls
New York | 4500 | 5600 |
The aforementioned table is implemented using *ngFor within a table structure in HTML.. –
[sample look][1]