ag-grid/src/ts/rendering/cellRenderers/animateShowChangeCellRenderer.ts

Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

import {ICellRenderer} from "./iCellRenderer";
import {Utils as _} from "../../utils";
import {Component} from "../../widgets/component";

let ARROW_UP = '￪';
let ARROW_DOWN = '￬';

export class AnimateShowChangeCellRenderer extends Component implements ICellRenderer {

    private static TEMPLATE =
        '<span>' +
        '<span class="ag-value-change-delta"></span>' +
        '<span class="ag-value-change-value"></span>' +
        '</span>';

    // private params: any;
    private lastValue: number;

    private eValue: HTMLElement;
    private eDelta: HTMLElement;

    private refreshCount = 0;

    constructor() {
        super(AnimateShowChangeCellRenderer.TEMPLATE);
    }

    public init(params: any): void {
        // this.params = params;

        this.eValue = this.queryForHtmlElement('.ag-value-change-value');
        this.eDelta = this.queryForHtmlElement('.ag-value-change-delta');

        this.refresh(params);
    }

    private showDelta(params: any, delta: number): void {

        let absDelta = Math.abs(delta);
        let valueFormatted = params.formatValue(absDelta);

        let valueToUse = _.exists(valueFormatted) ? valueFormatted : absDelta;

        let deltaUp = (delta >= 0);

        if (deltaUp) {
            this.eDelta.innerHTML = ARROW_UP + valueToUse;
        } else {
            // because negative, use ABS to remove sign
            this.eDelta.innerHTML = ARROW_DOWN + valueToUse;
        }

        // class makes it green (in ag-fresh)
        _.addOrRemoveCssClass(this.eDelta, 'ag-value-change-delta-up', deltaUp);
        // class makes it red (in ag-fresh)
        _.addOrRemoveCssClass(this.eDelta, 'ag-value-change-delta-down', !deltaUp);
    }

    private setTimerToRemoveDelta(): void {
        // the refreshCount makes sure that if the value updates again while
        // the below timer is waiting, then the below timer will realise it
        // is not the most recent and will not try to remove the delta value.
        this.refreshCount++;
        let refreshCountCopy = this.refreshCount;
        setTimeout( ()=> {
            if (refreshCountCopy === this.refreshCount) {
                this.hideDeltaValue();
            }
        }, 2000);
    }

    private hideDeltaValue(): void {
        _.removeCssClass(this.eValue, 'ag-value-change-value-highlight');
        this.eDelta.innerHTML = '';
    }

    public refresh(params: any): boolean {
        let value = params.value;

        if (value === this.lastValue) {
            return;
        }

        if (_.exists(params.valueFormatted)) {
            this.eValue.innerHTML = params.valueFormatted;
        } else if (_.exists(params.value)) {
            this.eValue.innerHTML = value;
        } else {
            this.eValue.innerHTML = '';
        }

        if (typeof value === 'number' && typeof this.lastValue === 'number') {
            let delta = value - this.lastValue;
            this.showDelta(params, delta);
        }

        // highlight the current value, but only if it's not new, otherwise it
        // would get highlighted first time the value is shown
        if (this.lastValue) {
            _.addCssClass(this.eValue, 'ag-value-change-value-highlight');
        }


        this.setTimerToRemoveDelta();

        this.lastValue = value;

        return true;
    }
}