Odoo - Change color on Forecast Widget

Question

I'm trying to change color of Forecasted Widget in Sales Order view. I figured it is defined in this location odoo/addons/sale_stock/static/src/xml/sale_stock.xml this part of code:

<div t-name="sale_stock.qtyAtDate">
    <div t-att-class="!widget.data.display_qty_widget ? 'invisible' : ''">
        <a tabindex="0" t-attf-class="fa fa-area-chart {{ widget.data.forecasted_issue ? 'text-danger' : 'text-primary' }}"/>
    </div>
</div>

I created custom module and tried to replace above code with my version like this (it should be red when Available Qty = 0, Yellow when Available Qty < 5 and green when Available Qty > 5) but with no luck

<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
    <xpath expr="//div[@t-name='sale_stock.qtyAtDate']" position="replace">
        <div t-att-class="!widget.data.display_qty_widget ? 'invisible' : ''">
            <div t-elif="widget.data.forecasted_issue == 0">
                <a tabindex="0" t-attf-class="fa fa-area-chart text-danger"/>
            </div>
            <div t-if="widget.data.forecasted_issue < 5">
                <a tabindex="0" t-attf-class="fa fa-area-chart text-warning"/>
            </div>
            <div t-elif="widget.data.forecasted_issue > 5">
                <a tabindex="0" t-attf-class="fa fa-area-chart text-primary"/>
            </div>
        </div>
    </xpath>
</templates>

Can anyone please guide me on how to change color of this icon. Thanks.

Answer 1

For v14 - this is working solution - just put this in your XML file. For v15 use solution @Kenly provided.

<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
    <t t-inherit="sale_stock.qtyAtDate" t-operation="replace">
        <xpath expr="//div" position="replace">
            <div t-att-class="!widget.data.display_qty_widget ? 'invisible' : ''">
            <a tabindex="0" t-attf-class="fa fa-area-chart {{ widget.data.forecasted_issue ? 'text-danger' : widget.data.qty_available_today &gt; 5 ? 'text-primary' : 'text-warning'}}"/>
            </div>    
        </xpath>
    </t>
</templates>

Thank you @Kenly for your help, you made some things clear for me.