<h1>
    Sales by Category
</h1>

<div *ngFor="let categorySales of productSales.groups">
    <div style="display:flex; font-weight:bold; font-size:200%; font-style:italic; background-color:#c0c0c0">
        {{categorySales.CategoryName}}
    </div>

    <div style="display:flex; min-width:800px; page-break-inside:avoid">
        <div>
            <div style="display:flex; font-weight:bold; font-size: 150%; border-bottom: 2px solid black; margin:6pt 0">
                <div style="width:200px">
                    Product:
                </div>
                <div style="width:100px; text-align:right">
                    Sales:
                </div>
            </div>
            <div style="display:flex" *ngFor="let productSale of  categorySales.items">
                <div style="width:200px">
                    {{ productSale.ProductName }}
                </div>
                <div style="width:100px; text-align:right">
                    {{ productSale.ProductSales | currency:'USD':true }}
                </div>
            </div>
        </div>
        <wj-flex-chart 
            style="width:500px; height:350px; margin:12pt; border:4px solid #009be0"
            [itemsSource]="categorySales.items"
            bindingX="ProductName">
            <wj-flex-chart-series binding="ProductSales">
            </wj-flex-chart-series>
        </wj-flex-chart>

    </div>
</div>
