@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
89 lines • 3.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Kpis = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-floating-promises */
var React = tslib_1.__importStar(require("react"));
var Stack_1 = require("./stack/Stack");
var KpiCard_1 = require("./KpiCard");
var KpiCardSkeleton_1 = require("./KpiCardSkeleton");
var useKpiStyles_1 = require("./useKpiStyles");
var NoKpisCard_1 = require("./NoKpisCard");
var showError_1 = require("./showError");
var KpiCardCompact_1 = require("./KpiCardCompact");
var mockData = [
{
identifier: 'kpi-1',
title: 'Sales Revenue',
currentValue: 125.0,
goal: 150.0,
totalItems: 200.0,
description: 'This is a comprehensive description of the Total Sales Revenue KPI for Q1. This metric tracks all revenue generated from product sales, service contracts, and recurring subscriptions across all business units and geographic regions. The goal is set based on historical performance, market conditions, and strategic growth objectives. Performance is evaluated weekly with detailed breakdowns by product category, sales team, and customer segment. This KPI is critical for quarterly business reviews and investor reporting.',
goalMetric: 2,
},
{
identifier: 'kpi-2',
title: 'Customer Satisfaction',
currentValue: 87,
goal: 90,
totalItems: 100,
description: 'Customer satisfaction score',
goalMetric: 1,
},
{
identifier: 'kpi-3',
title: 'Tasks Completed',
currentValue: 42,
goal: 50,
totalItems: 60,
description: 'Number of tasks completed this month',
goalMetric: 2,
},
{
identifier: 'kpi-4',
title: 'New Customers',
currentValue: 156,
goal: 200,
totalItems: 250,
description: 'New customer acquisitions this quarter',
goalMetric: 1,
},
{
identifier: 'kpi-5',
title: 'Response Time',
currentValue: 2.5,
goal: 2,
totalItems: 5,
description: 'Average response time in hours',
goalMetric: 2,
},
{
identifier: 'kpi-6',
title: 'Employee Engagement',
currentValue: 78,
goal: 85,
totalItems: 100,
description: 'Employee engagement score percentage',
goalMetric: 1,
},
];
var Kpis = function (props) {
var _a = props.skeletonCount, skeletonCount = _a === void 0 ? 3 : _a, _b = props.compact, compact = _b === void 0 ? false : _b;
var styles = (0, useKpiStyles_1.useKpiStyles)();
var kpis = mockData;
var loading = false;
var error = null;
/**
* Renders skeleton cards while data is loading
*/
var renderSkeletons = React.useCallback(function () {
return Array.from({ length: skeletonCount }).map(function (_, index) { return (React.createElement(KpiCardSkeleton_1.KPICardSkeleton, { key: "kpi-skeleton-".concat(index) })); });
}, [skeletonCount]);
return (React.createElement(React.Fragment, null,
React.createElement(Stack_1.Stack, { gap: "l", direction: "horizontal", padding: "l", paddingTop: "s" },
React.createElement(React.Fragment, null, loading ? (renderSkeletons()) : error ? (React.createElement(showError_1.ShowError, { message: error })) : (React.createElement("div", { className: styles.kpiContainer }, kpis.length > 0 ? (kpis.map(function (kpi) {
return compact ? (React.createElement(KpiCardCompact_1.KPICardCompact, { key: kpi.identifier, dataCard: kpi })) : (React.createElement(KpiCard_1.KPICard, { key: kpi.identifier, dataCard: kpi }));
})) : (React.createElement(NoKpisCard_1.NoKpisCard, null))))))));
};
exports.Kpis = Kpis;
//# sourceMappingURL=Kpis.js.map