Performance issue with PrimeNG TurboTable

Performance issue with PrimeNG TurboTable - angular5

I am using PrimeNG TurboTable with nested rows.While loading data to the TurboTable getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and the data received from the server is quite fast. Has anyone else faced problem.
If yes, how were you able to fix the same.
html
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-columns="columns" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>
<ul>
<li *ngFor="let item of sales"
<a [ngClass]="{'active':car.order==item.order,'inactive':car.order > item.order}">
<i class="fa {{item.icon}}"></i>
</a>
</li>
</ul>
</td>
</tr>
</ng-template>
</p-table>
ts
this.cars =[
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff","order"=10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345","order"=15},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr","order"=24},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh","order"=2},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34","order"=5},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj","order"=8},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr","order"=10},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5","order"=17},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=20},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=3},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=23},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=6},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=1},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=4},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=19},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=12},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=11},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s","order"=24},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34","order"=15},
];
Separate List
this.sales = [
{ brand: 'Apple', lastYearSale: '51%',thisYearProfit: '$43,342',"order"=1,"icon"="fa-flag-o" },
{ brand: 'Samsung', lastYearSale: '83%',thisYearProfit: '$312,122',"order"=2,"icon":"fa-address-card" },
{ brand: 'Microsoft', lastYearSale: '38%', thisYearProfit: '$8,500',"order"=3,"icon":"fa-eye" },
{ brand: 'Philips', lastYearSale: '49%',thisYearProfit: '$650,323',"order"=4,"icon":"fa-address-card" },
{ brand: 'Song', lastYearSale: '17%',thisYearProfit: '500,332' ,"order"=5,"icon":"fa-fax"},
{ brand: 'LG', lastYearSale: '52%',thisYearProfit: '$150,005',"order"=6,"icon":"fa-circle" },
{ brand: 'Sharp', lastYearSale: '82%',thisYearProfit: '$100,214' ,"order"=7,"icon":"fa-folder"},
{ brand: 'Panasonic', lastYearSale: '44%',thisYearProfit: '$53,322',"order"=8,"icon":"fa-address-book-o" },
{ brand: 'HTC', lastYearSale: '90%',thisYearProfit: '$296,232',"order"=9,"icon"="fa-bluetooth-b" },
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=10,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=11,"icon"="fa-bath"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=12,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=13,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=14,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=15,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=16,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=17,"icon"="fa-address-book-o"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=18,"icon"="fa-address-card"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=19,"icon"="fa-bluetooth-b"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=20,"icon"="fa-eye"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=21,"icon"="fa-fax"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=22,"icon"="fa-circle"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=23,"icon"="fa-folder"},
{ brand: 'Toshiba', lastYearSale: '75%',thisYearProfit: '$12,533',"order"=24,"icon"="fa-flag-o"}
];

The problem is not TurboTable but your last column where you display 24 icons for each of your 3401 lines.
It will take quite a few seconds to display 81624 icons, even outside a table. To convince you, try this :
<div *ngFor="let car of cars">
<li *ngFor="let item of sales">
<i class="fa {{item.icon}}"></i>
</li>
</div>
You will have same performance issue.
To solve your problem, why don't you use pagination ? This will be very fast :
<p-table [value]="cars" sortField="brand" [paginator]="true" [rows]="10">
...
</p-table>
See working Plunker

Related

Extra padding added to the Vega legend element

I'm rendering a chart with the attached JSON. While doing it in the Vega editor everything is fine but while rendering SVG with a code, an extra right padding is added to the legend element. Take a look at bellow screenshots:
Here is a very simple code:
const vega = require('vega');
module.exports = async function (context, req) {
try {
const vview = await new vega.View(vega.parse(req.body), { renderer: 'none' });
let svg = await vview.toSVG();
context.res = {
body: svg,
contentType: 'image/svg+xml'
};
}
catch (error) {
context.log(`Error during rendering vega chart: ${error}.`);
throw error;
}
}
The req.body contains JSON with a chart definition. Are there any settings with which I could control that padding?
I tried all options from the documentation without luck.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Sample",
"width": 600,
"height": 300,
"autosize":
{
"type": "fit",
"contains": "padding"
},
"padding": 10,
"data": [
{
"name": "table",
"values": [
{
"category": "Portfolio",
"year": 2020,
"section" : "vor 1900",
"volume": 0.04
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1900-1950",
"volume": 0.07
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1950-1970",
"volume": 0.13
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1990-2010",
"volume": 0.24
},
{
"category": "Portfolio",
"year": 2020,
"section" : "nach 2010",
"volume": 0.33
},
{
"category": "Portfolio",
"year": 2021,
"section" : "vor 1900",
"volume": 0.03
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1900-1950",
"volume": 0.06
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1950-1970",
"volume": 0.11
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Portfolio",
"year": 2021,
"section" : "nach 2010",
"volume": 0.36
},
{
"category": "Benchmark",
"year": 2020,
"section" : "vor 1900",
"volume": 0.06
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1950-1970",
"volume": 0.15
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1970-1990",
"volume": 0.23
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2020,
"section" : "nach 2010",
"volume": 0.22
},
{
"category": "Benchmark",
"year": 2021,
"section" : "vor 1900",
"volume": 0.05
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1950-1970",
"volume": 0.14
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1970-1990",
"volume": 0.24
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2021,
"section" : "nach 2010",
"volume": 0.23
}
],
"transform": [
{
"type": "stack",
"groupby": ["category","year"],
"field": "volume"
},
{
"type": "formula",
"as": "colorParam",
"expr": "datum.section+' '+datum.category"
},
{
"type": "formula",
"as": "volumePerc",
"expr": "format(datum.volume,'.0%')"
}
]
}
],
"signals": [
{ "name": "sfont", "value" : "Arial Narrow, serif"},
{ "name": "sfontBold", "value" : "Arial Black, serif"},
{ "name": "sfontSize", "value" : 16},
{ "name": "sfontColor", "value" : "#595959"}
],
"scales": [
{
"name": "xCategoryScale",
"type": "band",
"domain": {
"data": "table",
"field": "category"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0,1],
"range": "height",
"nice": true
},
{
"name": "colorScale",
"type": "ordinal",
"domain": {
"data": "table",
"field": "colorParam"
},
"range": [
"#172431",
"#426990",
"#638EB9",
"#8BABCB",
"#BFD1E3",
"#D7E2ED",
"#322B22",
"#6F5F4D",
"#958069",
"#AE9D8B",
"#D3C9BF",
"#F1EEEB"
]
},
{
"name": "legendColorScale",
"type": "ordinal",
"domain": [
"nach 2010",
"1990-2010",
"1970-1990",
"1950-1970",
"1900-1950",
"vor 1900"
],
"range": [
"#d9d9d9",
"#bfbfbf",
"#a6a6a6",
"#7f7f7f",
"#595959",
"#262626"
]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickCount": 6,
"grid": true,
"title": "m²EBF-%",
"titleX":-40,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"text": {"signal": "format(datum.value, '.0%')"}
}
}
}
},
{
"orient": "bottom",
"scale": "xCategoryScale",
"tickBand": "extent",
"tickSize": 50,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy": {
"value": -20
}
}
}
}
}
],
"legends": [
{
"type": "symbol",
"fill": "legendColorScale",
"symbolType": "square",
"orient":"right",
"legendX": {"signal": "width", "offset": 20},
"legendY": {"signal": "height / 2", "offset":-40},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"}
}
],
"marks": [
{
"name": "categories",
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "perCategory",
"groupby": "category"
}
},
"encode": {
"enter": {
"x": {
"scale": "xCategoryScale",
"field": "category"
},
"width": {
"scale": "xYearScale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "volume"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
},
"signals": [
{
"name": "width",
"update": "bandwidth('xCategoryScale')"
}
],
"scales": [
{
"name": "xYearScale",
"type": "band",
"range": "width",
"domain": {
"data": "perCategory",
"field": "year"
},
"padding": 0.06
}
],
"axes": [
{
"orient": "bottom",
"scale": "xYearScale",
"zindex": 1,
"offset": {"signal": "height"},
"tickSize":{"value": 0},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy" : {"value": 5}
}
}
}
}
],
"marks": [
{
"name": "volumeBars",
"from": { "data": "perCategory"},
"type": "rect",
"encode": {
"enter": {
"x": {
"scale": "xYearScale",
"field": "year",
"band": 0.3
},
"width": {
"scale": "xYearScale",
"band": 0.4
},
"y": {
"scale": "yscale",
"field": "y0"
},
"y2": {
"scale": "yscale",
"field": "y1"
},
"fill": {
"scale": "colorScale",
"signal": "datum.colorParam"
}
}
}
},
{
"name": "barLabel",
"type": "text",
"from": {
"data": "volumeBars"
},
"encode": {
"enter": {
"y": {
"field": "y",
"offset": {
"field": "height",
"mult":0.5
}
},
"x": {
"field": "x",
"offset": {
"field": "width",
"mult": 0.5
}
},
"stroke":{"value": "white"},
"strokeWidth":{"value": 0.4},
"fontSize": {"signal": "sfontSize"},
"font": {"signal": "sfontBold"},
"color":{"signal": "sfontColor"},
"baseline":{"value": "middle"},
"fill":{"value": "black"},
"align": [
{
"test": "indexof(data('volumeBars'), datum) % 2 == 0",
"value": "right"
},
{
"value": "left"
}
],
"text": {
"field": "datum.volumePerc"
}
}
}
}
]
}
]
}

See how the legend is now clipped with a negative right padding below.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Sample",
"width": 600,
"height": 300,
"autosize":
{
"type": "fit",
"contains": "padding"
},
"padding": {"left": 5, "top": 5, "right": -15, "bottom": 5},
"data": [
{
"name": "table",
"values": [
{
"category": "Portfolio",
"year": 2020,
"section" : "vor 1900",
"volume": 0.04
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1900-1950",
"volume": 0.07
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1950-1970",
"volume": 0.13
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1990-2010",
"volume": 0.24
},
{
"category": "Portfolio",
"year": 2020,
"section" : "nach 2010",
"volume": 0.33
},
{
"category": "Portfolio",
"year": 2021,
"section" : "vor 1900",
"volume": 0.03
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1900-1950",
"volume": 0.06
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1950-1970",
"volume": 0.11
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Portfolio",
"year": 2021,
"section" : "nach 2010",
"volume": 0.36
},
{
"category": "Benchmark",
"year": 2020,
"section" : "vor 1900",
"volume": 0.06
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1950-1970",
"volume": 0.15
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1970-1990",
"volume": 0.23
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2020,
"section" : "nach 2010",
"volume": 0.22
},
{
"category": "Benchmark",
"year": 2021,
"section" : "vor 1900",
"volume": 0.05
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1950-1970",
"volume": 0.14
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1970-1990",
"volume": 0.24
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2021,
"section" : "nach 2010",
"volume": 0.23
}
],
"transform": [
{
"type": "stack",
"groupby": ["category","year"],
"field": "volume"
},
{
"type": "formula",
"as": "colorParam",
"expr": "datum.section+' '+datum.category"
},
{
"type": "formula",
"as": "volumePerc",
"expr": "format(datum.volume,'.0%')"
}
]
}
],
"signals": [
{ "name": "sfont", "value" : "Arial Narrow, serif"},
{ "name": "sfontBold", "value" : "Arial Black, serif"},
{ "name": "sfontSize", "value" : 16},
{ "name": "sfontColor", "value" : "#595959"}
],
"scales": [
{
"name": "xCategoryScale",
"type": "band",
"domain": {
"data": "table",
"field": "category"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0,1],
"range": "height",
"nice": true
},
{
"name": "colorScale",
"type": "ordinal",
"domain": {
"data": "table",
"field": "colorParam"
},
"range": [
"#172431",
"#426990",
"#638EB9",
"#8BABCB",
"#BFD1E3",
"#D7E2ED",
"#322B22",
"#6F5F4D",
"#958069",
"#AE9D8B",
"#D3C9BF",
"#F1EEEB"
]
},
{
"name": "legendColorScale",
"type": "ordinal",
"domain": [
"nach 2010",
"1990-2010",
"1970-1990",
"1950-1970",
"1900-1950",
"vor 1900"
],
"range": [
"#d9d9d9",
"#bfbfbf",
"#a6a6a6",
"#7f7f7f",
"#595959",
"#262626"
]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickCount": 6,
"grid": true,
"title": "m²EBF-%",
"titleX":-40,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"text": {"signal": "format(datum.value, '.0%')"}
}
}
}
},
{
"orient": "bottom",
"scale": "xCategoryScale",
"tickBand": "extent",
"tickSize": 50,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy": {
"value": -20
}
}
}
}
}
],
"legends": [
{
"type": "symbol",
"fill": "legendColorScale",
"symbolType": "square",
"orient":"right",
"legendX": {"signal": "width", "offset": 20},
"legendY": {"signal": "height / 2", "offset":-40},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"}
}
],
"marks": [
{
"name": "categories",
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "perCategory",
"groupby": "category"
}
},
"encode": {
"enter": {
"x": {
"scale": "xCategoryScale",
"field": "category"
},
"width": {
"scale": "xYearScale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "volume"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
},
"signals": [
{
"name": "width",
"update": "bandwidth('xCategoryScale')"
}
],
"scales": [
{
"name": "xYearScale",
"type": "band",
"range": "width",
"domain": {
"data": "perCategory",
"field": "year"
},
"padding": 0.06
}
],
"axes": [
{
"orient": "bottom",
"scale": "xYearScale",
"zindex": 1,
"offset": {"signal": "height"},
"tickSize":{"value": 0},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy" : {"value": 5}
}
}
}
}
],
"marks": [
{
"name": "volumeBars",
"from": { "data": "perCategory"},
"type": "rect",
"encode": {
"enter": {
"x": {
"scale": "xYearScale",
"field": "year",
"band": 0.3
},
"width": {
"scale": "xYearScale",
"band": 0.4
},
"y": {
"scale": "yscale",
"field": "y0"
},
"y2": {
"scale": "yscale",
"field": "y1"
},
"fill": {
"scale": "colorScale",
"signal": "datum.colorParam"
}
}
}
},
{
"name": "barLabel",
"type": "text",
"from": {
"data": "volumeBars"
},
"encode": {
"enter": {
"y": {
"field": "y",
"offset": {
"field": "height",
"mult":0.5
}
},
"x": {
"field": "x",
"offset": {
"field": "width",
"mult": 0.5
}
},
"stroke":{"value": "white"},
"strokeWidth":{"value": 0.4},
"fontSize": {"signal": "sfontSize"},
"font": {"signal": "sfontBold"},
"color":{"signal": "sfontColor"},
"baseline":{"value": "middle"},
"fill":{"value": "black"},
"align": [
{
"test": "indexof(data('volumeBars'), datum) % 2 == 0",
"value": "right"
},
{
"value": "left"
}
],
"text": {
"field": "datum.volumePerc"
}
}
}
}
]
}
]
}

How to apply multiple colors in legend for Vega stacked bar?

I have the next Vega-Light bar chart.
Vega Bar online editor
How to apply multiple colors in legend? When I apply
symbols: {
update: {
fill: { field: 'color' },
},
},
I didn't see any symbols, only labels.
I need to apply four colors for legend symbols. When I write fill: { value : "red"}, all of the symbols became red color. I need that the four symbols to have different colors. How I can fix this?

{
"width": 500,
"height": 200,
"title": "STD: cashflow cleaning",
"data": [
{
"name": "table",
"values": [
{"yearIndex": 1, "c": "red", "y": 100000, "y0": 10000, "y1": 110000},
{"yearIndex": 1, "c": "green", "y": 10000, "y0": 0, "y1": 10000},
{"yearIndex": 1, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{
"yearIndex": 1,
"c": "orange",
"y": -110000,
"y0": -12000,
"y1": -122000
},
{"yearIndex": 2, "c": "red", "y": 980000, "y0": 98000, "y1": 1078000},
{"yearIndex": 2, "c": "green", "y": 98000, "y0": 0, "y1": 98000},
{"yearIndex": 2, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 2, "c": "orange", "y": 0, "y0": 98000, "y1": 98000},
{"yearIndex": 3, "c": "red", "y": 960000, "y0": 96000, "y1": 1056000},
{"yearIndex": 3, "c": "green", "y": 96000, "y0": 0, "y1": 96000},
{"yearIndex": 3, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 3, "c": "orange", "y": 0, "y0": 96000, "y1": 96000},
{"yearIndex": 4, "c": "red", "y": 940000, "y0": 94000, "y1": 1034000},
{"yearIndex": 4, "c": "green", "y": 94000, "y0": 0, "y1": 94000},
{"yearIndex": 4, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 4, "c": "orange", "y": 0, "y0": 94000, "y1": 94000},
{"yearIndex": 5, "c": "red", "y": 920000, "y0": 92000, "y1": 1012000},
{"yearIndex": 5, "c": "green", "y": 92000, "y0": 0, "y1": 92000},
{"yearIndex": 5, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 5, "c": "orange", "y": 0, "y0": 92000, "y1": 92000},
{"yearIndex": 6, "c": "red", "y": 900000, "y0": 90000, "y1": 990000},
{"yearIndex": 6, "c": "green", "y": 90000, "y0": 0, "y1": 90000},
{"yearIndex": 6, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{
"yearIndex": 6,
"c": "orange",
"y": -91000,
"y0": -10000,
"y1": -101000
},
{"yearIndex": 7, "c": "red", "y": 880000, "y0": 88000, "y1": 968000},
{"yearIndex": 7, "c": "green", "y": 88000, "y0": 0, "y1": 88000},
{"yearIndex": 7, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 7, "c": "orange", "y": 0, "y0": 88000, "y1": 88000},
{"yearIndex": 8, "c": "red", "y": 860000, "y0": 86000, "y1": 946000},
{"yearIndex": 8, "c": "green", "y": 86000, "y0": 0, "y1": 86000},
{"yearIndex": 8, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 8, "c": "orange", "y": 0, "y0": 86000, "y1": 86000},
{"yearIndex": 9, "c": "red", "y": 840000, "y0": 84000, "y1": 924000},
{"yearIndex": 9, "c": "green", "y": 84000, "y0": 0, "y1": 84000},
{"yearIndex": 9, "c": "blue", "y": -12000, "y0": 0, "y1": -12000},
{"yearIndex": 9, "c": "orange", "y": 0, "y0": 84000, "y1": 84000},
{"yearIndex": 10, "c": "red", "y": 820000, "y0": 82000, "y1": 902000},
{"yearIndex": 10, "c": "green", "y": 82000, "y0": 0, "y1": 82000},
{"yearIndex": 10, "c": "blue", "y": -10000, "y0": 0, "y1": -10000},
{"yearIndex": 10, "c": "orange", "y": 0, "y0": 82000, "y1": 82000}
],
"transform": [
{
"type": "stack",
"groupby": ["yearIndex"],
"sort": {"field": "c"},
"field": "y"
}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "table", "field": "yearIndex"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "y1"}
},
{
"name": "color",
"type": "ordinal",
"range": {"data": "table", "field": "c"},
"domain": [
"basicYieldIncome",
"avoidedSoilingIncomeLoss",
"opex",
"capex"
]
}
],
"axes": [
{"orient": "bottom", "scale": "x", "zindex": 1, "title": "yearIndex"},
{
"orient": "left",
"scale": "y",
"zindex": 1,
"title": "EUR",
"formatType": "number",
"format": ".2s"
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "yearIndex"},
"width": {"scale": "x", "band": 1, "offset": -1},
"y": {"scale": "y", "field": "y0"},
"y2": {"scale": "y", "field": "y1"},
"fill": {"field": "c"}
}
}
}
],
"legends": [
{
"orient": "top",
"direction": "horizontal",
"fill": "color",
"encode": {
"labels": {
"interactive": true,
"update": {"fontSize": {"value": 12}, "fill": {"value": "black"}}
}
}
}
]
}

Vega-lite difference between Firefox and Chrome

I have a vega-lite chart that shows up as expected in Chrome (72.0.3626.96), but not in Firefox (70.0.1). I have checked the spec in the Vega Editor. Does anyone know why this might be?
Here are the rendered charts:
Firefox:
Chrome:
Here is the spec:
Any help you might be able to give would be much appreciated.
Apologies, but I do not know how to collapse this code.
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json",
"background": "white",
"config": {"mark": {"tooltip": null}, "view": {"height": 300, "width": 400}},
"datasets": {
"data-511198e25d4dbee99248144390684caa": [
{
"counts": 338,
"filter_method": "greater than",
"grade": "9",
"index": 3,
"perc": 0.2669826224328594,
"school_code": "Board",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 414,
"filter_method": "greater than",
"grade": "9",
"index": 4,
"perc": 0.30689399555226093,
"school_code": "Board",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
}
],
"data-72a083843a98847e44077116c495e448": [
{
"counts": 49,
"filter_method": "greater than",
"grade": "9",
"index": 0,
"perc": 0.3356164383561644,
"school_code": "KING",
"threshold": "8",
"year": 20142015,
"year_lab": "2014/15",
"year_lab_q": "2014"
},
{
"counts": 62,
"filter_method": "greater than",
"grade": "9",
"index": 5,
"perc": 0.3668639053254438,
"school_code": "MLTS",
"threshold": "8",
"year": 20162017,
"year_lab": "2016/17",
"year_lab_q": "2016"
},
{
"counts": 53,
"filter_method": "greater than",
"grade": "9",
"index": 6,
"perc": 0.29608938547486036,
"school_code": "KING",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 44,
"filter_method": "greater than",
"grade": "9",
"index": 7,
"perc": 0.25882352941176473,
"school_code": "MLTS",
"threshold": "8",
"year": 20172018,
"year_lab": "2017/18",
"year_lab_q": "2017"
},
{
"counts": 53,
"filter_method": "greater than",
"grade": "9",
"index": 8,
"perc": 0.3212121212121212,
"school_code": "KING",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
},
{
"counts": 61,
"filter_method": "greater than",
"grade": "9",
"index": 9,
"perc": 0.25206611570247933,
"school_code": "MLTS",
"threshold": "8",
"year": 20182019,
"year_lab": "2018/19",
"year_lab_q": "2018"
}
]
},
"height": 400,
"layer": [
{
"data": {"name": "data-72a083843a98847e44077116c495e448"},
"encoding": {
"color": {
"field": "school_code",
"legend": {"labelFontSize": 15, "titleFontSize": 20},
"title": null,
"type": "nominal"
},
"tooltip": [
{
"field": "perc",
"format": ".2%",
"title": "percentage",
"type": "quantitative"
},
{
"field": "counts",
"title": "number",
"type": "quantitative"
},
{"field": "year_lab", "title": "school year", "type": "nominal"},
{"field": "school_code", "title": "level", "type": "nominal"},
{"field": "grade", "type": "nominal"},
{"field": "filter_method", "type": "nominal"},
{"field": "threshold", "type": "nominal"}
],
"x": {
"axis": {"format": "%Y", "tickCount": 5},
"field": "year_lab_q",
"scale": {"domain": ["2013.9", "2018.5"]},
"title": "School Year (beginning)",
"type": "temporal"
},
"y": {
"axis": {"format": ".0%"},
"field": "perc",
"title": "Percentage",
"type": "quantitative"
}
},
"mark": {"point": true, "type": "line"},
"selection": {
"selector001": {
"bind": "scales",
"encodings": ["x", "y"],
"type": "interval"
}
}
},
{
"data": {"name": "data-511198e25d4dbee99248144390684caa"},
"encoding": {
"color": {
"field": "school_code",
"legend": {"labelFontSize": 15, "titleFontSize": 20},
"scale": {"domain": ["Board"], "range": ["black"]},
"title": null,
"type": "nominal"
},
"tooltip": [
{
"field": "perc",
"format": ".2%",
"title": "percentage",
"type": "quantitative"
},
{
"field": "counts",
"title": "number",
"type": "quantitative"
},
{"field": "year_lab", "title": "school year", "type": "nominal"},
{"field": "school_code", "title": "level", "type": "nominal"},
{"field": "grade", "type": "nominal"},
{"field": "filter_method", "type": "nominal"},
{"field": "threshold", "type": "nominal"}
],
"x": {"field": "year_lab_q", "type": "temporal"},
"y": {"field": "perc", "type": "quantitative"}
},
"mark": {"point": true, "type": "line"}
}
],
"resolve": {"scale": {"color": "independent"}},
"title": "A title!",
"width": 700
}

It appears that your temporal values are not being parsed correctly in firefox (details of javascript date parsing behavior is often browser-dependent). You could try forcing the correct parsing by changing your data specification (in both places) to:
"data": {
"name": "data-72a083843a98847e44077116c495e448",
"format": {"parse": {"year_lab_q": "date:%Y"}}
}
This should ensure that the year string is parsed as a year, rather than e.g. a unix timestamp.
The other place date parsing is happening is in your domain specification. You might try changing those to a more standard time format, e.g.
"domain": ["2013-11-01", "2018-06-01"]

Filled area graph vertical orientation

I am attempting to get a vertical filled area graph, where the area on the left between the y axis and the data line is filled. Essentially, take the normal area graph and rotate it 90 degrees clockwise.
I've basically just taken the example from the vega examples and tried to convert everything to vertical, changed the names of the scales to something more related to the data, and added a line width and colour.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"signals": [
{
"name": "interpolate",
"value": "linear",
"bind": {
"input": "select",
"options": [
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
]
}
}
],
"data": [
{
"name": "table",
"values": [
{"u": 1, "v": 28}, {"u": 2, "v": 55},
{"u": 3, "v": 43}, {"u": 4, "v": 91},
{"u": 5, "v": 81}, {"u": 6, "v": 53},
{"u": 7, "v": 19}, {"u": 8, "v": 87},
{"u": 9, "v": 52}, {"u": 10, "v": 48},
{"u": 11, "v": 24}, {"u": 12, "v": 49},
{"u": 13, "v": 87}, {"u": 14, "v": 66},
{"u": 15, "v": 17}, {"u": 16, "v": 27},
{"u": 17, "v": 68}, {"u": 18, "v": 16},
{"u": 19, "v": 49}, {"u": 20, "v": 15}
]
}
],
"scales": [
{
"name": "uscale",
"type": "linear",
"range": "height",
"zero": false,
"domain": {"data": "table", "field": "u"}
},
{
"name": "vscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "v"}
}
],
"axes": [
{"orient": "bottom", "scale": "vscale", "tickCount": 25},
{"orient": "left", "scale": "uscale"}
],
"marks": [
{
"type": "area",
"orient": "horizontal",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "vscale", "field": "v"},
"y": {"scale": "uscale", "field": "u"},
"x2": {"scale": "vscale", "value": 0},
"stroke": {"value": "#000000"},
"fill": {"value": "steelblue"}
},
"update": {
"interpolate": {"signal": "interpolate"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
Pretty sure I'm doing something wrong here. According to the docs "vertical" orientation is the default, and I've tried this with x2 and y2, and orient "vertical" and "horizontal" for both - I've also tried to set the scale as vscale and uscale for x2 and y2.
I get no errors in the vega online editor - The line is correct but I would expect the graph to be filled to the left of the line between the y axis and the graph line. The actual output right now is just a solid line.

The orient property has to go into the encode block.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 500,
"padding": 5,
"signals": [
{
"name": "interpolate",
"value": "linear",
"bind": {
"input": "select",
"options": [
"basis",
"cardinal",
"catmull-rom",
"linear",
"monotone",
"natural",
"step",
"step-after",
"step-before"
]
}
}
],
"data": [
{
"name": "table",
"values": [
{"u": 1, "v": 28}, {"u": 2, "v": 55},
{"u": 3, "v": 43}, {"u": 4, "v": 91},
{"u": 5, "v": 81}, {"u": 6, "v": 53},
{"u": 7, "v": 19}, {"u": 8, "v": 87},
{"u": 9, "v": 52}, {"u": 10, "v": 48},
{"u": 11, "v": 24}, {"u": 12, "v": 49},
{"u": 13, "v": 87}, {"u": 14, "v": 66},
{"u": 15, "v": 17}, {"u": 16, "v": 27},
{"u": 17, "v": 68}, {"u": 18, "v": 16},
{"u": 19, "v": 49}, {"u": 20, "v": 15}
]
}
],
"scales": [
{
"name": "uscale",
"type": "linear",
"range": "height",
"zero": false,
"domain": {"data": "table", "field": "u"}
},
{
"name": "vscale",
"type": "linear",
"range": "width",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "v"}
}
],
"axes": [
{"orient": "bottom", "scale": "vscale", "tickCount": 25},
{"orient": "left", "scale": "uscale"}
],
"marks": [
{
"type": "area",
"from": {"data": "table"},
"encode": {
"enter": {
"orient": {"value": "horizontal"},
"x": {"scale": "vscale", "field": "v"},
"y": {"scale": "uscale", "field": "u"},
"x2": {"scale": "vscale", "value": 0},
"stroke": {"value": "#000000"},
"fill": {"value": "steelblue"}
},
"update": {
"interpolate": {"signal": "interpolate"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}

What causes the layout problems of my Datatable?

I am building an app in which I want use Datatables with various plugins and I observed some weird layout-problems. So I tried to build a repro. And as worked on that, new problems occurred and I even failed to sort these out.
So here I am with the current state of my fiddle
I have no idea what's causing these issues. I have attached a bit of code (because it is required, but with reduced data). The issues I'm currently struggling with:
yadcf-Filters incomplete...
footer-defects: pagelength-selector missing, paging-controls missing. Whenever I saw that in the past, there were some JS-Errors (usually with my code), but this time I'm not seeing anything in the console.
Update1: I've now managed to get rid of column1-resizing. The range_number_sliderfor yadcf does not render correctly - am I missing a resource??
Updated fiddle here.
$(function() {
dtObj = $("#dataset").DataTable({
"buttons": [{
"columns": ":gt(1)",
"extend": "colvis",
"text": "Series"
}],
"scrollX": true,
"dom": "Bfrtip",
"lengthMenu": [
[10, 25, 50, -1],
["10 rows", "25 rows", "50 rows", "Show all"]
],
"columns": [{
"data": "_include",
"render": function(data, type, row, meta) {
var res = '';
if (row._include) {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye"></i></span>';
} else {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye-slash"></i></span>';
}
return res;
},
"title": "Include",
"visible": true,
"width": "2em;"
}, {
"data": "_id",
"title": "ID",
"visible": false
}, {
"className": "text-right",
"data": "Car",
"title": "Car",
"visible": false,
"width": "80px"
}, {
"data": "Eyes",
"title": "Eyes",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Family",
"title": "Family",
"visible": false,
"width": "80px"
}, {
"data": "Hand",
"title": "Hand",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "HealthCare",
"title": "HealthCare",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Height",
"title": "Height",
"visible": true,
"width": "80px"
}, {
"data": "Major",
"title": "Major",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Marriage",
"title": "Marriage",
"visible": false,
"width": "80px"
}, {
"data": "Party",
"title": "Party",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Pot",
"title": "Pot",
"visible": false,
"width": "80px"
}, {
"data": "Sex",
"title": "Sex",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "ShoeSize",
"title": "ShoeSize",
"visible": false,
"width": "80px"
}, {
"data": "State",
"title": "State",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Student",
"title": "Student",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Weight",
"title": "Weight",
"visible": false,
"width": "80px"
}],
"createdRow": function(row, data, dataIndex) {
row.id = 'r' + data._id;
if (!data._include) {
$(row).children(":gt(2)").addClass('excludeRow');
}
},
"data": [{
"Car": 1,
"Eyes": "Blue",
"Family": 3,
"Hand": "R",
"HealthCare": 2,
"Height": 72,
"Major": "FIN",
"Marriage": 5,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11.5,
"State": "PA",
"Student": 1,
"Weight": 220,
"_id": 1,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 4,
"Hand": "R",
"HealthCare": 1,
"Height": 62,
"Major": "ACC",
"Marriage": 1,
"Party": "D",
"Pot": 5,
"Sex": "F",
"ShoeSize": 9,
"State": "PA",
"Student": 2,
"Weight": 140,
"_id": 2,
"_include": true
}, {
"Car": 0,
"Eyes": "Blue",
"Family": 0,
"Hand": "R",
"HealthCare": 3,
"Height": 69,
"Major": "FIN",
"Marriage": 1,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 3,
"Weight": 195,
"_id": 3,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 69,
"Major": "OIM",
"Marriage": 1,
"Party": "D",
"Pot": 3,
"Sex": "M",
"ShoeSize": 9.5,
"State": "PA",
"Student": 4,
"Weight": 190,
"_id": 4,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 1,
"Hand": "L",
"HealthCare": 2,
"Height": 70,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 5,
"Sex": "M",
"ShoeSize": 10.5,
"State": "CT",
"Student": 5,
"Weight": 150,
"_id": 5,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 4,
"Height": 66,
"Major": "ACC",
"Marriage": 2,
"Party": "R",
"Pot": 3,
"Sex": "M",
"ShoeSize": 8.25,
"State": "NJ",
"Student": 6,
"Weight": 125,
"_id": 6,
"_include": true
}, {
"Car": 0,
"Eyes": "Brown",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 67,
"Major": "BA",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 9,
"State": "NY",
"Student": 7,
"Weight": 155,
"_id": 7,
"_include": true
}, {
"Car": 1,
"Eyes": "Green",
"Family": 2,
"Hand": "L",
"HealthCare": 1,
"Height": 72,
"Major": "OIM",
"Marriage": 2,
"Party": "I",
"Pot": 4,
"Sex": "M",
"ShoeSize": 13,
"State": "PA",
"Student": 8,
"Weight": 260,
"_id": 8,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 72,
"Major": "BA",
"Marriage": 2,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 10.5,
"State": "NY",
"Student": 9,
"Weight": 155,
"_id": 9,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "ACC",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 12,
"State": "CT",
"Student": 10,
"Weight": 180,
"_id": 10,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 2,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 11,
"Weight": 160,
"_id": 11,
"_include": true
}]
});
yadcf.init($("#dataset").DataTable(), [{
"column_number": 0,
"filter_type": "range_number_slider"
}, {
"column_number": 1,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 2,
"filter_type": "range_number_slider"
}, {
"column_number": 3,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 4,
"filter_type": "range_number_slider"
}, {
"column_number": 5,
"filter_type": "range_number_slider"
}, {
"column_number": 6,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 7,
"filter_type": "range_number_slider"
}, {
"column_number": 8,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 9,
"filter_type": "range_number_slider"
}, {
"column_number": 10,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 11,
"filter_type": "range_number_slider"
}, {
"column_number": 12,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 13,
"filter_type": "range_number_slider"
}, {
"column_number": 14,
"filter_type": "range_number_slider"
}]);
});
[1]: https://jsfiddle.net/mbaas/fbo0L88v/

Solved the issues with the Datatable (most notable I did not load the appropriate .css to support Bootstrap for the addons), I then had an issue with the pagelength-control not being wide enough to fully show the text for the "All"-Selection - that required some changes to the CSS which Allan will include in his downloads.
Just in case anyone else hits this:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
}
Then I had an issue with vertical alignment of the controls surrounding the table - that needed a slightly more evolved dom-setting than I had:
"<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12'i>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>"
This should become significantly easier with one the next releases...
Even after sorting all that out, the yadcf-issue remained - but that seems to be a real bug, so I posted an issue on GitHub.

We Keep Coding

sql objective-c vba vb.net react-native apache vue.js tensorflow api pandas

Performance issue with PrimeNG TurboTable - angular5

Related

Extra padding added to the Vega legend element

How to apply multiple colors in legend for Vega stacked bar?

Vega-lite difference between Firefox and Chrome

Filled area graph vertical orientation

What causes the layout problems of my Datatable?

Categories

Resources