@pnp/spfx-controls-react 3.24.0-beta.2180374 → 3.24.0-beta.2252413
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/KPIControl.d.ts +2 -0
- package/lib/KPIControl.d.ts.map +1 -0
- package/lib/KPIControl.js +2 -0
- package/lib/KPIControl.js.map +1 -0
- package/lib/common/telemetry/version.js +1 -1
- package/lib/controls/KPIControl/IKpiCardData.d.ts +19 -0
- package/lib/controls/KPIControl/IKpiCardData.d.ts.map +1 -0
- package/lib/controls/KPIControl/IKpiCardData.js +6 -0
- package/lib/controls/KPIControl/IKpiCardData.js.map +1 -0
- package/lib/controls/KPIControl/IKpiCardProps.d.ts +5 -0
- package/lib/controls/KPIControl/IKpiCardProps.d.ts.map +1 -0
- package/lib/controls/KPIControl/IKpiCardProps.js +2 -0
- package/lib/controls/KPIControl/IKpiCardProps.js.map +1 -0
- package/lib/controls/KPIControl/KpiCard.d.ts +4 -0
- package/lib/controls/KPIControl/KpiCard.d.ts.map +1 -0
- package/lib/controls/KPIControl/KpiCard.js +122 -0
- package/lib/controls/KPIControl/KpiCard.js.map +1 -0
- package/lib/controls/KPIControl/KpiCardCompact.d.ts +4 -0
- package/lib/controls/KPIControl/KpiCardCompact.d.ts.map +1 -0
- package/lib/controls/KPIControl/KpiCardCompact.js +73 -0
- package/lib/controls/KPIControl/KpiCardCompact.js.map +1 -0
- package/lib/controls/KPIControl/KpiCardSkeleton.d.ts +8 -0
- package/lib/controls/KPIControl/KpiCardSkeleton.d.ts.map +1 -0
- package/lib/controls/KPIControl/KpiCardSkeleton.js +100 -0
- package/lib/controls/KPIControl/KpiCardSkeleton.js.map +1 -0
- package/lib/controls/KPIControl/Kpis.d.ts +7 -0
- package/lib/controls/KPIControl/Kpis.d.ts.map +1 -0
- package/lib/controls/KPIControl/Kpis.js +84 -0
- package/lib/controls/KPIControl/Kpis.js.map +1 -0
- package/lib/controls/KPIControl/NoKpisCard.d.ts +8 -0
- package/lib/controls/KPIControl/NoKpisCard.d.ts.map +1 -0
- package/lib/controls/KPIControl/NoKpisCard.js +43 -0
- package/lib/controls/KPIControl/NoKpisCard.js.map +1 -0
- package/lib/controls/KPIControl/index.d.ts +2 -0
- package/lib/controls/KPIControl/index.d.ts.map +1 -0
- package/lib/controls/KPIControl/index.js +2 -0
- package/lib/controls/KPIControl/index.js.map +1 -0
- package/lib/controls/KPIControl/showError/IErrorDisplayProps.d.ts +5 -0
- package/lib/controls/KPIControl/showError/IErrorDisplayProps.d.ts.map +1 -0
- package/lib/controls/KPIControl/showError/IErrorDisplayProps.js +2 -0
- package/lib/controls/KPIControl/showError/IErrorDisplayProps.js.map +1 -0
- package/lib/controls/KPIControl/showError/ShowError.d.ts +5 -0
- package/lib/controls/KPIControl/showError/ShowError.d.ts.map +1 -0
- package/lib/controls/KPIControl/showError/ShowError.js +17 -0
- package/lib/controls/KPIControl/showError/ShowError.js.map +1 -0
- package/lib/controls/KPIControl/showError/index.d.ts +4 -0
- package/lib/controls/KPIControl/showError/index.d.ts.map +1 -0
- package/lib/controls/KPIControl/showError/index.js +4 -0
- package/lib/controls/KPIControl/showError/index.js.map +1 -0
- package/lib/controls/KPIControl/showError/useShowErrorStyles.d.ts +9 -0
- package/lib/controls/KPIControl/showError/useShowErrorStyles.d.ts.map +1 -0
- package/lib/controls/KPIControl/showError/useShowErrorStyles.js +42 -0
- package/lib/controls/KPIControl/showError/useShowErrorStyles.js.map +1 -0
- package/lib/controls/KPIControl/stack/IStackProps.d.ts +77 -0
- package/lib/controls/KPIControl/stack/IStackProps.d.ts.map +1 -0
- package/lib/controls/KPIControl/stack/IStackProps.js +2 -0
- package/lib/controls/KPIControl/stack/IStackProps.js.map +1 -0
- package/lib/controls/KPIControl/stack/Stack.d.ts +9 -0
- package/lib/controls/KPIControl/stack/Stack.d.ts.map +1 -0
- package/lib/controls/KPIControl/stack/Stack.js +46 -0
- package/lib/controls/KPIControl/stack/Stack.js.map +1 -0
- package/lib/controls/KPIControl/stack/index.d.ts +3 -0
- package/lib/controls/KPIControl/stack/index.d.ts.map +1 -0
- package/lib/controls/KPIControl/stack/index.js +3 -0
- package/lib/controls/KPIControl/stack/index.js.map +1 -0
- package/lib/controls/KPIControl/useKpiStyles.d.ts +33 -0
- package/lib/controls/KPIControl/useKpiStyles.d.ts.map +1 -0
- package/lib/controls/KPIControl/useKpiStyles.js +271 -0
- package/lib/controls/KPIControl/useKpiStyles.js.map +1 -0
- package/lib/loc/bg-bg.js +14 -0
- package/lib/loc/bg-bg.js.map +1 -1
- package/lib/loc/ca-es.js +14 -0
- package/lib/loc/ca-es.js.map +1 -1
- package/lib/loc/cs-cz.js +14 -0
- package/lib/loc/cs-cz.js.map +1 -1
- package/lib/loc/da-dk.js +14 -0
- package/lib/loc/da-dk.js.map +1 -1
- package/lib/loc/de-de.js +14 -0
- package/lib/loc/de-de.js.map +1 -1
- package/lib/loc/el-gr.js +14 -0
- package/lib/loc/el-gr.js.map +1 -1
- package/lib/loc/en-us.js +17 -0
- package/lib/loc/en-us.js.map +1 -1
- package/lib/loc/es-es.js +14 -0
- package/lib/loc/es-es.js.map +1 -1
- package/lib/loc/et-ee.js +14 -0
- package/lib/loc/et-ee.js.map +1 -1
- package/lib/loc/eu-es.js +14 -0
- package/lib/loc/eu-es.js.map +1 -1
- package/lib/loc/fi-fi.js +14 -0
- package/lib/loc/fi-fi.js.map +1 -1
- package/lib/loc/fr-ca.js +14 -0
- package/lib/loc/fr-ca.js.map +1 -1
- package/lib/loc/fr-fr.js +14 -0
- package/lib/loc/fr-fr.js.map +1 -1
- package/lib/loc/it-it.js +14 -0
- package/lib/loc/it-it.js.map +1 -1
- package/lib/loc/ja-jp.js +14 -0
- package/lib/loc/ja-jp.js.map +1 -1
- package/lib/loc/lt-lt.js +14 -0
- package/lib/loc/lt-lt.js.map +1 -1
- package/lib/loc/lv-lv.js +14 -0
- package/lib/loc/lv-lv.js.map +1 -1
- package/lib/loc/nb-no.js +14 -0
- package/lib/loc/nb-no.js.map +1 -1
- package/lib/loc/nl-nl.js +14 -0
- package/lib/loc/nl-nl.js.map +1 -1
- package/lib/loc/pl-pl.js +14 -0
- package/lib/loc/pl-pl.js.map +1 -1
- package/lib/loc/pt-br.js +14 -0
- package/lib/loc/pt-br.js.map +1 -1
- package/lib/loc/pt-pt.js +16 -0
- package/lib/loc/pt-pt.js.map +1 -1
- package/lib/loc/ro-ro.js +14 -0
- package/lib/loc/ro-ro.js.map +1 -1
- package/lib/loc/ru-ru.js +14 -0
- package/lib/loc/ru-ru.js.map +1 -1
- package/lib/loc/sk-sk.js +14 -0
- package/lib/loc/sk-sk.js.map +1 -1
- package/lib/loc/sr-latn-rs.js +14 -0
- package/lib/loc/sr-latn-rs.js.map +1 -1
- package/lib/loc/sv-se.js +14 -0
- package/lib/loc/sv-se.js.map +1 -1
- package/lib/loc/tr-tr.js +14 -0
- package/lib/loc/tr-tr.js.map +1 -1
- package/lib/loc/vi-vn.js +14 -0
- package/lib/loc/vi-vn.js.map +1 -1
- package/lib/loc/zh-cn.js +14 -0
- package/lib/loc/zh-cn.js.map +1 -1
- package/lib/loc/zh-tw.js +14 -0
- package/lib/loc/zh-tw.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KPIControl.d.ts","sourceRoot":"","sources":["../src/KPIControl.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KPIControl.js","sourceRoot":"","sources":["../src/KPIControl.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var version = "3.24.0-beta.
|
|
1
|
+
export var version = "3.24.0-beta.2252413";
|
|
2
2
|
//# sourceMappingURL=version.js.map
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export declare enum EGoalMetric {
|
|
2
|
+
"LOWER_IS_BETTER" = 1,
|
|
3
|
+
"HIGHER_IS_BETTER" = 2
|
|
4
|
+
}
|
|
5
|
+
export interface IKpiCardData {
|
|
6
|
+
identifier: string;
|
|
7
|
+
/** Current numeric value of the KPI */
|
|
8
|
+
currentValue: number;
|
|
9
|
+
/** Goal / target threshold */
|
|
10
|
+
goal: number;
|
|
11
|
+
/** Total number of items used to compute the KPI */
|
|
12
|
+
totalItems: number;
|
|
13
|
+
/** description */
|
|
14
|
+
description: string;
|
|
15
|
+
/** Card title */
|
|
16
|
+
title?: string;
|
|
17
|
+
goalMetric?: EGoalMetric;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=IKpiCardData.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IKpiCardData.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardData.tsx"],"names":[],"mappings":"AACA,oBAAY,WAAW;IACnB,iBAAiB,IAAI;IACrB,kBAAkB,IAAI;CACzB;AACD,MAAM,WAAW,YAAY;IAE3B,UAAU,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAW,CAAC,EAAE,WAAW,CAAC;CAC7B"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var EGoalMetric;
|
|
2
|
+
(function (EGoalMetric) {
|
|
3
|
+
EGoalMetric[EGoalMetric["LOWER_IS_BETTER"] = 1] = "LOWER_IS_BETTER";
|
|
4
|
+
EGoalMetric[EGoalMetric["HIGHER_IS_BETTER"] = 2] = "HIGHER_IS_BETTER";
|
|
5
|
+
})(EGoalMetric || (EGoalMetric = {}));
|
|
6
|
+
//# sourceMappingURL=IKpiCardData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IKpiCardData.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardData.tsx"],"names":[],"mappings":"AACA,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACnB,mEAAqB,CAAA;IACrB,qEAAsB,CAAA;AAC1B,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IKpiCardProps.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC1B,QAAQ,EAAE,YAAY,CAAC;CAC1B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IKpiCardProps.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/IKpiCardProps.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCard.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCard.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CA0P1D,CAAC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Card, CardFooter, CardHeader, Divider, ProgressBar, tokens, Tooltip, Text, Badge, InfoLabel, } from '@fluentui/react-components';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import Stack from './stack/Stack';
|
|
4
|
+
import { useKpiStyles } from './useKpiStyles';
|
|
5
|
+
import { AlertFilled, CalculatorRegular, CheckmarkCircleRegular, DocumentRegular, TargetRegular, } from '@fluentui/react-icons';
|
|
6
|
+
import { EGoalMetric } from './IKpiCardData';
|
|
7
|
+
import strings from 'ControlStrings';
|
|
8
|
+
export var KPICard = function (props) {
|
|
9
|
+
var _a;
|
|
10
|
+
var dataCard = props.dataCard;
|
|
11
|
+
var styles = useKpiStyles();
|
|
12
|
+
// State to control InfoLabel popover visibility
|
|
13
|
+
var _b = React.useState(false), isInfoLabelOpen = _b[0], setIsInfoLabelOpen = _b[1];
|
|
14
|
+
// Handle card mouse leave to auto-dismiss InfoLabel
|
|
15
|
+
var handleCardMouseLeave = React.useCallback(function () {
|
|
16
|
+
setIsInfoLabelOpen(false);
|
|
17
|
+
}, []);
|
|
18
|
+
// Determine if KPI is on track based on goal metric type
|
|
19
|
+
var isOnTrack = React.useMemo(function () {
|
|
20
|
+
return dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
|
|
21
|
+
? dataCard.currentValue <= dataCard.goal // Lower is better: on track when current <= goal
|
|
22
|
+
: dataCard.currentValue >= dataCard.goal;
|
|
23
|
+
}, // Higher is better: on track when current >= goal
|
|
24
|
+
[dataCard.currentValue, dataCard.goal, dataCard.goalMetric]);
|
|
25
|
+
var progressColor = React.useMemo(function () { return (isOnTrack ? 'success' : 'error'); }, [isOnTrack]);
|
|
26
|
+
var goal = React.useMemo(function () { return dataCard.goal.toLocaleString(); }, [dataCard.goal]);
|
|
27
|
+
var totalPercent = React.useMemo(function () { return (dataCard.currentValue / dataCard.totalItems) * 100; }, [dataCard.currentValue, dataCard.totalItems]);
|
|
28
|
+
// Success / Danger foregrounds
|
|
29
|
+
var accentFg = React.useMemo(function () {
|
|
30
|
+
return isOnTrack
|
|
31
|
+
? tokens.colorPaletteLightGreenForeground2
|
|
32
|
+
: tokens.colorPaletteRedForeground2;
|
|
33
|
+
}, [isOnTrack]);
|
|
34
|
+
// Success / Danger backgrounds (badge pill bg)
|
|
35
|
+
var accentBg = React.useMemo(function () {
|
|
36
|
+
return isOnTrack
|
|
37
|
+
? tokens.colorPaletteLightGreenBackground1
|
|
38
|
+
: tokens.colorPaletteRedBackground1;
|
|
39
|
+
}, [isOnTrack]);
|
|
40
|
+
// Success / Danger borders (badge pill border)
|
|
41
|
+
var accentBorder = React.useMemo(function () {
|
|
42
|
+
return isOnTrack
|
|
43
|
+
? tokens.colorPaletteLightGreenBorder1
|
|
44
|
+
: tokens.colorPaletteRedBorder1;
|
|
45
|
+
}, [isOnTrack]);
|
|
46
|
+
var badgeStyle = React.useMemo(function () { return ({
|
|
47
|
+
background: accentBg,
|
|
48
|
+
border: "1px solid ".concat(accentBorder),
|
|
49
|
+
color: accentFg,
|
|
50
|
+
borderRadius: '20px',
|
|
51
|
+
padding: '12px 12px',
|
|
52
|
+
fontSize: tokens.fontSizeBase200,
|
|
53
|
+
fontWeight: tokens.fontWeightSemibold,
|
|
54
|
+
letterSpacing: '0.3px',
|
|
55
|
+
maxWidth: 'fit-content',
|
|
56
|
+
}); }, [accentBg, accentBorder, accentFg]);
|
|
57
|
+
return (React.createElement(React.Fragment, null,
|
|
58
|
+
React.createElement(Card, { className: styles.card, onMouseLeave: handleCardMouseLeave },
|
|
59
|
+
React.createElement("div", { className: isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError }),
|
|
60
|
+
React.createElement(Stack, { gap: "m", padding: "m" },
|
|
61
|
+
React.createElement(CardHeader, { header: React.createElement(Stack, { direction: "vertical", gap: "2px" },
|
|
62
|
+
React.createElement(Stack, { direction: "horizontal", alignItems: "center", gap: "8px" },
|
|
63
|
+
React.createElement(InfoLabel, { style: { zIndex: 99999 }, infoButton: {
|
|
64
|
+
popover: {
|
|
65
|
+
open: isInfoLabelOpen,
|
|
66
|
+
onOpenChange: function (_e, data) {
|
|
67
|
+
return setIsInfoLabelOpen(data.open);
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
}, info: React.createElement(React.Fragment, null,
|
|
71
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary" }, dataCard.description || strings.KPINoDescription)) },
|
|
72
|
+
React.createElement(Text, { weight: "bold", size: 300 }, ((_a = dataCard.title) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || strings.KPIDEfaultTitle))),
|
|
73
|
+
React.createElement(Text, { size: 200, style: {
|
|
74
|
+
color: tokens.colorNeutralForeground3,
|
|
75
|
+
fontStyle: 'italic',
|
|
76
|
+
} }, dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
|
|
77
|
+
? strings.KPILowerIsBetter
|
|
78
|
+
: strings.KPIHigherIsBetter)), action: React.createElement(Tooltip, { content: isOnTrack
|
|
79
|
+
? "\u2713 ".concat(strings.KPIWithinGoalThreshold)
|
|
80
|
+
: "\u26A0 ".concat(strings.KPIExceedsGoalTreshhold), relationship: "inaccessible" },
|
|
81
|
+
React.createElement(Badge, { className: styles.headerActionBadge, appearance: "ghost", size: "small", icon: isOnTrack ? (React.createElement(CheckmarkCircleRegular, { style: { color: accentFg, fontSize: '22px' } })) : (React.createElement(AlertFilled, { style: { color: accentFg, fontSize: '22px' } })) })) }),
|
|
82
|
+
React.createElement(Stack, { gap: "s", direction: "horizontal", alignItems: "baseline", paddingTop: "s" },
|
|
83
|
+
React.createElement(Text, { weight: "bold", size: 900 },
|
|
84
|
+
dataCard.currentValue,
|
|
85
|
+
" ",
|
|
86
|
+
React.createElement("br", null)),
|
|
87
|
+
React.createElement(Text, { weight: "semibold", size: 300, color: "neutralSecondary" },
|
|
88
|
+
"/ ",
|
|
89
|
+
dataCard.goal,
|
|
90
|
+
" ",
|
|
91
|
+
strings.KPIGoal)),
|
|
92
|
+
React.createElement(Stack, { gap: "s" },
|
|
93
|
+
React.createElement(Stack, { direction: "horizontal", justifyContent: "space-between" },
|
|
94
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary" }, strings.KPIProgressGoal),
|
|
95
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary", weight: "bold" },
|
|
96
|
+
((dataCard.currentValue / dataCard.goal) * 100).toFixed(2),
|
|
97
|
+
"%")),
|
|
98
|
+
React.createElement(ProgressBar, { value: dataCard.currentValue / dataCard.goal, color: progressColor, style: { height: '8px' }, shape: "rounded" })),
|
|
99
|
+
React.createElement(CardFooter, null,
|
|
100
|
+
React.createElement(Tooltip, { content: strings.KPIMaxAllowedThreshold, relationship: "inaccessible" },
|
|
101
|
+
React.createElement(Stack, { alignItems: "center", gap: tokens.spacingVerticalXXS },
|
|
102
|
+
React.createElement(TargetRegular, { className: styles.footerIcon }),
|
|
103
|
+
React.createElement(Text, { className: styles.footerLabel }, "Goal"),
|
|
104
|
+
React.createElement(Text, { className: styles.footerValue }, goal))),
|
|
105
|
+
React.createElement(Divider, { vertical: true, className: styles.footerDivider }),
|
|
106
|
+
React.createElement(Tooltip, { content: strings.KPITotalItemsInScope, relationship: "inaccessible" },
|
|
107
|
+
React.createElement(Stack, { alignItems: "center", gap: tokens.spacingVerticalXXS },
|
|
108
|
+
React.createElement(DocumentRegular, { className: styles.footerIcon }),
|
|
109
|
+
React.createElement(Text, { className: styles.footerLabel }, strings.KPITotalItems),
|
|
110
|
+
React.createElement(Text, { className: styles.footerValue }, dataCard.totalItems.toLocaleString()))),
|
|
111
|
+
React.createElement(Divider, { vertical: true, className: styles.footerDivider }),
|
|
112
|
+
React.createElement(Tooltip, { content: strings.KPICurrentValueAsPercent, relationship: "inaccessible" },
|
|
113
|
+
React.createElement(Stack, { alignItems: "center", gap: tokens.spacingVerticalXXS },
|
|
114
|
+
React.createElement(CalculatorRegular, { className: styles.footerIcon }),
|
|
115
|
+
React.createElement(Text, { className: styles.footerLabel }, strings.KPIPercentOfTotal),
|
|
116
|
+
React.createElement(Text, { className: styles.footerValue },
|
|
117
|
+
totalPercent.toFixed(2),
|
|
118
|
+
"%")))),
|
|
119
|
+
React.createElement(Stack, null,
|
|
120
|
+
React.createElement(Badge, { appearance: "outline", size: "small", style: badgeStyle, icon: isOnTrack ? (React.createElement(CheckmarkCircleRegular, { style: { fontSize: '14px' } })) : (React.createElement(AlertFilled, { style: { fontSize: '14px' } })) }, isOnTrack ? strings.KPIOnTrack : strings.KPIExceedGoal))))));
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=KpiCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCard.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCardCompact.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCardCompact.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CA0IjE,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Card, CardHeader, ProgressBar, tokens, Tooltip, Text, Badge, InfoLabel, } from '@fluentui/react-components';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import Stack from './stack/Stack';
|
|
4
|
+
import { useKpiStyles } from './useKpiStyles';
|
|
5
|
+
import { AlertFilled, CheckmarkCircleRegular, } from '@fluentui/react-icons';
|
|
6
|
+
import { EGoalMetric } from './IKpiCardData';
|
|
7
|
+
import strings from 'ControlStrings';
|
|
8
|
+
export var KPICardCompact = function (props) {
|
|
9
|
+
var _a;
|
|
10
|
+
var dataCard = props.dataCard;
|
|
11
|
+
var styles = useKpiStyles();
|
|
12
|
+
// State to control InfoLabel popover visibility
|
|
13
|
+
var _b = React.useState(false), isInfoLabelOpen = _b[0], setIsInfoLabelOpen = _b[1];
|
|
14
|
+
// Handle card mouse leave to auto-dismiss InfoLabel
|
|
15
|
+
var handleCardMouseLeave = React.useCallback(function () {
|
|
16
|
+
setIsInfoLabelOpen(false);
|
|
17
|
+
}, []);
|
|
18
|
+
// Determine if KPI is on track based on goal metric type
|
|
19
|
+
var isOnTrack = React.useMemo(function () {
|
|
20
|
+
return dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
|
|
21
|
+
? dataCard.currentValue <= dataCard.goal // Lower is better: on track when current <= goal
|
|
22
|
+
: dataCard.currentValue >= dataCard.goal;
|
|
23
|
+
}, // Higher is better: on track when current >= goal
|
|
24
|
+
[dataCard.currentValue, dataCard.goal, dataCard.goalMetric]);
|
|
25
|
+
var progressColor = React.useMemo(function () { return (isOnTrack ? 'success' : 'error'); }, [isOnTrack]);
|
|
26
|
+
// Success / Danger foregrounds
|
|
27
|
+
var accentFg = React.useMemo(function () {
|
|
28
|
+
return isOnTrack
|
|
29
|
+
? tokens.colorPaletteLightGreenForeground2
|
|
30
|
+
: tokens.colorPaletteRedForeground2;
|
|
31
|
+
}, [isOnTrack]);
|
|
32
|
+
return (React.createElement(React.Fragment, null,
|
|
33
|
+
React.createElement(Card, { className: styles.card, style: { height: '168px' }, onMouseLeave: handleCardMouseLeave },
|
|
34
|
+
React.createElement("div", { className: isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError }),
|
|
35
|
+
React.createElement(Stack, { gap: "0px", padding: "m" },
|
|
36
|
+
React.createElement(CardHeader, { header: React.createElement(Stack, { direction: "vertical", gap: "2px" },
|
|
37
|
+
React.createElement(Stack, { direction: "horizontal", alignItems: "center", gap: "8px" },
|
|
38
|
+
React.createElement(InfoLabel, { infoButton: {
|
|
39
|
+
popover: {
|
|
40
|
+
open: isInfoLabelOpen,
|
|
41
|
+
onOpenChange: function (_e, data) { return setIsInfoLabelOpen(data.open); },
|
|
42
|
+
},
|
|
43
|
+
}, info: React.createElement(React.Fragment, null,
|
|
44
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary" }, dataCard.description || strings.KPINoDescription)) },
|
|
45
|
+
React.createElement(Text, { weight: "bold", size: 300 }, ((_a = dataCard.title) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || strings.KPIDEfaultTitle))),
|
|
46
|
+
React.createElement(Text, { size: 200, style: {
|
|
47
|
+
color: tokens.colorNeutralForeground3,
|
|
48
|
+
fontStyle: 'italic',
|
|
49
|
+
} }, dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
|
|
50
|
+
? strings.KPILowerIsBetter
|
|
51
|
+
: strings.KPIHigherIsBetter)), action: React.createElement(Tooltip, { content: isOnTrack
|
|
52
|
+
? "\u2713 ".concat(strings.KPIWithinGoalThreshold)
|
|
53
|
+
: "\u26A0 ".concat(strings.KPIExceedsGoalTreshhold), relationship: "inaccessible" },
|
|
54
|
+
React.createElement(Badge, { className: styles.headerActionBadge, appearance: "ghost", size: "small", icon: isOnTrack ? (React.createElement(CheckmarkCircleRegular, { style: { color: accentFg, fontSize: '22px' } })) : (React.createElement(AlertFilled, { style: { color: accentFg, fontSize: '22px' } })) })) }),
|
|
55
|
+
React.createElement(Stack, { gap: "s", direction: "horizontal", alignItems: "baseline" },
|
|
56
|
+
React.createElement(Text, { weight: "bold", size: 900 },
|
|
57
|
+
dataCard.currentValue,
|
|
58
|
+
" ",
|
|
59
|
+
React.createElement("br", null)),
|
|
60
|
+
React.createElement(Text, { weight: "semibold", size: 300, color: "neutralSecondary" },
|
|
61
|
+
"/ ",
|
|
62
|
+
dataCard.goal,
|
|
63
|
+
" ",
|
|
64
|
+
strings.KPIGoal)),
|
|
65
|
+
React.createElement(Stack, { gap: "s" },
|
|
66
|
+
React.createElement(Stack, { direction: "horizontal", justifyContent: "space-between" },
|
|
67
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary" }, strings.KPIProgressGoal),
|
|
68
|
+
React.createElement(Text, { size: 300, color: "neutralSecondary", weight: "bold" },
|
|
69
|
+
((dataCard.currentValue / dataCard.goal) * 100).toFixed(2),
|
|
70
|
+
"%")),
|
|
71
|
+
React.createElement(ProgressBar, { value: dataCard.currentValue / dataCard.goal, color: progressColor, style: { height: '3px' }, shape: "rounded" }))))));
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=KpiCardCompact.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCardCompact.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCardCompact.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Skeleton loading state for KPICard component.
|
|
4
|
+
* Mimics the exact layout of KPICard while data is being fetched.
|
|
5
|
+
*/
|
|
6
|
+
export declare const KPICardSkeleton: React.FunctionComponent;
|
|
7
|
+
export default KPICardSkeleton;
|
|
8
|
+
//# sourceMappingURL=KpiCardSkeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCardSkeleton.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCardSkeleton.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBA6InC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { Card, CardFooter, CardHeader, Divider, tokens, Skeleton, SkeletonItem, } from "@fluentui/react-components";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import Stack from "./stack/Stack";
|
|
4
|
+
import { useKpiStyles } from "./useKpiStyles";
|
|
5
|
+
import { css } from "@emotion/css";
|
|
6
|
+
/**
|
|
7
|
+
* Skeleton loading state for KPICard component.
|
|
8
|
+
* Mimics the exact layout of KPICard while data is being fetched.
|
|
9
|
+
*/
|
|
10
|
+
export var KPICardSkeleton = function () {
|
|
11
|
+
var styles = useKpiStyles();
|
|
12
|
+
var skeletonStyles = {
|
|
13
|
+
headerTitle: css({
|
|
14
|
+
width: "120px",
|
|
15
|
+
height: "16px",
|
|
16
|
+
}),
|
|
17
|
+
headerBadge: css({
|
|
18
|
+
width: "32px",
|
|
19
|
+
height: "32px",
|
|
20
|
+
borderRadius: "50%",
|
|
21
|
+
}),
|
|
22
|
+
mainValue: css({
|
|
23
|
+
width: "80px",
|
|
24
|
+
height: "42px",
|
|
25
|
+
}),
|
|
26
|
+
goalText: css({
|
|
27
|
+
width: "70px",
|
|
28
|
+
height: "16px",
|
|
29
|
+
}),
|
|
30
|
+
progressLabel: css({
|
|
31
|
+
width: "80px",
|
|
32
|
+
height: "12px",
|
|
33
|
+
}),
|
|
34
|
+
progressValue: css({
|
|
35
|
+
width: "50px",
|
|
36
|
+
height: "12px",
|
|
37
|
+
}),
|
|
38
|
+
progressBar: css({
|
|
39
|
+
width: "100%",
|
|
40
|
+
height: "8px",
|
|
41
|
+
borderRadius: "4px",
|
|
42
|
+
}),
|
|
43
|
+
footerIcon: css({
|
|
44
|
+
width: "16px",
|
|
45
|
+
height: "16px",
|
|
46
|
+
borderRadius: "4px",
|
|
47
|
+
}),
|
|
48
|
+
footerLabel: css({
|
|
49
|
+
width: "50px",
|
|
50
|
+
height: "10px",
|
|
51
|
+
}),
|
|
52
|
+
footerValue: css({
|
|
53
|
+
width: "40px",
|
|
54
|
+
height: "14px",
|
|
55
|
+
}),
|
|
56
|
+
badge: css({
|
|
57
|
+
width: "90px",
|
|
58
|
+
height: "32px",
|
|
59
|
+
borderRadius: "20px",
|
|
60
|
+
}),
|
|
61
|
+
};
|
|
62
|
+
return (React.createElement(Card, { className: styles.card },
|
|
63
|
+
React.createElement(Skeleton, { animation: "pulse" },
|
|
64
|
+
React.createElement(Stack, { gap: "m", padding: "m" },
|
|
65
|
+
React.createElement(CardHeader, { header: React.createElement(Stack, { direction: "horizontal", alignItems: "center", gap: "8px" },
|
|
66
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.headerTitle })), action: React.createElement(SkeletonItem, { className: skeletonStyles.headerBadge, shape: "circle" }) }),
|
|
67
|
+
React.createElement(Stack, { gap: "s", direction: "horizontal", alignItems: "baseline", paddingTop: "s" },
|
|
68
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.mainValue }),
|
|
69
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.goalText })),
|
|
70
|
+
React.createElement(Stack, { gap: "s" },
|
|
71
|
+
React.createElement(Stack, { direction: "horizontal", justifyContent: "space-between" },
|
|
72
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.progressLabel }),
|
|
73
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.progressValue })),
|
|
74
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.progressBar })),
|
|
75
|
+
React.createElement(CardFooter, null,
|
|
76
|
+
React.createElement(Stack, { direction: "vertical", alignItems: "center", gap: "xs" },
|
|
77
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerIcon }),
|
|
78
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerLabel }),
|
|
79
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerValue })),
|
|
80
|
+
React.createElement(Divider, { vertical: true, style: {
|
|
81
|
+
height: "32px",
|
|
82
|
+
borderColor: tokens.colorNeutralStroke1,
|
|
83
|
+
} }),
|
|
84
|
+
React.createElement(Stack, { direction: "vertical", alignItems: "center", gap: "xs" },
|
|
85
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerIcon }),
|
|
86
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerLabel }),
|
|
87
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerValue })),
|
|
88
|
+
React.createElement(Divider, { vertical: true, style: {
|
|
89
|
+
height: "32px",
|
|
90
|
+
borderColor: tokens.colorNeutralStroke1,
|
|
91
|
+
} }),
|
|
92
|
+
React.createElement(Stack, { direction: "vertical", alignItems: "center", gap: "xs" },
|
|
93
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerIcon }),
|
|
94
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerLabel }),
|
|
95
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.footerValue }))),
|
|
96
|
+
React.createElement(Stack, null,
|
|
97
|
+
React.createElement(SkeletonItem, { className: skeletonStyles.badge }))))));
|
|
98
|
+
};
|
|
99
|
+
export default KPICardSkeleton;
|
|
100
|
+
//# sourceMappingURL=KpiCardSkeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KpiCardSkeleton.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/KpiCardSkeleton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kpis.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/Kpis.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoE/B,MAAM,WAAW,UAAU;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,UAAU,CA6CpD,CAAC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-floating-promises */
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Stack } from './stack/Stack';
|
|
4
|
+
import { KPICard } from './KpiCard';
|
|
5
|
+
import { KPICardSkeleton } from './KpiCardSkeleton';
|
|
6
|
+
import { useKpiStyles } from './useKpiStyles';
|
|
7
|
+
import { NoKpisCard } from './NoKpisCard';
|
|
8
|
+
import { ShowError } from './showError';
|
|
9
|
+
import { KPICardCompact } from './KpiCardCompact';
|
|
10
|
+
var mockData = [
|
|
11
|
+
{
|
|
12
|
+
identifier: 'kpi-1',
|
|
13
|
+
title: 'Sales Revenue',
|
|
14
|
+
currentValue: 125.0,
|
|
15
|
+
goal: 150.0,
|
|
16
|
+
totalItems: 200.0,
|
|
17
|
+
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.',
|
|
18
|
+
goalMetric: 2,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
identifier: 'kpi-2',
|
|
22
|
+
title: 'Customer Satisfaction',
|
|
23
|
+
currentValue: 87,
|
|
24
|
+
goal: 90,
|
|
25
|
+
totalItems: 100,
|
|
26
|
+
description: 'Customer satisfaction score',
|
|
27
|
+
goalMetric: 1,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
identifier: 'kpi-3',
|
|
31
|
+
title: 'Tasks Completed',
|
|
32
|
+
currentValue: 42,
|
|
33
|
+
goal: 50,
|
|
34
|
+
totalItems: 60,
|
|
35
|
+
description: 'Number of tasks completed this month',
|
|
36
|
+
goalMetric: 2,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
identifier: 'kpi-4',
|
|
40
|
+
title: 'New Customers',
|
|
41
|
+
currentValue: 156,
|
|
42
|
+
goal: 200,
|
|
43
|
+
totalItems: 250,
|
|
44
|
+
description: 'New customer acquisitions this quarter',
|
|
45
|
+
goalMetric: 1,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
identifier: 'kpi-5',
|
|
49
|
+
title: 'Response Time',
|
|
50
|
+
currentValue: 2.5,
|
|
51
|
+
goal: 2,
|
|
52
|
+
totalItems: 5,
|
|
53
|
+
description: 'Average response time in hours',
|
|
54
|
+
goalMetric: 2,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
identifier: 'kpi-6',
|
|
58
|
+
title: 'Employee Engagement',
|
|
59
|
+
currentValue: 78,
|
|
60
|
+
goal: 85,
|
|
61
|
+
totalItems: 100,
|
|
62
|
+
description: 'Employee engagement score percentage',
|
|
63
|
+
goalMetric: 1,
|
|
64
|
+
},
|
|
65
|
+
];
|
|
66
|
+
export var Kpis = function (props) {
|
|
67
|
+
var _a = props.skeletonCount, skeletonCount = _a === void 0 ? 3 : _a, _b = props.compact, compact = _b === void 0 ? false : _b;
|
|
68
|
+
var styles = useKpiStyles();
|
|
69
|
+
var kpis = mockData;
|
|
70
|
+
var loading = false;
|
|
71
|
+
var error = null;
|
|
72
|
+
/**
|
|
73
|
+
* Renders skeleton cards while data is loading
|
|
74
|
+
*/
|
|
75
|
+
var renderSkeletons = React.useCallback(function () {
|
|
76
|
+
return Array.from({ length: skeletonCount }).map(function (_, index) { return (React.createElement(KPICardSkeleton, { key: "kpi-skeleton-".concat(index) })); });
|
|
77
|
+
}, [skeletonCount]);
|
|
78
|
+
return (React.createElement(React.Fragment, null,
|
|
79
|
+
React.createElement(Stack, { gap: "l", direction: "horizontal", padding: "l", paddingTop: "s" },
|
|
80
|
+
React.createElement(React.Fragment, null, loading ? (renderSkeletons()) : error ? (React.createElement(ShowError, { message: error })) : (React.createElement("div", { className: styles.kpiContainer }, kpis.length > 0 ? (kpis.map(function (kpi) {
|
|
81
|
+
return compact ? (React.createElement(KPICardCompact, { key: kpi.identifier, dataCard: kpi })) : (React.createElement(KPICard, { key: kpi.identifier, dataCard: kpi }));
|
|
82
|
+
})) : (React.createElement(NoKpisCard, null))))))));
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=Kpis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kpis.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/Kpis.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NoKpisCard.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/NoKpisCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAyD9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Card, Text, Button } from "@fluentui/react-components";
|
|
3
|
+
import { DataBarVerticalStarRegular, SettingsRegular, SparkleRegular, } from "@fluentui/react-icons";
|
|
4
|
+
import Stack from "./stack/Stack";
|
|
5
|
+
import { useKpiStyles } from "./useKpiStyles";
|
|
6
|
+
// Mock data for the list URL
|
|
7
|
+
var mockListUrl = "/sites/mock-site/Lists/Directory Status Config";
|
|
8
|
+
/**
|
|
9
|
+
* NoKpisCard Component
|
|
10
|
+
|
|
11
|
+
*/
|
|
12
|
+
export var NoKpisCard = function () {
|
|
13
|
+
var styles = useKpiStyles();
|
|
14
|
+
var listUrl = mockListUrl;
|
|
15
|
+
var isLoading = false;
|
|
16
|
+
var onConfigure = React.useCallback(function () {
|
|
17
|
+
if (!listUrl)
|
|
18
|
+
return;
|
|
19
|
+
var host = window.location.origin;
|
|
20
|
+
// listUrl is already the ServerRelativeUrl, just append AllItems.aspx
|
|
21
|
+
var appConfigUrl = "".concat(host).concat(listUrl, "/AllItems.aspx");
|
|
22
|
+
window.open(appConfigUrl, "_blank");
|
|
23
|
+
}, [listUrl]);
|
|
24
|
+
return (React.createElement(Card, { className: styles.noKpiCardContainer },
|
|
25
|
+
React.createElement("div", { className: styles.noKpiBackgroundOrb1 }),
|
|
26
|
+
React.createElement("div", { className: styles.noKpiBackgroundOrb2 }),
|
|
27
|
+
React.createElement(Stack, { alignItems: "center", justifyContent: "center", gap: "s" },
|
|
28
|
+
React.createElement("div", { className: styles.noKpiIconContainer },
|
|
29
|
+
React.createElement(DataBarVerticalStarRegular, { className: styles.noKpiIcon }),
|
|
30
|
+
React.createElement(SparkleRegular, { className: styles.noKpiSparkle1 }),
|
|
31
|
+
React.createElement(SparkleRegular, { className: styles.noKpiSparkle2 })),
|
|
32
|
+
React.createElement(Text, { className: styles.noKpiTitle }, "No KPIs Configured"),
|
|
33
|
+
React.createElement("div", { className: styles.noKpiDecorativeLine }),
|
|
34
|
+
React.createElement(Text, { className: styles.noKpiSubtitle },
|
|
35
|
+
"Start tracking your team's performance by configuring",
|
|
36
|
+
" ",
|
|
37
|
+
React.createElement("span", { className: styles.noKpiHighlight }, "KPI parameters"),
|
|
38
|
+
" in the App Configuration list."),
|
|
39
|
+
!isLoading && listUrl && (React.createElement("div", { className: styles.noKpiButtonContainer },
|
|
40
|
+
React.createElement(Button, { appearance: "outline", icon: React.createElement(SettingsRegular, null), className: styles.noKpiButton, onClick: onConfigure }, "Configure KPIs"))))));
|
|
41
|
+
};
|
|
42
|
+
export default NoKpisCard;
|
|
43
|
+
//# sourceMappingURL=NoKpisCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NoKpisCard.js","sourceRoot":"","sources":["../../../src/controls/KPIControl/NoKpisCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EACL,0BAA0B,EAC1B,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,6BAA6B;AAC7B,IAAM,WAAW,GAAG,gDAAgD,CAAC;AAErE;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAAa;IAClC,IAAM,MAAM,GAAG,YAAY,EAAE,CAAC;IAC9B,IAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,IAAM,SAAS,GAAG,KAAK,CAAC;IAExB,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QACpC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,IAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;QACpC,sEAAsE;QACtE,IAAM,YAAY,GAAG,UAAG,IAAI,SAAG,OAAO,mBAAgB,CAAC;QACvD,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB;QAExC,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,GAAI;QAC9C,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,GAAI;QAE9C,oBAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG;YAExD,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB;gBACvC,oBAAC,0BAA0B,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;gBAC3D,oBAAC,cAAc,IAAC,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI;gBACnD,oBAAC,cAAc,IAAC,SAAS,EAAE,MAAM,CAAC,aAAa,GAAI,CAC/C;YAGN,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,yBAA2B;YAG7D,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,GAAI;YAG9C,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,aAAa;;gBACwB,GAAG;gBAC9D,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,qBAAuB;kDAExD;YAGN,CAAC,SAAS,IAAI,OAAO,IAAI,CACxB,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB;gBACzC,oBAAC,MAAM,IACL,UAAU,EAAC,SAAS,EACpB,IAAI,EAAE,oBAAC,eAAe,OAAG,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,WAAW,qBAGb,CACL,CACP,CACK,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/controls/KPIControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|