<div class="ccard h-100 d-flex flex-column px-2 py-3">
    <div class="d-flex text-center">
        <div class="flex-grow-1 mb-3">
            <div class="text-nowrap lh text-100 text-dark-l2">
                {{ header | translate }}&nbsp;<i class="fa fa-info-circle" matTooltip="{{ tooltip | translate }}"></i>
            </div>


            <div class="lh">

                <span class="text-170 text-secondary-d4">
                    {{ formatterValue }} 
                </span>

                <!-- <span class="text-blue text-nowrap ml-n1">
                    &nbsp;+{{value?.percent}}%
                    <i *ngIf="value?.up" class="fa fa-caret-up"></i>
                    <i *ngIf="value?.down" class="fa fa-caret-down"></i>
                </span> -->
            </div>
        </div>
    </div>


    <div class="align-self-center">
        <xdf-peity #peti [values]="value?.history" [type]="'line'" theme="primary" [attributes]='options'></xdf-peity>   
    </div>

</div>
