# learnpress/4.4.6/assets/src/js/admin/statistics/kpi.js

LearnPress – WordPress LMS Plugin for Create and Sell Online Courses, version 4.4.6. 48 lines.

- Page: https://pluginprobe.com/plugins/learnpress/4.4.6/code/assets/src/js/admin/statistics/kpi.js
- Raw: https://pluginprobe.com/plugins/learnpress/4.4.6/raw/assets/src/js/admin/statistics/kpi.js
- Modified: 2026-08-31T10:33:54+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/learnpress/4.4.6/code/assets/src/js/admin/statistics/kpi.js#L10-L20`.

```javascript
/**
 * KPI card renderer — pure DOM fill, no fetch.
 *
 * Payload shape comes from PeriodHelper::kpi_payload() on the server:
 * { value, prev_value, change_pct } plus optional client extras
 * { formatted, subline }. change_pct null → delta hidden (no wrong deltas).
 *
 * @since 4.4.2
 * @version 1.0.0
 */

/**
 * @param {Element} elCard  The .lp-kpi-card root.
 * @param {Object}  payload KPI payload.
 */
export const renderKpi = ( elCard, payload = {} ) => {
	if ( ! elCard ) {
		return;
	}

	const elValue = elCard.querySelector( '.lp-kpi-value' );
	const elDelta = elCard.querySelector( '.lp-kpi-delta' );
	const elSubline = elCard.querySelector( '.lp-kpi-subline' );

	if ( elValue ) {
		const value = payload.formatted ?? payload.value;
		elValue.textContent = null == value || '' === value ? '–' : String( value );
	}

	if ( elDelta ) {
		elDelta.classList.remove( 'is-up', 'is-down' );

		if ( 'number' === typeof payload.change_pct ) {
			const isUp = payload.change_pct >= 0;
			elDelta.classList.add( isUp ? 'is-up' : 'is-down' );
			elDelta.textContent = `${ isUp ? '▲' : '▼' } ${ Math.abs(
				payload.change_pct
			) }%`;
		} else {
			elDelta.textContent = '';
		}
	}

	if ( elSubline ) {
		elSubline.textContent = payload.subline ?? '';
	}
};

```