commit changes improve card layout and labels

Author: joaojmendes

docs/documentation/docs/assets/KPIControl3.png

@@ -20,7 +20,7 @@ npm install @pnp/spfx-controls-react
 
 ## Example of KPIControl
 
-![KPIControl Example](../assets/KPIControl.png)
+![KPIControl Example](../assets/KPIControl3.png)
 
 ## Basic Usage
 

docs/documentation/docs/controls/KPIControl.md

@@ -31,16 +31,18 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
   const { dataCard } = props;
   const styles = useKpiStyles();
 
-  const isGreen = React.useMemo(
+  // Determine if KPI is on track based on goal metric type
+  const isOnTrack = React.useMemo(
     () =>
       dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
-        ? dataCard.currentValue <= dataCard.goal
-        : dataCard.currentValue >= dataCard.goal,
-    [dataCard.currentValue, dataCard.goal],
+        ? dataCard.currentValue <= dataCard.goal  // Lower is better: on track when current <= goal
+        : dataCard.currentValue >= dataCard.goal, // Higher is better: on track when current >= goal
+    [dataCard.currentValue, dataCard.goal, dataCard.goalMetric],
   );
+
   const progressColor = React.useMemo(
-    () => (isGreen ? 'success' : 'error'),
-    [isGreen],
+    () => (isOnTrack ? 'success' : 'error'),
+    [isOnTrack],
   );
   const goal = React.useMemo(
     () => dataCard.goal.toLocaleString(),
@@ -50,13 +52,6 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
     () => (dataCard.currentValue / dataCard.totalItems) * 100,
     [dataCard.currentValue, dataCard.totalItems],
   );
-  const isOnTrack = React.useMemo(
-    () =>
-      dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
-        ? dataCard.currentValue <= dataCard.goal
-        : dataCard.currentValue >= dataCard.goal,
-    [dataCard.currentValue, dataCard.goal],
-  );
 
   // Success / Danger foregrounds (icon + badge text + bar fill)
   const accentFg = React.useMemo(
@@ -110,20 +105,33 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
         <Stack gap="m" padding="m">
           <CardHeader
             header={
-              <Stack direction="horizontal" alignItems="center" gap="8px">
-                <InfoLabel
-                  info={
-                    <>
-                      <Text size={300} color="neutralSecondary">
-                        {dataCard.description || strings.KPINoDescription}
-                      </Text>
-                    </>
-                  }
+              <Stack direction="vertical" gap="2px">
+                <Stack direction="horizontal" alignItems="center" gap="8px">
+                  <InfoLabel
+                    info={
+                      <>
+                        <Text size={300} color="neutralSecondary">
+                          {dataCard.description || strings.KPINoDescription}
+                        </Text>
+                      </>
+                    }
+                  >
+                    <Text weight="bold" size={300}>
+                      {dataCard.title?.toUpperCase() || strings.KPIDEfaultTitle}
+                    </Text>
+                  </InfoLabel>
+                </Stack>
+                <Text
+                  size={200}
+                  style={{
+                    color: tokens.colorNeutralForeground3,
+                    fontStyle: 'italic',
+                  }}
                 >
-                  <Text weight="bold" size={300}>
-                    {dataCard.title?.toUpperCase() || strings.KPIDEfaultTitle}
-                  </Text>
-                </InfoLabel>
+                  {dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
+                    ? strings.KPILowerIsBetter
+                    : strings.KPIHigherIsBetter}
+                </Text>
               </Stack>
             }
             action={

src/controls/KPIControl/KpiCard.tsx

@@ -475,9 +475,11 @@ CalendarControlFullDaylabel: "Full Day",
 KPICurrentValueAsPercent: "Current value as % of total items",
 KPIDEfaultTitle: "KPI Card",
 KPIError: "error",
-KPIExceedGoal: "Exceeds Goal",
-KPIExceedsGoalTreshhold: "Exceeds goal threshold",
+KPIExceedGoal: "Off Track",
+KPIExceedsGoalTreshhold: "Not meeting goal threshold",
 KPIGoal: "Goal",
+KPIHigherIsBetter: "Higher is better",
+KPILowerIsBetter: "Lower is better",
 KPIMaxAllowedThreshold: "Maximum allowed threshold",
 KPINoDescription: " 'No description provided for this KPI card.'",
 KPIOnTrack: "On Track",

src/loc/en-us.ts

@@ -6,6 +6,8 @@ declare interface IControlStrings {
   KPIError: string;
   KPIExceedsGoalTreshhold: string;
   KPIGoal: string;
+  KPIHigherIsBetter: string;
+  KPILowerIsBetter: string;
   KPIMaxAllowedThreshold: string;
   KPINoDescription: string;
   KPIProgressGoal: string;
@@ -15,6 +17,7 @@ declare interface IControlStrings {
     KPICurrentValueAsPercent: string;
 KPIExceedGoal: string;
 KPIOnTrack: string;
+KPIPercentOfTotal: string;
 
   CalendarControlDayOfWeekSunday: string;
   CalendarControlDayOfWeekMonday: string;
@@ -480,8 +483,6 @@ worldMapLocationPluralLabel: string;
 worldMapLoadintText: string;
 worldMapResetMap: string;
 worldMapFlag: string;
-}
-
 
   L_RelativeDateTime_AFewSecondsFuture: string;
   L_RelativeDateTime_AFewSeconds: string;

src/loc/mystrings.d.ts

@@ -6,9 +6,11 @@ define([], () => {
   KPICurrentValueAsPercent: "Valor atual em % do total de itens",
   KPIDEfaultTitle: "Cartão KPI",
   KPIError: "ERRO",
-  KPIExceedGoal: "Excede a Meta",
-  KPIExceedsGoalTreshhold: "Excede o limite da meta",
+  KPIExceedGoal: "Fora do Objetivo",
+  KPIExceedsGoalTreshhold: "Não está a atingir o limite da meta",
   KPIGoal: "Meta",
+  KPIHigherIsBetter: "Quanto maior, melhor",
+  KPILowerIsBetter: "Quanto menor, melhor",
   KPIMaxAllowedThreshold: "Limite máximo permitido",
   KPINoDescription: "Nenhuma descrição fornecida para este cartão KPI.",
   KPIOnTrack: "No Caminho",